从零开始学web开发之html5-3.段落与文字标签

1.标题标签-header

• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>

一共有六个级别的标签，分为h1~h6,h是英文header的简称。
h1的重要性最高，h1代表的是本页面的题目,一般一个页面只能有一个。
标题标签的级别越高，字体越大.

---

2.段落标签-paragraph

• <p></p>

用段落p标签来标记一段文字。
段落标签会自动换行，并且段落与段落之是有一定的空隙。

---

3.换行标签-break

• <br/>
  

  ---

4.文本格式化标签

<1>粗体标签

1. <b></b>
2. <strong></strong>

虽然两者都具有加粗的效果,但尽量使用strong标签，因为它更具有语义性(即从单词意义推断出该标签的用法，更加便于记忆)

<2>斜体标签

1. <i></i>
2. <cite></cite>,引用
3. <em></em>,emphasized,强调

尽量用<em>标签，其它两个用得极少。

<3>上标标签-superscripted

• <sup></sup>

假如想要显示数学公式平方，则可以使用上标标签,

a<sup>2</sup>表示a的平方。

<4>下标标签-subscripted

想要显示化学式，可以使用下标标签,subscripted

二氧化碳, CO<sub>2</sub>

<5>大小字号标签,big&small

实现对文本的大号字体用<big></big>
小号字体用<small></small>

<big>大号字体</big>
<small>小号字体></small>

大字号与小字号标签在实际开发中极少使用，因为这两个是纯样式标签，可以用CSS来控制字体的大小。

<6>删除线标签s

用来呈现那些不再准确或不再相关的内容,<s></s>

CSS替代方案:
text-decoration:line-through

<7>下划线标签u

对文本实现下划线标记使用<u></u>

CSS替代方案:
text-decoration:underline;

---

5.水平线标签-horizontal rule,自闭合标签

<hr/>

---

6.div标签-division

• <div></div>
  作用：为Html文档内大块的内容提供结构和CSS样式的控制。
  div即division(分区),用来划分一个区域，故又称为区域标签。
  可放入除头部标签外的所有body标签：段落文字、表格、列表、图像等。

---

7.网页特殊符号

<1>.网页中的空格

在HTML中直接键入两个空格是无效的，显示时排版会忽略掉，所以如果要在行首进行缩进，就必须用代码的形式在HTML中实现空格的效果。

空格的HTML代码:  ,以&开始,;结束。

CSS替代方案:
对于段落首行缩进使用text-indext属性来控制。

<2>.特殊符号

特殊符号	名称	代码
“	双引号(英文)	"
‘	左单引号	‘
’	右单引号	’
×	乘号	×
÷	除号	÷
〈	小于号	<
〉	大于号	>
&	与符号	&
-	长破折号	—
｜	竖线	|
€	欧元符号	€
£	英镑符号	£

也可以直接输入特殊符号，浏览器中显示效果是一样的。

---

8.自闭合标签

HTML标签分为两种:

• 一般标签,一般标签有开始符号和结束符号，可在标签内部插入其它标签或文字。
• 自闭合标签,自闭合标签由于没有结束符号，没办法在内部插入其它标签或文字，只能定义自身的一些属性。
• 常见自闭合标签

标签	说明
<meta/>	定义页面的说明信息，供搜索引擎查看。
<link/>	用于连接外部的CSS文件或脚本文件
<base/>	定义页面所有链接的基础定位
<br/>	用于换行
<hr/>	为水平线
<input>	用于定义表单元素
<img>	为图像标签

---

9.块元素和行内元素

Html标签根据表现形式可分为两类，块元素与行内元素

<1>.块元素

浏览器默认显示状态下将占据整行，即是自带换行符号，不能直接跟在其它元素前面或后面显示,排斥其它元素与其位于同一行。块元素一般为矩形，可以容纳行元素和其它的块元素

特点为:
1. 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
2. 块元素内部可以容纳其他块元素或行内元素
3. 常见的块元素。

块元素	说明
div	div层
h1~h6	1到6级标题
p	段落，会自动在其前后创建一些空白
hr	分割线
ol	有序列表
ul	无序列表

<2>.行内元素

与块元素相反，在网页中可以与其它行内元素在同一行中叠加效果显示,行内元素默认显示状态可以与其它行内元素共存在同一行。

特点：
1. 可以与其他行内元素位于同一行。
2. 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
3. 常见行内元素

行内元素	说明
strong	加粗强调
em	斜体强调
s	删除线
u	下划线
a	超链接
span	常用行级区域，可定义文档中的行内元素
img	图片
input	表单

10.示例链接,右键可查看源码

示例网页链接