网页中的标题

HTML中标题(heading)分为6级，分别是：h1、h2、h3、h4、h5、h6，编写格式如下：

运行效果：

文本标签<span>及段落标签<p>

在HTML用于显示文本的基本标签对是<span>。虽然不编写任何标签，将文字直接写于<body>标签对内也能正常显示，但这样文本就不能进行任何布局、样式和动态效果的设置，所以一般我们约定将纯文本的内容都写进<span>标签对以内。

除了将文本写在<span>标签对内，如果我们不考虑对文本进行精细的样式设置，那我们通常是将一段文字写在<p>标签对内，这样的标签叫做段落标签。

同样是用于显示文本的标签，那<span>和<p>标签对有什么区别呢？我们来编写以下代码进行测试：

我们将<span>这种在浏览器屏幕宽度以内显示文本不会换行的标签类型叫做行内标签或行级元素，将<p>这种显示文本内容会单独占据一行，同类标签之间会产生换行的标签类型叫块标签或块级元素。

要想让<span>标签产生换行效果，我们需要在该标签内容或标签外部加上一个单标签“<br>”，HTML4及以前的标准写法是“<br/>”，用以表示这是一个没有结束标签的标签元素。<br>标签的作用就是执行换行，编写多少个<br>标签，就执行多少次换行。虽然<br>标签具有换行作用，但它其实是一个“行内标签”这点需要去进行辨别。

运行效果：

当然，文本标签并不止<span>和<p>在以后的学习中我们还会接触到更多的“行内标签”和“块标签”。

关于段落标签“<p>”标签有个非常特殊的地方需要注意，就是它不能对自身进行嵌套，也就是说一对<p>内不能再去包含另外一对<p>标签，否则会导致浏览器渲染错误，生成一些新的空<p>标签，这点在以后的运用中要特别留心。

布局标签<div>

可以这样说，<div>标签是目前为止，HTML中最具代表性的标签，内业很多开发者在谈到“HTML+CSS”都会说成“DIV+CSS”。那DIV到底是什么东西呢？他具有什么强大的作用吗？

很遗憾，<div>标签是一个“块标签”，而且只是一个“块标签”，我们现在可以将“<div>...</div>”写进我们的编辑器看看它到底是什么。

通过测试我们可以看到，如果<div>标签内什么都不写，那他什么都不会显示，就算写上一段文本，那它也只是一个<p>标签而已。那为什么说她是HTML里面最具有代表性的标签呢？是因为它具有高度的可自定义性，HTML4以前规范中将它定义为一个“基本显示布局元素”，也就是说，网页内所有的内容，我们都约定根据显示内容的不同将它们分别放置于不同<div>标签对以内。

不过随着HTML技术的发展，现在HTML5中出现了更多类似于“div”的标签元素，和“div”相比，他们也并没有多出什么功能，但更加语义化，如：<header>、<footer>、<main>、<nav>、<article>、<section>、<aside>、<time>、<mark>等一系列标签，<article>和<section>在本章后续内容中会讲到。

文章标签<article>

该标签的作用和<div>十分相似，但是它会对标签内的一些带有默认样式的文本类标签进行样式调整，如：<h1>标签（<h1>标签默认的字体大小为“2em”，但放在<article>标签内会变成“1.5em”。有同类作用的标签还有：<section>、<aside>和<nav>），“W3C组织”对它的描述是：<article>标签定义外部的内容，外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自博客的文本，或者是来自论坛的文本。亦或是来自其他外部源内容，该标签的内容独立于文档的其余部分。

通过“W3C”的描述，我们应该能明白，它的作用是人为去进行区分的，实践后我们也能发现该标签从目前浏览器版本来看仍还不属于功能性标签。现在国外很多新闻信息类网站是根据其英文译意“文章、条目”之接将其作为每一篇文章的“容器”来使用。

章节标签<section>

该标签的作用同样和<div>十分相似，和<article>一样，它也会对标签内的一些带有样式的文本类标签进行样式调整，不过“W3C组织”对它的描述是：<section>标签定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。

与<article>不同的是，该标签具有一个属性“cite”该属性的值为一个“url”，用于指出该段话摘自于哪一个网站，不过现在版本的浏览器并不支持该属性，但现在至少也可作为版权纠纷时的一个说明凭证。

HTML部分代码如下：

运行效果：

<章节练习>

新建一个HTML文件，编写出一则小新闻（可直接复制网站文本），题材不限，具体要求如下：

  1. 页面包含一个“一级标题”作为主标题，正文内容可以包含在一个<article>标签对以内
  2. 正文内容分为三块，每块内容分别放置于一个单独的<section>标签对以内
  3. 每块内容需包含一个“二级标题”，和至少两个“段落”
  4. 每块内容之间需空两行、每个标题和标题、标题和段落、段落和段落之间需要空一行

其它的文本标签

除了本章所述的内容以外，还有另外一些比较实用文本标签，但从一个初学者的角度来讲不需要一开始就记住本节内容的标签，只需要在日后的练习中慢慢的尝试并逐渐的熟悉即可。

<i>标签对
用于给文本添加斜体效果。 示例： 这是一段需要倾斜的字体 结果：
这是一段需要倾斜的字体。
<b>标签对
用于给文本添加粗体效果。示例： 这是一段需要加粗的字体 结果：
这是一段需要加粗的字体
<strong>标签对
和<b>标签对一样，同样是具有加粗效果，但它的语义是重要的内容。示例： 这是一段比较重要的内容。 结果：
这是一段比较重要的内容。
<em>标签对
和<i>标签对一样，同样是具有斜体效果，但它的语义是强调。示例： 这是一段需要强调的内容。 结果：
这是一段需要强调的内容。
<address>标签对
这个标签和上述的<strong>和<em>标签对一样，属于“语义标签”，它表示“通讯地址信息”，它显示出的文本仍然为斜体，这个标签是一个“块级元素”，所以说他会独占一行，而里面的内容可以通过<br>标签进行手动换行。示例： 我的通讯信息：
四川省成都市的某个地方
姓名：欧冷斯
手机：18116657687
邮箱：aulence@foxmail.com

欢迎没事来骚扰，有事就不用来了！ 结果：
我的通讯信息：
四川省成都市的某个地方
姓名：欧冷斯
手机：18116657687
邮箱：aulence@foxmail.com

欢迎没事来骚扰，有事就不用来了！
<blockquote>标签对
用于定义一段引用，拥有一个“cite”属性，可以在属性值里填写原文的出处。该标签同时是一个“块级元素”，在布局上它和<p>标签有些相似，就是它会和周围其它一些内容留下一定间距，所以在布局的时候要稍加注意。当然，在我们后面学习了CSS的知识后，这些间距都是可以手动调整或消除的。示例： 每当看到这茫茫多的代码，不禁让我想起一首词：
春花秋月何时了，往事知多少？小楼昨夜又东风，故国不堪回首月明中！
雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。
 结果：
每当看到这茫茫多的代码，不禁让我想起一首词：
春花秋月何时了，往事知多少？小楼昨夜又东风，故国不堪回首月明中！
雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。
<code>标签对
用于显示计算机代码，属于语义标签。某些浏览器的翻译插件不会翻译该标签以内的文本。例如：<code>var a = 1,b = 2; alert(a + b);</code>
<time>标签对
用于显示时间，需要注意虽然该标签属于语义标签，且不是HTML5才出现的标签，但是它不支持IE9以下版本的浏览器。到HTML的第5版该标签有了一个可用的“datetime”属性，用于增加我们后续程序对其操作的便捷性，目前在HTML页面中不会有其它表现。示例： 我需要在 的时候睡个午觉，不然我连我的 都记不得了。 结果：
我需要在 的时候睡个午觉，不然我连我的 都记不得了。
<small>标签对
用于定义更小的字体，一般可用于附带的说明文本、标题旁的副标题等。例如：

《论沧海横流 这部动漫到底还更不更新啦》

 结果：

《论沧海横流 这部动漫到底还更不更新啦》

<sub>标签对
用于定于元素的下标。例如： 水的主要化学成分为H2O 结果：
水的主要化学成分为H2O
<sup>标签对
用于定义元素的上标。例如： 据专家资料显示，每25m3的水可以淹死一头大象 结果：
据专家资料显示，每25m3的水可以淹死一头大象。
<pre>标签对
在HTML中，无论多少个空格或者换行符都会被认为是一个空格，也就是说当你在编辑器里敲下第一个字符，然后按几次回车键后输入第二个字符，在浏览器端的网页上仍然只会在这两个字符间显示一个空格。而<pre>标签对的作用就是保留编辑器中的所有空格和换行符。如例： <pre>这里有一 个空格，这里有3个 空格。</pre> 效果如下：
这里有一 个空格，这里有3个   空格。

如果我们不想使用这个标签，而单纯的只想让字符之间多留几个空格，那我们需要使用HTML字符实体中的“&nbsp;”来表示（注意后面的分号不能省，它表示一个字符实体的结束）。例如：“超   级”（中间包含三个空格，不同的系统字体显示空格的实际宽度会有所不同），在HTML中的写法就是“超&nbsp;&nbsp;&nbsp;级”。（“字符实体对应表”请见本章“常用的HTML字符实体”一节，可通过网页内容区域右上角的“Anchor”锚点导航按钮进行快速跳转）
<del>标签对
用于删除一文本，通常需要配合<ins>标签对来插入一段新的文本。（示例见“<ins>标签对”的内容）
<ins>标签对
同于插入一段文本，通常配合<del>标签对使用。如例： 至从使用了VSCode编辑器，我们终于可以更愉快的偷懒编码了。 结果：
至从使用了VSCode编辑器，我们终于可以更愉快的偷懒编码了。
<s>标签对
用于删除一段文本，它和<del>标签的区别在于语义上，该标签只是用于纯粹的划掉一段文本而已，而不需要插入新文本。如例： 至从使用了VSCode编辑器后，我们终于可以高效的且懒洋洋的躺着编码了。 结果：
至从使用了VSCode编辑器后，我们终于可以高效的且懒洋洋的躺着编码了。
<u>标签对
为文本加上下划线，和<ins>标签的区别同样是语义上的区别，只是单纯的给文本添加一条下划线。如例： 我们不生产代码，我们只是代码的搬运工。 结果：
我们不生产代码，我们只是代码的搬运工。
<hr>标签
它是一个单标签，它可以为页面添加一条水平的分割线，可以用来作为内容的分割线，也可以用作章节标题的长下划线。如例： 成功捕获到羊 × 3
成功捕获到兔子 × 5
成功捕获到大象 × 8 结果：
成功捕获到羊 × 3
成功捕获到兔子 × 5
成功捕获到大象 × 8
<ruby> - <rt>组合标签对
<ruby>和<rt>是一组“父子标签”不能单独使用，它们是用于东南亚地区给文字注音使用的。由于是是HTML5标签，它不支持IE9以下版本的浏览器使用，而其它主流浏览器均能正常使用。代码的写法： 魑 wo 魅 bu 魍 ren 魉 shi 结果：
魑wo魅bu魍ren魉shi

当然这些仍然不是HTML到第5版为止的全部文本标签，本节内容从浏览器的兼容性以及W3C推荐的角度出发，已经去除了那些已经不被HTML5支持或者向来对浏览器支持就不佳的标签，本节中所列标签对现在版本的浏览器均有良好的兼容性，可以放心使用（明确说明了不支持的浏览器的标签除外）。

常用的HTML字符实体

“HTML字符实体”又称作“HTML实体”，一种用特定的符号来表示浏览中指定符号的编码符。在HTML当中，很多符号都需要用“HTML实体”来进行替换，否则无法正常显示内容，或者影响到已有标签代码的显示功能。比如，小于“<”和大于“>”这两个符号在HTML直接使用会被编译器认为是标签的括号，会对代码造成影响。以下表格已经列出一些比较常用的字符实体，以供大家在需要用到的时候进行参考。

显示结果 描述 实体名称 实体编号（十进制）
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
≤ 小于等于 &le; &#8804;
≥ 大于等于 &ge; &#8805;
≈ 约等于 &ap; &#8776;
≠ 不等于 &ne; &#8800;
° 度（角度） &deg; &#176;
• 大圆点 &bull; &#149;
· 小圆点 &middot; &#183;
& 和号 &amp; &#38;
∞ 无穷 &infin; &#8734;
" 引号 &quot; &#34;
' (IE不支持) 撇号 &apos; &#39;
¢ 分 &cent; &#162;
£ 磅 &pound; &#163;
¥ 人民币 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;
‰ 千分率 &permil; &#8240;
½ 二分之一 &frac12; &#189;
⅔ 三分之二 &frac23; &#8532;
¼ 四分之一 &frac14; &#188;
¾ 四分之三 &frac34; &#190;
↑ 上箭头 &uarr; &#8593;
↓ 下箭头 &darr; &#8595;
← 左箭头 &larr; &#8592;
→ 右箭头 &8594; &#190;
↔ 左右箭头 &harr; &#8596;
↕ 上下箭头 &varr; &#8597;
↗ 右上箭头 &nearr; &#8599;
↘ 右下箭头 &searr; &#8600;
↙ 左下箭头 &swarr; &#8601;
↖ 左上箭头 &nwarr; &#8598;
↵ 回车键 &crarr; &#8629;
⌈ 左上限 &lceil; &#8968;
⌉ 右上限 &rceil; &#8969;
⌊ 左下限 &lfloor; &#8970;
⌋ 右下限 &rfloor; &#8971;
¿ 反问号 &iquest; &#191;
☆ 空心五角星 &star; &#9734;
★ 实心五角星 &starf; &#9733;
○ 空心圆 &cir; &#9675;
● 实心圆 &#x25CF; &#9679;
□ 空心方块 &squ; &#9633;
■ 实心方块 &#x25A0; &#9632;
☒ 未选中 &#x2612; &#9746;
☑ 选中 &#x2611; &#9745;
♂ 男性 &male; &#9794;
♀ 女性 &female; &#9792;
☺ 高兴 &#x263A; &#9786;
☹ 难过 &#x2639; &#9785;
♠ 黑桃 &spades; &#9824;
♥ 红心 &hearts; &#9829;
♣ 梅花 &clubs; &#9827;
♦ 方块 &diams; &#9830;

对于字符实体的使用需要注意的一点就是，它对大小写敏感，所以在编写的时候注意严格按照对照表中的格式编写即可（通常为小写英文字母）。如上所述，本节中提供的字符实体是比较常用的，如果你对更多的字符实体感兴趣可以查看W3School提供的内容及周边章节。

另外需要提出一点我们现在虽然接触不到但以后会使用到的知识点。虽然平时我们都是比较多的使用表格中的第三列“实体名称”，而第四列的“实体编号（十进制）”却较少使用，但当以后在接触到CSS的“content”属性后，表格中的第四列的这些十进制的编码就有作用了。“content”属性可以让文本、图片等内容在CSS文件内编写，但是HTML实体却不能直接在“content”属性内使用，需要将实体编号的“十进制”转换为16进制方可使用。如表示“空格”的实体，它的十进制编号为“&#160;”，而我们只取“160”的数值部分，将其转换为16进制数，在“content”属性中应该就写为“content: "\a0";”，前面的转义符“\”不能省略，它表示转义后续出现的16进制数。如果你对10进制到16进制的转换不是很了解，那你可以直接利用JavaScript的“toString(Hex)”方法进行转换：

var num = 160; num.toString(16);

您可以打开浏览器，按下键盘的F12，或者按下Ctrl+Shift+I的组合键打开“浏览器开发者工具”，找到标签栏上的“Console”，并将上面代码内容复制粘贴到这里面后按回车键运行即可得出结果（Google Chrome浏览器不用按下回车也能预览结果）。

图片加载中

你还可以将该方法“参数”设置为“2~36”之间的任意数值来获得任意进制的数。当然在计算机语言中，常见的进制数只有“二进制”、“八进制”，“十进制”和“十六进制”，而“二进制数”是计算机最基本的进制数，它是计算机实现一切功能的“始祖”。