webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

udpate

Browse Source
This commit is contained in:
qianguyihao 2018-01-07 22:49:45 +08:00
parent ade4c77601
commit 02b3db2b64
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
01-html/01-html标签图文详解（一）.md
View File

@ -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写的和声明的不匹配，那么浏览器就是乱码。 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
#### 定义“关键词” #### （2）定义“关键词”
举例如下： 举例如下：
@ -467,7 +467,7 @@ charset就是charactor set（即“字符集”），这里采用的是。这个
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
#### 定义“页面描述” #### （3）定义“页面描述”
meta除了可以设置字符集，还可以设置关键字和页面描述。 meta除了可以设置字符集，还可以设置关键字和页面描述。
@ -495,7 +495,7 @@ name即“名字”，content即“内容”。
![](http://img.smyhvae.com/20170629_1743.png) ![](http://img.smyhvae.com/20170629_1743.png)
#### title标签 #### （4）title标签
```html ```html
<title>网页的标题</title> <title>网页的标题</title>
@ -504,7 +504,7 @@ name即“名字”，content即“内容”。
title也是有助于SEO搜索引擎优化的。 title也是有助于SEO搜索引擎优化的。
#### html的完整骨架 #### html的完整骨架：
综上所述，html的比较完整的骨架是这样： 综上所述，html的比较完整的骨架是这样：
@ -553,10 +553,10 @@ title也是有助于SEO搜索引擎优化的。
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_05.gif) ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_05.gif)
接下来，我们讲一下`<body>`里的各种标签的属性。
## 一、排版标签
## 2、排版标签
### 注释标签 ### 注释标签
@ -586,9 +586,11 @@ title也是有助于SEO搜索引擎优化的。
HTML标签是分等级的，HTML将所有的标签分为两种： HTML标签是分等级的，HTML将所有的标签分为两种：
- **容器级**：容器级别的标签，里面可以放置任何东西。 - **文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。
- **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
- **文本级**：文本级的标签里面，只能放置文字、图片、表单元素。
从学习p的第一天开始，就要死死记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。 从学习p的第一天开始，就要死死记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。
@ -620,20 +622,22 @@ PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常
>CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。 >CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
div：把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。 div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
div标签的属性： div标签的属性：
- `align="属性值"`：设置块儿的位置。属性值可选择：left right center。 - `align="属性值"`：设置块儿的位置。属性值可选择：left、right、 center。
<br> <br>
`<span>`和`<div>`唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。 **`<span>`和`<div>`唯一的区别在于**：`<span>`是不换行的，而`<div>`是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
效果举例： 效果举例：
![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_08.png) ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_08.png)
div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。 div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。 div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。 span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。
@ -687,7 +691,8 @@ This <br> is a para<br>graph with line breaks
![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html03.png) ![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html03.png)
上图可以看到，`<p>`标签和`<br>`标签的区别在于：`<p>`标签会在段落的前后自动插入一个空行，而`<br>`标签没有空行；而且`<br>`标签没有属性。 上图显示，**`<p>`标签和`<br>`标签的区别在于**：`<p>`标签会在段落的前后自动插入一个空行，而`<br>`标签没有空行；而且`<br>`标签没有属性。
注意`<br>` 没有结束标签，把`<br>`标签写为 `<br/>` 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。 注意`<br>` 没有结束标签，把`<br>`标签写为 `<br/>` 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
<br> <br>
@ -739,7 +744,7 @@ This <br> is a para<br>graph with line breaks
## 3、字体标签 ## 二、字体标签
### 标题 ### 标题
@ -854,7 +859,7 @@ O<sup>2</sup> 5<sub>3</sub>
## 4、超链接 ## 三、超链接
超链接有三种形式： 超链接有三种形式：
@ -979,7 +984,7 @@ blank就是“空白”的意思，就表示新建一个空白窗口。为啥有
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。 a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
## 5、图片标签 ## 四、图片标签
img: 代表的就是一张图片。是单边标记。 img: 代表的就是一张图片。是单边标记。