update
This commit is contained in:
qianguyihao
parent
dee6fce12c
commit
ade4c77601
@ -143,6 +143,8 @@ 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码：**
|
||||||
@ -167,6 +169,47 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
|
|||||||
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
|
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
|
||||||
|
|
||||||
|
|
||||||
|
**中文能够使用的字符集两种：**
|
||||||
|
|
||||||
|
- 第一种：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，保证字符集的数量。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。
|
||||||
|
那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 6、HTML颜色介绍
|
### 6、HTML颜色介绍
|
||||||
|
|
||||||
**颜色表示：**
|
**颜色表示：**
|
||||||
@ -191,8 +234,8 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
|
|||||||
- HTML不区分大小写
|
- HTML不区分大小写
|
||||||
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
|
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
|
||||||
- HTML的结构：
|
- HTML的结构：
|
||||||
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
|
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。
|
||||||
- head部分： 不会显示在页面上，作用是告诉服务器一些页面的额外信息。
|
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
|
||||||
- body部分：我们所写的代码必须放在此标签內。
|
- body部分：我们所写的代码必须放在此标签內。
|
||||||
|
|
||||||
目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
|
目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
|
||||||
@ -262,47 +305,6 @@ HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 1、头标签
|
|
||||||
|
|
||||||
头标签都放在<head></head>头部分之间。包括：`<title>`、`<base>`、`<meta>`、`<link>`
|
|
||||||
|
|
||||||
- `<title>`：指定整个网页的标题，在浏览器最上方显示。
|
|
||||||
- `<base>`：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
|
|
||||||
- `<meta>`：提供有关页面的基本信息
|
|
||||||
- `<body>`：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
|
|
||||||
- `<link>`：定义文档与外部资源的关系。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
我们打开EditPlus软件，新建一个html文件，自动生成的代码如下：
|
|
||||||
|
|
||||||
```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
|
|
||||||
<meta http-equiv="refresh" content="3;http://www.baidu.com">
|
|
||||||
```
|
|
||||||
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 使用`Emmet`插件快速生成html的骨架
|
#### 使用`Emmet`插件快速生成html的骨架
|
||||||
|
|
||||||
在Sublime Text中安装`Emmet`插件。
|
在Sublime Text中安装`Emmet`插件。
|
||||||
@ -340,7 +342,7 @@ HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 文档声明头
|
### 1、文档声明头
|
||||||
|
|
||||||
|
|
||||||
任何一个标准的HTML页面，第一行一定是一个以
|
任何一个标准的HTML页面，第一行一定是一个以
|
||||||
@ -397,7 +399,48 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 字符集 charset
|
|
||||||
|
## 2、头标签
|
||||||
|
|
||||||
|
头标签都放在<head></head>头部分之间。包括：`<title>`、`<base>`、`<meta>`、`<link>`
|
||||||
|
|
||||||
|
- `<title>`：指定整个网页的标题，在浏览器最上方显示。
|
||||||
|
- `<base>`：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
|
||||||
|
- `<meta>`：提供有关页面的基本信息
|
||||||
|
- `<body>`：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
|
||||||
|
- `<link>`：定义文档与外部资源的关系。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我们打开EditPlus软件，新建一个html文件，自动生成的代码如下：
|
||||||
|
|
||||||
|
```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
|
||||||
|
<meta http-equiv="refresh" content="3;http://www.baidu.com">
|
||||||
|
```
|
||||||
|
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
|
||||||
|
|
||||||
|
我们接下来对各个头标签进行介绍。
|
||||||
|
|
||||||
|
|
||||||
|
#### 字符集 charset
|
||||||
|
|
||||||
我们发现，在头标签中，有下面这种标签：
|
我们发现，在头标签中，有下面这种标签：
|
||||||
|
|
||||||
@ -406,79 +449,14 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自
|
|||||||
```
|
```
|
||||||
|
|
||||||
字符集用meta标签中的`charset`定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
|
字符集用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的比较**
|
charset就是charactor set（即“字符集”），这里采用的是。这个meta不用背，用sublime生成就行。
|
||||||
|
|
||||||
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
|
浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
|
||||||
|
|
||||||
总结：
|
|
||||||
- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
|
|
||||||
- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
|
|
||||||
|
|
||||||
|
|
||||||
列出2个使用情形：
|
#### 定义“关键词”
|
||||||
|
|
||||||
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
|
|
||||||
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
|
|
||||||
|
|
||||||
我们亲测：
|
|
||||||
- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
|
|
||||||
- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
|
|
||||||
|
|
||||||
浏览器就是通过meta来看你是什么字符集的，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。
|
|
||||||
|
|
||||||
对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。
|
|
||||||
那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 关键字和页面描述
|
|
||||||
|
|
||||||
|
|
||||||
我们把含有`meta`标签的这一行代码抽象一下：
|
|
||||||
|
|
||||||
```html
|
|
||||||
<meta name=" " content=" ">
|
|
||||||
```
|
|
||||||
|
|
||||||
name即“名字”，content即“内容”。
|
|
||||||
|
|
||||||
#### 定义`页面描述`
|
|
||||||
|
|
||||||
meta除了可以设置字符集，还可以设置关键字和页面描述。
|
|
||||||
|
|
||||||
设置页面描述举例：
|
|
||||||
|
|
||||||
```html
|
|
||||||
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
|
|
||||||
```
|
|
||||||
|
|
||||||
只要设置的Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
|
|
||||||
|
|
||||||
如下图所示：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 定义`关键词`
|
|
||||||
|
|
||||||
举例如下：
|
举例如下：
|
||||||
|
|
||||||
@ -489,7 +467,35 @@ meta除了可以设置字符集，还可以设置关键字和页面描述。
|
|||||||
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
|
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
|
||||||
|
|
||||||
|
|
||||||
### title标签
|
#### 定义“页面描述”
|
||||||
|
|
||||||
|
meta除了可以设置字符集，还可以设置关键字和页面描述。
|
||||||
|
|
||||||
|
|
||||||
|
我们把含有`meta`标签的这一行代码抽象一下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name=" " content=" ">
|
||||||
|
```
|
||||||
|
|
||||||
|
name即“名字”，content即“内容”。
|
||||||
|
|
||||||
|
|
||||||
|
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
|
||||||
|
|
||||||
|
|
||||||
|
设置页面描述的举例：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### title标签
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<title>网页的标题</title>
|
<title>网页的标题</title>
|
||||||
@ -498,7 +504,7 @@ meta除了可以设置字符集，还可以设置关键字和页面描述。
|
|||||||
title也是有助于SEO搜索引擎优化的。
|
title也是有助于SEO搜索引擎优化的。
|
||||||
|
|
||||||
|
|
||||||
### html的完整骨架
|
#### html的完整骨架
|
||||||
|
|
||||||
综上所述，html的比较完整的骨架是这样：
|
综上所述，html的比较完整的骨架是这样：
|
||||||
|
|
||||||
@ -527,7 +533,7 @@ title也是有助于SEO搜索引擎优化的。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `<body>`标签的属性
|
### 3、`<body>`标签的属性
|
||||||
|
|
||||||
其属性有：
|
其属性有：
|
||||||
- `bgcolor`：设置整个网页的背景颜色。
|
- `bgcolor`：设置整个网页的背景颜色。
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user