第二天·初识HTML

攻城师

2019-06-28

一·什么是HTML

HTML（HyperText Markup Language）是超文本标记语言，“超文本”的意思就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。HTML不是一种编程语言，而是一种标记语言。所谓的标记语言实际上就是一套标记标签。总之，HTML的作用就是通过标记标签来描述网页，使得网页的结构在浏览器中展现出来。

二·HTML的结构

1.骨架

HTML有自己的语法骨架格式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

2.标签

以下图这个标签为例
第二天·初识HTML

这样的标签一般包括以下几部分：
1.开始标签（The opening tag）：这里包含了元素的名称（本例为p），被开、闭尖括号所包围。这表示元素从此开始或者开始起作用——在本例中即段落由此开始。
2.闭合标签（The closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——这表示元素在此结束——在本例中即段落在此结束。
3.内容（The content）：这是一个元素的内容，这个例子中就是所输入的文本本身。
4.元素（The element）：开标签、闭标签与内容相结合，便是一个完整的元素。

3.元素的属性

元素有时候会有属性，比如下图：
第二天·初识HTML
属性（Attribute）包含了关于元素的一些额外信息，这些信息不会出现在内容中，但是一般会影响元素的显示或者动作。上面的例子中，class是一个属性名，editor-note是属性的值。
一个属性一般包括以下三点：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

4.元素之间的嵌套

我们可以将一个元素置于其他元素之中，这种方式被称为嵌套，例如我们强调某一部分文字，可以使用元素包裹，意味着这段文字被强调：
My cat is very grumpy.
在嵌套过程中，标签的顺序是很重要的，在这个例子中我们首先使用 p 标签，然后是 strong 标签，接着我们需要先闭合 strong 标签，最后再闭合 p 标签。下面是个错误的示范：
My cat is very grumpy.

5.空元素

有一些元素并不包含内容，也没有闭标签，例如“骨架”中的<img>元素：
<img src="images/firefox-icon.png" alt="My test image">
它包含了两个属性，但是这里并没有 </img> 闭合标签，也没有内部内容。因为图像元素不需要包含内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

三.解析HTML文档

我们再回头看我们的HTML骨架：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

<!DOCTYPE html>用于声明文档类型，文档类型的声明必须位于HTML的第一行，它的意思是该HTML是HTML5。如果是其他版本的HTML那么声明方法会不同，但是我们现在只要用HTML5的声明就可以了。具体其他HTML版本的声明可以参考HTML <!DOCTYPE> 标签

浏览器解析HTML有三种方式：
1.标准模式（非怪异模式）：在该模式中，页面按照HTML与CSS的定义渲染。
2.怪异模式：在该模式中则尝试模拟更旧的浏览器的行为。
3.部分怪异（近乎标准）模式：一些浏览器（例如，那些基于Mozilla的Gecko渲染引擎的，或者Internet Explorer 8在strict mode下）也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards)模式，实施了一种表单元格尺寸的怪异行为，除此之外符合标准定义。
总结：一个不含任何 DOCTYPE 的网页将会以怪异(quirks) 模式渲染。HTML5提供的<DOCTYPE html>是标准模式，向后兼容的, 等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

<html>元素包含了整个页面的内容，有时也被称作根元素或根标签。
<head>元素规定了文档相关的配置信息，包括文档的标题，引用的样式和脚本等等，<head>标签中的内容一般不会直接出现在页面中。具体内容可以参考<head>标签里有什么? Metadata-HTML中的元数据
<body>元素含了想让用户在访问页面时看到的内容，不管是文本，图像，视频，游戏，可播放的音轨或其他内容。
<meta charset="utf-8">元素指定了当前的字符编码是UTF-8，它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，具体的字符编码原理可以参考字符编码笔记：ASCII，Unicode 和 UTF-8
<meta>元素用于表述那些不能由其他元素表述的任何元数据，包括页面的说明，关键字，最后修改日期，和其它的元数据。具体可以参考HTML meta标签总结与属性使用介绍、<meta> - HTML（超文本标记语言） | MDN
<title>元素设置了页面的标题，标题显示在浏览器标签页上，而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。

四·HTML其他

1.关于属性

（1）布尔属性

有时候我们会看到一些属性没有值，但是仍然合法，例如：<input type="text" disabled>（disabled属性用于使表单输入变为不可用(变灰色)，此时用户不能向他们输入任何数据。）只有当属性值和属性名相等的时候才能这样使用属性，这是一种简写。

（2）属性值的引号

有一些粗糙的网站中会用一些奇怪的标记风格，有的开发者会不给属性值加引号，有时浏览器会误解我们的标记，始终添加引号会避免很多问题，使得代码更易读。

（3）单引号或双引号

属性值用单引号或者双引号都可以，这只是代码风格的问题，但是千万不要在一条属性值里混用，尽量避免在同一套代码中混用，这样可以增加你代码的易读性。而如果你已经使用了一种引号，在这个引号中你可以嵌套另外一种引号。

2.HTML中的空白

有一些代码中会包含很多的空格，但是实际上这是没有必要的，例如下面两端代码是等价的：

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

无论用了多少空白（包括空白字符和换行），当我们渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符·

3.HTML中的特殊字符

在HTML中，<、>、"、'、&是特殊字符，它们本身就是HTML语法的一部分，因此，如果直接把它们包含进我们的文本中有时会出现错误，如果想要在文本中使用它们就必须使用字符引用（表示字符的特殊编码），它们每个字符以&开始，以;结束，具体如下表：

原义字符	等价字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

维基百科这一篇中收录了全部的字符引用表：XML和HTML字符实体引用列表

4.HTML注释

就如同大部分的编程语言一样，在HTML中也可以书写注释，注释是被浏览器忽略，且对用户不可见的，它们的目的是允许我们来描述代码的工作的。如果我们在若干年以后重新查看我们的代码库，或者处理别人的代码，注释是很有用的。为HTML添加注释，需要特殊记号：包括起来，例如：

<p>I'm not inside a comment</p>
<!-- <p>这是一条注释!</p> -->

5.HTML标签的语义化

语义化的标签，旨在让标签有自己的含义，选择最合适最正确的标签，具体左右有三：

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

html语言