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

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

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

相关文章

SSD寻址单元IU对寿命的影响有多大？

SSD寻址单元IU对寿命的影响有多大？

随着存储技术的不断进步&#xff0c;固态硬盘SSD的容量正以惊人的速度增长&#xff0c;尤其是采用高密度QLC NAND闪存技术的大容量SSD&#xff0c;如30TB及以上级别的产品。QLC NAND由于每个单元能够存储4比特数据&#xff0c;从而显著提高了存储密度&#xff0c;但同时也带来了…
阅读更多...
纯html+css+js静态汽车商城

纯html+css+js静态汽车商城

首页代码 <!DOCTYPE html> <html class"no-js" lang"zxx"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&qu…
阅读更多...
学会用Python分割、合并字符串

学会用Python分割、合并字符串

在很多情况下&#xff0c;我们需要对字符串进行分割或合并&#xff0c;以满足特定的需求&#xff0c;例如将字符串拆分成多个部分、将多个字符串合并成一个等等。Python提供了多种方法来进行字符串的分割和合并&#xff0c;本文将介绍其中几种常用的方法。 一、使用split()函数…
阅读更多...
Vue-43、Vue中组件自定义事件

Vue-43、Vue中组件自定义事件

1、给学生绑定atguigu事件 2、在组件内触发事件 第二种写法 传多个参数。 解绑 解绑一个事件 解绑多个自定义事件 this.$off([xxx1,xxx2]);解绑所有事件 this.$off();总结
阅读更多...
IDEA Java常用快捷键

IDEA Java常用快捷键

目录 main方法快捷键&#xff1a;psvm输出语句&#xff1a;sout复制行&#xff1a;ctrld删除行&#xff1a;ctrly单行注释或多行注释 &#xff1a; Ctrl / 或 Ctrl Shift /for循环 直接 &#xff1a;fori代码块包围&#xff1a;try-catch,if,while等 ctrlaltt缩进&#xff1…
阅读更多...
四、防御保护---防火墙NAT篇

四、防御保护---防火墙NAT篇

四、防御保护---防火墙NAT篇 一、源NAT二、目标NAT三、双向NAT四、多出口NAT 一、源NAT 源NAT — 基于源IP地址进行转换。我们之前接触过的静态NAT&#xff0c;动态NAT&#xff0c;NAPT都属于源NAT&#xff0c;都是针对源IP地址进行转换的。源NAT主要目的是为了保证内网用户可…
阅读更多...
一体化设计：兼容多种OS系统Linux网关楼宇DDC

一体化设计：兼容多种OS系统Linux网关楼宇DDC

在工业物联网&#xff08;IIoT&#xff09;和智能建筑领域&#xff0c;钡铼网关具备高度灵活性与强大计算能力的边缘网关产品正逐渐成为推动行业智能化转型的关键要素。本文将详细介绍的基于Linux系统的4G工业智能网关&#xff0c;不仅拥有NXP i.MX8M Mini四核64位处理器的强大…
阅读更多...
《golang设计模式》第三部分·行为型模式-10-模板方法（Template Method）

《golang设计模式》第三部分·行为型模式-10-模板方法（Template Method）

文章目录 1. 概述1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概述 模板方法&#xff08;Template Method&#xff09;用来定义算法的框架&#xff0c;将算法中的可变步骤定义为抽象方法&#xff0c;指定子类实现或重写。 1.1 角色 AbstractClass&#xff08;…
阅读更多...
Kettle-Docker部署+Sqlserver数据同步Mysql+Start定时任务

Kettle-Docker部署+Sqlserver数据同步Mysql+Start定时任务

一. 背景介绍 1. ETL是什么 ETL&#xff08;Extract-Transform-Load&#xff09;&#xff0c;即数据抽取、转换、装载的过程。它是一种思想&#xff0c;主要是说&#xff0c;从不同的数据源获取数据&#xff0c;并通过对数据进行处理&#xff08;格式&#xff0c;协议等转换&a…
阅读更多...
第32关 k8s集群管理开源神器 - k9s

第32关 k8s集群管理开源神器 - k9s

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维。 随着我们管理维护的K8S集群上线&#xff0c;怎么管理好集群上面成百上千的服务pod&#xff0c;就是我们该操心的事情了。这里博哥把在生产中一直在用的一个开源管理工具k8s&#xff0c;github…
阅读更多...
Jenkins如何从GIT下拉项目并启动Tomcat

Jenkins如何从GIT下拉项目并启动Tomcat

一、先添加服务器 二、添加视图 点击控制台输出&#xff0c;滑到最下面&#xff0c;出现这个就说明构建成功了&#xff0c;如果没有出现&#xff0c;说明构建有问题&#xff0c;需要解决好问题才能启动哦~
阅读更多...
C++实现通讯录管理系统

C++实现通讯录管理系统

目录 1、系统需求 2、创建项目 2.1 创建项目 3、菜单功能 4、退出功能 5、添加联系人 5.1 设计联系人结构体 5.2 设计通讯录结构体 5.3 main函数中创建通讯录 5.4 封装联系人函数 5.5 测试添加联系人功能 6、显示联系人 6.1 封装显示联系人函数 7、删除联系人 7.1…
阅读更多...
GPT栏目：yarn 安装

GPT栏目：yarn 安装

GPT栏目&#xff1a;yarn 安装 一、前言 在跟GPT交互的时候&#xff0c;发现最近gpt4给出的答案率有了比较明显的提高&#xff0c;简单记录一下&#xff0c;我用gpt4拿到的答案吧。 本人已按照这个步骤成功 二、具体步骤 要安装 yarn&#xff0c;你可以按照以下步骤进行操作…
阅读更多...
MyBatis常见面试题汇总

MyBatis常见面试题汇总

说一下MyBatis执行流程&#xff1f; MyBatis是一款优秀的基于Java的持久层框架&#xff0c;它内部封装了JDBC&#xff0c;使开发者只需要关注SQL语句本身&#xff0c;而不需要花费精力去处理加载驱动、创建连接等的过程&#xff0c;MyBatis的执行流程如下&#xff1a; 加载配…
阅读更多...
Google Chrome 常用的几个参数

Google Chrome 常用的几个参数

1 右键--Google Chrome--属性--目标 参数作用--disable-infobars此计算机将不会再收到 Google Chrome 更新&#xff0c;因为 Windows XP 和 Windows Vista 不再受支持。适用于 xp、2003 的 49.x.x.x 版本。示例1--ingore-certificate-errors忽略证书错误--disable-background-…
阅读更多...
【计算机网络】【练习题及解答】【新加坡南洋理工大学】【Computer Control Network】

【计算机网络】【练习题及解答】【新加坡南洋理工大学】【Computer Control Network】

说明&#xff1a; 仅供学习使用。 一、题目描述 题目共4问&#xff0c;描述网络通信中的 帧传输时延&#xff08;Frame Delay&#xff09;、传播时延&#xff08;Propagation Delay&#xff09;&#xff0c;以及 链接利用率&#xff08;Link Utilization&#xff09; 的相关…
阅读更多...
Vue2：通过代理服务器解决跨域问题

Vue2：通过代理服务器解决跨域问题

一、场景描述 现在的项目大多数是前后端分离的。Vue前端项目通过ajax去请求后端接口的时候&#xff0c;会有同源策略的限制。从而产生跨域问题。 二、基本概念 1、什么是同源策略&#xff1f; 就是前端服务和后端服务的协议名&#xff0c;IP或主机名&#xff0c;端口号不完…
阅读更多...
0x02递推与递归

0x02递推与递归

0x02递推与递归 递推者&#xff0c;自小而大&#xff0c;循序渐进&#xff1b;递归者&#xff0c;由上而下&#xff0c;分而治之 文章目录 0x02递推与递归例题T1&#xff1a;T2&#xff1a;T3&#xff1a;T4:T5T6 例题 T1&#xff1a; 92. 递归实现指数型枚举 - AcWing题库 …
阅读更多...
Mysql 插入数据

Mysql 插入数据

1 为表的所有字段插入数据 使用基本的INSERT语句插入数据要求指定表名称和插入到新记录中的值。基本语法格式为&#xff1a; INSERT INTO table_name (column_list) VALUES (value_list); 使用INSERT插入数据时&#xff0c;允许列名称列表column_list为空&#xff0c;此时&…
阅读更多...
Web服务器之Tomcat

Web服务器之Tomcat

文章目录 Web 服务器软件简介资源分类访问流程常见的Web服务器软件 Tomcat简介使用步骤使用Tomcat注意事项部署项目的方式方式一方式二方式三 问题中文乱码黑窗口一闪而过启动报错 Web 服务器软件 简介 服务器&#xff1a;安装了服务器软件的计算机服务器软件&#xff1a;接收…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023