24

HTML5 与 CSS3 基础语法自学教程（十三）

 4 years ago
source link: https://mp.weixin.qq.com/s/OF4D7khR12-e4ZaYXDgTQw
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

本文首发于 【前端课湛】 微信公众号。可以在微信里搜索【 前端课湛 】关注，第一时间看文章！

导读：本小节主要讲解有关 结构化元素 的内容，其中包含了什么是结构化元素，以及一系列具体的结构化元素的语法和用法。通过本小节的学习，可以很好地掌握结构化元素的概念以及具体用法。结构化元素也是网页开发的基础内容之一。

什么是结构化元素

结构化元素就是指 HTML 元素中具有明确含义和作用的元素，例如 <p> 元素表示段落。相对于 HTML 4.01 版本而言，HTML5 版本新增了一系列结构化元素。

如下列表所示展示了部分 HTML 4.01 版本的结构化元素：

  • 标题元素（ h1 ~ h6 ）

  • 段落元素（ p ）

  • 粗体元素（ b ）

  • 斜体元素（ i ）

  • 上标元素（ sup ）与下标元素（ sub ）

  • 换行符（ br ）

  • 水平线元素（ hr ）

如下列表所示展示了部分 HTML5 版本新增的结构化元素：

  • article 元素

  • section 元素

  • nav 元素

  • aside 元素

  • header 元素

  • main 元素

  • footer 元素

HTML 4.01 版本的结构化元素

标题元素

HTML 标题元素具体是指 <h1> ~ <h6> 元素，其呈现了 6 个不同级别的标题， <h1> 元素级别最高， <h6> 元素级别最低。

通过实际使用标题元素，浏览器运行之后呈现的默认效果是 <h1> 元素字体最大，然后依次减小， <h6> 元素字体最小。如下示例代码所示： 

<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h3>这是标题三</h3>
<h4>这是标题四</h4>
<h5>这是标题五</h5>
<h6>这是标题六</h6>

上述示例代码运行效果如下图所示：

32YBnar.jpg!web 01-01.png

如上述示例运行效果所示，标题元素具有以下特点：

  • 默认呈现效果是 h1 元素字体最大，然后依次减小， h6 元素字体最小。

  • h1 ~ h6 元素每个元素独占一行，也就是说， h1 ~ h6 元素呈现垂直方向排列规则。

关于标题元素在开发中的使用时需要注意如下要点：

  • 对于搜索引擎抓取 HTML 页面的内容， h1 元素仅次于 title 元素。为了可以被搜索引擎抓取，建议一个 HTML 页面只包含一个 h1 元素。

  • 不要为了减小标题的字体而使用低级别的标题， 而是通过使用 CSS font-size 属性实现。

  • 避免跳过某级标题，始终要从 h1 元素开始，依次使用 h2 元素、 h3 元素、… …

例如如下示例代码展示的就是错误的用法：

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

例如如下示例代码展示的就是正确的用法：

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

段落元素

HTML <p> 元素表示一个段落，该元素通常呈现出当前段落的文本与其他段落的文本之间会以空白进行隔离。如下示例代码展示了 <p> 元素的用法： 

<p>这是第一个段落内容.</p>
<p>这是第二个段落内容.</p>

上述示例代码运行效果如下图所示：

uAjyemi.jpg!web 01-02.png

如上述示例所示呈现的效果，分析图如下：

niqMFv6.jpg!web 01-03.png

注意：如果想要改变段落之间的间隔空间，建议使用 CSS margin 属性实现，而不是插入空的段落元素或者 <br> 元素。

粗体元素

HTML <b> 元素用来定义需要提醒注意的内容。该元素在过去被认为是 粗体元素 ，因为绝大多数浏览器解析该元素呈现的是粗体效果。

注意：如果不是出于语义目的而使用 <b> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的 font-weight 属性设置为 bold。

如下示例代码展示了 <b> 元素的用法： 

<p>这是一个<b>段落</b>内容.</p>

上述示例代码运行效果如下图所示：

juamquZ.jpg!web 01-04.png

<b> 元素的 应用场景 例如摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字。

以前 <b> 元素的含义就是让文本变成粗体效果。但从 HTML4 版本开始，不赞成标签表示带样式信息，于是 <b> 元素的含义发生了变化。

斜体元素

HTML <i> 元素用来定义表现因某些原因需要区分普通文本的一系列文本，例如技术术语、外文短语或是小说中人物的思想活动等。浏览器运行解析 <i> 元素一般呈现的效果是斜体。

如下示例代码展示了 <i> 元素的用法： 

<p>这是一个<i>段落</i>内容.</p>

上述示例代码运行效果如下图所示：

iYj22an.jpg!web 01-05.png

与 <b> 元素类似， <i> 元素在较早版本的 HTML 中只是一个用来将文本内容呈现为斜体效果的元素。而在 HTML4 版本开始，这些标签现在定义了更多的语义而不只是排版外观。

上标与下标元素

HTML <sup> 元素表示为上标元素，HTML <sub> 元素表示为下标元素。这两个元素的特点如下：

  • <sup>  元素定义的文本内容与主体内容相比，显示更高更小。

  • <sub>  元素定义的文本内容与主体内容相比，显示更低更小。

如下示例代码展示了 <sup> 元素和 <sub> 元素的用法： 

<p>你将在下学期学习到 E=MC<sup>2</sup> 公式。</p>
<p>水的化学成分叫做H<sub>2</sub>O。</p>

上述示例代码运行效果如下图所示：

22EVzyR.jpg!web 01-06.png

换行符

HTML <br> 元素会在 HTML 页面中生成一个换行符。编写在 <br> 元素后的文本内容会呈现在第二行中。

如下示例代码展示了 <br> 元素的用法： 

<p>这是一个<br>段落内容.</p>

上述示例代码运行效果如下图所示：

22yeyyf.jpg!web 01-07.png

水平线元素

HTML <hr> 元素用来表示段落元素之间的主题转换。在较早版本的 HTML 中， <hr> 元素表示一个水平线，并且浏览器运行解析也是水平线效果。但目前 <hr> 元素被定义为语义上的，而不是表现上。

如下示例代码展示了 <br> 元素的用法： 

<p>§1: 这是一个段落内容.</p>
<hr>
<p>§2: 这是另一个段落内容.</p>

上述示例代码运行效果如下图所示：

j6ZjAvI.jpg!web 01-08.png

HTML5 版本的结构化元素

article 元素

HTML <article> 元素用来定义 HTML 页面中的可独立分配或可复用结构，例如论坛的帖子、新闻网站的文章等。

如下示例代码展示了 <article> 元素的用法： 

<article>
    <h1>前端开发</h1>
    <p>前端开发现在已经是软件开发领域中的主流。</p>
    <p><small>版权归属 *** 公司所有。</small></p>
</article>

上述示例代码运行效果如下图所示：

u2QzIrB.jpg!web 01-09.png

section 元素

HTML <section> 元素用来定义 HTML 页面中的独立部分，该独立部分没有更具体的的语义元素来描述该元素。

如下示例代码展示了 <section> 元素的用法： 

<section>
  <h1>前端开发</h1>
  <p>前端开发现在已经是软件开发领域中的主流。</p>
</section>

上述示例代码运行效果如下图所示：

q6VNFvm.jpg!web 01-10.png

关于 <section> 元素在开发中的使用时需要注意如下要点：

  • 一般通过是否包含一个标题元素（ h1 ~ h6 ）作为子级元素来识别每一个

    元素。

  • 如果元素内容可以分为几个部分的话，应该使用 article 元素 而不是 section 元素。 

<section class="user_reviews">
    <article class="user_review">
        <p>这是第一个测试内容.</p>
    </article>
  <article class="user_review">
    <p>这是第二个测试内容.</p>
  </article>
</section>

  • 不要将 section 元素作为一个普通容器使用，这应该是 div 元素的用法。

`nav` 元素

HTML <nav> 元素用来定义 HTML 页面中的导航链接，比较常见的是菜单，目录和索引。

如下示例代码展示了 <nav> 元素的用法： 

<nav>
    <ul>
        <li><a href="#">设计与构建静态网站</a></li>
        <li><a href="#">JavaScript基础核心语法</a></li>
        <li><a href="#">DOM编程艺术</a></li>
    </ul>
</nav>

上述示例代码运行效果如下图所示：

fIz222e.jpg!web 01-11.png

提示：上述示例所示效果是 <ul> 列表元素的呈现效果，因为没有为 <nav> 元素设定任何 CSS 样式，默认是没有任何效果的。

关于 <nav> 元素在开发中的使用时需要注意如下要点：

  • 并不是所有的链接都必须使用 nav 元素，该元素只用于将一些热门的链接放入导航栏。

  • 一个 HTML 页面可能存在多个 nav 元素。

aside 元素

HTML <aside> 元素用来定义一个和 HTML 页面中其余内容几乎无关的内容，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。通常比较常见的是侧边栏或者标注框。

如下示例代码展示了 <aside> 元素的用法： 

<style>
  aside {
    width: 40%;
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e;
  }
</style>
<article>
  <p>
    迪斯尼电影<cite>海的女儿</cite>（<cite>The Little Mermaid</cite>）于 1989 年首次登上银幕。
  </p>
  <aside>
    在首次发行期间，该片便收获了 8700 万美元的票房。
  </aside>
  <p>
    更多有关该电影的信息…
  </p>
</article>

上述示例代码运行效果如下图所示：

7BjAVny.jpg!web 01-12.png

提示：上述示例所示效果中的 <aside> 元素是由 CSS 样式决定的，有关 CSS 属性的具体用法会在后续的章节进行详细讲解。

header 元素

HTML <header> 元素用来定义 HTML 页面中的具有引导和导航作用的内容，比较常见的是 Logo、搜索框、作者名称等。

如下示例代码展示了 <header> 元素的用法： 

<header>
  <h1>主页标题</h1>
</header> 
<article>
  <header>
    <h2>前端开发</h2>
    <p>前端开发现在已经是软件开发领域中的主流。</p>
  </header>
  <p>这是第一个测试内容.</p>
  <p><a href="#">更多内容....</a></p>
</article>

上述示例代码运行效果如下图所示：

F3YN3uY.jpg!web 01-13.png

说明：一个 HTML 页面并没有限制只能出现一个 <header> 元素，可以为每个内容区块添加一个 <header> 元素。

main 元素

HTML <main> 元素用来定义 HTML 页面中的主要内容。主内容区块指与页面标题或主要功能直接相关的内容。这部分内容在HTML页面中应当是独一无二的，不包含任何任何重复的内容。

如下示例代码展示了 <main> 元素的用法： 

<main>
    <h2>Coder 比赛</h2>
    <p>目前正在紧张进行中...</p>
</main>

上述示例代码运行效果如下图所示：

mE3Qnin.jpg!web 01-14.png

关于 <main> 元素在开发中的使用时需要注意如下要点：

  • 一个 HTML 页面中只能出现一个 main 元素。

  • mian 元素不能出现在 article 元素、 aside 元素、 nav 元素、 header 元素和 footer 元素的内部。

footer 元素

HTML <footer> 元素用来定义 HTML 元素中的一个章节内容或根元素的页脚。一个页脚通常包含该章节作者、版权数据或文档相关链接等信息。

如下示例代码展示了 <footer> 元素的用法： 

<footer>
    <ul>
        <li>版权信息</li>
        <li>站点地图</li>
        <li>联系方式</li>
    </ul>
</footer>

上述示例代码运行效果如下图所示：

vmM73aq.jpg!web 01-15.png

关于 <footer> 元素在开发中的使用时需要注意 <footer> 元素中的作者信息应该包含在 <address> 元素中。

扩展阅读

空白

当浏览器运行并解析 HTML 页面时，遇到两个或两个以上的连续空格时，只将其显示为一个空格效果。这种特性叫做 白色空间折叠 。

如下示例代码展示了 空白空间折叠 用法： 

<p>这是一个 段落内容.</p>
<p>这是另一个  段落内容.</p>

上述示例代码运行效果如下图所示：

Z3AZru3.jpg!web 01-16.png

转义字符

在 HTML 中的字符 < 、 > 、 " 、 ' 和 & 等是特殊字符，它们是 HTML 语法自身的一部分。如果想要在浏览器运行 HTML 页面呈现出这些特殊字符，必须通过使用 转义字符 （有些资料称为 实体引用 ）来实现。

如下表所示展示了部分转义字符：

原义字符 描述 转义字符 空格 &nbsp; < 小于号 &lt; > 大于号 &gt; & 和号 &amp; " 引号 &quot; © 版权（copyright） &copy; ® 注册商标 &reg; ™ 商标 &trade; × 乘号 &times; ÷ 除号 &divide;

如下示例代码展示了 转义字符 用法： 

<p>HTML 中用 <p> 来定义段落元素。</p>
<p>HTML 中用 <p> 来定义段落元素</p>

上述示例代码运行效果如下图所示：

r2eqaiz.jpg!web 01-17.png

总结

本小节讲解了有关 HTML 的结构化元素，其中包含了结构化元素的概念以及 HTML4 版本和 HTML5 版本的结构化元素的含义、用法以及注意事项等内容。

预告：下一节，我们将讲解有关 语义化元素 的内容。

如要转载本文，请先加作者微信( 2080954535 ，与 QQ 同号)，获得转载许可。原创不易，请尊重作者劳动！

IZruuez.jpg!web 作者二维码.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK