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

news2024/12/29 10:36:32

在这里插入图片描述

文章目录

  • 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增强网站的可访问性，使其对各种用户更加友好。这不仅是关于遵守指导原则，更是关于创造一个每个人都可以轻松访问和享受的数字空间。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

HAL库之看门狗

HAL库之看门狗

一、看门狗的介绍 &#xff08;1&#xff09;独立看门狗(IWDG)&#xff1a;独立看门狗由专用的低速时钟(LSI)驱动&#xff0c;即使主时钟发生故障它也仍然有效。因此叫独立&#xff0c;同时因此在低功耗模式下不能启动看门狗&#xff0c;低功耗详情见之前文章。IWDG比WWDG更精…
阅读更多...
macos Android平台签名证书(.keystore)

macos Android平台签名证书(.keystore)

一、申请appid的使用说明&#xff08;有appid的请忽略申请appid&#xff09; 创建应用 申请的appid在源码视图填写后会自动生成一个对应的包名 ⚠️注意&#xff1a;申请appid的时候应用名称和项目名称保持一致。 二、 Android如何使用自用证书进行打包 1.找到安装jdk的路径…
阅读更多...
D25XB100-ASEMI整流桥D25XB100参数、封装、规格

D25XB100-ASEMI整流桥D25XB100参数、封装、规格

编辑&#xff1a;ll D25XB100-ASEMI整流桥D25XB100参数、封装、规格 型号&#xff1a;D25XB100 品牌&#xff1a;ASEMI 正向电流&#xff08;Id&#xff09;&#xff1a;25A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#xff1a;350A 正向…
阅读更多...
win10设置重启自动运行

win10设置重启自动运行

大家知道windows系列非常不稳定&#xff0c;经常更新&#xff0c;蓝屏&#xff0c;死机等。 所以服务部署在上面会经常挂掉。当他重启后&#xff0c;对应的服务要是没有开启成功就会出问题。 所以我们需要在重启后启动。 1.首先把你想要的执行的程序写一个bat脚本 这个是我的…
阅读更多...
C语言第十三弹---VS使用调试技巧

C语言第十三弹---VS使用调试技巧

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 VS调试技巧 1、什么是bug 2、什么是调试&#xff08;debug&#xff09;&#xff1f; 3、Debug和Release​编辑​ 4、VS调试快捷键 4.1、环境准备 4.2、调试…
阅读更多...
学习Spring的第十二天

学习Spring的第十二天

Bean基本注解开发 创建一个空Maven项目: 创建完如下 之后在pom文件配置坐标 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.3.7</version></depe…
阅读更多...
翻译: GPT-4 Vision征服LLM幻觉hallucinations 升级Streamlit六

翻译: GPT-4 Vision征服LLM幻觉hallucinations 升级Streamlit六

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三翻译: GPT-4 Vision从图像转换为完全可编辑的表格 升级St…
阅读更多...
Windows系统安装OpenSSH+VS Code结合内网穿透实现远程开发

Windows系统安装OpenSSH+VS Code结合内网穿透实现远程开发

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…
阅读更多...
Netty-ChannelHandle的业务处理

Netty-ChannelHandle的业务处理

ChannelHandle结构 ChannelHandler基础接口 基础接口里面定义的基础通用方法。增加handler&#xff0c;移除handler&#xff0c;异常处理。 ChannelInboundHandler public interface ChannelInboundHandler extends ChannelHandler {/*** The {link Channel} of the {link Ch…
阅读更多...
学习PyQt5

学习PyQt5

1、布局之后&#xff0c;无法移动对象到指定区域&#xff0c;无法改变对象大小。 原因&#xff1a;因为CtrlA选中了整个窗口&#xff0c;然后布局的时候就相当于整个窗口都按照这种布局&#xff0c;如选了水平布局&#xff0c;按钮一直在中间&#xff0c;无法拖到其它位置。 …
阅读更多...
如何安装配置HFS并实现无公网ip远程访问本地电脑共享文件

如何安装配置HFS并实现无公网ip远程访问本地电脑共享文件

文章目录 前言1.下载安装cpolar1.1 设置HFS访客1.2 虚拟文件系统 2. 使用cpolar建立一条内网穿透数据隧道2.1 保留隧道2.2 隧道名称2.3 成功使用cpolar创建二级子域名访问本地hfs 总结 前言 在大厂的云存储产品热度下降后&#xff0c;私人的NAS热度快速上升&#xff0c;其中最…
阅读更多...
那些年与指针的情仇（二）---二级指针指针与数组的那点事函数指针

那些年与指针的情仇（二）---二级指针指针与数组的那点事函数指针

关注小庄 顿顿解馋(&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e; 欢迎回到我们的大型纪录片《那些年与指针的爱恨情仇》&#xff0c;在本篇博客中我们将继续了解指针的小秘密&#xff1a;二级指针&#xff0c;指针与数组的关系以及函数指针。请放心食用&a…
阅读更多...
【Kafka】服务器Broker与Controller详解

【Kafka】服务器Broker与Controller详解

这里写自定义目录标题 Broker概述Broker总体工作流程Broker重要参数 Controller为什么需要Controller具体作用数据服务Leader选举选举流程脑裂问题羊群效应触发leader选举 Broker 概述 Kafka服务实例&#xff0c;负责消息的持久化、中转等功能。一个独立的Kafka 服务器被就是…
阅读更多...
[N-135]基于springboot,vue高校图书馆管理系统

[N-135]基于springboot,vue高校图书馆管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;gradle-5.6.4 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatisred…
阅读更多...
【HarmonyOS应用开发】ArkUI 开发框架-基础篇-第一部分（七）

【HarmonyOS应用开发】ArkUI 开发框架-基础篇-第一部分（七）

常用基础组件 一、组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类…
阅读更多...
Web 开发 9：Django 框架基础

Web 开发 9：Django 框架基础

在本篇文章中&#xff0c;我们将深入探讨 Django 框架的基础知识。Django 是一个功能强大且流行的 Python Web 框架&#xff0c;它提供了一套完整的工具和功能&#xff0c;用于开发高效、可扩展的 Web 应用程序。 什么是 Django&#xff1f; Django 是一个基于 Python 的免费…
阅读更多...
STM32——中断系统和外部中断EXTI

STM32——中断系统和外部中断EXTI

一、中断 1.1中断系统 中断系统是管理和执行中断的逻辑结构&#xff1b; 1.2中断 系统在执行主程序过程中&#xff0c;出现了特定的触发条件&#xff08;触发源&#xff09;&#xff0c;系统停止执行当前程序&#xff0c;转而去执行中断程序&#xff0c;执行完毕后&#xf…
阅读更多...
Java基础数据结构之Lambda表达式

Java基础数据结构之Lambda表达式

一.语法 基本语法&#xff1a;(parameters)->expression或者(parameters)->{statements;} parameters&#xff1a;类似方法中的形参列表&#xff0c;这里的参数是函数式接口里面的参数。这里的参数可以明确说明&#xff0c;也可以不声明而由JVM隐含的推断。当只有一个推…
阅读更多...
C++大学教程（第九版）7.30 打印array对象 7.31 逆序打印字符串（递归练习题）

C++大学教程（第九版）7.30 打印array对象 7.31 逆序打印字符串（递归练习题）

文章目录 题目代码运行截图题目代码运行截图 题目 (打印array对象)编写一个递归函数printArray它以一个array对象一个开始下标和一个结束下标作为实参&#xff0c;不返回任何值并打印这个array对象。当开始下标和结束下标相等时&#xff0c;这个函数应该停止处理并返回。 代码…
阅读更多...
关于paddleocr的predict_system按高度顺序画图

关于paddleocr的predict_system按高度顺序画图

关于paddleocr的predict_system按高度顺序画图&#xff0c;&#xff08;coco格式&#xff09; 增加adjust_res函数&#xff1a; 实现代码&#xff1a; def adjust_res(res):res_cp deepcopy(res)res_cp sorted(res_cp, keylambda x: x[bbox][1], reverseFalse)return res …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023