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

Update

Browse Source
This commit is contained in:
qianguyihao 2017-06-29 14:48:12 +08:00
parent 8c7d318578
commit 116e1e2a12
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
01-html/01-html标签.md
View File

@ -350,14 +350,18 @@ This <br> is a para<br>graph with line breaks
好吧，其实这个标签也用的比较少。 好吧，其实这个标签也用的比较少。
<br> <br>
#### 块级标签 `<div>` #### 块级标签 `<div>`
把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。 把标签中的额内容作为一个块儿来对待(division)。必须单独占据一行。
属性： 属性：
- `align="属性值"`：设置块儿的位置。属性值可选择：left right center。 - `align="属性值"`：设置块儿的位置。属性值可选择：left right center。
<br> <br>
#### 块级标签 `<span>` #### 块级标签 `<span>`
`<span>`和`<div>`唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。 `<span>`和`<div>`唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的或者说，DIV+CSS来实现各种样式。。
效果举例： 效果举例：
@ -365,6 +369,7 @@ This <br> is a para<br>graph with line breaks
![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)
## 3、字体标签 ## 3、字体标签
### 标题 ### 标题
标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。 标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
效果演示： 效果演示：
@ -388,6 +393,7 @@ This <br> is a para<br>graph with line breaks
![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_10.png) ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_10.png)
### 特殊字符 ### 特殊字符
- `&nbsp;`：空格 - `&nbsp;`：空格
- `&lt;`：小于号 - `&lt;`：小于号
- `&gt;`：大于号 - `&gt;`：大于号
@ -435,7 +441,9 @@ http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_13.png)
<br> <br>
### 粗体标签`<b>`或`<strong>` ### 粗体标签`<b>`或`<strong>`
效果： 效果：
![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_14.png) ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_14.png)
@ -443,13 +451,17 @@ http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_13.png)
### 下划线标记 `<u>` 中划线标记`<s>` ### 下划线标记 `<u>` 中划线标记`<s>`
<br> <br>
### 斜体标记 `<i>`或`<em>` ### 斜体标记 `<i>`或`<em>`
效果： 效果：
![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_15.png) ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_15.png)
<br> <br>
### 上标`<sup>` 下标`<sub>` ### 上标`<sup>` 下标`<sub>`
上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部` 上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
举例： 举例：
```html ```html
@ -460,6 +472,7 @@ O<sup>2</sup> 5<sub>3</sub>
![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_16.png) ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_16.png)
## 4、超链接 ## 4、超链接
超链接有三种形式： 超链接有三种形式：
**1、外部链接**：链接到外部文件。举例： **1、外部链接**：链接到外部文件。举例：
```html ```html
@ -591,7 +604,9 @@ img: 代表的就是一张图片。是单边标记。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right。 （2）如果想实现图文混排的效果，请使用align属性，取值为left或right。
<br> <br>
### 热点问题 ### 热点问题
指的是对图片的**局部区域**加超链接。 指的是对图片的**局部区域**加超链接。
我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例： 我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例：
```html ```html
@ -635,7 +650,7 @@ img: 代表的就是一张图片。是单边标记。
怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html) 怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html)
##我的公众号 ## 我的公众号
下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。<font color=#0000ff>**博客园分享技术，公众号分享心智**</font>。 下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。<font color=#0000ff>**博客园分享技术，公众号分享心智**</font>。