前端之HTML语言
学习完后端的各种层之后，今天开始学习前端，前端和后端都是一个项目的组成部分。
前端对应得到语言是HTML，HTML最重要的有三块，行为，样式，J结构。行为就是交互，理解为鼠标的点击；样式就是字面意思，这个页面可以被设计成多种样式；结构，就是指这个语言有自己的代码结构。
本博客持续更新，持续讲述个人学习HTML的过程，学习参考资料为w3school这个网站。
1.基础格式
基础格式：
(基本所有的东西都在这里)
举个例子：
我的第一个标题
我的第一个段落
我的第二个段落
Visit W3School!
每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
在浏览器显示如下：
8.2表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性border来显示一个带有边框的表格：
| Row 1, cell 1 | Row 1, cell 2 |
8.3表格的表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
| Heading | Another Heading |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
在浏览器显示如下：
8.4表格的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
浏览器可能会这样显示：
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
在浏览器中显示如下：
下边是表格常用的标签
9.HTML 列表
HTML 支持有序、无序和定义列表
9.1无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于
- 标签。每个列表项始于
- 。
- Coffee
- Milk
浏览器显示如下：
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
9.2有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签
- Coffee
- Milk
浏览器显示如下：
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
9.3定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以
-
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
- 开始。
- Coffee
- Black hot drink
- Milk
- White cold drink
浏览器显示如下：
9.4不同类型的无序列表
Disc 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
Circle 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
Square 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
9.5不同类型的有序列表
数字列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
小写字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
罗马字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
小写罗马字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
9.6嵌套列表
一个嵌套列表：
- 咖啡
- 茶
- 红茶
- 绿茶
- 中国茶
- 非洲茶
- 牛奶
常用列表标签
10. HTML 块元素和行内元素
可以通过
和 将 HTML 元素组合起来。10.1 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：
,
,
- ,
- LondonA
- Paris
- Tokyo
- 开括号与选择器位于同一行
- 在开括号之前用一个空格
- 使用两个字符的缩进
- 在每个属性与其值之间使用冒号加一个空格
- 在每个逗号或分号之后使用空格
- 在每个属性值对（包括最后一个）之后使用分号
- 只在值包含空格时使用引号来包围值
- 把闭括号放在新的一行，之前不用空格
- 避免每行超过 80 个字符
注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。
21.14在 HTML 中加载 JavaScript
请使用简单的语法来加载外部脚本（type 属性不是必需的）：
Top
10.2 内联元素
内联元素在显示时通常不会以新行开始。
例子：,
, , 10.3 div 元素
HTML
元素是块级元素，它是可用于组合其他 HTML 元素的容器。 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，
元素可用于对大的内容块设置样式属性。 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。元素的作用是显示表格化的数据。
10.4 span 元素
HTML 元素是内联元素，可用作文本的容器。
元素也没有特定的含义。
当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性
常用标签：
11.HTML类（类选择器）
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
11.1分类块级元素
HTML
元素是块级元素。它能够用作其他 HTML 元素的容器。对其他元素生效。设置
元素的类，使我们能够为相同的 元素设置相同的类：London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
11.2分类行内元素
HTML 元素是行内元素，能够用作文本的容器。对行生效。
设置 元素的类，能够为相同的 元素设置相同的样式。
My Important Heading
12. HTML id 属性（id选择器）
HTML id 属性用于 为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素。
12.1 使用 id 属性
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。下面的例子中我们有一个 h1 元素，它指向 id 名称 “myHeader”。这个 h1 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：
My Header
注释：id 名称对大小写敏感！
注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。
12.2 Class 与 ID 的差异
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
Class 与 ID 的差异
一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
我的城市
上海
中国最大的经济城市。
深圳
中国最具创新力的城市。
北京
中国的首都。
12.3 通过 ID 和链接实现 HTML 书签
HTML 书签用于让读者跳转至网页的特定部分。
如果页面很长，那么书签可能很有用。
要使用书签，您必须首先创建它，然后为它添加链接。
然后，当单击链接时，页面将滚动到带有书签的位置。
跳转到 Chapter 4
//第二步，在同一张页面中，向这个书签添加一个链接跳转到 Chapter 10
//第二步，在同一张页面中，向这个书签添加一个链接Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
// //第一步，用 id 属性创建书签：This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
// //第一步，用 id 属性创建书签：This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Chapter 13
This chapter explains ba bla bla
Chapter 14
This chapter explains ba bla bla
Chapter 15
This chapter explains ba bla bla
Chapter 16
This chapter explains ba bla bla
Chapter 17
This chapter explains ba bla bla
Chapter 18
This chapter explains ba bla bla
Chapter 19
This chapter explains ba bla bla
Chapter 20
This chapter explains ba bla bla
Chapter 21
This chapter explains ba bla bla
Chapter 22
This chapter explains ba bla bla
Chapter 23
This chapter explains ba bla bla
12.4 在 JavaScript 中使用 id 属性
JavaScript 也可以使用 id 属性为特定元素执行某些任务。
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
这个在 HTML JavaScript 章节中再深入学习。
12.5 本章总结
（1）id 属性用于为 HTML 元素指定唯一的 id
（2）id 属性的值在 HTML 文档中必须是唯一的
（3）CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
（4）id 属性的值区分大小写
（5）id 属性还可用于创建 HTML 书签
（6）JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
13. HTML Iframe
iframe 用于在网页内显示网页。
设置高度和宽度：height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。
//引号里边就是网址某些老式的浏览器不支持内联框架。
如果不支持，则 iframe 是不可见的。
14. HTML JavaScript
JavaScript 使 HTML 页面更具动态性和交互性
14.1 HTML
HTML
```14.2 JavaScript 能够更改内容
我的第一段 JavaScript
JavaScript 可以更改 HTML 元素的内容：
这是一个演示。
点击之后变化如下：
14.3 Javascript可以更改样式
我的第一段 JavaScript
JavaScript 可以更改 HTML 元素的样式。
点击之后变化如下：
14.4 JavaScript 能够更改属性
我的第一段 JavaScript
在这里，JavaScript 更改了图像的 src 属性。
点击开灯，把light类中的参数变成了1，运行else分支，输出eg_bulbon.gif图片；
点击关灯，把light类中的参数变成了0，运行if分支，输出eg_bulboff.gif图片；
14.5 HTML 标签
HTML 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：
不支持 JavaScript 的浏览器将显示 noscript 元素内的文本。
上边的代码输出的结果是这两句话，如果是不支持脚本或者禁用脚本的用户，那么他们看到的只有下边这句了。
15. HTML 文件路径
15.1 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到：
网页、图像、样式表，JavaScript。
15.2 绝对路径
绝对文件路径是指向一个因特网文件的完整 URL，比如：
15.3 相对路径
相对路径指向了相对于当前页面的文件。
比如，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：
比如，在本例中，文件路径指向了位于当前文件夹中 images 文件夹里的一个文件：
比如：文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件：
16. HTML 头部元素
16.1 head元素
head 元素是所有头部元素的容器。head内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：
、<base>、<link>、<meta>、<script> 以及 <style>。</p> <h4>16.2 title元素</h4> <p>title 标签定义文档的标题。</p> <p>title 元素在所有 HTML/XHTML 文档中都是必需的。</p> <p>title 元素能够：</p> <p>（1）定义浏览器工具栏中的标题</p><p>（2）提供页面被添加到收藏夹时显示的标题</p><p>（3）显示在搜索引擎结果中的页面标题</p> <p>例如：</p> <pre class="brush:python;toolbar:false"><!DOCTYPE html> <html> <head> <title>Title of the document //title 元素能够：（1）定义浏览器工具栏中的标题 //（2）提供页面被添加到收藏夹时显示的标题 //（3）显示在搜索引擎结果中的页面标题 The content of the document......16.3 base 元素
base 标签为页面上的所有链接规定默认地址或默认目标（target）：
例如：
base 元素
请注意，我们只指定了图像的相对地址。由于我们在 head 部分指定了基准 URL，因此浏览器将在“https://www.w3school.com.cn/i/photo/flower.gif”处查找图像。
HTML base 标签
请注意，该链接会在新窗口中打开，即使它没有 target="_blank" 属性。这是因为 base 元素的 target 属性已被设置为“_blank”。
16.4 link元素
link标签定义文档与外部资源之间的关系。
link 标签最常用于连接样式表，例如：
16.5 style元素
style标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式，例如：
16.6 meta元素
元数据（metadata）是关于数据的信息。
meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
meta 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词：一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
下面的 meta 元素定义页面的关键词：
name 和 content 属性的作用是描述页面的内容。
16.7 script
script 标签用于定义客户端脚本，比如 JavaScript。
17. HTML布局
网站常常以多列显示内容（就像杂志和报纸）
所以布局是好看的网页的关键
17.1 使用 div元素的 HTML 布局
注释：div元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个div元素来创建多列布局：
//id起名，为了后续在CSS中设置样式位置啥的
City Gallery
//id起名，为了后续在CSS中设置样式位置啥的 London
Paris
Tokyo
//id起名，为了后续在CSS中设置样式位置啥的London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
//id起名，为了后续在CSS中设置样式位置啥的 Copyright W3School.com.cn设置完内容之后，还可以设置一下样式，就是在代码开头写一下CSS配置：
17.2 使用 HTML5 的网站布局
时代在发展，使用div块元素在设置布局已经属于是老技术了，现在新的技术叫HTML5
这个属于升级版，更加简单，后边会详细讲这个东西，现在先简单看看效果
City Gallery
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
CSS的代码
header { background-color:black; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }可以看到基本上跟用div块元素写的基本一样，但是代码少了，虽然仅仅少了一点,css部分的代码也基本差不太多，用HTML5的话就不用style和#了，直接给对应的地方设置参数即可。
17.3 使用表格的 HTML 布局
注释：table 元素不是作为布局工具而设计的。
table 元素的作用是显示表格化的数据。
使用 table元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
The table element was not designed to be a layout tool. 18. HTML 响应式 Web 设计
18.1 什么是响应式 Web 设计？
即RWD，指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
说白了就是里边的内容会随着 窗口的 大小而改变排布位置
下面是一个响应式web设计的例子：
W3School Demo
Resize this responsive page!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
18.1 使用 Bootstrap制作响应式 Web 设计
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：
下边列一个简单的例子，后期进阶再仔细讲这个勾八东西：
W3School Demo
Resize this responsive page!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
19. HTML计算机代码
这个勾八东西就是第3节讲的那个东西，用于展示计算机代码在HTML应该如何写，说实话，看完一遍之后我还是觉得这个勾八没什么用，与其说我费劲设这个标签那个标签的，又编程代码又键盘输入又输出打印结果的，我直接用p标签，内容想写啥写啥不行吗？这不纯纯多此一举吗？搁置，以后用到了再说。
20. HTML语义
这个其实也应该在HTML5再讲，说白了，就是在HTML版本中，标签啥的都得搭配div啊，span啊，style之类的一起使用，例如这些：
但是HTML5就不用了，单词啥意思就直接用就行：
直接代表对应的含义，就把div给省了。比如：
What Does WWF Do?
WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.
我直接一个article，根本不用div还有id=了，全省了。
常见的HTML5能用到的语义元素如下:
21.HTML 代码约定
这节说白了就是说HTML代码有自己的规范，这节目的是学习规范。
21.1请始终在文档的首行声明文档类型：
小写也行
21.2请使用小写元素名
This is a paragraph.
21.3记得写结尾
This is a paragraph.
This is a paragraph.
21.4关闭空的 HTML 元素
在 HTML5 中，关闭空元素是可选的。
允许这样：
这样最好：
斜杠（/）在 XHTML 和 XML 中是必需的。
如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。
21.5使用小写属性名
推荐属性值加引号：
如果属性值包含值，则必须使用引号，加引号的值更易阅读。
下面这个属性值无效，因为值中包含空格：
这样是有效的：
21.6必需的属性
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。
21.7空格和等号
等号两边的空格是合法的：
但是精简空格更易阅读。
21.8避免长代码行
21.9请勿毫无理由地增加空行。
为了提高可读性，请增加空行来分隔大型或逻辑代码块。
为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。
请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素：
不必要：
Famous Cities
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
更好：
Famous Cities
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
表格示例：
Name Description A Description of A B Description of B 列表示例：
21.10不推荐省略 和 标签。
21.11省略 ？
在 HTML5 标准中， 标签也能够被省略。
默认地，浏览器会把 之前的所有元素添加到默认的 元素。
通过省略 标签，您能够降低 HTML 的复杂性：
示例
Page Title This is a heading
This is a paragraph.
注释：要我说就别勾八省了，该写的都写上，好懂一点。
21.12元数据
元素在 HTML5 中是必需的。请尽可能制作有意义的标题。</p> <p><title>HTML5 Syntax and Coding Style 为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：
HTML5 Syntax and Coding Style 21.13HTML样式表
请使用简单的语法来链接样式表（type 属性不是必需的）：
短规则可以压缩为一行，就像这样：
p.into {font-family:"Verdana"; font-size:16em;}
长规则应该分为多行：
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }