【Hello CSS】第四章-HTML的标签与语意
【Hello CSS】第四章-HTML的标签与语意
- 首发：krissarea.gitee.io
- 作者：陈大鱼头
- github： KRISACHAN
上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。
我们在序章的开头就简单的讲解了HTML的诞生历史，本篇不作详细讲解，有兴趣的可以去看wikipedia。
HTML大事记
首先我们简单地来看一下HTML的发展历程（具体各个版本的区别亦不做讲解）。
- 1982年Tim Berners-Lee创建了html；
- 1989年Tim Berners-Lee规定HTML并在1990年底写出浏览器和服务器软件；
- 1991年底Tim Berners-Lee提及HTML标签（它描述18个元素，包括HTML初始的、相对简单的设计）；
- 1993年互联网工程任务组（IETF）发布首个HTML规范的提案；
- 1994年IETF创建一个HTML工作组；
- 1995年11月24日HTML 2.0作为IETF RFC 1866发布；
- IETF于1996年9月12日关闭它的HTML工作组；
- 1997年1月14日HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本；
- 1997年12月18日HTML 4.0作为W3C推荐标准发布；
- 1998年4月24日进行微调，不增加版本号；
- 1999年12月24日HTML 4.01作为W3C推荐标准发布；
- 2000年5月ISO/IEC 15445:2000（"ISO HTML"，基于HTML 4.01严格版）作为ISO/IEC国际标准发布。
- 2014年10月28日HTML 5作为W3C推荐标准发布；
- 2015年3月20日HTML6作为提案被W3C提出；
- 2016年11月HTML5.1作为W3C推荐标准发布；
- 2017年12月14日HTML5.2作为W3C推荐标准发布；
- 2018年10月18日HTML5.3作为W3C推荐标准发布。
鱼头注：上面某些信息看得真让人发愁。。。。。。
HTML标签
对于应付日常的业务，写在同一行的就用span，需要换行的就用div，如果有超链接就用a。长得丑？加color啊，不够大？用font-size: xx-large啊。嗯，没有任何问题，精通HTML。: )
此刻正在看这篇文章的你估计会觉得：“HTML有什么好说的，每天都写，键盘上div那几个字母都要被我按烂了，这只有初学者才需要学。”
嗯，说得对。那本篇结束，再见！
咦，不对，其实在鱼头看来HTML并不简单，作为一门原本是为了学者们的交流而诞生的语言，本身就是充满严谨性的，加上又已经发展了37个年头，更是不简单。
鱼头注：本篇不会对HTML的标签结构跟文件组成进行介绍，有需要了解的童鞋可以参考MDN跟W3school
首先我们来看一个基本的HTML页面会有什么东西：
<!DOCTYPE html><html>-
<head> -
<metacharset="utf-8"> -
<title>hello world</title> -
</head> -
<body> -
<h1>hello world</h1> -
</body> </html>
从上面我们可以知道一个基本的HTML页面会有定义文档类型的 <!DOCTYPE html>，告知浏览器这是一个HTML文档的 <html></html>，定义各种文档属性的 <head></head>，以及定义内容主体的 <body></body>。
首先我们一起来看看这几大标签的具体情况以及子标签详情。
DOCTYPE
<!DOCTYPE>是个声明而不是标签，它必须在HTML 文档的第一行，位于 <html> 标签之前。它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。必须始终向 HTML 文档添加 <!DOCTYPE>声明，这样浏览器才能获知文档类型。详情请参考HTML 元素和有效的 DTD。
html
<html></html>限定了文档的开始点和结束点，在它们之间是文档的头部和主体。我们来看看在 <html></html>标签中可添加的专属属性有哪些：
属性 | 值 | 描述 |
|---|---|---|
manifest | url | 定义一个 URL，在这个 URL 上描述了文档的缓存信息。（已废弃） |
xmlns | http://www.w3.org/1999/xhtml | 定义 XML namespace 属性。 |
全局属性
HTML 属性赋予元素意义和语境。下面的全局属性可用于任何 HTML 元素。
属性 | 描述 |
|---|---|
accesskey | 规定激活元素的快捷键。 |
class | 规定元素的一个或多个类名（引用样式表中的类）。 |
contenteditable | 规定元素内容是否可编辑。 |
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
data-* | 用于存储页面或应用程序的私有定制数据。 |
dir | 规定元素中内容的文本方向。 |
draggable | 规定元素是否可拖动。 |
dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
hidden | 规定元素仍未或不再相关。 |
id | 规定元素的唯一 id。 |
lang | 规定元素内容的语言。 |
spellcheck | 规定是否对元素进行拼写和语法检查。 |
style | 规定元素的行内 CSS 样式。 |
tabindex | 规定元素的 tab 键次序。 |
title | 规定有关元素的额外信息。 |
translate | 规定是否应该翻译元素内容。 |
head
<head>标签用于定义文档的头部，它是所有头部元素的容器。 <head>描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
那么有哪些标签是可以放在 <head></head>内的呢？
首先是 <base>
<base>是个很实用但是很多人会忽略的标签。
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、 <img>、 <link>、 <form> 标签中的 URL。
属性 | 值 | 描述 |
|---|---|---|
href | URL | 规定页面中所有相对链接的基准 URL。（必选） |
target | blank parent _self_topframename | 在何处打开页面中所有的链接。（可选） |
代码如下：
<!DOCTYPE html><html>-
<head> -
<basehref="https://user-gold-cdn.xitu.io/"/> -
<basetarget="_blank"/> -
</head> -
<body> -
<imgsrc="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1"/> -
<ahref="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1">跳转</a> -
</body> </html>
根据上面的DEMO我们可以发现，在设置了 <base>的url跟target之后， <img>跟 <a>即使不设置base url跟跳转行为，也可以得到预期的效果。
然后是 <link>、 <style>、 <title>
<link>、 <style>、 <title>可以算是非常常用的属性了，所以也就不多做讲解，只列个属性表就好。
<link>
<link>主要用于style文件引入
属性 | 值 | 描述 |
|---|---|---|
charset | char_encoding | HTML5 中不支持。 |
href | URL | 规定被链接文档的位置。 |
hreflang | language_code | 规定被链接文档中文本的语言。 |
media | media_query | 规定被链接文档将被显示在什么设备上。 |
rel | alternateauthorhelpiconlicencenextpingbackprefetchprevsearchsidebarstylesheettag | 规定当前文档与被链接文档之间的关系。 |
rev | reversed relationship | HTML5 中不支持。 |
sizes | heightxwidthany | 规定被链接资源的尺寸。仅适用于 rel="icon"。 |
target | blankselftopparentframe_name | HTML5 中不支持。 |
type | MIME_type | 规定被链接文档的 MIME 类型。 |
<style>
属性 | 值 | 描述 |
|---|---|---|
type | text/css | 规定样式表的 MIME 类型。（必选） |
media | screenttytvprojectionhandheldprintbrailleauralall | 为样式表规定不同的媒介类型。（可选） |
<title>
可定义文档的标题。
但是有一点可能大家不知道，或者都这么做了，或者没有，但是 <title> 标签是 <head> 标签中唯一要求包含的东西。
<meta>
最后是 <meta>，这是非常重要的一个标签，它提供了有关当前HTML元素的元信息 (meta-information)，比如描述、针对搜索引擎的关键词以及刷新频率。
<meta> 的属性对象如下：
属性 | 描述 |
|---|---|
content | 设置或返回 元素的 content 属性的值。 |
http-equiv | 把 content 属性连接到一个 HTTP 头部。 |
name | 把 content 属性连接到某个名称。 |
scheme | 设置或返回用于解释 content 属性的值的格式。 |
我们首先来看content，此属性包含 http-equiv 或 name 属性的值，具体取决于所使用的值。
<metaname="keywords"content="WEB,CSS,鱼头"/>
其次是scheme，此属性是用来设置或返回用于解释 content 属性的值的格式。例子如下：
<metaname="revised"content="2019-04-03"scheme="YYYY-MM-DD"/>
有趣的是，MDN上有这么一段描述：
Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.
意思就是不要用这属性，因为这属性并没什么用处。: )
然后是name，此属性定义文档级元数据的名称。值得注意的是，如果定义的元数据设置了 itemprop, http-equiv or charset ，就不能再设置name了。
name的值含义如下
定义正运行在该网页上的网络应用名称详细name值，可以访问https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#属性。
最后我们来看看http-equiv，此属性把content属性连接到HTTP头部。
允许站点管理者在指定的页面控制用户代理的资源。除了少数例外，这条政策将极大地指定服务源 以及脚本端点。这将帮助防止跨站脚本攻击。详细http-equiv值，可以访问https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#属性。
body
<body>标签内存放文档的内容。 <html>内可使用的标签大概有357个，其中MDN给 <body>内的元素分了11类。有需要了解的可参考https://developer.mozilla.orgzh-CN/docs/Web/HTML/Element。
按照MDN的划分，一共有以下11类标签：
1. 内容分区：
内容分区元素允许你将文档内容从逻辑上进行组织划分。
2. 文本内容
使用 HTML 文本内容元素来组织在开标签和闭标签里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
3. 内联文本语义
使用 HTML 内联文本语义（Inline text semantics）定义一个单词、一行内容，或任意文字的语义、结构或样式。
4. 图片和多媒体
HTML 支持各种多媒体资源，例如图像，音频和视频。
5. 内嵌内容
除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。
6. 脚本
为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持此功能。
7. 编辑标识
这些元素能标示出某个文本被更改过的部分。
8. 表格内容
这里的元素用于创建和处理表格数据。
9. 表单
HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。
10. 交互元素
HTML 提供了一系列有助于创建交互式用户界面对象的元素。
11. Web组件
Web 组件是一种与 HTML 相关联（HTML-related）的技术，简单来说，它允许创建自定义元素，并如同普通的 HTML 一样使用它们。此外，你甚至可以创建经过自定义的标准 HTML 元素。
标签语义化
语义化到底重不重要？
有的人认为，在可以“竞价排名”以及“软件界面”的场景多于“富文本”的前提下，HTML语意并不重要。只要div、span、a标签差不多就能走天下了，最有意思的是，百度百科跟维基百科这类文档类网站，HTML结构大多数都是上述的情况。
但是，标签语义化真的不重要吗？
这个问题鱼头暂时不回答，但会在后续的文章中体现并实践鱼头的想法。如果你对这个问题感兴趣，也可以通过留言或者加鱼头好友或者进鱼头的微信群来讨论，联系方式在文章底部。
我们知道，在HTML中，每个标题是通过标题标签来定义的，标题标签一共有6个，分别是：h1~6。例子如下：
<h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>
如果是连续的标题，则可以用 <hgroup> 来连接：
<hgroup>-
<h1>我是一级标题</h1> -
<h2>我是二级标题</h2> -
<h3>我是三级标题</h3> -
<h4>我是四级标题</h4> -
<h5>我是五级标题</h5> -
<h6>我是六级标题</h6> </hgroup>
如果是段落内容，则用 <p>：
<p>我是段落内容</p>
如果我们要列一个列表则可以用 <ol></ol> 或 <li></li> 。如果只是要标记项目，我们可以用 <li></li>，例子如下：
<ul>-
<li>苹果</li> -
<li>香蕉</li> -
<li>奥特曼</li> -
<li>橙子</li> </ul>
若是标记顺序，则用 <ol></ol> ，例子如下：
<ol>-
<li>向前走300米</li> -
<li>右转</li> -
<li>向前走300米</li> -
<li>右转</li> -
<li>向前走300米</li> </ol>
当然我们也可以按需嵌套。
<ol><li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>-
<li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li> -
<li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li> -
<li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。</li> -
<ul> -
<li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li> -
<li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li> -
</ul> </ol>
在我们平常说话的时候，为了突出重点，我们往往会强调某些词，就如如下的例子：
<p>我<em>非常</em>喜欢加班</p>
如果是重音强调，则：
<p>鱼头，明天<strong>别迟到</strong>了</p>
在我们身边任何的地方都是非常需要语义学的，我们依靠过去的学习经验，通过所见的物体就可以知道它代表的意义。例如“红灯停，绿灯行”。如果这个语义出错或者弄反了，造成的影响是不堪设想的。
同样的道理，我们需要确保使用了正确的元素来给予内容正确的意思、作用以及外形。
每个标签都有自己的使用场景，如果要全部列出来，也不是一篇文章能写得完的。更多的需要能坚持看到这里的你来探索，当然也非常欢迎你来跟鱼头一起讨论标签语义化的问题。
【Hello CSS】系列
【HelloCSS】是以 CSS基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高 CSS在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！
如果你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。如果你有兴趣，请添加鱼头微信（krisChans95），添加时注明 “加群”，Mmmm，最后，如果觉得我的文章还不错，请加个关注跟点个“在看”呗！