前言
还记得招聘JD上web语义化吗？
HTML5介绍和对比
紧接上篇，我们聊一聊我们今天的主角HTML5。我们知道在HTML1.0–HTML4.0版本HTML都是SGML的一个应用，所以都有DTD。而HTML5再也不是SGML的一个应用了，所以HTML5也没有DTD了。而且XHTML5的名称也变成了"以XML序列化的HTML5", 还记得我们上篇写的HTML4.0的文档声明吗？HTML4.0的声明如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5的声明就简单多了，只需如下声明就行
<!DOCTYPE html>
那么具体HTML5与HTML4.0有啥不同呢？有以下几个方面
- 文档类型声明，html5只有一型即
<!DOCTYPE html> - 新的解析顺序：不再基于SGML
- 新的元素：
section,video,nav,aside等 input元素的新类型：data,email,url等- 新的属性：
ping(用于a和area),charset(用于meta),async(用于script) - 全局属性:
id,tabindex,repeat - 新的全局属性：
contenteditable,contextmenu,draggable,dropzone,hidden,spellcheck。 - 移除元素：
acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt
HTML5文档结构
html5的文档结构，我们可以先打开任何一个网站，再打开浏览器的开发者工具查看Elements选项卡，就可以看到我们的文档结构了。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
</body>
</html>
看完这个文档结构我们再来看看html5的语法, 大家可以参考whatwg里面的HTML语法：
- 元素:
<tagname>...</tagname>- 开始标签
<tagname> - 结束标签
</tagname> - 自闭合标签
<tagname/>
- 开始标签
- 文本：
- text：普通文本节点，有两种字符必须被转义
<和&。比如<p>text</p> <![CDATA[text]]>: 不用考虑大多数的转义情况，只用考虑]]>的转义。这个在html5中只能用于svg和MathML了
- text：普通文本节点，有两种字符必须被转义
- 注释：
<!--comments--> - 文档类型
<!DOCTYPE HTML>
以上就是HMTL的部分语法，有些不建议使用，比如可以省略掉一些标签，这个一旦这么用了我觉得可能会有人说你不讲码德，这样做会造成整个文档的可读性变差。
看完语法我们再来看一下HTML的元素：
一般我们的html标签都是写在body里，那么你知道head里面能写哪些标签吗？首先head元素是规定文档相关的配置信息(元数据)，也就是一个存放配置信息的一个容器。head标签里能写以下几种标签
title标签，表示文档的标题，一般显示在浏览器的选项卡上。base标签，页面基准的URLmeta标签：元信息通用标签charset属性的meta：例如<meta charset="UTF-8">http-equiv属性的meta: 例如<meta http-equiv="content-type" content="text/html, charset="utf-8">viewport属性的meta, 这个在移动端上用的比较多。例如<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>- 其他的预定义标签
style标签script标签link标签
HTML5语义化
回到我们开头说的问题，为啥要做语义化呢？div+span不是也行吗？这里我先说一下div+span这种结构，div和span属于语义中立的标签，这种搭配不存在语义的问题，如果没有语义化的要求这种方案是不错的方案，宁愿不用也不能滥用。再说一下语义化，语义类标签对开发者更友好，增强了可读性，能够更清晰的看出网页的结构方便开发和维护。同时也方便机器的阅读，搜索引擎可以评估HTML文档中的文本片段的重要性，方便读屏软件自动生成目录等等。
根据图片上的HMTL标签的含义，我来语义化的举个例子，先看代码
<code>
<pre>
<ol>
世界人口最多的国家排名
<li>中国</li>
<li>印度</li>
</ol>
</pre>
</code>
<!-- 输出内容 -->
<samp>
<pre>
世界人口最多的国家排名
1. 中国
2. 印度
</pre>
</samp>
以上代码我没有加文档结构，当用浏览器打开html文件的时候，浏览器会自动给加上。我们来看一下这个例子代码所代表的含义。
我们先来看code标签里的内容，代码是有格式的，所以我们使用pre标签保留代码格式，而它又是HTML代码，所以我们使用code标签表示它是一段代码，然后我们使用的转义字符<将<转义了，防止浏览器解析。
我们再看一下samp标签里的内容，这个是上面一段代码产生的结果，所以我们使用samp标签，而上面一段代码输出的内容是有格式的，我们应该保留其内容格式，所以使用pre标签。
大家可以用以下代码验证上面的结果：
<ol>
世界人口最多的国家排名
<li>中国</li>
<li>印度</li>
</ol>
总结
在使用语义化时， 需要大家使用的时候对照图片中的标签含义进行斟酌，还是那句宁愿不用也不要滥用。
扫一扫
7582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
