文章相关的元素

标题元素和段落元素

元素	类别	语义	属性	备注
`h1~h6`	块级	标记文章标题或网页标题		标题元素之间不可互相嵌套
`p`	块级	标记段落

约定：一个网页只有一个 h1 元素

练习：

西游记

吴承恩

第一回　灵根育孕源流出　心性修持大道生

    诗曰：混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿蒙，开辟从兹清浊辨。
    覆载群生仰至仁，发明万物皆成善。欲知造化会元功，须看西游......

第二回　悟彻菩提真妙理　断魔归本合元神

    话表美猴王得了姓名，怡然踊跃，对菩提前作礼启谢。那祖师即命大众引孙悟空出二门外，教他洒扫应对，进退周旋之节，众仙奉行而出。悟空到门外，又......

列表

无序列表

元素	类别	语义	属性	备注
`ul`	块级	标记一个没有顺序的列表		内容只能是一个或多个 `li` 元素
`li`	块级	标记列表的其中一项

ul 元素在 HTML 使用非常频繁，大到导航栏，小到列举条目，比如逛超市的小票清单：

xxx 超市

苹果 1斤
橘子 1斤
灯泡 1个
口香糖 1盒

有序列表

元素	类别	语义	属性	备注
`ol`	块级	标记一个有顺序的列表		内容只能是一个或多个 `li` 元素
`li`	块级	标记列表的其中一项	value

ol 元素属性：

属性	作用	值类型	默认值	备注
`reversed` ☹	设置是否倒序	布尔属性		只是编号倒序，不是内容都跟着倒序
`start` ☹	设置初识值	数字	`1`
`type` ☹	设置编号类型	`a`、`A`、`i`、`I`、`1`	`1`	`a` 小写英文字母 `A` 大写英文字母 `i` 小写罗马数字 `I` 大写罗马数字 `1` 数字编号

有序列表适合用在排行榜，步骤条，或者含有权重的列表中（列表含有顺序），比如小学成绩单：

xxx 小学一年一班期末成绩单

张三 98
李四 95
王二 88
麻子 86

有序列表和无序列表的选择

判断列表项是否强调步骤或者权重，强调就选择有序列表，不强调就选择无序列表。

嵌套列表

虽然 ul 和 ol 元素内容只能是 li 元素，但是 li 元素的内容并没有被限制，在 li 中还可以再次嵌套列表，比如目录：

《文化苦旅》

余秋雨

    第一部分 如梦起点

        牌坊
        寺庙
        信客

    第二部分 中国之旅

        我的山河
        都江堰
        道士塔
        ......

    第三部分 世界之旅

        漂泊者
        这里真安静
        ......

强调

通常一些重要的句子或者单词需要在文本中被标记，用来强调文本的元素有两个：

元素	类别	语义	属性	备注
`em`	内联	强调一个单词或者语句		普通强调
`strong`	内联	强调一个单词或者语句		重点强调

strong 元素比 em 的强度程度更高。

练习：

老板要碗牛肉面，要大碗，千万别放辣。

删除插入

有时候我们需要去标记文章的改动情况，在原有基础上进行修改，并保留修改痕迹。

元素	类别	语义	属性	备注
`ins`	内联	标记新插入的内容
`del`	内联	标记已经删除的内容

比如：

<p>
  <del>100*1=101</del>
</p>
<p>
  <ins>100*1=100</ins>
</p>

ins 元素默认情况下多了一条下划线，del 元素默认情况下多了删除线。

表象元素

还有一类文本元素的语义就是表示某种样式，只是单纯表示文本样式，这类元素叫做表象元素，因为没有确切的语义，并不推荐使用（如果真的需要修改样式，应该使用 CSS）。

元素	类别	语义	备注
`i` ☹	内联	标记文本为斜体	样式同 `em` 元素
`b` ☹	内联	标记文本为粗体	样式同 `strong` 元素
`s` ☹	内联	标记中划线	样式同 `del` 元素
`u` ☹	内联	标记下划线	样式同 `ins` 元素

换行和水平线

元素	类别	语义	属性	备注
`br`	内联	换行		空元素
`hr`	块级	水平分割线，用来分隔文章的内容切换，不强制使用		空元素

代码元素

元素	类别	语义	属性	备注
`pre`	块级	保留原始代码格式		`pre` 元素内的文本会原样渲染，渲染每个空格与换行
`code`	内联	标记一段代码