HTML 中常用的排版标签

概述

HTML页面的排版可以把它当作是在写一个Word 文档，Word 中有文字和图片，可以设置图片的位置、文字的样式和段落结构等。当然，对于前端来说，并不满足于 Word 的功能，那就可以借助 CSS 来让它变成一个PPT（给图片或者段落改变位置结构或者展示样式，以及一些动画效果），那就是 CSS 的工作了，今天只谈HTML，它只是做了架子，怎么让页面展示效果更充实，那是装修工人- CSS做的事情了，本文不牵扯。

排版标签的分类

• 偏文本类
• 偏布局类（搭架子）

文本排版类标签

1. h1～h6 - 双标签，6个等级的标题标签

用于设置文本为标题样式；
特点是文字 字号和加粗效果，切独占一行。
想必大家都写过毕业论文的word文档，你的标题段落设置一级标题、二级标题…等等

常用属性 align 设置文字的对齐方式，对应去值如下：

• align=“left” - 文字左对齐（默认）
• center - 文字居中
• right - 文字右对齐

2. span -双标签

作用：将包裹的文本独立出来，可以处理特殊的样式，默认是行内样式，在一行上从左到右排列。

3. p -双标签

作用：把文字分段展示，和标题、div标签一样，宽度默认铺满整个页面，也有 align 属性；

4. hr 和 br -单标签

把这两个放在一起其实因为它俩有点像，都是分离两段文本，并且都是单标签，且一般它俩就是光秃秃的，不加属性修饰，

• hr 是水平分割线，独占一行，可以通过 css 设置颜色、粗细等样式；
• br 是换行符，产生效果是它前后的文字分行展示；

5. 字体排版标签

• b、strong - 字体加粗
• i、 em -斜体
• s 、 del - 删除线
• u 、 ins - 下划线

布局排版类标签

1. div

网站的页面布局即 div + css，div 负责结构、布局、分块，CSS 负责样式 也是大家最熟悉的，这里不再详细展开。

2. a - 链接标签

给指定目标添加链接页面的打开方式

3. 表格标签 table 、tr、td等

早期的页面排版，现在大部分用于列表数据展示了

4. 列表标签 li

• ul 无序列表，通常用于自定义列表的布局；
• ol 有序列表，带有排序序号；-比如排行榜

5. 表单标签 - form 表单域

作用使用表单标签来实现用户信息的收集和提交