Biaofun竟然没想到你是这样的HTML / 四六文摘

前言

还记得招聘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了

注释：

文档类型<!DOCTYPE HTML>

以上就是HMTL的部分语法，有些不建议使用，比如可以省略掉一些标签，这个一旦这么用了我觉得可能会有人说你不讲码德，这样做会造成整个文档的可读性变差。

看完语法我们再来看一下HTML的元素：

图片

点击图片查看大图

一般我们的html标签都是写在body里，那么你知道head里面能写哪些标签吗？首先head元素是规定文档相关的配置信息(元数据)，也就是一个存放配置信息的一个容器。head标签里能写以下几种标签

title标签，表示文档的标题，一般显示在浏览器的选项卡上。

base标签，页面基准的URL

meta标签：元信息通用标签

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>

世界人口最多的国家排名

</ol>

</pre>

</code>

<samp>

<pre>

世界人口最多的国家排名

1. 中国

2. 印度

</pre>

</samp>

以上代码我没有加文档结构，当用浏览器打开html文件的时候，浏览器会自动给加上。我们来看一下这个例子代码所代表的含义。

我们先来看code标签里的内容，代码是有格式的，所以我们使用pre标签保留代码格式，而它又是HTML代码，所以我们使用code标签表示它是一段代码，然后我们使用的转义字符<将<转义了，防止浏览器解析。

我们再看一下samp标签里的内容，这个是上面一段代码产生的结果，所以我们使用samp标签，而上面一段代码输出的内容是有格式的，我们应该保留其内容格式，所以使用pre标签。

大家可以用以下代码验证上面的结果：

<ol>

世界人口最多的国家排名

</ol>

总结

在使用语义化时，需要大家使用的时候对照图片中的标签含义进行斟酌，还是那句宁愿不用也不要滥用。

文章编辑:标梵互动(https://www.biaofun.com/)

Biaofun竟然没想到你是这样的HTML

相关推荐