redev

本文主要内容

本文涉及的排版标签主要包括：

HTML4 章节标签：<h> 系列、<p>、<div>、<span>
HTML5 语义化标签：<header>、<main>、<aside>、<footer>、<section>、<article>、<nav>
表格：<table>（包括<thead>、<tbody>、tfooter、<tr>、<th>、<td>）
列表：<ol> + <li>、<ul> + <li>、<dl> + <dt> + <dd>
引用：<quote>、<blockquote>
代码块：<code>、<pre>
HTML 废弃的标签：<hr />、<br />

本文只介绍常用排版标签。更多标签，可以查看 HTML 元素参考 - HTML | MDN (mozilla.org)。

本文快速浏览：

（1）假如你想快速了解一些 HTML5 语义化标签，可以看这个示例：使用 HTML5 标签的语义来布局。

（2）假如你想对比下 div+css 布局，这里提供了一个案例：div + css 实现一个简历封面。

（3）关于 table 表格，这里有个实践案例：用 table 展示行星数据。

（4）关于列表 & 列表嵌套，可以点击无序、有序、自定义列表，以及列表的相互嵌套查看效果，我们也可以通过 list-style-type 设置各种类型的列表编号。

（5）这里有个简单案例内联引用 & 块级引用，能帮你了解下引用标签。

（6）我们还可以通过 code + pre 组合书写等宽字体、保留空格、tab、缩进与换行，并代表这是代码格式的文本。

HTML 注释

HTML 注释的格式如下，在编辑器里按下 ctrl+/ 即可：

<!-- 我是 html 注释  -->

文本标签 vs 块级标签

HTML 标签是分等级的，HTML 将所有的标签分为两种：

文本级标签：也叫内联元素、行内元素，如 <p>、<span>、<a>、<B>、<i>、<u>、<em>。文本级标签里只能放文字、图片、表单元素（但 <a> 标签里不能放 <a> 和 <input>）。在行内元素 - HTML | MDN (mozilla.org) 列举了常用的文本级标签。
块级标签：也叫容器级标签、块级元素，如 <div>、<h>系列、<li>、<dt>、<dd>。块级标签里可以放置任何东西，在块级元素 - HTML | MDN (mozilla.org) 上列举了常用的块级标签。

此外，内联元素的宽高完全由内部填充而来，直接修改是不生效的，我们需要设置 display: inline-block;把内联元素转换为行内块元素，才能修改长度、高度，这点在 css 篇章会讲；

而块级元素宽高是可以直接修改的，默认块级元素会独占一行，我们也可以设置 display: inline;来让它们像内联元素那样只占据自身宽高的界面，不独占一行，这点在 css 篇章会讲。

HTML4 章节标签

标题标签 `<h>`系列

标题使用<h1>至<h6>标签进行定义，是块级标签，独占一整行。

<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>H1：千古壹号，永不止步</h1>
    <h2>H3：千古壹号，永不止步</h2>
    <h3>H3：千古壹号，永不止步</h3>
    <h4>H4：千古壹号，永不止步</h4>
    <h5>H5：千古壹号，永不止步</h5>
    <h6>H6：千古壹号，永不止步</h6>
</body>
</html>

效果演示：

段落标签 `<p>`

是英语“paragraph“缩写。

作用：可以把 HTML 文档分割为若干段落。就如同我们平常写文章一样，整个网页也可以分为若干个段落。

代码举例：

<p>This is a paragraph</p>
<p>This is another paragraph</p>

属性：

align="属性值"：对齐方式。属性值包括 left center right。

属性举例：

注意！！

从学习 <p> 的第一天开始，就要牢牢记住：**p 标签是一个文本级标签，p 里面只能放文字、图片、表单元素**。其他的一律不能放。

错误写法：（尝试把 h 放到 p 里）

<p>
        我是一个小段落
        <h1>我是一级标题</h1>
    </p>

网页效果如下：

上图显示，浏览器不允许你这么做，我们使用 Chrome 的F12审查元素发现，浏览器自己把 p 封闭掉了，不让你去包裹h1。

`<div>`和`<span>`标签

想必你应该听说过“div + css”布局：div 标签负责布局、结构、分块，css 负责样式。这里有个 “div + css”布局的案例：div+ css 实现一个简历封面。

div 和 span 是非常重要的标签：

div 的语义是 division（“分割”），意思是把网页分割成一块块，但是每个 div 会独占一整行；
span的语义是“范围、跨度”，和 div 作用一致，但是不会独占一整行。

div 是典型的块级标签，span 则是典型的文本标签。它们的详细区别，我们在上面文本标签 vs 块级标签那一章讲到过。

但是，div + css 布局在复杂页面上的开发体验很糟糕，在大量的 div 之中我们很难分清某个 div 具体负责页面框架的哪个部分。

后来 HTML5 推出了“语义化”标签，顾名思义，通过标签名就能知道标签的职责，可以帮助我们理清页面框架。下面我们介绍排版相关的 HTML5 语义化标签。

HTML5 语义化标签

面试中喜欢问你掌握了哪些 html5 语义化标签

什么是语义化

是一种写 html 标签的方法论。

具体做法 就是遇到标题就用 <h1> 到 <h6>，遇到段落用<p>，遇到文章用 <article>，主要内容用 <main>，边栏用 <aside>，导航用 <nav>，等等（其实就是找到中文对应的英文）。

优点：简单来说，适合搜索引擎检索，也便于人类阅读，和团队维护。

语义化标签

查询文档：google 搜索 HTML MDN

这里有一个简单的应用案例：HTML5 语义化标签示例

列举几个常用的：标题 <h1> 到 <h6>，章节 <section>，文章 <article>，段落 <p>，头部 <header>，脚部<footer>，主要内容 <main>，旁支内容 <aside>，导航用 <nav>。

其中：（1）header 用于展示介绍性内容，包含标题元素或其他元素，比如 Logo、搜索框、作者名称，等等；

（3）main 主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成；

（4）aside 通常表示侧边栏或者标注框 (call-out boxes)；

其他内容排版标签

表格 `<table>`

这里有个示例：用 table 展示行星数据

表格涉及的标签比较多，但是我们可以这么理解：table建表可以视作一行一行建单元格并填充数据

（1）结构上，分为表格头部<thead>、表格主体<tbody>、表格尾部（可以没有）<tfooter>；

（2）我们对每个结构，按一行一行来画（<tr> 表示一行）；

（3）在每一行，对于表头部分用 <th> 填充一格，对于表格主体就用 <td> 填充一格。

<table>
    <caption></caption>   //表格的标题
    <thead>  //表头
        <tr> //新建一行单元格
            <th>表头数据，加粗</th> //填充表头
        </tr>
    </thead> 
    <tbody>  //表身
        <tr> //新建一行单元格
            <td>/行里数据，不加粗</td> //填充表身
        </tr>
    </tbody>
    <tfoot> //表尾
    </tfoot> 
</table>

tr=table row 新建一行单元格 th=table head 填入的文本内容加粗显示，视为表头 td=table data 填入的文本内容不加粗

`<table>` 的属性

(1) table-layout

auto 自动表格布局，表格及其单元格宽度取决于填充的内容（个性化定制）； fixed 等宽布局（尽量平均）。

(2) border-collapse

table 默认的边框样式是有间隙的，用 border-collapse: collapse; 可以合并消除间隙 (这句代码可以写进 css reset)

(3) cellspacing

单元格和单元格之间的距离（外边距），像素为单位，默认情况下的值为0。

(4) dir

HTML 标签的全局属性，单元格内容的排列方式 (direction)，可以取值：ltr：从左到右（left to right，默认）；rtl：从右到左（right to left）。

`<tr>` 的属性

(1) dir

HTML 标签的全局属性，单元格内容的排列方式 (direction)，可以取值：ltr：从左到右（left to right，默认）；rtl：从右到左（right to left）。

(2) height：一行的高度

`<td>` 的属性

colspan：横向合并。例如 colspan="2" 表示当前单元格在水平方向上要占据两个单元格的位置。

rowspan：纵向合并。例如 rowspan="2" 表示当前单元格在垂直方向上要占据两个单元格的位置。

列表

列表嵌套

这里有个示例，展示：无序、有序、自定义列表，以及列表的相互嵌套。

设置列表项的编号类型

HTML5 之前可以通过 type 属性设置编号类型，而HTML5 建议通过 list-style-type 来设置。

这里有个示例：list-style-type 设置各种类型的列表编号，展示了20多种类型。

取消缩进

列表内容默认会缩进，可以通过如下 css 设置取消缩进：

某列表 {
  list-style: none;
  margin: 0;
  padding: 0;
}

有序列表 `<ol>`+ `<li>`

ol：即 order list，表示有序列表；

li：即 list item，表示列表项，注意它是块级元素，可以嵌套其它标签，比如再嵌套一个列表。

属性

（1）start：指定列表项的起始编号，默认从1开始。这个属性在 HTML4 中被弃用，但 HTML5 中重新引入。

（2）reversed：指定列表倒序（编号 9，8，7.....）

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

无序列表 `<ul>`+`<li>`

ul：即 unorder list，表示无序列表;

li：没什么好说的，和上面一样。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

自定义列表 `<dl>`+`<dt>`+`<dd>`

通常在有标题，然后标题下对应有若干列表项内容的场景下使用 dl（define list 自定义列表）。

<dl>
  <dt>我是列表的标题</dt>
  <dd>我是列表的内容1</dd>
  <dd>我是列表的内容2</dd>
</dl>

效果如下：

真实案例：（京东最下方）

上图中的结构如下：

<dl>
    <dt>购物指南</dt>
    <dd>
        <a href="#">购物流程</a>
        <a href="#">会员介绍</a>
        <a href="#">生活旅行/团购</a>
        <a href="#">常见问题</a>
        <a href="#">大家电</a>
        <a href="#">联系客服</a>
    </dd>
</dl>
<dl>
    <dt>配送方式</dt>
    <dd>
        <a href="#">上门自提</a>
        <a href="#">211限时达</a>
        <a href="#">配送服务查询</a>
        <a href="#">配送费收取标准</a>
        <a href="#">海外配送</a>
    </dd>
</dl>

京东商品分类如下：

dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

引用标签 `<q>`、`<blockquote>`

这里有个示例：内联引用 & 块级引用

<q>：

内联引用，引用的内容(如“名言”)和标签前面的内容处同一行；
另外，这个标签是用来引用短的文本，不要引入换行符；对长的文本，可以用<blockquote>；

拥有 cite 全局属性，意在指出被引用文本的源文档、源信息。

<p>Everytime Kenny is killed, Stan will announce
   <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
     Oh my God, you/they killed Kenny!
   </q>.
</p>

<blockquote>：

块级引用，换行显示引用的内容；

用来引入长文本，同样拥有 cite 全局属性。

<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>Avian carriers can provide high delay, low
  throughput, and low altitude service.  The
  connection topology is limited to a single
  point-to-point path for each carrier, used with
  standard carriers, but many carriers can be used
  without significant interference with each other,
  outside of early spring.  This is because of the 3D
  ether space available to the carriers, in contrast
  to the 1D ether used by IEEE802.3.  The carriers
  have an intrinsic collision avoidance system, which
  increases availability.</p>
</blockquote>

短语标签 `<code>`、预定义标签`pre>`

这里有个示例：code + pre 组合

`<code>`

<code> 元素呈现一段计算机代码，或者在源代码中才会出现的特殊文本样式。通常情况下，它只是把文本变成等宽字体显示，但它暗示这段文本是源代码，将来浏览器可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

<p>比如在word中: l和m不等宽</p>
<code>此时: l和m等宽</code>
<code>支持显示代码: console.log("hello world!")</code>

如果只是想让字体等宽，可以用 <tt> 标签；如果想在严格限制为等宽字体的文本中显示代码，那么可以使用 <code> + <pre> 的组合（<pre> 标签可以保留缩进、tab、换行）。

`<pre>`

<pre> 元素表示预定义格式文本。该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

此外，在初识HTML 这篇文章里，我们说过，html 对 tab、回车换行 均不敏感，会把多个 tab、换行均识别成一个空格。

而 <pre> 标签可以弥补这个需求：保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）。效果演示：

说明：网页排版过程中，<pre>标签几乎用不着；但是在一些特定场景，比如开发一个支持 markdown 语法的笔记本应用，我们可以用 <code> + <pre> 的组合，让某块区域的笔记可以支持书写代码。

HTML 废弃的标签

HTML 现在只负责语义，而不负责样式。所以早前那些包含样式的标签，因为干涉到 css 的样式声明，都已经被废弃。

比如：

水平分割线标签 <hr />，现在用 css 设置 border 来实现分割。
换行标签：<br />，现在文本内容需要换行基本都是因为另起段落，故用 <p> 标签；而其它换行也可以用 css 布局实现。

Loading...

本文主要内容

HTML 注释

文本标签 vs 块级标签

HTML4 章节标签

标题标签 <h>系列

段落标签 <p>

<div>和<span>标签

HTML5 语义化标签

什么是语义化

语义化标签

其他内容排版标签

表格 <table>

<table> 的属性

<tr> 的属性

<td> 的属性

列表