【Hello CSS】第四章-HTML的标签与语意

作者：陈大鱼头

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页面会有什么东西：


<html>
  <head>
    <meta charset="utf-8">
    <title>hello worldtitle>
  head>
  <body>
    <h1>hello worldh1>
  body>
html>
复制代码

从上面我们可以知道一个基本的HTML页面会有定义文档类型的，告知浏览器这是一个HTML文档的，定义各种文档属性的，以及定义内容主体的。

首先我们一起来看看这几大标签的具体情况以及子标签详情。

DOCTYPE

是个声明而不是标签，它必须在HTML 文档的第一行，位于标签之前。它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。必须始终向 HTML 文档添加声明，这样浏览器才能获知文档类型。详情请参考HTML 元素和有效的 DTD。

html

限定了文档的开始点和结束点，在它们之间是文档的头部和主体。我们来看看在标签中可添加的专属属性有哪些：

属性	值	描述
manifest	url	定义一个 URL，在这个 URL 上描述了文档的缓存信息。（已废弃）
xmlns	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

标签用于定义文档的头部，它是所有头部元素的容器。描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

那么有哪些标签是可以放在内的呢？

首先是

是个很实用但是很多人会忽略的标签。

标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括、、、

标签中的 URL。

属性	值	描述
href	URL	规定页面中所有相对链接的基准 URL。（必选）
target	_blank , _parent , _self , _top , framename	在何处打开页面中所有的链接。（可选）

代码如下：


<html>
  <head>
    <base href="https://user-gold-cdn.xitu.io/" />
    <base target="_blank" />
  head>
  <body>
    <img src="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1" />
    <a href="2018/12/25/167e378b5af48d99?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1">跳转a>
  body>
html>
复制代码

根据上面的[DEMO](krissarea.gitee.io/blog/css /head-base.html)我们可以发现，在设置了的url跟target之后，跟即使不设置base url跟跳转行为，也可以得到预期的效果。

然后是、