diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index d0c3310..e8273ad 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -143,6 +143,8 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式 ### 5、计算机编码介绍 +计算机，不能直接存储文字，存储的是编码。 + 计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。 **ASCII码：** @@ -167,6 +169,47 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式 毫无疑问，开发中，都用**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颜色介绍 **颜色表示：** @@ -191,8 +234,8 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式 - HTML不区分大小写 - HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统) - HTML的结构： - - 声明部分：主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。 - - head部分： 不会显示在页面上，作用是告诉服务器一些页面的额外信息。 + - 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。 + - head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。 - body部分：我们所写的代码必须放在此标签內。 目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。 @@ -262,47 +305,6 @@ HTML标签通常是成对出现的（**双边标记** - -## 1、头标签 - -头标签都放在头部分之间。包括：``、`<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 - - - - - -``` -上面的``标签都不用记，但是另外还有一个``标签是需要记住的： - -```html - -``` -上面这个标签的意思是说，3秒之后，自动跳转到百度页面。 - - - - #### 使用`Emmet`插件快速生成html的骨架 在Sublime Text中安装`Emmet`插件。 @@ -340,7 +342,7 @@ HTML标签通常是成对出现的（**双边标记** -### 文档声明头 +### 1、文档声明头 任何一个标准的HTML页面，第一行一定是一个以 @@ -397,7 +399,48 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自 -### 字符集 charset + +## 2、头标签 + +头标签都放在头部分之间。包括：``、`<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 + + + + + +``` +上面的``标签都不用记，但是另外还有一个``标签是需要记住的： + +```html + +``` +上面这个标签的意思是说，3秒之后，自动跳转到百度页面。 + +我们接下来对各个头标签进行介绍。 + + +#### 字符集 charset 我们发现，在头标签中，有下面这种标签： @@ -406,79 +449,14 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自 ``` 字符集用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 （更小巧，加载更快） - -总结： -- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿； -- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。 +浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 -列出2个使用情形： - -1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。 -2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。 - -我们亲测： -- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。 -- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。 - -浏览器就是通过meta来看你是什么字符集的，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。 - -对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。 -那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。 - - - -### 关键字和页面描述 - - -我们把含有`meta`标签的这一行代码抽象一下： - -```html - -``` - -name即“名字”，content即“内容”。 - -#### 定义`页面描述` - -meta除了可以设置字符集，还可以设置关键字和页面描述。 - -设置页面描述举例： - -```html - -``` - -只要设置的Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。 - -如下图所示： - -![](http://img.smyhvae.com/20170629_1743.png) - - -#### 定义`关键词` +#### 定义“关键词” 举例如下： @@ -489,7 +467,35 @@ meta除了可以设置字符集，还可以设置关键字和页面描述。 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 -### title标签 +#### 定义“页面描述” + +meta除了可以设置字符集，还可以设置关键字和页面描述。 + + +我们把含有`meta`标签的这一行代码抽象一下： + +```html + +``` + +name即“名字”，content即“内容”。 + + +只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。 + + +设置页面描述的举例： + +```html + +``` + +效果如下： + +![](http://img.smyhvae.com/20170629_1743.png) + + +#### title标签 ```html 网页的标题 @@ -498,7 +504,7 @@ meta除了可以设置字符集，还可以设置关键字和页面描述。 title也是有助于SEO搜索引擎优化的。 -### html的完整骨架 +#### html的完整骨架 综上所述，html的比较完整的骨架是这样： @@ -527,7 +533,7 @@ title也是有助于SEO搜索引擎优化的。 -### ``标签的属性 +### 3、``标签的属性 其属性有： - `bgcolor`：设置整个网页的背景颜色。