HTML5 文本标记

Posted 2020-06-17

html5 文本标记

文本标记概述

文本标记的作用

文本是网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示，包含在标记中的文本则会被显示为标记所拥有的样式：

• 特殊字符
• 注释
• 标题元素
• 段落元素
• 换行元素
• 分区元素
• ...

文本与特殊字符

在网页中输入多个空格或制表符会被压缩成单个空格，即只显示一个空格。特殊字符(如空格)，需要进行转义才能正常显示(字符实体)。

•   ：一个空格
• > ： > greater than
• &lt; ： < less than
• &copy; ： ©
• ...

使用文本标记

文本样式

文本样式的作用是对文本进行修饰：

• <b>...</b>：加粗
• <i>...</i>：倾斜
• <u>...</u>：下划线
• <s>...</s>：删除线
• ^...：上标
• _...：下标

标题元素 <hn>

标题元素让文字以醒目的方式显示，往往用于文章的标题。

<h#> ... </h#>
# = 1,2,3,4,5,6

<h1></h1>一级标题 ，字最大。

<h6></h6>六级标题，字最小。

段落元素 <p>

<p> 元素提供了结构化文本的一种方式，<p> 元素中的文本会用单独的段落显示。特点如下：

• 与前后的文本都换行分开
• 添加一段额外的垂直空白距离，作为段落间距

换行元素 <br>

使用 <br> 元素在任何地方创建手工换行。

分区元素 <span> 和 <div>

分区元素用于为元素分组，常用于页面布局。

• 行分区

<span></span>
主要作用是包裹文本，做文本的样式。

• 块分区

<div></div>
div的主要工作，就是布局，没有显示效果，主要用于页面的布局或分组。

行内元素与块级元素

• 块级元素

默认情况下，块级元素会独占一行，即元素前后都会自动换行，如 <p>、<div>、<hn>。

特点：修改文本样式。

• 行内元素

不会换行，可以和其他行内元素位于同一行，如 <span>、<b>、<i>、<u>。

特点：主要场合是在布局上。

注意：

1. 所有的行内元素不允许嵌套块级元素；
2. 块级元素中可以嵌套所有的行内元素；
3. p 标记是不允许嵌套其他块级元素；
4. div 允许嵌套所有的元素；
5. div 没有特殊情况是不允许被其他元素嵌套；
6. div 能嵌套 div；
7. td 能嵌套 div；
8. li 能嵌套 div；
9. dt，dd 能嵌套 div。

分隔线元素 <hr>

<hr> 元素用于在页面上创建一条水平线，常用于将页面的不同部分隔开。

属性：

size 尺寸
width 宽度
align 水平对齐方式
color 颜色

预格式化 <pre>

保留源文档中的格式，即保留原来换行和文本中的空白。