时间：2021-07-01 10:21:17 帮助过：12人阅读
自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全.
希望大家有新的见解可以给我留言,我会补充上去,谢谢大家
那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，
网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。
文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签表示强调等等。
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
3. 能够更好的体现页面的主题
4.兼容性更好，支持更多的网络设备
1):标签:实现超链接
强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）
2):
标签:文章段落放到
标签中
3):
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
4):和标签:特别强调某几个文字
但两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示， 用粗体表示。
两个标签相比，目前国内前端程序员更喜欢使用表示强调。
5):标签:短文本引用
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号
6):
标签:长文本引用注意浏览器对<blockquote>标签的解析是缩进样式
7):标签:为网页加入地址信息
8):
标签:无序列表
9):
标签:有序列表
10):
标签:为表格添加标题和摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：
标题用以描述表格内容，标题的显示位置：表格上方。
语法：
标题文本
4.Html5语义化标签
1):article标签:装载显示一个独立的文章内容。
例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。
例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
文章标题
这是一篇文章 评论1... 评论2...
2):section 标签:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
实例:
章节一
详细内容...
章节二
详细内容...
3):aside 标签: 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。
4):hgroup 标签:用于对网页或区段的标题元素（h1-h6）进行组合。
例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
标题1
标题2
5):header 标签:定义文档的页面组合，通常是一些引导和导航信息。
6):footer 标签:定义 section 或 document 的页脚。
在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
实例:
7):nav 标签:导航链接放在nav标签里。
nav标签里应该放入一些当前页面的主要导航链接。
例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。
8):time 标签:定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果
9):mark 标签:定义带有记号的文本。请在需要突出显示文本时使用 标签。
10):figure标签:规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
11):figcaption 标签:定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
实例：
美女图片 人气教程排行
- 230次 1 如何生成一个调查问卷_html/css_WEB-ITnose
- 230次 2 在页面直接显示日历_html/css_WEB-ITnose
- 230次 3 如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作
- 229次 4 关于列表标记的详细介绍
- 229次 5 cssborder-bottom（指定下边线的样式、宽度及颜色）
- 229次 6 html新闻详情页_html/css_WEB-ITnose
- 229次 7 为何页面内容和网页边缘有空隙_html/css_WEB-ITnose
- 228次 8 position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose
- 227次 9 htmlp标签怎么换行？htmlp标签添加br换行标签的应用
- 226次 10 HTML的<!DOCTYPE>标签
- 226次 11 html页面中友情链接怎么进行添加设置？（代码示例）
- 226次 12 form表单中属性及功能应用介绍汇总
- 226次 13 详解form标签中的method属性
- 226次 14 HTML5Canvas逼真烟雾效果js插件
- 226次 15 页面跳转特效_html/css_WEB-ITnose
- 226次 16 改变鼠标选中区域的样式。_html/css_WEB-ITnose
- 225次 17 关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose
- 225次 18 CSS3悬浮动画效果_html/css_WEB-ITnose
- 225次 19 纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose
- 225次 20 body在默认情况下是具有margin外边距的_html/css_WEB-ITnose
