update
This commit is contained in:
qianguyihao
parent
116e1e2a12
commit
1b3648759e
@ -70,7 +70,7 @@ PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲
|
|||||||
- 超文本：音频，视频，图片称为超文本。
|
- 超文本：音频，视频，图片称为超文本。
|
||||||
- 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
|
- 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
|
||||||
|
|
||||||
**作用**：HTML是负责描述文档语义的语言。
|
**作用**：HTML是负责描述文档**语义**的语言。
|
||||||
|
|
||||||
**注意**：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(<font color=#0000ff>**没有编译过程**</font>)，HTML页面直接由浏览器解析执行。
|
**注意**：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(<font color=#0000ff>**没有编译过程**</font>)，HTML页面直接由浏览器解析执行。
|
||||||
|
|
||||||
@ -78,7 +78,7 @@ PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲
|
|||||||
|
|
||||||
#### HTML是负责描述文档语义的语言
|
#### HTML是负责描述文档语义的语言
|
||||||
|
|
||||||
html中，除了语义，其他什么都没有。
|
html中，除了**语义**，其他什么都没有。
|
||||||
|
|
||||||
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
|
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
|
||||||
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
|
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
|
||||||
@ -91,7 +91,8 @@ html是一个纯本文文件（就是用txt文件改名而成），用一些标
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 2、HTML的历史：
|
### 2、HTML的历史
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
我们专门来对XHTML做一个介绍。
|
我们专门来对XHTML做一个介绍。
|
||||||
@ -114,13 +115,11 @@ XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
|
|||||||
（6）XHTML文档开头必须要有DTD文档类型定义
|
（6）XHTML文档开头必须要有DTD文档类型定义
|
||||||
|
|
||||||
|
|
||||||
#### html
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 3、HTML的网络术语
|
||||||
|
|
||||||
|
|
||||||
### 3、HTML的网络术语：
|
|
||||||
- 网页 ：由各种标记组成的一个页面就叫网页
|
- 网页 ：由各种标记组成的一个页面就叫网页
|
||||||
- 主页(首页) : 一个网站的起始页面或者导航页面
|
- 主页(首页) : 一个网站的起始页面或者导航页面
|
||||||
- 标记： `<p>`称为开始标记 ，`</p>`称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
|
- 标记： `<p>`称为开始标记 ，`</p>`称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
|
||||||
@ -131,7 +130,8 @@ XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
|
|||||||
- http：超文本传协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议，ftp:文件传输协议。
|
- http：超文本传协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议，ftp:文件传输协议。
|
||||||
|
|
||||||
|
|
||||||
### 4、HTML的编辑工具：
|
### 4、HTML的编辑工具
|
||||||
|
|
||||||
- NotePad：记事本。
|
- NotePad：记事本。
|
||||||
- EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
|
- EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
|
||||||
- UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
|
- UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
|
||||||
@ -141,7 +141,8 @@ XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
|
|||||||
PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。
|
PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。
|
||||||
|
|
||||||
|
|
||||||
### 5、计算机编码介绍：
|
### 5、计算机编码介绍
|
||||||
|
|
||||||
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。
|
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。
|
||||||
|
|
||||||
**ASCII码：**
|
**ASCII码：**
|
||||||
@ -166,7 +167,8 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
|
|||||||
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
|
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
|
||||||
|
|
||||||
|
|
||||||
### 6、HTML颜色介绍：
|
### 6、HTML颜色介绍
|
||||||
|
|
||||||
**颜色表示：**
|
**颜色表示：**
|
||||||
- 纯单词表示：red、green、blue、orange、gray等
|
- 纯单词表示：red、green、blue、orange、gray等
|
||||||
- 10进制表示：rgb(255,0,0)
|
- 10进制表示：rgb(255,0,0)
|
||||||
@ -219,7 +221,7 @@ HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
我们打开EditPlus软件，新建一个html文件，自动生成的代码如下：(在Sublime Text中安装`Emmet`插件，新建html文件，输入`html:5`后，按 `Tab`键，也可自动生成下面的代码)
|
我们打开EditPlus软件，新建一个html文件，自动生成的代码如下：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
@ -244,7 +246,164 @@ HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>
|
|||||||
```
|
```
|
||||||
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
|
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
|
||||||
|
|
||||||
#### `<body>`标签的属性
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 使用`Emmet`插件快速生成html的骨架
|
||||||
|
|
||||||
|
在Sublime Text中安装`Emmet`插件。
|
||||||
|
|
||||||
|
新建html文件，输入`html:xt`，按`Tab`键后（或者按Ctrl+E），自动生成的代码如下：
|
||||||
|
|
||||||
|
```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>
|
||||||
|
```
|
||||||
|
|
||||||
|
新建html，输入`html:5`后，按 `Tab`键后，自动生成的代码如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 文档声明头
|
||||||
|
|
||||||
|
|
||||||
|
任何一个标准的HTML页面，第一行一定是一个以
|
||||||
|
|
||||||
|
```
|
||||||
|
<!DOCTYPE ……
|
||||||
|
```
|
||||||
|
|
||||||
|
开头的语句。
|
||||||
|
这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
|
||||||
|
|
||||||
|
#### HTML4.01有哪些规范呢？
|
||||||
|
|
||||||
|
首先我们先确定一件事儿，我们现在学习的是**HTML4.01**这个版本，这个版本是IE6开始兼容的。**HTML5是IE9开开始兼容的**。但是IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。如今，手机、移动端的网页，就可以使用HTML5了，因为其兼容性更高。
|
||||||
|
|
||||||
|
说个题外话，html1 至 html3 是美国军方以及高等研究所用的，并未对外公开。
|
||||||
|
|
||||||
|
HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下面）：
|
||||||
|
|
||||||
|
> HTML4.01里面规定了**普通**和**XHTML**两大种规范。
|
||||||
|
|
||||||
|
> HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`<H1></H1>`
|
||||||
|
|
||||||
|
> 所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
|
||||||
|
|
||||||
|
总结一下，一共有6种DTD，说白了，HTML第一行语句一共有6种：
|
||||||
|
|
||||||
|
20170629_1600.png
|
||||||
|
|
||||||
|
下面对上图中的三种小规范进行解释：
|
||||||
|
|
||||||
|
- **strict**：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
|
||||||
|
比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。
|
||||||
|
那怎么给文本增加下划线呢？今后的css将使用css属性来解决。
|
||||||
|
那么，XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。
|
||||||
|
|
||||||
|
- **Transitional**：表示“普通的”，这种模式就是没有一些别的规范。
|
||||||
|
|
||||||
|
- **Frameset**：表示“框架”，在框架的页面使用。
|
||||||
|
|
||||||
|
在sublime输入的html:xt，x表示XHTML，t表示transitional。
|
||||||
|
HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）：
|
||||||
|
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 字符集 charset
|
||||||
|
|
||||||
|
我们发现，在头标签中，有下面这种标签：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||||
|
```
|
||||||
|
|
||||||
|
字符集用meta标签中的`charset`定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
|
||||||
|
charset就是charactor set（即“字符集”）。这个meta不用背，用sublime生成就行。
|
||||||
|
|
||||||
|
计算机，不能直接存储汉字，而是存储的是编码。
|
||||||
|
|
||||||
|
中文能够使用的字符集两种：
|
||||||
|
|
||||||
|
- 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
|
||||||
|
|
||||||
|
- 第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面**仅**涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
|
||||||
|
|
||||||
|
字库规模： UTF-8（字全） > gb2312（只有汉字）
|
||||||
|
|
||||||
|
**重点1：避免乱码**
|
||||||
|
|
||||||
|
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码！（重点）。
|
||||||
|
|
||||||
|
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： `文件→ set File Encoding to → Chinese Simplified(GBK)`。
|
||||||
|
|
||||||
|
|
||||||
|
**重点2:UTF-8和gb2312的比较：**
|
||||||
|
|
||||||
|
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
|
||||||
|
|
||||||
|
总结：
|
||||||
|
- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
|
||||||
|
- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
|
||||||
|
|
||||||
|
|
||||||
|
列出2个使用情形：
|
||||||
|
|
||||||
|
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
|
||||||
|
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
|
||||||
|
|
||||||
|
我们亲测：
|
||||||
|
- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
|
||||||
|
- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
|
||||||
|
|
||||||
|
浏览器就是通过meta来看你是什么字符集的，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。
|
||||||
|
|
||||||
|
对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。
|
||||||
|
那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### `<body>`标签的属性
|
||||||
|
|
||||||
其属性有：
|
其属性有：
|
||||||
- `bgcolor`：设置整个网页的背景颜色。
|
- `bgcolor`：设置整个网页的背景颜色。
|
||||||
- `background`：设置整个网页的背景图片。
|
- `background`：设置整个网页的背景图片。
|
||||||
@ -268,13 +427,15 @@ HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>
|
|||||||
|
|
||||||
## 2、排版标签
|
## 2、排版标签
|
||||||
|
|
||||||
#### 注释标签
|
### 注释标签
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- 注释 -->
|
<!-- 注释 -->
|
||||||
```
|
```
|
||||||
<br>
|
|
||||||
#### 段落标签`<p>`
|
|
||||||
|
|
||||||
|
### 段落标签`<p>`
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<p>This is a paragraph</p>
|
<p>This is a paragraph</p>
|
||||||
@ -289,7 +450,7 @@ HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
#### 换行标签`<br>`
|
### 换行标签`<br>`
|
||||||
|
|
||||||
当你打算结束一行，而又不想开始一个新段落时，`<br> `标签就派上用场了。无论你将它置于何处，`<br> `标签都会产生一个强制的换行。
|
当你打算结束一行，而又不想开始一个新段落时，`<br> `标签就派上用场了。无论你将它置于何处，`<br> `标签都会产生一个强制的换行。
|
||||||
```html
|
```html
|
||||||
@ -304,7 +465,7 @@ This <br> is a para<br>graph with line breaks
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
#### 水平线标签`<hr>`
|
### 水平线标签`<hr>`
|
||||||
|
|
||||||
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
|
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
|
||||||
效果如下：
|
效果如下：
|
||||||
@ -323,7 +484,7 @@ This <br> is a para<br>graph with line breaks
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
#### 内容居中标签 `<center>`
|
### 内容居中标签 `<center>`
|
||||||
|
|
||||||
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
|
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
|
||||||
效果演示：
|
效果演示：
|
||||||
@ -334,7 +495,7 @@ This <br> is a para<br>graph with line breaks
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
#### 预定义（预格式化）标签：`<pre>`
|
### 预定义（预格式化）标签：`<pre>`
|
||||||
|
|
||||||
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
|
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
|
||||||
说明：真正排网页过程中，`<pre>`标签几乎用不着。但在PHP中用于打印一个数组时使用。
|
说明：真正排网页过程中，`<pre>`标签几乎用不着。但在PHP中用于打印一个数组时使用。
|
||||||
@ -351,7 +512,7 @@ This <br> is a para<br>graph with line breaks
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
#### 块级标签 `<div>`
|
### 块级标签 `<div>`
|
||||||
|
|
||||||
把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。
|
把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。
|
||||||
|
|
||||||
@ -360,7 +521,7 @@ This <br> is a para<br>graph with line breaks
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
#### 块级标签 `<span>`
|
### 块级标签 `<span>`
|
||||||
|
|
||||||
`<span>`和`<div>`唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。
|
`<span>`和`<div>`唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。
|
||||||
|
|
||||||
@ -371,6 +532,7 @@ This <br> is a para<br>graph with line breaks
|
|||||||
## 3、字体标签
|
## 3、字体标签
|
||||||
|
|
||||||
### 标题
|
### 标题
|
||||||
|
|
||||||
标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
|
标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
|
||||||
效果演示：
|
效果演示：
|
||||||
|
|
||||||
@ -474,6 +636,7 @@ O<sup>2</sup> 5<sub>3</sub>
|
|||||||
## 4、超链接
|
## 4、超链接
|
||||||
|
|
||||||
超链接有三种形式：
|
超链接有三种形式：
|
||||||
|
|
||||||
**1、外部链接**：链接到外部文件。举例：
|
**1、外部链接**：链接到外部文件。举例：
|
||||||
```html
|
```html
|
||||||
<a href="02页面.html">点击进入另外一个文件</a>
|
<a href="02页面.html">点击进入另外一个文件</a>
|
||||||
@ -523,6 +686,7 @@ O<sup>2</sup> 5<sub>3</sub>
|
|||||||
> 备注：`_parent`和`_top`值只能用在框架中。
|
> 备注：`_parent`和`_top`值只能用在框架中。
|
||||||
|
|
||||||
## 5、图片标签
|
## 5、图片标签
|
||||||
|
|
||||||
img: 代表的就是一张图片。是单边标记。
|
img: 代表的就是一张图片。是单边标记。
|
||||||
**属性：**
|
**属性：**
|
||||||
- `src`属性：指图片的路径。
|
- `src`属性：指图片的路径。
|
||||||
@ -605,7 +769,7 @@ img: 代表的就是一张图片。是单边标记。
|
|||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
### 热点问题
|
#### 热点问题
|
||||||
|
|
||||||
指的是对图片的**局部区域**加超链接。
|
指的是对图片的**局部区域**加超链接。
|
||||||
我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例：
|
我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例：
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user