目 
录
一、标签属性
所谓属性就是外在特性，比如你的手机颜色，尺寸等等。使用HTML制作网页时，可以对HTML标签的属性加以设置。后面会了解到标签的各种属性，目前先了解一下设置标签属性的格式。其基本语法格式:<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>。有的标签有自己特殊的属性，有的属性也使用于很多标签！需要注意的是：
- 一个标签可以拥有多个属性并且必须写在开始标签中，位于标签名后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 采取 键值对 的格式 key="value" 的格式
二、排版标签
1.标题标签 h1-h6
HTML提供了6个等级的标题哦！其基本语法格式如下：
<h1> 标题文本1 </h1>
<h2> 标题文本2 </h2>
<h3> 标题文本3 </h3>
<h4> 标题文本4 </h4>
<h5> 标题文本5 </h5>
<h6> 标题文本6 </h6>效果展示:加了标题的文字会变的加粗， h数越大字号越小 ，也就是h1为最大字号，h6为最小字号，还有一点就是 一行只能放一个标题 哟。
2.文字上的分隔标签 br和p
(1)<p>标签
p来源于paragraph 段落这个单词的首字母。可以把 HTML 文档以及整个网页分割为若干段落。段落标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
(2)换行标签<br/>
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。这时如果还像在word中直接敲回车键换行就不起作用了。
(3)效果演示(这些标签代码都写在body标签里面的哈！)
<p>小 笑 话</p>
<p>家人给表弟安排了一场相亲，见面时女方对他印象不错羞涩地说：“我不介意你没有房，没有车，没有存款，只要你对我好就行!”<br />结果这货来了句：“你肚子里不会是有赠品吧!?”</p>
<p>女友给男友买了两条领带作为生日礼物。第二天早上，男友高高兴兴地系上一条新领带。<br />女友见了怒曰：“你什么意思，你是不是不喜欢另外一条啊!”</p>
<p>我男友很爱我，什么事都会为我着想。今天第一次去他家，我担心我脱了高跟鞋会让他父母看出来我太矮了。<br />他一把揽过我，一脸灿烂：“没事，我早就告诉他们你有脚臭不能脱鞋了。”</p>
效果展示：
3.水平线标签 hr
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr />就是创建横跨网页水平线的标签并且改标签是单标签哦。
基本语法格式：
<p>“栓Q”这个词最早来源于广西桂林阳朔县的70后农民刘涛，他用中英文双语介绍桂林阳朔山水，最后演唱了《row row row your boat》（漏漏漏之歌），结尾处用略显搞笑的发音说了“栓Q”，由此引发全网关注，迅速成为了一个全网流行的网络梗。</p>
<hr color="red" width="240" size="2">
<p>栓Q是“thank you”的谐音，意为thank you空耳版本。渐渐与“我真的会谢”组合，用来表达无奈、下头、阴阳等。“栓Q我真的会谢”字面意思是我是真的谢谢你，另一种意思表示很无语很郁闷。</p>
水平线标签的标签属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| color | 颜色单词或16进制颜色表（例：red，FF0000） | 设置水平线颜色 |
| width | 数字或像素（例：24，10px，10%） | 设置水平线的宽度 |
| size | 数字（例：2，3） | 设置水平线的粗细 |
效果展示：
4.文字居中标签 center
<center>我喜欢你</center>效果展示：
5.div 和 span 标签
div和span 是没有语义的，是我们网页布局主要的2个盒子 想必你听过 css+div就是 division 的缩写，是分割、分区的意思，其实就是有很多个div来组合网页。之后就可以给这些div（盒子）添加样式，比如边框颜色宽度，背景颜色等等。
- div标签 用来布局的，但是现在一行只能放一个div
- span标签 用来布局的，一行上可以放好多个span
6.排版标签总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| <hx></hx> | 标题标签 | 作为标题使用，并且依据重要性递减 |
| <p></p> | 段落标签 | 可以把 HTML 文档分割为若干段落 |
| <br/> | 换行标签 | 达到换行效果 |
| <hr /> | 水平线标签 | 就是一条线,分割线 |
| <center></center> | 文字居中 | 让文字居中 |
| <div></div> | div标签 | 用来布局的，但是现在一行只能放一个div |
| <span></span> | span标签 | 用来布局的，一行上可以放好多个span |
三、文本格式标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。strong 除了可以加粗还有 强调的意思， 语义更强烈。其他的也是同理。
1.文字变化标签（如加粗等等）
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字加粗(XHTML推荐使用strong) |
| <i></i>和<em></em> | 文字斜体(XHTML推荐使用em) |
| <s></s>和<del></del>和 <strick></strick> | 文字加删除线(XHTML推荐使用del) |
| <u></u>和<ins></ins> | 文字加下划线(XHTML不赞成使用u) |
| <kbd></kbd> | 用粗体等宽字体显示文字 |
| <var></var> | 用较小的固定宽度显示字体(有倾斜效果) |
| <dfn></dfn> | 用于名词解释，斜体显示 |
| <smap></smap> | 用于字母序列等宽 |
| <address></address> | 模拟信封上的字体(效果与<dfn>有点相似) |
| <big></big> | 比默认字号大一号 |
| <small></small> | 比默认字号小一号 |
| <code></code> | 以等宽字体显示计算机程序代码 (字体比<small>小一点) |
| <sup></sup> | 上标 |
| <sub></sub> | 下标 |
<b>加粗效果</b> <i>文字斜体</i> <s>删除线效果</s> <u>下划线效果</u> <br />
<strong>加粗效果</strong> <em>文字斜体</em> <del>删除线效果</del> <ins>下划线效果</ins> <br />
<kbd>用粗体等宽字体显示文字</kbd> <var>用较小的固定宽度显示字体</var><br>
<dfn>用于名词解释，斜体显示</dfn> <smap>用于字母序列等宽</smap>
<address>模拟信封上的字体</address>
<strike>删除线</strike><br />
<big>比默认字号大一号</big><br />
<small>比默认字号小一号</small><br />
<code>以等宽字体显示计算机程序代码</code><br>
8=2<sup>3</sup><br />
CO<sub>2</sub><br />效果展示：
2.字体标记 font
这个标签可以设置文字的大小，颜色，字体。使内容呈现的更加丰富！该标签属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| size | 数字（例如：2，3） | 设置文字的大小 |
| color | 颜色单词或16进制颜色表（例：red，FF0000） | 设置文字的颜色 |
| face | 一些字体的专有名称（例：黑体） | 设置文字的字体 |
<font>默认样式</font><br>
<font size="2">设置字体大小的样式</font><br>
<font size="2" color="red">设置字的颜色</font><br>
<font size="2" color="red" face="华文彩云">设置字的字体样式</font>
四、图像标签 img
要想在网页中显示图像就需要使用图像标签，该标签是一个单标签。该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
<img src="图像的路径" />图像标签的标签属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | url | 图像的路径或文件名 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（例：10px，10%） | 设置图像的宽度 |
| height | 像素（例：10px，10%） | 设置图像的高度 |
| border | 数字也可以写像素（例：1,10px） | 设置图像边框的宽度 |
| align | left(左对齐)，right(右对齐)，center(居中)默认为左对齐 | 设置图片的对齐方式(center一般在某个特定范围内才有效。例：在某个特定的标签或盒子内) |
正常的 <img src="img/pkq.png" width="100" height="100" />
带有边框的 <img src="img/pkq.png" width="100" height="100" border="3" />
有提示文本的 <img src="img/pkq.png" width="100" height="100" border="3" title="这是个皮皮的皮卡丘" />
有替换文本的 <img src="img/pkq.png" width="100" height="100" border="3" alt="图片不存在" />
效果展示：
五、特殊字符
html中有很多特殊的字符是需要特殊的处理。下面是几个特殊的字符的处理：
| 字符串 | | < | > | & | " |
|---|---|---|---|---|---|
| 代表的字符 | 空格 | 左尖括号 < | 右尖括号 > | & | 双引号 " |
六、注释标签 !-- --
在HTML中还有一种特殊的标签，那就是注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。 注释内容不会显示在浏览器窗口 中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。 语法格式：<!-- 注释语句 -->。 快捷键是：ctrl + / 或 ctrl +shift + / 。
这个也是有团队约定的，注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行。
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!!
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
