0

0

你可能会忽略但有用的 HTML 标签(总结)

青灯夜游

青灯夜游

发布时间:2021-02-13 08:59:56

|

3087人浏览过

|

来源于segmentfault

转载

你可能会忽略但有用的 HTML 标签(总结)

推荐:html教程

随着对 JavaScript 框架和库的依赖越来越深,很多人对 HTML 的重视程度降低了。这就导致了我们无法充分利用 HTML 的很多功能,这些功能可以大大的增强网站功能。另外通过编写语义化 HTML 可以在网站内容中添加正确的上下文,从而显着改善用户体验。

本文将会介绍一些你可能会忽略的但是很有用的 HTML 标签。

标签允许你创建一个场景,其中存在一个基本URL,这个 URL 充当文档中所有相对 URL 的前缀。标签必须有一个包含基本URL的  hreftarget 属性,或者两者兼有。

立即学习前端免费学习笔记(深入)”;




  



The base element(Google As a case study)

Gmail - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.

Hangouts - It's used for Messaging, Voice and Video Calls

这样就不必为每个请求重复 URL 的前缀了。

一个 HTML 文档中只能有一个 元素,并且它必须位于 元素内。

Image map

image map 是具有特定可点击区域的图片,并且是通过  map  标签定义的。这些区域使用    标签设置。这使你可以在图像的不同部分中嵌入链接,这些链接可以指向其他页面,对于描述图片中的内容非常有用。

看一个例子:

第一步是像平常一样用 你可能会忽略但有用的 HTML 标签(总结) 标签插入图片,但是这次使用 usemap 属性。

@@##@@

接下来创建一个 标签,并使用与 img 标签中的 usemap 属性值相同的 name 属性。这会将 标签与 map 标签链接在一起。

  

  

然后开始创建可点击区域。我们需要定义如何绘制每个区域,通常用 shapecoords 来绘制。


  book

元素定义图像上的可点击区域。它添加在 map 元素内。

这些属性包括:

  • 在相关区域上绘制矩形时需要使用 shape。你可以使用其他形状,例如矩形、圆形、多边形或默认形状(整个图像)
  • alt 用来指定当 area 元素由于某些原因而无法呈现时要显示的替代文本
  • href 包含将可点击区域链接到另一个页面的 URL
  • coords 使用坐标(以像素为单位)精确切出形状。你可以用各种软件来获取图片的确切坐标;下面用 微软的绘图软件作为一个简单的例子。不同的形状以不同的方式表示其坐标,比如矩形用  left, top, right, bottom 表示。

在这里我们有  top, left  坐标:

你可能会忽略但有用的 HTML 标签(总结)

你可以在图片的左下方读取光标在图片上的坐标,也可以只在水平和垂直面上使用标尺。

下面的截图显示了 right, bottom  坐标:

1.png

最终得到:

@@##@@


  book

也可以使用其他形状,但是每个形状的坐标写法不同。

DALL·E 2
DALL·E 2

OpenAI基于GPT-3模型开发的AI绘图生成工具,可以根据自然语言的描述创建逼真的图像和艺术。

下载

对于 circle,应该有圆心的坐标,然后添加半径:


  clock

2.png

圆心的坐标同意位于左下角,圆心到末端的水平距离是半径。

创建一个 poly 更像是徒手画图。你只需链接图像上的不同点,它们就会连接起来:


  clock

你可能会忽略但有用的 HTML 标签(总结)

下面是用 HTML 创建形状时所需要的值:

形状 Coordinates
rect left, top, right, bottom
circle center-x, center-y, radius
poly x1, y1, x2, y2, .….
default 整个区域

标签 指定要在父元素中定义的术语。它代表“定义元素”。标签 的父级包含术语的定义或解释,而术语位于 内部。可以这样添加:

HTML Is the standard markup language for creating web pages.

也可以与 结合使用:





HTML It's the standard markup language for creating web pages.

这可以增强可访问性,因为这样编写语义 HTML 可以使阅读器和浏览器在适合用户的上下文中解释页面上的内容。

也可以单独使用

 CSS

预格式化的文本或

 标签用于在编写文本时显示文本(通常是代码)。它显示所有空格和制表符,并完全按照块中的格式进行设置。

 
    
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    
  

和  

这两个标签通常会一起出现。

用作 的标题。

 
  @@##@@
  
basketball

这些标签也可以与代码块、视频和音频一起使用,如下所示。

代码块

 
    
      p {
          color: black;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    
  
   
The code block

视频

 
Exhibit B. The Rough Copy trailer.

音频

 
An audio file

用来创建一个可切换的部分。 标签位于
标签内,单击后会自动显示和隐藏的内容。

最好用的地方是你可以用 CSS 去设置它们的样式,即使不依赖 JavaScript 也可以完美地工作。

 
I am an introvert
An introvert is a person with qualities of a personality type known as introversion, which means that they feel more comfortable focusing on their inner thoughts and ideas, rather than what's happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds

基本上 是从另一个来源引用的部分。并添加了 属性来指示源。 The history of Nigeria can be traced to settlers trading across the middle East and Africa as early as 1100 BC. Numerous ancient African civilizations settled in the region that is known today as Nigeria, such as the Kingdom of Nri, the Benin Empire, and the Oyo Empire. Islam reached Nigeria through the Borno Empire between (1068 AD) and Hausa States around (1385 AD) during the 11th century,[1][2][3][4] while Christianity came to Nigeria in the 15th century through Augustinian and Capuchin monks from Portugal. The Songhai Empire also occupied part of the region.[5]

如果使用 cite 属性,那么这个属性必须是指向源的有效 URL。要获得相应的引文链接,必须相对于元素的节点文档来解析属性的值。有时它们是私有的,例如调用服务器端脚本收集有关网站使用情况的统计信息。

cite 元素表示作品或知识产权的标题,例如书籍、文章、论文、诗歌、歌曲等。

The best movie ever made is The Godfather by Francis Ford Coppola . My favorite song is Monsters You Made by the Burna boy.

总结

我们应该更多地关注这些标记,并通过编写更多的语义代码来改善网站的功能。

更多编程相关知识,请访问:编程教学!!

3.png4.png你可能会忽略但有用的 HTML 标签(总结)

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

75

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

36

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

60

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

41

2025.11.27

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

223

2023.12.07

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

167

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

74

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 24.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号