这是我参与「第四届青训营 」笔记创作活动的的第2天
1. 概述
HTML又称HyperText Markup Language，译为超文本标记语言。- 平常我们在掘金看的文章，实际上都是有
HTML和CSS渲染出来的。 - 那么如何使用HTML标签和CSS来排版文章呢，实现例如
word中效果：一级、二级标题，文本左对齐、居中、右对齐，有序、无序列表，表格, 改变文本颜色、大小、字体加粗、添加下画线、之类的效果呢？ - 首先我们来制作文章的标题：
2. 文章标题
<h1>-<h6> HTML 标题标签
标题 (Heading) 元素呈现了六个不同的级别的标题，<h1>级别最高，而<h6>级别最低。 <h1>-<h6> 它们有什么不同呢,接下来我们来看看它们的不同效果:
- 我们可以看到它们代表了不同的字体大小
使用要点
- 不要为了减小标题的字体而使用低级别的标题， 而是使用
CSS font-size属性。 - 避免跳过某级标题：始终要从
<h1>开始，接下来依次使用<h2>等等。
为什么不要为了减少字体大小而使用低级别标题以及避免跳过某级标题呢?
- 比如以下掘金文章的标题结构, 看右侧的红框中的文字,代表了一级标题,黄框中的文字代表了二级标题
- 清晰明了的标识文章的层次结构,也便于用户快速浏览内容
- 程序员也可根据文章中的标题层级,渲染出文章的目录
小DEMO-实现绿色标题和以及标题居中
3. 文章段落
- 文章段落用于展示文章的主要内容
- 我们应该使用
<p>标签来承载段落内容
<p></p>
HTML <p> 元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p>是块级元素。
使用要点
- 使用
CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者<br>元素。
小DEMO-实现首行缩进二字符以及不同的段落对齐
4. 文章中的列表
- 文章中常用的列表有无序列表和有序列表
HTML
<ul>元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
其内容的顺序是没有意义的。
使用要点
<ul>代表一组数据，数据项用<li>标签来包裹- 数据项的顺序是无意义的
HTML
<ol>元素表示有序列表，通常渲染为一个带编号的列表。
使用要点
<ol>代表一组数据，数据项用<li>标签来包裹- 数据项的顺序是有意义的
ol和ul标签可以互相嵌套
小DEMO-实现无序列表中嵌套有序列表
5. 文章中的表格
- 文章中表格使用
<table>标签来承载，<tr>代表表格中的行，<td>代表表格单元格,<th>元素定义表格内的表头单元格。
HTML的
table元素表示表格数据 — 即通过二维数据表表示的信息。
HTML
<tr>元素定义表格中的行。 同一行可同时出现<td>和<th>元素。
使用要点
- 不要使用这些标签自带的属性，如
<table>标签的border、bgcolor等属性，而应该使用CSS相应的样式代替，使结构和样式相分离。
小DEMO-实现如下所示的表格
| 标题 | 标题 |
|---|---|
| 内容 | 内容 |
| 内容 | 内容 |
| 内容 | 内容 |
| 内容 | 内容 |
6. 总结
-
通过以上学习，我们要注意合理的使用标签，尽可能不使用标签的属性来改变显示效果，而使用CSS来实现，达到各司其职，HTML 用于结构，CSS 用于美化。
-
从以上的几个小节，熟悉了常见与文章排版相关的标签，但是还有许多其他的标签
<b> <strong> <mark> <em>等等，需要我们去学习。
