Educoder-HTML入门——文本（二）

最新推荐文章于 2023-03-06 17:15:50 发布

Jungle和

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量937

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： html网页文章标题段落

本文链接：https://blog.youkuaiyun.com/qq_42212132/article/details/97142371

前端开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括标题分级、段落创建、换行与列表的使用，以及文本格式化的各种元素，强调了HTML5中的语义化重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

分级标题

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

举例如下：

<body>
    <h1>书籍标题</h1>
    <h2>第一章</h2>
    <h3>第一节</h3>
    <h4>重点 1</h4>
    <h5>1.1 标题</h5>
    <h6>1.1.1 标题</h6>
</body>
注意请不要根据标题字体大小来选择级别，而应该根据内容。
例如一本书的第一章是第二层级，但是有一部分人认为<h2>字体太大，
从而选择<h3>作为层级标题，这样做是不正确的。

段落与换行

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

举例如下：

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

如果我们在段落内容中换行了，显示时也是不会换行的。如果我们想要在一个段落中换行可以使用<br>标签。

列表

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

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

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

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

提示：

ol: order list
ul: unorder list

有序列表实例

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

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

显示效果如下：

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

<body>
    <p>购物清单</p>
    <ul>
        <li>酸奶</li>
        <li>苹果</li>
        <li>鸡胸肉</li>
        <li>白炽灯泡</li>
    </ul>
</body>

显示效果：

描述列表实例

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

<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>

显示效果：

文本格式化

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

常用的元素如下：

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

在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>

显示效果：