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://www.mzph.cn/news/750225.shtml

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

相关文章

每天学习一个Linux命令之rsync

每天学习一个Linux命令之rsync 介绍 在Linux系统中&#xff0c;有许多强大的工具可用于文件和目录之间的同步和备份。其中一个最常用且功能强大的工具是rsync。rsync是一款开源的命令行工具&#xff0c;用于快速、安全和有效地将文件和目录从一个位置同步到另一个位置。 rsy…

FFmpeg转码参数说明及视频转码示例

-b : 设置音频或者视频的转码码率 -b:v 只设置视频码率 -b:a 只设置音频码率 -ab: 只设置音频码率, 默认码率大小为: 128k bit/s -g: 设置视频GOP大小,表示I帧之间的间隔,默认为12 -ar: 设置音频采样率,默认0 -ac: 设置音频通道数量 默认0 -bf: 设置连…

CTFHUB-web-信息泄漏

题目所在位置&#xff1a;技能树->web->信息泄漏 目录遍历 打开题目&#xff0c;我们进入的是这个页面 翻译过来就是 得到的信息就是&#xff1a;flag要在这些目录里面寻找&#xff0c;我们直接一个一个点开查看就行 发现得到一个flag.txt&#xff0c;点击打开得到flag …

开发K8S Operator

原理 大多数人使用Kubernetes的方式是使用原生资源(如pod、deployment、service等)部署应用程序。但是,也可以扩展Kubernetes的功能,从而添加满足特定需求的新业务逻辑,这就是Operator的作用。 作用 Operator应用,当我们在运用集群能力部署应用时,可能需要一组资源同时部…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:UIExtensionComponent (系统接口))

UIExtensionComponent用于支持在本页面内嵌入其他应用提供的UI。展示的内容在另外一个进程中运行&#xff0c;本应用并不参与其中的布局和渲染。 通常用于有进程隔离诉求的模块化开发场景。 说明&#xff1a; 该组件从API Version 10开始支持。后续版本如有新增内容&#xff0…

npm设置淘宝镜像地址

介绍 npm设置淘宝镜像 命令 npm config set registry https://registry.npmmirror.com/

【Java】List, Set, Queue, Map 区别?

目录 List, Set, Queue, Map 区别&#xff1f; Collection和Collections List ArrayList 和 Array区别&#xff1f; ArrayList与LinkedList区别? ArrayList 能添加null吗&#xff1f; ArrayList 插入和删除时间复杂度&#xff1f; LinkedList 插入和删除时间复杂度&…

k8s编排系统

Kubernetes&#xff08;简称K8s&#xff09;是一个开源的容器编排系统&#xff0c;由Google基于其内部的Borg项目开发&#xff0c;并于2014年正式对外发布。目前&#xff0c;Kubernetes已成为云原生计算基金会&#xff08;Cloud Native Computing Foundation, CNCF&#xff09;…

SDN网络简单认识(2)——南向接口

目录 一、概述 二、南向接口与南向协议 2.1 南向接口&#xff08;Southbound Interfaces&#xff09; 2.2 南向协议&#xff08;Southbound Protocols&#xff09; 2.3 区别与联系 三、常见南向协议 2.1 OpenFlow 2.2 OVSDB&#xff08;Open vSwitch Database Manageme…

计算机网络-数据链路层

一、认识以太网 "以太网" 不是⼀种具体的网络&#xff0c;而是一种技术标准; 既包含了数据链路层的内容, 也包含了⼀些物理 层的内容。 例如&#xff1a;规定了网络拓扑结构&#xff0c;访问控制方式&#xff0c;传输速率等; 例如&#xff1a;以太网中的网线必须使用…

vxe-table表格组件的使用已经query函数扩展

最近新项目使用vue3typescript开发后台管理系统&#xff0c;基本上展示内容一致表格的方式展示&#xff0c;所以使用vxe-table组件来开发&#xff0c;主要是为了方便使用工具栏&#xff0c;以及其他表格操作。 vxe-table 开发文档&#xff1a;https://vxetable.cn/#/table/sta…

免费开源多层级多标签文本分类|文本分类接口|文本自动分类

一、开源项目介绍 一款多模态AI能力引擎&#xff0c;专注于提供自然语言处理&#xff08;NLP&#xff09;、情感分析、实体识别、图像识别与分类、OCR识别和语音识别等接口服务。该平台功能强大&#xff0c;支持本地化部署&#xff0c;并鼓励用户体验和开发者共同完善&#xf…

火车订票管理系统|基于springboot框架+ Mysql+Java+B/S结构的火车订票管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 用户功能模块 系统功能设计 数据库E-R图设计 lunwen…

代码随想录算法训练营第二十五天 | 216. 组合总和 III、17. 电话号码的字母组合

代码随想录算法训练营第二十五天 | 216. 组合总和 III、17. 电话号码的字母组合 216. 组合总和 III题目解法 17. 电话号码的字母组合题目解法 感悟 216. 组合总和 III 题目 解法 修改上一天组合的代码 class Solution { public:vector<vector<int>> result;vect…

双向SSM: Vision Mamba Encoder

文章目录 Vision Mamba Encoder初始化输入映射序列变换参数映射BC参数映射delta参数映射 SSM参数初始化A , D矩阵初始化delta参数初始化 双向SSM初始化参数初始化 前向输入映射fast_pathuse_fast_pathno use_fast_path 双向SSMv1前向后向 v2前向后向 Vision Mamba Encoder Vis…

C++使用for(:)遇到的BUG

简化问题代码如下 #include<bits/stdc.h>using namespace std;int main() {vector<int> vec;vector<int> f(9,0);for(int i 0; i<9; i )vec.push_back(i); // for(int j 0; j < vec.size(); j ){ // int t vec[j]; // cout<&l…

数据结构的概念大合集04(队列)

概念大合集04 1、队列1.1 队列的定义1.2队列的顺序存储1.2.1 顺序队1.2.2 顺序队的基本运算的基本思想1.2.3 顺序队的4要素的基本思想 1.3 环形队列1.3.1 环形队列的定义1.3.1 环形队列的实现 1.4 队列的链式存储1.4.1 链队1.4.2 链队的实现方式1.4.3 链队的4要素的基本思想 1.…

kubernetes-maven-plugin部署到microk8s出现问题

为了简化开发环境&#xff0c;我在WSL Ubuntu 虚拟机上安装了一个microk8s环境&#xff0c;接着在项目开发中&#xff0c;想用kubernetes-maven-plugin部署一个服务到k8s上&#xff0c;但出现错误&#xff1a; [WARNING] Error reading service account token from: [/var/run…

C语言之快速排序

目录 一 简介 二 代码实现 快速排序基本原理&#xff1a; C语言实现快速排序的核心函数&#xff1a; 三 时空复杂度 A.时间复杂度 B.空间复杂度 C.总结&#xff1a; 一 简介 快速排序是一种高效的、基于分治策略的比较排序算法&#xff0c;由英国计算机科学家C.A.R. H…

Arthas使用案例(二)

说明&#xff1a;记录一次使用Arthas排查测试环境正在运行的项目BUG&#xff1b; 场景 有一个定时任务&#xff0c;该定时任务是定时去拉取某FTP服务器上的文件&#xff0c;进行备份、读取、解析等一系列操作。 而现在&#xff0c;因为开发环境是Windows&#xff0c; 线上项…