HTML结构化文本

最新推荐文章于 2022-03-18 17:36:55 发布

nuist__NJUPT

最新推荐文章于 2022-03-18 17:36:55 发布

阅读量475

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： 1024程序员节 html html5

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/120937140

版权

HTML+CSS+JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中使用h1-h6标题标签进行层次分明的内容组织，强调了标题的重要性及其对SEO的影响。同时，讲解了段落、引用元素的正确使用，以及如何通过语义化结构提高文档可读性和搜索引擎友好性。

摘要由CSDN通过智能技术生成

HTML结构化文本

设计符合语义的结构会增强信息的可读性和扩展性，同时也降低了结构的维护成本，为跨平台信息交流和阅读打下基础。

1-定义标题文本
< h1 >…< h6 >共有6级标题标签可以定义，按级别高低由大到小分分为< h1>h2…>h6,h1为最重要的信息，h6为最次要的信息。
在网页中，标题信息比正文信息更重要，因为不仅浏览器要看标题，搜索引擎同样也要先搜索标题。结构层次清晰，语义合理的对于阅读者或者机器来说都是很友好的，除了h1元素之外，其余各元素在一篇文档中可以被重复使用多次，如果把h2作为网页副标题，则只能使用一次。

标题定义示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义标题文本</title>
</head>
<body>
<div id = "wapper">
    <h1>网页标题</h1>
    <h2>网页副标题</h2>
    <div id = "box1">
        <h3>栏目标题</h3>
        <p>正文</p>
    </div>
    <div id = "box2">
        <h3>栏目标题</h3>
        <div id = "sub_box1">
            <h4>子栏目标题</h4>
            <p>正文</p>
        </div>
        <div id = "sub_box2">
            <h4>子栏目标题</h4>
            <p>正文</p>
        </div>
    </div>
</div>
</body>
</html>

注：h1,h2,h3元素比较常用，而h4,h5,h6元素不常用，除非在结构层次比较深的文档中中才考虑选用。标题元素的位置一般位于正文内容的顶部，一般置于第一行。
2-定义段落文本
< p >标签定义段落文本，在段落文本前后会创建一段距离的空白，浏览器会自动添加这些空间，用户可以根据需要使用CSS重置这些样式。

注意：传统的用户习惯使用< div>或者< br>标签来分段文本，这样会带来歧义，妨碍搜索引擎对信息的检索。

下面使用语义化的元素结构构建文章的结构，其中使用div定义文章的包含框，使用h1定义文章标题，使用h2定义文章的作者，使用p定义文章段落，使用cite定义转载地址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义段落文本</title>
</head>
<body>
<div id = "article">
    <h1 title = "哲学散文">箱子的哲学</h1>
    <h2 title = "作者">王国栋</h2>
    <p>拉个箱子一起学习吧，改变世界的程序员！！！</p>
    <p>一起加油吧，以梦为马的少年，终将拥有奔赴宇宙星辰的答案！</p>
    <p>我爱你，你也爱我，对吧，哈哈哈</p>
    <cite title="转载地址">https://blog.csdn.net/nuist_NJUPT</cite>
</div>
</body>
</html>

3-定义引用文本
< q >标签定义短大的引用，浏览器经常在引用的周围添加引号,< blockquote >用于定义块引用，其包含的所有文本都会从行常规文本中分离出来，左右两侧会缩进显示，有时候显示为斜体。

从语义角度说，< q >和< blockquote >标签一样，不同之处在于它们的显示和应用，前者应用于简短的行内引用，后者应用于从周内内容分离出较长的引用。
注意：一段文本不可以直接放在blockquote元素中，应该包含在一个块元素中。

下面示例演示cite,q,blockquote元素以及cite引文属性的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义引用文本</title>
</head>

<body>
<div id = "article">
    <h1>智慧到底是什么？</h1>
    <h2>《卖拐》智慧摘录</h2>
    <blockquote cite="https://blog.csdn.net/nuist_NJUPT/article/details/120934114?spm=1001.2014.3001.5501">
        <p>有人把它说成是知识，以为知识越多，就越有智慧。</p>
    </blockquote>
    <p>我们看看<cite>大忽悠</cite>从中可以体会到智慧！</p>
    <div id = "dialog">
        <p>赵本山：<q>对头，加油</q></p>
        <p>范伟：<q>没事，牛逼</q></p>
        <p class = "action">（动作配合）</p>
        <p>赵本山：<q>回家睡觉吧你</q></p>
        <p>范伟：好的，写完这段代码就睡</p>
    </div>
</div>
</body>
</html>

nuist__NJUPT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML结构化文本

HTML结构化文本设计符合语义的结构会增强信息的可读性和扩展性，同时也降低了结构的维护成本，为跨平台信息交流和阅读打下基础。1-定义标题文本< h1 >…< h6 >共有6级标题标签可以定义，按级别高低由大到小分分为h1>h2…>h6,h1为最重要的信息，h6为最次要的信息。在网页中，标题信息比正文信息更重要，因为不仅浏览器要看标题，搜索引擎同样也要先搜索标题。结构层次清晰，语义合理的对于阅读者或者机器来说都是很友好的，除了h1元素之外，其余各元素在一篇文档中可以
复制链接

扫一扫