首页 前端知识 第4关:HTML标题与段落:网络文章网页

第4关:HTML标题与段落:网络文章网页

2024-02-05 11:02:25 前端知识 前端哥 984 619 我要收藏

任务描述

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

本关网页显示效果如下图所示:

为了顺利完成以上网页的制作,请大家认真阅读以下内容。

相关知识

分级标题

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

举例如下:

  1. <body>
  2. <h1>书籍标题</h1>
  3. <h2>第一章</h2>
  4. <h3>第一节</h3>
  5. <h4>重点 1</h4>
  6. <h5>1.1 标题</h5>
  7. <h6>1.1.1 标题</h6>
  8. </body>

显示效果如图:

提示:

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

段落与换行

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

举例如下:

例 1.

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

例 2.

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

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

显示效果如下图:

大家可以看到,虽然我们在段落内容中换行了,但是显示时是不会换行的。那么如果我们想要在一个段落中换行要怎么做呢?

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

举例如下:

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

显示效果如图:

列表

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

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

三种列表类型组成元素如下:

| 类型 | 父元素 | 子元素| | ------------ | ------------ | | 有序列表 | ol | li| | 无序列表 | ul | li| | 描述列表 | dl| dt, dd|

提示:

  • ol: order list

  • ul: unorder list

有序列表实例

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

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

显示效果如图:

无序列表实例

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

  1. <body>
  2. <p>购物清单</p>
  3. <ul>
  4. <li>酸奶</li>
  5. <li>苹果</li>
  6. <li>鸡胸肉</li>
  7. <li>白炽灯泡</li>
  8. </ul>
  9. </body>

显示效果如图:

描述列表实例

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

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

显示效果如图:

文本格式化

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

常用的元素如下:

元素含义举例
strong表示内容的重要性-
em表示内容的着重点-
mark表示内容高亮显示对搜索结果页面或文章中的搜索词进行突出显示
small表示细则一类的旁注通常包括免责声明、 注意事项、法律限制、版权信息等
b希望读者注意的文字如文档摘要里的关键词、评论中的产品名、文章导语等
i表示不同于其他文字的文字,具有不同的语态或语气如分类名称、技术术语、翻译的散文等
sub定义下标常见的下标包括化学符号等
sup定义上标常见的上标包括商标符号、指数和脚注编号等

在HTML5中,更强调语义。所以,我们在选择使用何种元素进行文本标记时,应该注重于语义,而不是样式。 什么意思呢?不要为了让一段文字倾斜而使用i元素,而是这段文字有i元素的语义。如果单纯想要文字倾斜,应该编写CSS进行改变。

举例如下:

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

显示效果如图:

引用

HTML中也有用于标记引用内容的元素——qblockquote元素:

  • q 元素用于短的引用,如句子里面的引用;

  • blockquote 元素表示单独存在的引用,它默认显示在新的一行。

举例如下:

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

显示效果如图:

其中,blockquote元素的cite属性指定了引用来源链接。

编程要求

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

  1. 补全第17strong标签,使“超文本系统”文本重点显示;

  2. 在第31和第32行中新添一项HTML 5.1历史定义, <dt>内容为:“2016111日” <dd>内容为:“HTML 5.1发布。”;

  3. 完善3541行标签,使其中内容成为有序列表。

测试说明

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

恭喜你完成本关,如果觉得有收获,就在下面点个赞吧!

代码: 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
  <!--------- Begin-------->

<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.&#160;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>
  <!--------- End-------->

</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1324.html
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!