HTML学习--文字高级格式化

最新推荐文章于 2023-08-09 11:17:39 发布

suda哇

最新推荐文章于 2023-08-09 11:17:39 发布

阅读量428

点赞数

分类专栏：前端学习文章标签： html 学习前端 css html5

本文链接：https://blog.csdn.net/qq_44489836/article/details/123014692

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

学习目标：

今天将更加深入学习标签的语义化，知道什么时候他应该用什么标签，让网页更具有可读性，而不是一堆没有意义标签的堆砌。
并在此学习的基础上，进行实战练习，完成一篇在线博客文章。

学习内容：

语义化是对文本内容的结构化，选择合乎语义的标签，便于开发者阅读，维护写出更优雅的代码，让浏览蓝旗的爬虫和辅助技术能够更好的解析。

1.HTML语义

HTML 中，例如，<h1>元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。

<h1>This is a top level heading</h1>

默认情况下，绝大多数浏览器的 user agent stylesheet 将会赋予一个<h1>元素很大的字号尺寸从而使它看上去更像是一个标题（虽然你可以把它格式化为任何你想要的样式），但是更重要的是它的语义会被在很多地方以不同的方式被使用到，例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序，而且屏幕阅读器会使用它来帮助视障用户更好的使用这个页面。

另一方面，你可以通过样式（CSS）来让任何的元素看上去像是一个最高级别的标题，就像下面所展示的方法一样：

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

这将会把这个元素渲染得像是一个最高级别的标题，但是它的值没有对应到最“最高级别标题”这一语义，所以在此之上，它不会获得更多额外的描述（只是一个普通“span”元素而不是“最高级别标题”这一语义）。所以在恰当的需求下使用恰当的HTML元素是一个不错的主意。

2.语义化

概述：基于这是什么命名，而不是基于它像什么或能做什么命名。
长版本解释：
语义化(semantic)的 HTML 不仅仅关乎我们所使用的元素——你当然知道一个链接应该使用 <a>标签，表格数据应该使用 <table>标签，段落使用 <p>等等。
更重要的是，它和我们所添加的类名(class names)和IDs有关。而类名和IDs为 CSS 和 JavaScript提供额外的机制，让我们更容易去操作和增强 HTML 元素。
很容易出现不经过思考而随意添加类名的场景，但现实中命名却又特别重要。
这是由于人只是擅长和人沟通，却不太能理解简短的，不具有语义化的抽象概念。
类名好坏对比：

<!-- 不好 -->
<div class="red pull-left">
<div class="grid row">
<div class="col-xs-4">

这里完全看不出这段 HTML 代码要表达什么。你可能会说它看起来怎样（比如应该在小屏幕还是大屏幕上），但也就仅此而已。

<!-- 好 -->
<div class="header">
<div class="basket">
<div class="product">
<div class="searchResults">

这段代码就正是我所推崇的。我很清楚地知道这段 HTML 代表着什么。虽然我不知道它看起来应该是怎样的，但我并不在乎，这是 CSS 存在的价值。而语义化的类名对 HTML 和 CSS 甚至 JS 都很有意义。

3.为什么我们应该使用语义化的类名呢？

因为更容易理解
若使用语义化类名，不论你是在修改 HTML 或者 CSS，你都清楚你将造成的影响。而使用视觉化类名(visual class names)的方式，你不得不在每一个元素上写很多类名，最终你可能只是对这些类名有一个模糊的理解，而不清楚它真正的意图是什么。而且，视觉化类名非常难以维护。

因为要构建响应式站点
一般说来，不同的视图(viewport)会有不同的样式。比如，你可能需要在大屏上浮动(float)一个元素，在小屏不浮动。如果你有一个叫 .clearfix 的类名来清理浮动，但在小屏上的效果却和类名不一样，这看起来会不会让人困惑呢？
使用语义化的类名，你就会基于 mediea queries 去编写样式，这会让 CSS 更易维护。

因为更容易查找
如果一个元素是基于其外在表象命名，比如 .red, .clearfix, 和 .pull-left 等，那么这些类名就会像垃圾一样散落在代码库的任何地方——当你搜索一段特定的 HTML 代码的时候，类名不会起任何作用。
换句话说，如果你的类名足够语义化，搜索特定代码片段是很简单的事。更常见的是，当你从头搜索你的 HTML(想像一下浏览器上的审查元素)去找类名的时候，查找唯一的 CSS 选择器肯定会快很多。

因为不想做无故的回归测试
如果你使用描述性的、非语义化的类名，那么当你修改其中一个类名的时候，样式的改变会影响每一个使用这个类名的元素。基于你使用 CSS 的经验，你能保证你的修改不会在其他地方产生不可预知的问题吗？
语义化的类名是唯一的，所以当你编辑其中一个的时候，你能自信地说，你的修改只会影响你想要改变的那个模块，维护起来更简单。

因为不用再恐惧更新代码
和前一个有关回归测试的那一点有关，当你对修改的代码不够自信的时候，你很有可能会造成 BUG 接着便会由于害怕出错而不再碰那些代码。更可怕的是会造成恶性循环，写很多冗余代码，最后变得越来越不具有可维护性。

因为有助于自动化测试
自动化功能测试需要定位特定的元素，与其进化交互（输入文本，点击按钮、链接等等），基于这些操作进行相关校验。
若你的 HTML 通篇都使用描述性的类名，那么你将不会有一个可靠方式去定位一个特定的元素，更惶论与其交互了。

因为为JavaScript提供了有意义的接口
就像和自动化测试一样，语义化的类名对JavaScript来说同样有意义。描述性的类名不具有可靠性，不可用于定位相应的模块或组件。

因为常规维护的担忧
若你是基于该元素是什么而命名，你就不必再次修改 HTML 的类名。如，heading 始终是 heading, 你不用管它变成什么样子。
样式可能会改变，但你只需要改变你的 CSS。这在另一个方面来说，实际上是松耦合从而提高了可维护性。

因为非语义类名调试困难
当你调试(debug)一个元素的时候，会出现很多类似的 CSS 选择器，增加了调试的难度。

因为标准推荐使用
HTML5 的规范里有说，使用类名属性。
“[…] 更鼓励使用能描述内容本质的类名，而不是那些只是描述其外在表像的值。”

因为能带来性能的提升
这是一个非常小的优势，因为当你一个元素只有一个类名的时候，你的整个 HTML 代码体积都会更小。而使用描述性的类名，每个元素有无数个类名，结果自然与前者不一样。

因为和重用规则有关
如果你没有使用语义化类名，你有可能会是误解了重用(reuse)的概念，而误用重用。

语义化的类名是 MaintainableCSS 的基石，没有它，一切都没意义。所以，基于是什么命名，其他所有都将受益。

4.如何理解Web语义化

Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。
简单来说就是利于 SEO，便于阅读维护理解。

5.语义化元素

语义元素=有意义的元素。

（1）什么是语义元素？

语义元素清楚地向浏览器和开发人员描述了它的含义。
非语义元素的例子：<div>和<span>没有说明它的内容。
语义元素示例： <form>、<table>和<article>明确定义其内容。

在 HTML 中，有一些语义元素可用于定义网页的不同部分：
在这里插入图片描述

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

(2)HTML <section> Element

该<section> 元素定义文档中的一个部分。
根据 W3C 的 HTML 文档：“部分是内容的主题分组，通常带有标题。”
<section> 可以使用元素的示例：

章节
介绍
新闻项目
联系信息
网页通常可以分为介绍、内容和联系信息的部分。

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

(3)HTML <article> Element

该 <article> 元素指定独立的、自包含的内容。
一篇文章本身应该有意义，并且应该可以独立于网站的其余部分进行分发。
<article> 可以使用该元素的示例：

论坛帖子
博客文章
用户评论
产品卡片
报纸文章

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

<article>元素指定独立的、自包含的内容。
该<section>元素定义文档中的部分。
我们可以使用定义来决定如何嵌套这些元素吗？不，我们不可以！
您将发现包含<section>元素的HTML页面包含<article>元素，以及<article>元素包含<section>元素。

(4)HTML <header> Element

<header> 元素表示介绍性内容或一组导航链接的容器。
一个<header>元素通常包含：

一个或多个标题元素 (<h1> - <h6>)
标志或图标
作者信息
在一个HTML文档中可以有几个<header>元素。但是，<header>不能放在<footer>、<address>或另一个<header>元素中。

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

(5)HTML <footer> Element

<footer> 元素定义文档或部分的页脚。
一个<footer> 元素通常包含：

作者信息
版权信息
联系信息
网站地图
回到顶部链接
相关文件
在一个文档中可以包含多个<footer>元素。

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

(6)HTML <nav> Element

<nav>元素定义了一组导航链接。
并非文档的所有链接都应该在<nav>元素内。该<nav>元素仅用于主要的导航链接块。

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

(7)HTML <aside> Element

该 <aside> 元素定义了除了它所在的内容之外的一些内容（如侧边栏）。
<aside>内容应该与周围的内容间接相关。

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

(8)HTML <figure> and <figcaption>Element

<figure>标记指定了自包含的内容，如插图、图表、照片、代码列表等。
<figcaption>标记定义了<figure>元素的标题。<figcaption>元素可以作为<figure>元素的第一个子元素或最后一个子元素。
<img>元素定义了实际的图像/插图。

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

6.文档与网站架构

(1) 文档的基本组成部分

页眉
通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。
导航栏
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
主内容
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

(2) 用于构建内容的 HTML

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用 <article>、 <section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。

学习产出：

效果示例图

<!DOCTYPE html>
<html>

<head>
    <title>文章博客</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="article.css">
</head>

<body>
    <header>
        <h1>文章分享博客</h1>
    </header>
    <p>发布于&nbsp;2020-01-06&nbsp;收藏5&nbsp;|&nbsp;
        <span style="text-decoration: underline;">点赞20</span>&nbsp;|&nbsp;
        <a href="https://baike.baidu.com/item/水/34133">更多相关</a>
    </p>
    <main>
        <header>
            <h2>水（无色、无味的透明液体）</h2>
        </header>
        <p>本词条由
            <a href="https://baike.baidu.com/science">“科普中国”科学百科词条编写与应用工作项目</a> 审核</p>
        <p>
            <span style="font-weight: bold;">水(化学式为H2O),是由氢、氧两种元素组成的无机物，</span>无毒，可饮用。在常温常压下为无色无味的透明液体，被称为人类生命的源泉，是维持生命的重要物质。</p>
        <!-- <br> -->
        <p style="margin-left: 100px;">水是地球上最常见的物质之一。地球表面有71%被水覆盖。
            <span style="text-decoration: underline;">它是包括无机化合、人类在内所有生命生存的重要资源，也是生物体最重要的组成部分.</span>纯水导电性十分微弱，属于极弱的电解质。日常生活中的水由于溶解了其他电解质而有较多的阴阳离子，才有较为明显的导电性。
            <sup>[1]</sup>
        </p>
        <p style="margin-left: 60px;">—戚桓瑜主编.
            <i>光伏材料制备与加工[M]</i>.2015 第40页</p>
        <img src="water.jpeg" alt="水分子结构图" class="water">
        <p style="margin-left: 60px;">水分子结构示意图</p>
        <header>
            <h3>水在机体内有许多重要功能</h3>
        </header>
        <ul>
            <li>（1）水是细胞原生质的重要组分；<sup>[4]</sup></li>
            <li>（2）水在体内起溶媒作用，溶解多种电解质；<sup>[4]</sup></li>
            <li>（3）水在体内起运输作用，可以传递营养物质、代谢废物和内分泌物质（如激素）等；<sup>[4]</sup></li>
        </ul>
        <header>
            <h3>重水列表</h3>
        </header>
        <table cellpadding="0";cellspacing="0">
            <tr>
                <td>性质</td>
                <td>H<sup>2</sup>O</td>
                <td>D<sup>2</sup>O</td>
            </tr>
            <tr>
                <td>相对密度（20℃）</td>
                <td>0.997</td>
                <td>1.108</td>
            </tr>
            <tr>
                <td>凝固点/℃</td>
                <td>0.00</td>
                <td>3.79</td>
            </tr>
            <tr>
                <td>蒸发热/(kJ·mol-1)</td>
                <td>40.67</td>
                <td>41.6</td>
            </tr>
        </table>
        <p>重水的主要用途是在核反应堆中做“减速剂”，减小中子速度，控制核裂变过程，也是冷却剂。重水和氘在研究化学和生理变化中是一种宝贵的示踪材料，例如，用稀重水灌溉树木，可以测知水在这些植物中每小时可运行十几米到几十米。测定饮过大量稀重水的人尿中的氘含量，知道水分子在人体中停留时间平均为14天。用氘代替普通氢，可以研究动植物消化和新陈代谢过程。浓的或纯重水不能维持动植物生命，重水对一般动植物的致死浓度为60%。 [6] 生产重水的方法很多，曾用过电解法、水精馏法等，现在利用H2S/H2O双温交换法，先把重水富集约15%后，再电解富集成99.8%，该法成本低廉</p>
        <header>
            <h3>海水淡化</h3>
        </header>
        <p>海水淡化又称海水脱盐，是从海水中获取淡水的技术和过程。从海水中取出淡水或者除去海水中的盐分，都可以达到淡化的目的.根据脱盐过程分类，海水淡化方法主要有热法、膜法和化学方法三大类。</p>
        <dt>多级闪蒸（<abbr title="Multistage Flashing Systom">MSF</abbr>）</dt>
        <dd>所谓闪蒸，是指一定温度的海水在压力突然降低的条件下，部分海水急骤蒸发的现象</dd>
        <dt>低温多效蒸馏（<abbr title="MultipleEffectDistillation">LT-MED</abbr>）</dt>
        <dd>所谓低温是指海水在第一效的最高蒸发温度（盐水顶温）不高于70℃，这是因为当蒸发温度低于70℃时，蒸发表面海水中盐类结晶的速率将大大降低，从而可避免或减缓设备结垢的产生。</dd>
    </main>
    <footer style="float: right;">
        <br>
        <strong>contact me at:</strong>
        <span>+1234567890&nbsp;</span>
        <strong>电子邮件：</strong>
        <span>no_reply@example.com&nbsp;</span>
        <strong>github:</strong>
        <del>https://github.com/xxxxxxx</del>
        <span>(此地址已失效)</span>
    </footer>
</body>
</html>

body{
    margin-top: 70px;
    margin-left: 50px;
    margin-bottom: 80px;
}
.water{
    width: 270px;
    height: 270px;
    margin-left: 60px;
    /* border-radius: 50%; */
}
table{
    border-collapse: collapse;
}
td{
    border:1px solid #ccc;
    margin: 0;
    padding: 10px;
}

suda哇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习--文字高级格式化

学习目标：今天将更加深入学习标签的语义化，知道什么时候他应该用什么标签，让网页更具有可读性，而不是一堆没有意义标签的堆砌。并在此学习的基础上，进行实战练习，完成一篇在线博客文章。学习内容：语义化是对文本内容的结构化，选择合乎语义的标签，便于开发者阅读，维护写出更优雅的代码，让浏览蓝旗的爬虫和辅助技术能够更好的解析。1.HTML语义HTML 中，例如，<h1>元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。<h1>This
复制链接

扫一扫