【HTML】web语义化理解以及示例

最新推荐文章于 2024-08-01 19:46:52 发布

粥粥周周舟舟

最新推荐文章于 2024-08-01 19:46:52 发布

阅读量541

点赞数

文章标签： html 语义化

本文链接：https://blog.csdn.net/weixin_42717849/article/details/90410207

版权

web语义化：

html标签语义化，内容和标签尽量贴合，标题用<h1>，页脚用<footer>，而不是统一用<div>

优点：

有助于构架良好的html结构；
有利于搜索引擎的建立索引、抓取；
有利于页面在不同的设备上显示尽可能相同；
有利于构建清晰的机构，有利于团队的开发、维护
总之，就是HTML的结构清晰

怎么做：

简言之，理解html的常用标签及用法

示例：MDN上“信件”的训练项目

初步感受到了常用标签的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="letterstyle.css">
</head>


<body>
    <div class="sender-column">
        <em>中国北京市门头沟区，102300</em><br>
        <em>纽臂大学 纽臂科学院</em><br>
        <em><strong>李雷 教授</strong></em><br>
        <em><strong>联系电话：</strong>123-456-7890</em><br>
        <em><strong>电子邮件：</strong>no_reply@example.com</em><br>
        <p><data value="2019-2-22">2019 年 2 月 22 日</data></p>
    </div>
    <em><strong>韩梅梅 女士</strong></em><br>
    <em>中国海南省三亚市亚龙湾</em>
    <h1>回复：韩梅梅学位申请</h1>
    <p>亲爱的韩同学：</p>
    <p>感谢你申请纽臂大学科学院的哲学博士学位课程，下面我将就你的问题依次做出解答。</p>

    <h2>开学日期</h2>

    <p>欢迎你在任意时间来校学习，但在学期开始时来校更理想，每学期开学时间如下：</p>
    <ul>
        <li>第一学期：<data value="2019-9-9">2019 年 9 月 9 日</data></li>
        <li>第二学期：<data value="2020-1-15">2020 年 1 月 15 日</data></li>
        <li>第三学期：<data value="2020-5-2">2020 年 5 月 2 日</data></li>
    </ul>
    <p>请告诉我你是否愿意在学期开始时来校，并告知你选择的学期。</p>
    <p>你可以在我们的网站上找到更多关于 <a href="#">学校重要日期</a> 的信息。</p>

    <h2>学习科目</h2>

    <p>纽臂科学院本着兼容并蓄的原则，课题涉及一些科技领域。欢迎有才智、态度专注的研究人员参加，也欢迎符合我们价值观的朋友加入。我们最感兴趣的课题如下（按优先度排序）：</p>
    <ol>
        <li>把水（H<sub>2</sub>O）转变为酒的方法，以及白藜芦醇（C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>）对健康的帮助作用。</li>
        <li>测量室温 30°C（86°F）时，观众人数呈指数级增加对放克贝斯手表演的影响（3 × 10<sup>3</sup> > 3 × 10<sup>4</sup> 效应）。</li>
        <li>使用 <abbr title="(Hyper Text Markup Language)超文本标记语言">HTML</abbr> 和 <abbr
                title="(Cascading Style Sheets)层叠样式表">CSS</abbr> 构建乐谱。</li>
    </ol>
    <p>请针对上述课题提供更多的信息。包括研究时长、所需资源，以及其它未尽事宜，谢谢。</p>

    <h2>异域舞蹈</h2>

    <p>你说的没错！异域部落舞蹈是我博士后研究项目的一部分。为了回答你的问题，我在下面列出我个人最喜欢的舞蹈种类和相关介绍：</p>
    <dl>
        <dt>波利尼西亚小鸡舞</dt>
        <dd>一种古老、神秘但影响广泛的舞蹈，可追溯至公元前 300 年，整个村庄围绕着一个小鸡形状的圈跳舞，祈祷牲畜肥美。</dd>
        <dt>冰岛布尔曳步舞</dt>
        <dd>在冰岛人学会用火取暖之前，他们之间流行着这种舞蹈，舞蹈时人们在地上拥成一个圈，用极小极快的动作晃动身体。我有一个学生说冰岛曳步舞是现代甩臀舞的鼻祖。</dd>
        <dt>北极机器人舞</dt>
        <dd>一个有趣的历史误传，二十世纪六十年代的英国探险者宣称发现了一种像“机器人跳舞”的舞蹈，这种舞蹈动作僵硬，流行于加拿大和阿拉斯加北部地区。后来人们发现这里的居民是因为天气太冷了才做出这样的动作。</dd>
    </dl>
    <p>更多信息请查看我的<a href="#"> 异域舞蹈研究 </a>网页。</p>
    <p>李雷 教授</p>
    <p>纽臂大学校训：<q>人人皆可纽臂</q> —— <cite> 诸葛中天 绅士 </cite></p>
</body>
</html>

参考：
https://www.cnblogs.com/p2227/p/3586725.html
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter