@@ -1,23 +1,18 @@
> 本文最初于2015-10-01发表于[博客园](http://www.cnblogs.com/smyhvae/p/4850684.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，
> 以下是正文。
国庆节快乐，还在加班的童鞋，良辰必有重谢！
## 本文主要内容
- 头标签
- 排版标签：`<p>` `<div>` `<span>` `<br>` `<hr>` `<center>` `<pre>`
- 字体标记：`<h1>` `<font>` `<b>` `<u>` `<sup>` `<sub>`
- 超链接
- 图片标签
## 前言
### web标准
@@ -29,26 +24,18 @@ web标准介绍：
- web标准规范的分类：
- 结构： ： ：
web标准总结：
- 结构标准：
- 表现标准： 相当于人的衣服。css就是对网页进行美化的。
- 行为标准： 相当于人的动作。JS就是让网页动起来，
### 浏览器介绍
浏览器是网页运行的平台， （ ） （ ） ：
浏览器内核：
|浏览器 | 内核|
@@ -60,18 +47,9 @@ web标准总结：
PS： ，
### Sublime Text 的使用
详情请移步至：[Sublime Text使用技巧 ](https://github.com/smyhvae/t ools/blob/master/01- %E4 %B8%AA%E4%BA%BA%E6%95%B4%E7%90%86 /02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md )
详情请移步至：[Sublime Text使用技巧 ](https://github.com/qianguyihao/T ools/blob/master/%E5 %B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7 /02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md )
## 一、HTML的介绍
@@ -86,8 +64,6 @@ PS： ，
**注意 ** ： #0000ff >**没有编译过程**</font>)，
#### HTML是负责描述文档语义的语言
html中，
@@ -101,8 +77,6 @@ html是一个纯本文文件（ ） ，
- 正确答案：给文本增加主标题的语义。
- 错误答案：给文字加粗、加黑、变大。
### 2、HTML的历史
@@ -129,18 +103,19 @@ XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
- dhtml： ， `javascript + css + html` 合起来的页面就是一个dhtml。
- http： ： ， ：
### 4、HTML的编辑工具
> 用的最多的编辑器是： VS Code 和 Sublime Text。
- VS Code：
- Sublime Text：
- NotePad：
- EditPlus： ： （
- UltraEdit： ，
- Sublime Text： （ ）
- dw(dreamweaver， ：
PS： ，
### 5、计算机编码介绍
计算机，不能直接存储文字，存储的是编码。
@@ -168,7 +143,6 @@ PS： ，
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
**中文能够使用的字符集两种： **
- 第一种： ， ，
@@ -202,14 +176,9 @@ PS： ，
- qq网、网易、搜狐都是使用gb2312。这些公司，
- 新华网藏语频道， ，
对了， ？ ， ， ，
那么， ？ ， ，
### 6、HTML颜色介绍
**颜色表示： **
@@ -225,9 +194,6 @@ PS： ，
- 在数字视频中， ，
- RGB各有256级(0-255)亮度， ， × ×
## 二、HTML的规范
- HTML是一个弱势语言
@@ -240,7 +206,6 @@ PS： ，
目前， ， ， ； ，
### 1、编写XHTML的规范：
（ ） ， ： `<h1><font></font></h1>`
@@ -258,10 +223,6 @@ PS： ，
（ ）
### 2、HTML的基本语法特性
#### （ ） ，
@@ -290,8 +251,6 @@ HTML中所有的**文字之间**，
## 三、HTML结构详解
> 备注：
@@ -299,32 +258,31 @@ HTML中所有的**文字之间**，
> - 每个标签都有私有属性。也都有公有属性。
> - html中表示长度的单位都是**像素**。HTML只有一种单位就是像素。
HTML标签通常是成对出现的（ `<div>` 和 `</div>` ，也有单独呈现的标签（<font color="blue">**单边标记**</font>），如：`<br />` 、`<hr />` 和`<img src=“ images/1.jpg” />` 等。
HTML标签通常是成对出现的（ `<div>` 和 `</div>` ，也有单独呈现的标签（<font color="blue">**单边标记**</font>），如：`<br />` 、`<hr />` 和`<img src=" images/1.jpg" />` 等。
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
### 快速生成 html 的骨架
#### 使用`Emmet`插件快速生成html的骨架
在Sublime Text中安装`Emmet` 插件。
新建html文件， `html:xt` ，按`Tab` 键后（ ） ， ：
**方式1 ** ：在 VS Code 中新建 html 文件，输入`html:5` ，按 `Tab` 键后，自动生成的代码如下：
``` html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" xml: lang= "en" >
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html;charset= UTF-8">
< title > Document< / title >
< meta charset = " UTF-8">
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
< title > Document< / title >
< / head >
< body >
< / body >
< / html >
```
新建html， `html:5` 后 ，按 `Tab` 键后，自动生成的代码如下：
**方式2 ** ： `Emmet` 插件。文件 ，输入`html:5` ，按`Tab` 键后，自动生成的代码如下：
``` html
<!DOCTYPE html>
@@ -339,46 +297,44 @@ HTML标签通常是成对出现的（
< / html >
```
**方式3 ** ： `Emmet` 插件。新建html文件， `html:xt` ，按`Tab` 键后（ ） ， ：
``` html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
< title > Document< / title >
< / head >
< body >
< / body >
< / html >
```
上面的方式2和方式3中， ， ，
### 1、文档声明头
任何一个标准的HTML页面，
任何一个标准的HTML页面， `<!DOCTYPE ……>` 开头的语句。
```
```
开头的语句。
这一行， ， ，
#### HTML4.01有哪些规范呢？
首先我们先确定一件事儿，我们现在学习的是 **HTML4.01**这个版本，这个版本 是IE6开始兼容的。**HTML5是IE9开开始兼容的**。但是IE6、7、8这些浏览器还不能过早的淘汰， 。如今， ， ，
** ， ， ，
说个题外话，
HTML4.01里面有两大种规范， （ 面）：
> HTML4.01里面规定了**普通**和**XHTML**两大种规范。
> HTML觉得自己有一些规定不严谨， ， ？
> 所以， ， ， ，
总结一下， ， ， ：
HTML4.01里面有两大种规范， （ 图）。
HTML4.01里面规定了**普通**和**XHTML**两大种规范。HTML觉得自己有一些规定不严谨， ， ？ `<H1></H1>` 所以， ， ， ，
总结一下， ， ：
下面对上图中的三种小规范进行解释：
- **strict**：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
@@ -391,17 +347,40 @@ HTML4.01里面有两大种规范，
- **Frameset**：表示“框架”，在框架的页面使用。
在sublime输入的html:xt， ，
HTML5中极大的简化了DTD， （ ） ：
在HTML5中极大的简化了DTD， （ ） ：
```
```
### 2、头标签
#### html5 的比较完整的骨架：
``` html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
< meta name = "Author" content = "" >
< meta name = "Keywords" content = "牛逼，很牛逼，特别牛逼" / >
< meta name = "Description" content = "网易是中国领先的互联网技术公司， ， ， ， / >
< title > Document< / title >
< / head >
< body >
< / body >
< / html >
```
面试题：
- 问： ， ， ？
- 答：
头标签都放在<head></head>头部分之间。包括：`<title>` 、`<base>` 、`<meta>` 、`<link>`
- `<title>` ：指定整个网页的标题，在浏览器最上方显示。
@@ -410,26 +389,8 @@ HTML5中极大的简化了DTD， （
- `<body>` ： ，
- `<link>` ：定义文档与外部资源的关系。
**meta 标签 ** ：
我们打开EditPlus软件， ， ：
``` html
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "Generator" content = "EditPlus®" >
< meta name = "Author" content = "" >
< meta name = "Keywords" content = "" >
< meta name = "Description" content = "" >
< title > Document< / title >
< / head >
< body >
< / body >
< / html >
```
上面的`<meta>` 标签都不用记，但是另外还有一个`<meta>` 标签是需要记住的：
``` html
@@ -437,12 +398,9 @@ HTML5中极大的简化了DTD， （
```
上面这个标签的意思是说， ，
我们接下来对各个头标签进行介绍。
常见的几种 meta 标签如下：
#### （ ）
我们发现，在头标签中，有下面这种标签：
（ ） ：
``` html
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
@@ -450,13 +408,22 @@ HTML5中极大的简化了DTD， （
字符集用meta标签中的`charset` 定义， ，
charset就是charactor set（ ） ， ，
charset就是charactor set（ ）
浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候， ，
#### （ ）
（ ） ：
``` html
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
```
`width=device-width` ：表示视口宽度等于屏幕宽度。
viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
（ ） ：
举例如下：
@@ -466,24 +433,12 @@ charset就是charactor set（ ） ，
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
#### （ ）
（ ） ：
meta除了可以设置字符集，
我们把含有`meta` 标签的这一行代码抽象一下：
``` html
< meta name = " " content = " " >
```
name即“名字”，
只要设置Description页面描述， ， ， （ ， ）
设置页面描述的举例：
``` html
@@ -495,43 +450,22 @@ name即“名字”，
#### （ ） title标签
** title 标签** :
用于设置网页标题：
``` html
< title > 网页的标题< / title >
< title > 网页的标题< / title >
```
title也是有助于SEO搜索引擎优化的。
#### html的完整骨架：
综上所述， ：
**base标签 ** ：
``` html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
< meta name = "Keywords" content = "牛逼，很牛逼，特别牛逼" / >
< meta name = "Description" content = "网易是中国领先的互联网技术公司， ， ， ， / >
< title > Document< / title >
< / head >
< body >
< / body >
< / html >
< base href = "/"
```
面试题：
- 问： ， ， ？
- 答： （ ： ）
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
### 3、`<body>`标签的属性
@@ -552,10 +486,8 @@ title也是有助于SEO搜索引擎优化的。
接下来，我们讲一下`<body>` 里的各种标签的属性。
## 一、排版标签
### 注释标签
@@ -564,8 +496,6 @@ title也是有助于SEO搜索引擎优化的。
<!-- 注释 -->
```
### 段落标签`<p>`
``` html
@@ -581,7 +511,6 @@ title也是有助于SEO搜索引擎优化的。
<br>
段落，
HTML标签是分等级的， ：
@@ -591,10 +520,8 @@ HTML标签是分等级的， ：
- **容器级标签**：
从学习p的第一天开始， ： ，
错误写法：（尝试把 h 放到 p 里）
``` html
@@ -606,16 +533,12 @@ HTML标签是分等级的， ：
网页效果如下：
上图显示， ， ， ，
PS： ，
### 块级标签 `<div>`和`<span>`
> div和span是非常重要的标签， ；
@@ -643,7 +566,6 @@ div标签是一个**容器级**标签， ，
span也是表达“小区域、小跨度”的标签，
就是说，
span里面是放置小元素的， ：
span举例：
@@ -677,10 +599,6 @@ div举例：
所以，我们亲切的称呼这种模式叫做“**div+css**”。**div标签负责布局， ，
### 换行标签`<br>`（已废弃）
当你打算结束一行，而又不想开始一个新段落时，`<br> ` 标签就派上用场了。无论你将它置于何处，`<br> ` 标签都会产生一个强制的换行。
@@ -742,8 +660,6 @@ This <br> is a para<br>graph with line breaks
好吧，其实这个标签也用的比较少。
## 二、字体标签
### 标题
@@ -753,7 +669,6 @@ This <br> is a para<br>graph with line breaks
### 字体标签`<font>`（已废弃）
属性：
@@ -820,7 +735,6 @@ http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png)
|²|平方2（ ） `²` |
|³|立方3（ ） `³` |
### 一些小标签/小标记
- `<u>` ：下划线标记
@@ -833,18 +747,14 @@ http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png)
上面的这几个标签，常用于做一些小装饰、小图标。比如：
20180118_2340.png
这张图中，我们通过查看京东网站的代码发现，箭头处的小图标都是用的标签`<i>` 。
div的主要目的是用来布局，
### 粗体标签`<b>`或`<strong>`（已废弃）
效果：
@@ -864,8 +774,6 @@ O<sup>2</sup> 5<sub>3</sub>
## 三、超链接
超链接有三种形式：
@@ -879,7 +787,6 @@ a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面
href是英语`hypertext reference` 超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。
效果：
@@ -890,11 +797,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
```
**2、锚链接 ** ：
指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个**锚点**，也就是说，使用`name` 属性或者`id` 属性给那个特定的位置起个名字。效果如下：
@@ -934,7 +836,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
`title` 属性举例：
``` html
@@ -954,7 +855,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
blank就是“空白”的意思，
也就是说，如果不写`target=”_blank”` 那么就是在相同的标签页打开，如果写了`target=”_blank”` ，就是在新的空白标签页中打开。
#### 备注1：
区别如下：
@@ -963,8 +863,6 @@ blank就是“空白”的意思，
< img src = "1.jpg" / >
< a href = "1.html" > < / a >
```
#### 备注2：
比如一个段落中的所有文字都能够被点击， ：
@@ -987,7 +885,6 @@ blank就是“空白”的意思，
a的语义要小于p， ，
## 四、图片标签
img: 代表的就是一张图片。是单边标记。
@@ -1026,7 +923,6 @@ img是自封闭标签，
img 是image“图片”的简写，
相对路径不会出现这种情况：
``` html
@@ -1035,8 +931,6 @@ aaa/../bbb/1.jpg
`../` 要么不写，要么就写在开头。
举例2：
``` html
@@ -1047,7 +941,6 @@ aaa/../bbb/1.jpg
相对路径的面试题。现有如下文件层级图：
@@ -1064,7 +957,6 @@ aaa/../bbb/1.jpg
< img src = "../../photo/1.png" / >
```
#### 2、写法二：
绝对路径包括以下两种：
@@ -1110,11 +1002,8 @@ aaa/../bbb/1.jpg
- 绝对不允许使用file://开头的东西，这个是完全错误的！
### img标签的其他属性
- `width` ：宽度
- `height` ：高度
- `Align` ： ， ：
@@ -1163,8 +1052,6 @@ aaa/../bbb/1.jpg
（ ） ，
（ ） ， ，
<br>
### 热点问题
指的是对图片的**局部区域**加超链接。
@@ -1205,11 +1092,7 @@ aaa/../bbb/1.jpg
最后，送上妹子的近照一张。楼主已经仁至义尽了。
PS： ， 博客园 ](https://www.cnblogs.com/qianguyihao/p/4850684.html )看吧~
最后，送上妹子的近照一张。楼主已经仁至义尽了：
怎么？还没看够？且看下文：[HTML标签----图文详解（二） ](http://www.cnblogs.com/smyhvae/p/4852863.html )
@@ -1223,6 +1106,3 @@ PS： ，
qianguyihao