2.3 HTML5新增的常用标签

2.3.1 HTML5新增文档结构标签

    HTML5版本之前通常直接使用<div>标签进行网页整体布局,常见布局包括页眉、页脚、导航菜单和正文部分。为了区分文档结构中不同的<div>内容,一般会为其配上不同的id名称。例如:

<div id="header">
这是网页的页眉部分
</div>
<div id="content">
这是网页的正文部分
</div>
<div id="footer">
这是网页的页脚部分
</div>

    由于id名称是自定义的,如果HTML文档作者没有提供明确含义的id名称,也会导致含义不明确。例如将上述代码中的<div id="header">替换成<div id="abc">不影响网页的页面显示效果,但是查看网页代码时会比较难以理解其含义。

    因此HTML5为了代码更好的语义化,新增了一系列专用文档结构标签代替原先用<div>加上id名称的做法。新增文档结构标签如表所示。

1. 页眉标签<header>

页眉标签<header></header>用于定义网页文档或节的页眉,通常为网站名称。 

2. 导航标签<nav>

导航标签<nav></nav>用于定义网页文档的导航菜单,可通过超链接跳转其他页面。其中nav来源于navigation(导航)的简写。

3. 节标签<section>

节标签<section></section>用于定义独立的专题区域,里面可包含一篇或多篇文章。

4. 文章标签<article>

文章标签<article></article>用于定义独立的文章区域,里面根据文章内容的长短也可以包含一个或多个段落元素<p>

5. 侧栏标签<aside>

侧栏标签<aside></aside>用于定义正文两侧的相关内容,常用作文章的侧栏。

6. 页脚标签<footer>

页脚标签<footer></footer>用于定义整个网页文档或节的页脚,通常包含文档的作者、版权、联系方式等信息。

2.3.2 HTML5新增格式标签

1. 记号标签<mark>

    记号标签<mark>用于突出显示指定区域的文本内容,通常在指定的文本前后分别加上<mark></mark>标签标记,可以为文字添加黄色底色。支持该标签的浏览器有IE9及以上版本,FirefoxOperaChrome和Safari。

2. 进度标签<progress>

    进度标签<progress>用于显示任务的进度状态,可配合JavaScript使用以显示任务进度的动态进行效果。支持该标签的浏览器有IE10及以上版本,FirefoxOperaChromeSafari 6

    该标签可以加上属性valuemax分别用于定义任务进度的当前值和最大值。例如,表示目前任务进度已经进行了80%的代码如下:

<progress value="80" max="100"></progress>

3. 度量标签<meter>

    度量标签<meter>用于显示标量测量结果,通常用于显示磁盘使用量、投票数据统计等。该标签通常应用于已知范围内的恒定数值标记,不用于任务进度指示。支持该标签的浏览器有FirefoxOperaChromeSafari 6。需要注意的是目前IE尚未对该标签进行支持。

    度量标签<meter>有一系列属性用于辅助显示效果,这些属性的相关说明如表所示。

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

5个AI智能写作助手,为创作提供便利与支持

在当今信息爆炸的时代&#xff0c;写作已经成为各行各业中不可或缺的一部分。然而&#xff0c;对于许多人来说&#xff0c;写作仍然是一项具有挑战性的任务。幸运的是&#xff0c;随着人工智能技术的发展&#xff0c;AI智能写作助手的出现为我们提供了极大的便利和支持。在本文…

华为WLAN配置攻击检测功能示例

华为WLAN配置攻击检测功能示例 组网图形 图1 配置攻击检测功能组网图 配置流程组网需求配置思路配置注意事项操作步骤配置文件 配置流程 WLAN不同的特性和功能需要在不同类型的模板下进行配置和维护&#xff0c;这些模板统称为WLAN模板&#xff0c;如域管理模板、射频模板、…

如何使用ROS和easymqos快速搭建一辆语音控制导航的机器人

之前做的机器人小车基本都属于电脑或手机控制操作。目前&#xff0c;使用语音控制机器人小车运动&#xff0c;让机器人导航去指定地点&#xff0c;已经成为热门&#xff0c;并且语音识别技术已经有落地方案&#xff0c;可满足生活中的基本需要。有些语音芯片通过高算力处理器运…

llamma笔记:部署Llama2

1 申请Llama2 许可 Download Llama (meta.com) 地址似乎不能填中国 1.1 获取url 提交申请后&#xff0c;填的那个邮箱会受到一封meta发来的邮件&#xff0c;打码部分的url&#xff0c;之后会用得上 2 ubuntu/linux 端部署Llama2 2.1 git clone Llama2的github 仓库 bash g…

NFTScan 正式上线 Blast NFTScan 浏览器和 NFT API 数据服务

2024 年 3 月 15 号&#xff0c;NFTScan 团队正式对外发布了 Blast NFTScan 浏览器&#xff0c;将为 Blast 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。NFTScan 作为全球领先的 NFT 数据基础设施服务商&#xff0c;Blast 是继 Bitcoin、Ethereum、BNBChain、…

智慧能源管理系统在大学校园的应用-安科瑞 蒋静

1 背景 为贯彻落实《中共中央国务院关于完整准确全面贯彻新发展理念做好碳达峰碳中和工作的意见》和《国务院关于印发2030年前碳达峰行动方案的通知》要求&#xff0c;把绿色低碳发展纳入国民教育体系。 2 传统模式的痛点 传统项目模式下的系统方案缺乏整体的能源监测和管控…

【Linux】Shell编程【二】

目录 Shell流程控制条件测试注意事项示例[ condition ]与[[ condition ]]的区别 if条件单分支语法示例1&#xff1a;统计根分区使用率示例2&#xff1a;创建目录 双分支if条件语句语法案例1&#xff1a;备份mysql数据库案例2&#xff1a;判断apache是否启动&#xff0c;如果没有…

TinTin Web3 动态精选:以太坊坎昆升级利好 Layer2,比特币减半进入倒计时

TinTin 快讯由 TinTinLand 开发者技术社区打造&#xff0c;旨在为开发者提供最新的 Web3 新闻、市场时讯和技术更新。TinTin 快讯将以周为单位&#xff0c; 汇集当周内的行业热点并以快讯的形式排列成文。掌握一手的技术资讯和市场动态&#xff0c;将有助于 TinTinLand 社区的开…

掘根宝典之C++类型别名,关键字typedef,auto,decltype

类型别名 在C中&#xff0c;我们可以使用typedef关键字或using关键字来创建类型别名。下面是两种方式的示例&#xff1a; 使用typedef关键字创建类型别名&#xff1a; typedef int myInt; typedef float myFloat;myInt a;//等价int a; myFloat b;//等价float b; 使用using关…

《Python深度学习》阅读笔记

以下是《Python深度学习》一书中学习过程中记录的一些重要的专属名词和概念&#xff1a; 一、概念 深度学习&#xff08;Deep Learning&#xff09;&#xff1a;指使用多层神经网络进行机器学习的技术。神经网络&#xff08;Neural Network&#xff09;&#xff1a;一种模仿生…

【Algorithms 4】算法(第4版)学习笔记 18 - 4.4 最短路径

文章目录 前言参考目录学习笔记0&#xff1a;引入介绍1&#xff1a;APIs1.1&#xff1a;API&#xff1a;加权有向边1.2&#xff1a;Java 实现&#xff1a;加权有向边1.3&#xff1a;API&#xff1a;加权有向图1.4&#xff1a;Java 实现&#xff1a;加权有向图1.5&#xff1a;AP…

【C语言】分支语句(逻辑运算符与关系运算符)

文章目录 **逻辑运算符(&&、||、!)**逻辑运算符特点短路短路-逻辑与短路-逻辑或 **关系运算符&#xff08;relational expression&#xff09;**运算操作符的结合律、运算符 **选择结构/分支结构****if 语句****复合句的if语句(if...else..语句)****不良风格的程序** *…

力扣hot100:416.分割等和子集(组合/动态规划/STL问题)

组合数问题 我们思考一下&#xff0c;如果要把数组分割成两个子集&#xff0c;并且两个子集的元素和相等&#xff0c;是否等价于在数组中寻找若干个数使之和等于所有数的一半&#xff1f;是的&#xff01; 因此我们可以想到&#xff0c;两种方式&#xff1a; ①回溯的方式找到t…

DC-DC电源管理芯片MC34063A介绍

MC34063A 为一单片 DC-DC 变换集成电路&#xff0c;内含温度补偿的参考电压源&#xff08;1.25V&#xff09;、比较器、能有效限制电流及控制工作周期的振荡器&#xff0c;驱动器及大电流输出开关管等。外配少量元件&#xff0c;就能组成升压、降压及电压反转型 DC-DC 变换器。…

计算机系统基础 2 Intel 中央处理器

Intel微处理器的发展史 INTegrated ELectronics&#xff08;集成电子&#xff09;的缩写 先后推出的中央处理器&#xff1a; Intel4004、Intel8008、Intel8080/8085、8086/8088、80186、80286、i386、i486 Pentium&#xff08;奔腾&#xff09;、Pentium II、Pentium III、Pen…

Android Studio实现内容丰富的安卓宠物用品商店管理系统

获取源码请点击文章末尾QQ名片联系&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动。 项目编号128 1.开发环境android stuido jdk1.8 eclipse mysql tomcat 2.功能介绍 安卓端&#xff1a; 1.注册登录 2.系统公告 3.宠物社区&#xff08;可发布宠物帖子&#…

php中 0 == ‘’(0等于任意字符串) 判断是否成立 返回true

php中不同类型变量之间比较大小 一、背景二、探究0是为什么&#xff1f;三、探究 0all是为什么&#xff1f;四、程序中如何判断0是否等于指定字符串 一、背景 最近在项目实际开发中&#xff0c;我需要判断前端传来的参数值是否等于一个字符串&#xff1b;然后发现当参数值是0时…

论文阅读——ViTAE

ViTAE: Vision Transformer Advanced by Exploring Intrinsic Inductive Bias ViTAE旨在将细胞神经网络中固有的IB引入视觉转换器。如图2所示&#xff0c;ViTAE由两种类型的细胞组成&#xff0c;即RC和NC。RC负责将多尺度上下文和局部信息嵌入到令牌中&#xff0c;NC用于进一步…

XXE漏洞原理和pikachu靶场实验

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、XXE漏洞原理 XXE全称&#xff1a;XML External Enti…

JUnit 面试题及答案整理,最新面试题

JUnit中的断言&#xff08;Assert&#xff09;有哪些类型&#xff1f; JUnit提供了多种断言类型来帮助测试代码的正确性。常见的断言类型包括&#xff1a; 1、assertEquals&#xff1a; 用于检查两个值是否相等。如果不相等&#xff0c;测试失败。 2、assertTrue和assertFal…