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

时间 2019-12-05

标签 Hello CSS 第四 html 标签语意栏目 HTML 繁體版

原文原文链接

做者：陈大鱼头

github： KRISACHAN

上一篇分享了CSS的逻辑属性与盒子模型中分享了一些有关设备屏幕的知识以及浏览器视口的坐标构成。本篇则会分享HTML相关的一些知识。css

咱们在序章的开头就简单的讲解了HTML的诞生历史，本篇不做详细讲解，有兴趣的能够去看wikipedia。html

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推荐标准发布。

鱼头注：上面某些信息看得真让人发愁。。。。。。html5

HTML标签

对于应付平常的业务，写在同一行的就用span，须要换行的就用div，若是有超连接就用a。长得丑？加color啊，不够大？用font-size: xx-large啊。嗯，没有任何问题，精通HTML。: )git

此刻正在看这篇文章的你估计会以为：“HTML有什么好说的，天天都写，键盘上div那几个字母都要被我按烂了，这只有初学者才须要学。”github

嗯，说得对。那本篇结束，再见！web

咦，不对，其实在鱼头看来HTML并不简单，做为一门本来是为了学者们的交流而诞生的语言，自己就是充满严谨性的，加上又已经发展了37个年头，更是不简单。浏览器

鱼头注：本篇不会对HTML的标签结构跟文件组成进行介绍，有须要了解的童鞋能够参考MDN跟W3school缓存

首先咱们来看一个基本的HTML页面会有什么东西：服务器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="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	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 , _top , framename	在何处打开页面中全部的连接。（可选）

代码以下：

<!DOCTYPE html>
<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)咱们能够发现，在设置了<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	alternate , author , help , icon , licence , next , pingback , prefetch , prev , search , sidebar , stylesheet , tag	规定当前文档与被连接文档之间的关系。
rev	reversed relationship	HTML5 中不支持。
sizes	height , xwidth , any	规定被连接资源的尺寸。仅适用于 rel="icon"。
target	_blank , _self , _top , _parent , frame_name	HTML5 中不支持。
type	MIME_type	规定被连接文档的 MIME 类型。

<style>

属性	值	描述
type	text/css	规定样式表的 MIME 类型。（必选）
media	screen , tty , tv , projection , handheld , print , braille , aural , all	为样式表规定不一样的媒介类型。（可选）

<title>

可定义文档的标题。

可是有一点可能你们不知道，或者都这么作了，或者没有，可是 <title> 标签是 <head> 标签中惟一要求包含的东西。

<meta>

最后是 <meta>，这是很是重要的一个标签，它提供了有关当前HTML元素的元信息 (meta-information)，好比描述、针对搜索引擎的关键词以及刷新频率。

<meta> 的属性对象以下：

属性	描述
content	设置或返回元素的 content 属性的值。
http-equiv	把 content 属性链接到一个 HTTP 头部。
name	把 content 属性链接到某个名称。
scheme	设置或返回用于解释 content 属性的值的格式。

咱们首先来看content，此属性包含http-equiv 或name 属性的值，具体取决于所使用的值。

<meta name="keywords" content="WEB,CSS,鱼头" />
复制代码

其次是scheme，此属性是用来设置或返回用于解释 content 属性的值的格式。例子以下：

<meta name="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的值含义以下

值	描述
application-name	定义正运行在该网页上的网络应用名称
author	文档做者
description	其中包含页面内容的简短和精确的描述。一些浏览器，如Firefox和Opera，将其用做书签页面的默认描述。
generator	包含生成页面的软件的标识符。
keywords	包含与逗号分隔的页面内容相关的单词。
referrer	控制全部从该文档发出的 HTTP 请求中HTTP `Referer` 首部的内容。
others	其余的内容。

详细name值，能够访问developer.mozilla.org/zh-CN/docs/…。

最后咱们来看看http-equiv，此属性把content属性链接到HTTP头部。

值	描述
content-security-policy	容许站点管理者在指定的页面控制用户代理的资源。除了少数例外，这条政策将极大地指定服务源以及脚本端点。这将帮助防止跨站脚本攻击。
default-style	这个属性指定了在页面上使用的首选样式表. `content`属性必须包含`<link>` 元素的标题, `href`属性连接到CSS样式表或包含CSS样式表的`<style>`元素的标题。
refresh	这个属性指定若是`<content>`只包含一个正整数，则是从新载入页面的时间间隔(秒)，包含一个正整数而且跟着一个字符串,则是重定向到指定连接的时间间隔(秒)。

详细http-equiv值，能够访问developer.mozilla.org/zh-CN/docs/…。

body

<body>标签内存放文档的内容。<html>内可以使用的标签大概有357个，其中MDN给**<body>**内的元素分了11类。有须要了解的可参考developer.mozilla.orgzh-CN/docs/Web/HT…。

按照MDN的划分，一共有如下11类标签：

1. 内容分区：

内容分区元素容许你将文档内容从逻辑上进行组织划分。

2. 文本内容

使用 HTML 文本内容元素来组织在开标签 `` 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 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】系列

【Hello CSS】是以CSS基础概念为主题的系列文章，旨在帮助你们更深入地了解而且提升CSS在各位开发者心目中的地位。因为鱼头我水平有限，文笔有限，若是各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会很是感谢的；若是经过文章有任何想法或疑问，也但愿各位能积极留言，咱们互相探讨；若是经过本系列文章有所收获，这就让鱼头我喜不自胜了！

若是你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。