《HTML 简易速速上手小册》第6章：HTML 语义与结构（2024 最新版）

在这里插入图片描述

文章目录

  • 6.1 语义化标签的重要性
    • 6.1.1 基础知识
    • 6.1.2 案例 1：使用 `<article>`, `<section>`, `<aside>`, `<header>`, 和 `<footer>`
    • 6.1.3 案例 2：构建带有嵌套语义化标签的新闻网站
    • 6.1.4 案例 3：创建一个带有 `<main>`, `<figure>`, 和 `<figcaption>` 的摄影作品集
  • 6.2 HTML 文档结构最佳实践
    • 6.2.1 基础知识
    • 6.2.2 案例 1：创建一个具有清晰结构的个人博客页面
    • 6.2.3 案例 2：创建一个在线教育平台的主页
    • 6.2.4 案例 3：构建一个具有多个页面部分和动态内容的企业网站
  • 6.3 辅助技术和可访问性考虑
    • 6.3.1 基础知识
    • 6.3.2 案例 1：创建一个具有高可访问性的图像画廊
    • 6.3.3 案例 2：创建一个可访问性良好的表单
    • 6.3.4 案例 3：创建一个适用于屏幕阅读器的文章**

6.1 语义化标签的重要性

6.1.1 基础知识

  • 语义化标签的定义：在HTML中，语义化标签是那些具有明确含义的标签，它们告诉浏览器和开发者这部分内容是什么，而不仅仅是怎么看起来。这就像给网页的每个部分贴上标签，清楚地说明它们的角色和功能。
  • 为什么语义化重要：使用语义化标签可以提高网站的可访问性、搜索引擎优化（SEO）和维护性。这就像在图书馆中正确地分类书籍，让人们更容易找到他们需要的东西。

6.1.2 案例 1：使用 <article>, <section>, <aside>, <header>, 和 <footer>

让我们构建一个简单的博客页面，使用语义化标签来组织内容。

<!DOCTYPE html>
<html>
<head>
    <title>我的博客</title>
</head>
<body>
    <header>
        <h1>我的博客标题</h1>
        <nav>这里是导航栏</nav>
    </header>
    <article>
        <h2>博客文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <aside>这里是一些相关链接或广告</aside>
    <footer>这里是页脚信息</footer>
</body>
</html>

6.1.3 案例 2：构建带有嵌套语义化标签的新闻网站

现在，我们来构建一个新闻网站的主页，运用更多的语义化标签。

<!DOCTYPE html>
<html>
<head>
    <title>新闻网站</title>
</head>
<body>
    <header>
        <h1>新闻网站标题</h1>
        <nav>导航链接</nav>
    </header>
    <section>
        <article>
            <header>
                <h2>新闻标题 1</h2>
                <p>发表日期和作者</p>
            </header>
            <p>新闻内容摘要...</p>
            <footer>
                <p>评论数: 10</p>
            </footer>
        </article>
        <article>
            <header>
                <h2>新闻标题 2</h2>
                <p>发表日期和作者</p>
            </header>
            <p>新闻内容摘要...</p>
            <footer>
                <p>评论数: 5</p>
            </footer>
        </article>
    </section>
    <footer>页脚信息</footer>
</body>
</html>

6.1.4 案例 3：创建一个带有 <main>, <figure>, 和 <figcaption> 的摄影作品集

最后，让我们创建一个摄影作品集页面，使用一些不太常见的语义化标签。

<!DOCTYPE html>
<html>
<head>
    <title>摄影作品集</title>
</head>
<body>
    <header>
        <h1>我的摄影作品</h1>
    </header>
    <main>
        <figure>
            <img src="photo1.jpg" alt="照片1描述">
            <figcaption>这是照片1的描述</figcaption>
        </figure>
        <figure>
            <img src="photo2.jpg" alt="照片2描述">
            <figcaption>这是照片2的描述</figcaption>
        </figure>
    </main>
    <footer>版权信息</footer>
</body>
</html>

通过这些案例，你可以看到语义化标签如何使网页结构更加清晰，内容更加易于理解。这不仅对用户体验有益，也有助于搜索引擎更好地理解和索引网页内容。随着你逐渐掌握这些标签的使用，你的网页将变得更加结构化和内容丰富。

在这里插入图片描述

6.2 HTML 文档结构最佳实践

6.2.1 基础知识

  • 了解HTML文档的骨架：每个HTML文档都有一个标准的结构，它就像是建筑的蓝图，定义了网页的基本框架。这包括 <!DOCTYPE html>, <html>, <head>, 和 <body>。
  • 头部（Head）的作用：<head> 部分包含了网页的元数据，比如标题 <title>, 链接到CSS文件的 <link>, 和脚本 <script>。虽然这些元素在页面上不直接显示，但它们对网页的功能和外观至关重要。
  • 主体（Body）的结构：<body> 是你的网页内容所在的地方，它可以包含文本、图片、链接、表格等各种元素。

6.2.2 案例 1：创建一个具有清晰结构的个人博客页面

我们将构建一个个人博客页面，包含头部、导航栏、主内容区域、侧边栏和页脚。

<!DOCTYPE html>
<html>
<head>
    <title>我的个人博客</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的博客</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">关于我</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>博客文章标题</h2>
            <p>这里是文章内容...</p>
        </article>
        <aside>
            <h3>侧边栏标题</h3>
            <p>一些附加信息...</p>
        </aside>
    </main>
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

6.2.3 案例 2：创建一个在线教育平台的主页

接下来，我们将创建一个在线教育平台的主页，包括课程列表、教师简介和用户评论。

<!DOCTYPE html>
<html>
<head>
    <title>在线教育平台</title>
</head>
<body>
    <header>
        <h1>在线教育平台</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">课程</a></li>
            <li><a href="#">教师团队</a></li>
            <li><a href="#">学员评价</a></li>
        </ul>
    </nav>
    <section>
        <h2>热门课程</h2>
        <!-- 课程列表 -->
    </section>
    <section>
        <h2>我们的教师</h2>
        <!-- 教师列表 -->
    </section>
    <section>
        <h2>学员评价</h2>
        <!-- 评论列表 -->
    </section>
    <footer>
        <p>联系我们</p>
    </footer>
</body>
</html>

6.2.4 案例 3：构建一个具有多个页面部分和动态内容的企业网站

最后，我们将创建一个企业网站，包含产品介绍、用户测试和合作伙伴信息。

<!DOCTYPE html>
<html>
<head>
    <title>企业网站</title>
</head>
<body>
    <header>
        <h1>企业名称</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">产品</a></li>
            <li><a href="#">案例研究</a></li>
            <li><a href="#">合作伙伴</a></li>
        </ul>
    </nav>
    <article>
        <h2>产品介绍</h2>
        <!-- 产品信息 -->
    </article>
    <article>
        <h2

>案例研究</h2>
        <!-- 案例分析 -->
    </article>
    <aside>
        <h3>新闻与更新</h3>
        <!-- 新闻列表 -->
    </aside>
    <footer>
        <p>版权所有 © 企业名称</p>
    </footer>
</body>
</html>

通过这些案例，我们可以看到一个良好结构化的HTML文档是如何构建的，以及如何使用不同的标签来组织内容和提升用户体验。每个案例都展示了如何使用HTML构建一个具有清晰结构和逻辑的网页，使其既易于维护又对用户友好。

在这里插入图片描述

6.3 辅助技术和可访问性考虑

6.3.1 基础知识

  • 可访问性的重要性：可访问性确保了所有用户，包括残障人士，都能访问和使用网站。这就像确保建筑有坡道和电梯，方便所有人进入。
  • 使用合适的标签：HTML提供了一系列标签和属性来增强网站的可访问性，如<alt>属性用于图像描述，使视障用户通过屏幕阅读器理解图像内容。
  • 表单可访问性：为表单元素正确使用<label>标签，确保所有用户都能理解每个表单项的用途。

6.3.2 案例 1：创建一个具有高可访问性的图像画廊

我们将构建一个简单的图像画廊，其中每张图片都有描述性的<alt>标签。

<!DOCTYPE html>
<html>
<head>
    <title>可访问性图像画廊</title>
</head>
<body>
    <h1>我的图像画廊</h1>
    <img src="image1.jpg" alt="描述图像1的内容">
    <img src="image2.jpg" alt="描述图像2的内容">
    <img src="image3.jpg" alt="描述图像3的内容">
</body>
</html>

6.3.3 案例 2：创建一个可访问性良好的表单

这个示例展示了一个带有清晰标签的表单，方便所有用户填写。

<!DOCTYPE html>
<html>
<head>
    <title>可访问性表单</title>
</head>
<body>
    <h1>注册表单</h1>
    <form>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email"><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password"><br>

        <input type="submit" value="提交">
    </form>
</body>
</html>

6.3.4 案例 3：创建一个适用于屏幕阅读器的文章**

在这个例子中，我们将创建一个文章页面，其中使用了适当的标题和语义化标签，以便屏幕阅读器用户能够轻松地导航。

<!DOCTYPE html>
<html>
<head>
    <title>适用于屏幕阅读器的文章</title>
</head>
<body>
    <header>
        <h1>文章标题</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#section1">第一节</a></li>
            <li><a href="#section2">第二节</a></li>
        </ul>
    </nav>
    <main>
        <section id="section1">
            <h2>第一节标题</h2>
            <p>第一节内容...</p>
        </section>
        <section id="section2">
            <h2>第二节标题</h2>
            <p>第二节内容...</p>
        </section>
    </main>
    <footer>
        <p>页脚信息</p>
    </footer>
</body>
</html>

通过这些案例，你可以看到如何通过HTML增强网站的可访问性，使其对各种用户更加友好。这不仅是关于遵守指导原则，更是关于创造一个每个人都可以轻松访问和享受的数字空间。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/359601.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

干货 | 大模型在图数据分析、推荐系统和生物科学中的综合应用

干货 | 大模型在图数据分析、推荐系统和生物科学中的综合应用

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 图机器学习、推荐系统与大语言模型的融合正成为新的前沿热点。图机器学习通过利用图结构数据&#xff0c;能够有效地捕捉和分析复杂关系和模式。同时&#xff0c;推荐系统正逐步成为我们日常生活的一部分&#…
阅读更多...
5G_RACH（一）

5G_RACH（一）

什么是RACH RACH 代表 Random Access Channel。这是开机时UE发给eNB的第一条消息。 为什么选择RACH &#xff1f;&#xff08;RACH 的功能是什么&#xff1f; 当你第一次听到RACH或RACH Process这个词时&#xff0c;你脑海中浮现的第一个问题是“为什么是RACH&#xff1f;”…
阅读更多...
前端Web开发

前端Web开发

安装flask框架 pip install flask 导入flask模块 from flask import Flask 【可能遇到的问题】 出现了如下警告&#xff1a; WARNING: You are using pip version 21.2.4; however, version 22.0.4 is available.You should consider upgrading via the D:\Python\python…
阅读更多...
EPSON RC 机器人-第一个程序

EPSON RC 机器人-第一个程序

创建项目 有机械人且用USB线连接好。可以USB。没有真机的选择 C4 Sample 可以运行程序。 否刚会提示【不能连接到控制器&#xff0c;未安装USB驱动器】 代码 按F5打开运行窗口 再点【开始】 点 【是】&#xff0c;查看运行结果
阅读更多...
GMS测试BTSfail-CVE-2022-20451

GMS测试BTSfail-CVE-2022-20451

描述&#xff1a; 项目需要过GMS兼容性测试&#xff0c;BTS这块我们环境没有&#xff0c;送检之后出现了一个BTS的Alert&#xff0c;这个是必须要解决的。下面的warning可以不考虑。 这个是patch问题&#xff0c;根据代理提供的pdf文件找到一个id:为A-235098883的补丁&#xf…
阅读更多...
C#，德兰诺依数（Dealnnoy Number）的算法与源代码

C#，德兰诺依数（Dealnnoy Number）的算法与源代码

1 Dealnnoy Number 德兰诺依数&#xff0c;德兰诺伊数 德兰诺依数是以法国军官、业余数学家亨利德兰诺依&#xff08;Henry Dealnnoy&#xff09;的名字命名。 Henry Dealnnoy 在组合数学中&#xff0c;德兰诺依数描述了从(0,0)到(m,n)的格路问题中&#xff0c; 只允许按照(0…
阅读更多...
TensorFlow2实战-系列教程14：Resnet实战1

TensorFlow2实战-系列教程14：Resnet实战1

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 1、残差连接 深度学习中出现了随着网络的堆叠效果下降的现象&#xff0c;Resnet使用残…
阅读更多...
BTC交易数据是什么样子的

BTC交易数据是什么样子的

如何储存 交易数据是用字节的形式存储在区块链中&#xff0c;但是我们分析和处理的时候一般使用16进制。另外BTC的数据都是通过小端模式存储的。 16进制&#xff1a;计算机的世界只有2进制&#xff0c;但是为了节省空间已经增加可读性&#xff0c;BTC使用了16进制的形式来保存数…
阅读更多...
蓝桥杯 第 1 场 小白入门赛

蓝桥杯 第 1 场 小白入门赛

目录 1.蘑菇炸弹 2.构造数字 3.小蓝的金牌梦 4.合并石子加强版 5.简单的LIS问题 6.期望次数 1.蘑菇炸弹 我们直接依照题目 在中间位置的数进行模拟即可 void solve(){cin>>n;vector<int> a(n1);for(int i1;i<n;i) cin>>a[i];int ans0;for(int i2;i…
阅读更多...
氢气泄漏检测仪使用方法：守护安全，从细节开始

氢气泄漏检测仪使用方法：守护安全，从细节开始

随着科技的发展&#xff0c;我们的生活和工作环境中充满了各种潜在的危险。其中&#xff0c;氢气作为一种清洁能源&#xff0c;其使用日益广泛&#xff0c;但同时也带来了泄漏的风险。为了确保我们的安全&#xff0c;了解并正确使用氢气泄漏检测仪至关重要。下面将详细介绍氢气…
阅读更多...
Optimism的挑战期

Optimism的挑战期

1. 引言 前序博客&#xff1a; Optimism的Fault proof 用户将资产从OP主网转移到以太坊主网时需要等待一周的时间。这段时间称为挑战期&#xff0c;有助于保护 OP 主网上存储的资产。 而OP测试网的挑战期仅为60秒&#xff0c;以简化开发过程。 2. OP与L1数据交互 L1&#xf…
阅读更多...
STM32学习笔记二——STM32时钟源时钟树

STM32学习笔记二——STM32时钟源时钟树

目录 STM32芯片内部系统架构详细讲解&#xff1a; 1.芯片内部混乱电信号解决方案&#xff1a; 2.时钟树&#xff1a; 1.内部RC振荡器与外部晶振的选择 2. STM32 时钟源 3.STM32中几个与时钟相关的概念 4.时钟输出的使能及其流程 5.时钟设置的基本流程 时钟源——单片机…
阅读更多...
上海亚商投顾：创业板指失守1600点 全市场超5000只个股下跌

上海亚商投顾：创业板指失守1600点 全市场超5000只个股下跌

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日低开低走&#xff0c;深成指跌超2%&#xff0c;创业板指失守1600点&#xff0c;续创年内新低。脑机接…
阅读更多...
C语言KR圣经笔记 6.6 表查询 6.7 typedef

C语言KR圣经笔记 6.6 表查询 6.7 typedef

6.6 表查询 为了说明结构体的更多方面&#xff0c;本节我们来写一个表查询功能包的内部代码。在宏处理器或编译器的符号表管理例程中&#xff0c;这个代码是很典型的。例如&#xff0c;考虑 #define 语句&#xff0c;当遇到如下行 #define IN 1 时&#xff0c;名称 IN 与其对…
阅读更多...
n-皇后-dfs

n-皇后-dfs

import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import java.io.OutputStreamWriter; import java.util.Scanner;public class Main {static int n,N 20; //这里只会用到2 * n - 1的格子,开大点保险static char[][] g new c…
阅读更多...
Makefile编译原理 makefile中的include关键字

Makefile编译原理 makefile中的include关键字

一.makefile中的include关键字 类似C语言中的include 将其他文件的内容原封不动的搬入当前文件 make对include关键字的处理方式&#xff1a; 在当前目录搜索或指定目录搜索目标文件 搜索成功&#xff1a;将文件内容搬入当前makefile中 搜索失败&#xff1a;产生警告&…
阅读更多...
聚观早报 | 360 AI搜索App上线；岚图汽车与京东达成合作

聚观早报 | 360 AI搜索App上线；岚图汽车与京东达成合作

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 1月30日消息 360 AI搜索App上线 岚图汽车与京东达成合作 三星电子在硅谷新设实验室 小米平板7系列参数曝光 Spa…
阅读更多...
大创项目推荐 题目：基于深度学习的中文对话问答机器人

大创项目推荐 题目：基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…
阅读更多...
代码随想录算法刷题训练营day20

代码随想录算法刷题训练营day20

代码随想录算法刷题训练营day20&#xff1a;LeetCode(654)最大二叉树、LeetCode(617)合并二叉树、LeetCode(700)二叉搜索树中的搜索、LeetCode(700)二叉搜索树中的搜索、LeetCode(98)验证二叉搜索 LeetCode(654)最大二叉树 题目 代码 import java.util.Arrays;/*** Definit…
阅读更多...
MATLAB有限元应用-四边形八节点梁受力弯曲

MATLAB有限元应用-四边形八节点梁受力弯曲

MATLAB在处理平面有限元问题和梁弯曲问题上有很强的能力,主要体现在以下几个方面: 建模与网格划分 MATLAB内置了方便的图形界面工具(pdetoolbox等),可以快速对几何模型进行二维三维网格划分,生成有限元分析需要的网格。 求解器 MATLAB内置了多种求解偏微分方程的有限元求解器…
阅读更多...
最新文章

Copyright @ 2022~2023