diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index e8273ad..bcfa5b9 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -292,7 +292,7 @@ HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠 -## 三、HTML的各种标签 +## 三、HTML结构详解 > 备注： > - 所有的浏览器默认情况下都会忽略空格和空行 @@ -440,7 +440,7 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自 我们接下来对各个头标签进行介绍。 -#### 字符集 charset +#### （1）字符集 charset 我们发现，在头标签中，有下面这种标签： @@ -456,7 +456,7 @@ charset就是charactor set（即“字符集”），这里采用的是。这个 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 -#### 定义“关键词” +#### （2）定义“关键词” 举例如下： @@ -467,7 +467,7 @@ charset就是charactor set（即“字符集”），这里采用的是。这个 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 -#### 定义“页面描述” +#### （3）定义“页面描述” meta除了可以设置字符集，还可以设置关键字和页面描述。 @@ -495,7 +495,7 @@ name即“名字”，content即“内容”。 ![](http://img.smyhvae.com/20170629_1743.png) -#### title标签 +#### （4）title标签 ```html 网页的标题 @@ -504,7 +504,7 @@ name即“名字”，content即“内容”。 title也是有助于SEO搜索引擎优化的。 -#### html的完整骨架 +#### html的完整骨架： 综上所述，html的比较完整的骨架是这样： @@ -553,10 +553,10 @@ title也是有助于SEO搜索引擎优化的。 ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_05.gif) +接下来，我们讲一下``里的各种标签的属性。 - -## 2、排版标签 +## 一、排版标签 ### 注释标签 @@ -586,9 +586,11 @@ title也是有助于SEO搜索引擎优化的。 HTML标签是分等级的，HTML将所有的标签分为两种： -- **容器级**：容器级别的标签，里面可以放置任何东西。 +- **文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。 + +- **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。 + -- **文本级**：文本级的标签里面，只能放置文字、图片、表单元素。 从学习p的第一天开始，就要死死记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。 @@ -620,20 +622,22 @@ PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常 >CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。 -div：把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。 +div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。 div标签的属性： - - `align="属性值"`：设置块儿的位置。属性值可选择：left right center。 + - `align="属性值"`：设置块儿的位置。属性值可选择：left、right、 center。
-``和`
`唯一的区别在于：``是不换行的，而`
`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。 +**``和`
`唯一的区别在于**：``是不换行的，而`
`是换行的。 + +如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。 效果举例： ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_08.png) -div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。 +div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。 span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。 @@ -687,7 +691,8 @@ This
is a para
graph with line breaks ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html03.png) -上图可以看到，`

`标签和`
`标签的区别在于：`

`标签会在段落的前后自动插入一个空行，而`
`标签没有空行；而且`
`标签没有属性。 +上图显示，**`

`标签和`
`标签的区别在于**：`

`标签会在段落的前后自动插入一个空行，而`
`标签没有空行；而且`
`标签没有属性。 + 注意`
` 没有结束标签，把`
`标签写为 `
` 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
@@ -739,7 +744,7 @@ This
is a para
graph with line breaks -## 3、字体标签 +## 二、字体标签 ### 标题 @@ -854,7 +859,7 @@ O2 53 -## 4、超链接 +## 三、超链接 超链接有三种形式： @@ -979,7 +984,7 @@ blank就是“空白”的意思，就表示新建一个空白窗口。为啥有 a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。 -## 5、图片标签 +## 四、图片标签 img: 代表的就是一张图片。是单边标记。