HTML标题与段落：网络文章网页

水深无声 2021-05-16 20:37 540阅读 0赞

### HTML标题与段落：网络文章网页 ###

*  任务描述
 *  相关知识
 *   *  分级标题
     *  段落与换行
     *  列表
     *   *  有序列表实例
         *  无序列表实例
         *  描述列表实例
     *  文本格式化
     *  引用
 *  编程要求
 *  测试说明

# 任务描述 #

本关任务是完成一个格式丰富的文章网页，你将通过本关学习标题、段落、文本格式化和引用等，与文本相关的标签。

本关网页显示效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 相关知识 #

## 分级标题 ##

HTML提供了六级标题用于创建网页信息的层级关系。`<h1>` 定义重要等级最高的标题，之后`<h2>`到`<h6>`层级依次递减。

举例如下：

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
提示：

*  注意请不要根据标题字体大小来选择级别，而应该根据内容。例如一本书的第一章是第二层级，但是有一部分人认为`<h2>`字体太大，从而选择`<h3>`作为层级标题，这样做是不正确的。

## 段落与换行 ##

如大家在之前的例子中看到的，我们使用`p`元素定义段落。`p`元素是HTML中最常用的元素之一。

举例如下：

**例 1.**

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>

**例 2.**

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。
    
    在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>

*  例1和例2唯一的不同在于，例2中我们在段落内容中换行了。那么，在实际显示时，会显示换行吗？

显示效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
大家可以看到，虽然我们在段落内容中换行了，但是显示时是不会换行的。那么如果我们想要在一个段落中换行要怎么做呢？

我们可以使用`<br>`标签。

**举例如下：**

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。<br>
    在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]

## 列表 ##

*  生活中我们经常使用列表，例如购物清单、待办事项。在HTML中，我们可以创建无序列表、有序列表和描述列表，而且一个列表中可以嵌套另一个列表。

通常，列表都是由**父元素和子元素**构成的，父元素用于指定要创建的**列表**的类型，子元素用于指定要创建的**列表项目**类型。

三种列表类型组成元素如下：  
**提示：**

ol: order list；

ul: unorder list。

### 有序列表实例 ###

如果列表顺序是不能随意交换时，我们使用有序列表。例如：

<body>
        <p>健身房基本锻炼步骤</p>
        <ol>
            <li>热身</li>
            <li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li>
            <li>有氧运动(包括慢跑、单车、游泳、登山机等)</li>
            <li>拉伸、放松</li>
        </ol>
    </body>

显示效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]

### 无序列表实例 ###

如果列表顺序不重要时，我们使用无序列表。例如：

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]

### 描述列表实例 ###

当我们需要描述成组出现的名称(术语)及其值之间的关联时，我们使用描述列表。例如：

<body>
        <p>HTML里程碑</p>
            <dl>
                <dt>1995年11月24日</dt>
                <dd>HTML2.0发布，对应的IETF文档为RFC 1866</dd>
                <dt>1997年1月14日</dt>
                <dd>HTML 3.2以W3C推荐标准的形式发布。 随后的HTML标准都由W3C组织发布。
                <dt>1997年12月18日</dt>
                <dd>HTML 4.0发布。</dd>
                <dt>2014年10月28日</dt>
                <dd>HTML5 发布。</dd>
                <dt>2016年11月1日</dt>
                <dd>HTML 5.1发布。</dd>
            </dl>
    </body>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]

## 文本格式化 ##

一个网页中通常包含了文本信息，对于不同的文本类型，我们可以选择合适的 HTML 语义化元素进行标记。例如，`em` 元素用于标记强调部分内容，`small` 元素用于注解、署名等类型的文本。

常用的元素如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]

*  在HTML5中，更强调语义。所以，我们在选择使用何种元素进行文本标记时，应该注重于语义，而不是样式。

什么意思呢？不要为了让一段文字倾斜而使用i元素，而是这段文字有i元素的语义。如果单纯想要文字倾斜，应该编写CSS进行改变。

举例如下：

<body>
        <h1>论语学而篇第一</h1>
        <p><small>
        <b>作者：</b><abbr title="名丘，字仲尼">孔子<sup><a href="#">1</a></sup></abbr>（<time>前551年9月28日－前479年4月11日</time>）
        </small></p>
        
        <h2>本篇引语</h2>
        <p>《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是
         <strong>「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等</strong>道德范畴。</p>
         
        <h2>原文</h2>
        <p>子曰：「<mark>学而时习之，不亦说乎？</mark>有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>
      </body>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]

## 引用 ##

HTML中也有用于标记引用内容的元素——`q`和`blockquote`元素:

*  `q` 元素用于短的引用，如句子里面的引用；
 *  `blockquote` 元素表示单独存在的引用，它默认显示在新的一行。

举例如下：

<body>
        <h1>W3C</h1>
        <p>
            <dfn>W3C</dfn> (World Wide Web) 万维网联盟创建于1994年。它是
            <q>Web技术领域最具权威和影响力的国际中立性技术标准机构</q>。
        </p>
        <p>其官方定义</q>为：</p>
        <blockquote cite="https://www.w3.org/">
         The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.
        </blockquote>
    </body>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]  
其中，`blockquote` 元素的`cite`属性指定了引用来源链接。

# 编程要求 #

请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

1.  补全第17行strong标签，使“超文本系统”文本重点显示；
2.  在第31和第32行中新添一项HTML 5.1历史定义，  
    `<dt>`内容为：“2016年11月1日”  
    `<dd>`内容为：“HTML 5.1发布。”；
3.  完善35和41行标签，使其中内容成为有序列表。

# 测试说明 #

补充完代码后，点击测评，平台会对你编写的代码进行测试，当你的结果与预期输出一致时，即为通过；

*  孩子，我们并不只活在我们所属的时代里，我们身上也扛着历史。不要忘记你在这个房间内看到的每一样东西都曾经是崭新的。

**代码文件：**

<!DOCTYPE html>
    
    <head>
        <meta charset="UTF-8" />
        <title>HTML – 维基百科</title>
    </head>
      
    
    <body>
        <h1>HTML</h1>
        <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
            <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
        </p>
        <h2>历史</h2>
        <h3>开发过程</h3>
        <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
            <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
            <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
        </p>
        <h3>HTML里程碑</h3>
        <dl>
            <dt>1995年11月24日</dt>
            <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
            <dt>1997年1月14日</dt>
            <dd>HTML 3.2以
                <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                    <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
            <dt>1997年12月18日</dt>
            <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
            <dt>2014年10月28日</dt>
            <dd>HTML5 发布。</dd>
            <dt>2016年11月1日</dt>
            <dd>HTML 5.1发布。</dd>
    
        </dl>
        <h2>参考文献</h2>
            <ol>
            <small>
                <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
                <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
                <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
            </small>
            </ol>
    </body>
      
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/dd97bcab0cf54ad991ec4af02475bea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/6afb8836cdc44750ab978ff5eff748dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/e6e5c04ad566460a818288928d7b2dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/9b633e9491e34f8e85886228aede8744.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20210516/06cf9928199744008e36343f4c2c91e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20210516/3745f3c3e11c4eadacdcf3819f83cf74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: /images/20210516/66b4c207b82944e0b5de7fcbc1bea7ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]: /images/20210516/be36b378818244368a4bdfcbd6fd5f6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]: /images/20210516/9d4bc40dc00e4f5caffab5bb5d99de93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]: /images/20210516/a1277b8bb3ff498ca27c6efd05662ae5.png