话不多说,开门见山。想了解html语义化的伙伴,首先需要对html有基础的认识,那么什么是html呢?html是超文本标记语言,它的设计初衷是为了让网页开发更加简单和易于维护,所以html的任务就是定义网页的基本结构和内容。有点类似于建模的骨架,人体的骨架等。
一、什么是html语义化?
官方解释:html语义化是指用合理的html标记以及其特有的属性去格式化文档内容。
通俗的讲:就是用合理、正确的标签来展示内容。(标签指一种标记方式,如<title>,表示标题信息;也可以理解为人体骨架的某一块骨头,专属名称叫什么)。
二、为什么需要语义化?
1)易读,易书写,易理解(多数情况,标签英文翻译的含义就是其功能含义);
2)利于SEO搜索:语义化可以和搜索引擎建立良好的联系,有利于爬虫抓取有效信息;因为爬虫依赖于语义化标签来确定上下文和各个关键字的权重。
3)易于跨设备解析,进而完成渲染网页(如屏幕阅读器、盲人阅读器、移动设备);
4)利于规范化:方便团队开发和维护,也遵循W3C规范。
三、语义化的基本标签?
使用这些常见标签,即可构建没有css的页面。
1)语义结构标签
2)基本标签
<title>:页面主体内容。
<hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>:无序列表。
<li>:有序列表。
<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
<strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。
<em>:将其中的文本表示为强调的内容,表现为斜体。
<mark>:使用黄色突出显示部分文本。
<figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
<blockquoto>:定义块引用,块引用拥有它们自己的空间。
<q>:短的引述(跨浏览器问题,尽量避免使用)。
<time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
<abbr>:简称或缩写。
<dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
<address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
<del>:移除的内容。
<ins>:添加的内容。
<code>:标记代码。
<meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
<progress>:定义运行中的进度(进程)。
四、编写代码过程中应注意些什么?
编写代码应尽量使用语义化标签(虽然实际不是);
1)内联标签之间的空格,内联元素会去掉头部和尾部的空白字符;
2)body标签默认的margin边框,如margin: 0;
3)尽可能少的使用没有语义的div和span元素。
4)在对语义要求不明显时,技能使用div也能使用p,那就使用p,以为p默认有上下边距,可以兼容特殊终端。
5)不要使用纯样式标签,如:b、font、u等,改用css设置。
6)需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b,因为没语义),em是斜体(不用i同b)。
7)使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头标题用th,内容单元格用td。
五、html5新增了哪些语义化标签?
1)结构化标签:
<header>:头部标签 ;<nav>:导航标签 ;<article>:内容标签 ;<section>:定义文档某个区域; <aside>:侧边栏标签 ;<footer>:尾部标签;
2)多媒体标签:
*音频标签:audio; <video src="文件地址" controls="controls"></video>
*视频标签:video;<video src="文件地址" controls="controls"></video>