From 1b3648759eb2c8e3a0595ee61d2a80dcce6d74c5 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 29 Jun 2017 17:32:13 +0800 Subject: [PATCH] update --- 01-html/01-html标签.md | 210 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 187 insertions(+), 23 deletions(-) diff --git a/01-html/01-html标签.md b/01-html/01-html标签.md index 13d0361..afa9d7a 100644 --- a/01-html/01-html标签.md +++ b/01-html/01-html标签.md @@ -70,7 +70,7 @@ PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲 - 超文本：音频，视频，图片称为超文本。 - 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 -**作用**：HTML是负责描述文档语义的语言。 +**作用**：HTML是负责描述文档**语义**的语言。 **注意**：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(**没有编译过程**)，HTML页面直接由浏览器解析执行。 @@ -78,7 +78,7 @@ PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲 #### HTML是负责描述文档语义的语言 -html中，除了语义，其他什么都没有。 +html中，除了**语义**，其他什么都没有。 html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。 所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。 @@ -91,7 +91,8 @@ html是一个纯本文文件（就是用txt文件改名而成），用一些标 -### 2、HTML的历史： +### 2、HTML的历史 + ![html中标签发展趋势.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html166440-5b780bdc6b80a5fb.png) 我们专门来对XHTML做一个介绍。 @@ -114,13 +115,11 @@ XHTML是**严格的、纯净的**HTML。 （6）XHTML文档开头必须要有DTD文档类型定义 -#### html + - - - -### 3、HTML的网络术语： +### 3、HTML的网络术语 + - 网页 ：由各种标记组成的一个页面就叫网页 - 主页(首页) : 一个网站的起始页面或者导航页面 - 标记： `

`称为开始标记 ，`

`称为结束标记，也叫标签。每个标签都规定好了特殊的含义。 @@ -131,7 +130,8 @@ XHTML是**严格的、纯净的**HTML。 - http：超文本传协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议，ftp:文件传输协议。 -### 4、HTML的编辑工具： +### 4、HTML的编辑工具 + - NotePad：记事本。 - EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。 - UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。 @@ -141,7 +141,8 @@ XHTML是**严格的、纯净的**HTML。 PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。 -### 5、计算机编码介绍： +### 5、计算机编码介绍 + 计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。 **ASCII码：** @@ -166,7 +167,8 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式 毫无疑问，开发中，都用**UTF-8**编码吧，准没错。 -### 6、HTML颜色介绍： +### 6、HTML颜色介绍 + **颜色表示：** - 纯单词表示：red、green、blue、orange、gray等 - 10进制表示：rgb(255,0,0) @@ -219,7 +221,7 @@ HTML标签通常是成对出现的（**双边标记** -我们打开EditPlus软件，新建一个html文件，自动生成的代码如下：(在Sublime Text中安装`Emmet`插件，新建html文件，输入`html:5`后，按 `Tab`键，也可自动生成下面的代码) +我们打开EditPlus软件，新建一个html文件，自动生成的代码如下： ```html @@ -244,7 +246,164 @@ HTML标签通常是成对出现的（**双边标记** ``` 上面这个标签的意思是说，3秒之后，自动跳转到百度页面。 -#### ``标签的属性 + + + +#### 使用`Emmet`插件快速生成html的骨架 + +在Sublime Text中安装`Emmet`插件。 + +新建html文件，输入`html:xt`，按`Tab`键后（或者按Ctrl+E），自动生成的代码如下： + +```html + + + + + Document + + + + + +``` + +新建html，输入`html:5`后，按 `Tab`键后，自动生成的代码如下： + +```html + + + + + Document + + + + + +``` + + + + +### 文档声明头 + + +任何一个标准的HTML页面，第一行一定是一个以 + +``` + HTML4.01里面规定了**普通**和**XHTML**两大种规范。 + +> HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`

` + +> 所以，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自己打脸了）： + +``` + +``` + + + +### 字符集 charset + +我们发现，在头标签中，有下面这种标签： + +```html + +``` + +字符集用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是纯文本文件，纯文本文件自然剋以查看网页的源代码了。 + + + + + + + + + + + + + + + + +### ``标签的属性 + 其属性有： - `bgcolor`：设置整个网页的背景颜色。 - `background`：设置整个网页的背景图片。 @@ -268,13 +427,15 @@ HTML标签通常是成对出现的（**双边标记** ## 2、排版标签 -#### 注释标签 +### 注释标签 ```html ``` -
-#### 段落标签`

` + + + +### 段落标签`

` ```html

This is a paragraph

@@ -289,7 +450,7 @@ HTML标签通常是成对出现的（**双边标记**
-#### 换行标签`
` +### 换行标签`
` 当你打算结束一行，而又不想开始一个新段落时，`
`标签就派上用场了。无论你将它置于何处，`
`标签都会产生一个强制的换行。 ```html @@ -304,7 +465,7 @@ This
is a para
graph with line breaks
-#### 水平线标签`
` +### 水平线标签`
` 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 效果如下： @@ -323,7 +484,7 @@ This
is a para
graph with line breaks
-#### 内容居中标签 `
` +### 内容居中标签 `
` 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。 效果演示： @@ -334,7 +495,7 @@ This
is a para
graph with line breaks
-#### 预定义（预格式化）标签：`
`
+### 预定义（预格式化）标签：`
`
 
 含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
 说明：真正排网页过程中，`
`标签几乎用不着。但在PHP中用于打印一个数组时使用。
@@ -351,7 +512,7 @@ This 
 is a para
graph with line breaks
 
 

 
-#### 块级标签 `
`
+### 块级标签 `
`
 
 把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。
 
@@ -360,7 +521,7 @@ This 
 is a para
graph with line breaks
 
 

 
-#### 块级标签 ``
+### 块级标签 ``
 
 ``和`
`唯一的区别在于：``是不换行的，而`
`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。
 
@@ -371,6 +532,7 @@ This 
 is a para
graph with line breaks
 ## 3、字体标签
 
 ### 标题
+
 标题使用`
`至`
`标签进行定义。`
`定义最大的标题，`
`定义最小的标题。具有align属性，属性值可以是：left、center、right。
 效果演示：
 
@@ -474,6 +636,7 @@ O2    53
 ## 4、超链接
 
 超链接有三种形式：
+
 **1、外部链接**：链接到外部文件。举例：
 ```html
 点击进入另外一个文件
@@ -523,6 +686,7 @@ O2    53
 > 备注：`_parent`和`_top`值只能用在框架中。
 
 ## 5、图片标签
+
 img: 代表的就是一张图片。是单边标记。
 **属性：**
  - `src`属性：指图片的路径。
@@ -605,7 +769,7 @@ img: 代表的就是一张图片。是单边标记。
 
 

 
-### 热点问题
+#### 热点问题
 
 指的是对图片的**局部区域**加超链接。
 我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例：