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.mfbz.cn/a/463280.html

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

相关文章

论文阅读——GeoChat(cvpr2024)

GeoChat : Grounded Large Vision-Language Model for Remote Sensing 一、引言 GeoChat&#xff0c;将多模态指令调整扩展到遥感领域以训练多任务会话助理。 遥感领域缺乏多模式指令调整对话数据集。受到最近指令调优工作的启发&#xff0c;GeoChat 使用 Vicuna-v1.5和自动化…

基于Matlab的车牌识别算法,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

C语言的位操作与位字段

C语言中的位操作允许程序员直接在整型变量的单个位或位组上进行操作。这种操作在许多低级编程任务中非常有用&#xff0c;尤其是在嵌入式系统编程中&#xff0c;如硬件操作、设备驱动及性能优化等场景。位操作主要使用以下几种位操作符&#xff1a; & &#xff08;按位与&a…

Rabbit MQ详解

写在前面,由于Rabbit MQ涉及的内容较多&#xff0c;赶在春招我个人先按照我认为重要的内容进行一定总结&#xff0c;也算是个学习笔记吧。主要参考官方文档、其他优秀文章、大模型问答。自己边学习边总结。后面有时间我会慢慢把所有内容补全&#xff0c;分享出来也是希望可以给…

软考高级:软件工程螺旋模型概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

小清新卡通人物404错误页面模板源码

小清新卡通人物404错误页面模板源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 小清新卡通人物404错误页面模板源码

uiCA模拟器和bHive benchmark的使用

概念 uiCA 基本块吞吐量预测器 github地址&#xff1a;GitHub - andreas-abel/uiCA: uops.info Code Analyzer uiCA是一个模拟器&#xff0c;可以预测基本块在最新的英特尔微体系结构上的吞吐量。除此之外&#xff0c;它还提供了代码执行的洞察。 uiCA基于来自uops.info的数…

分布式搜索引擎elasticsearch(2)

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;[Domain Specific Language](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html)&#xff09;来定义查…

获取扇区航班数

1、Spark Streaming清洗服务&#xff0c;接收kafka中Topic为“task_ATC”中的数据&#xff0c;保存在MySQL中。 打开SpringBoot项目BigData-Etl-KongGuan 请认真阅读&#xff1a;在前面的“使用Spark清洗统计业务数据并保存到数据库中”任务阶段中应该已经完成了所有Topic的数…

瑞_Redis_短信登录(二)

文章目录 项目介绍1.1 项目准备1.2 基于Session实现登录流程1.2.1 发送短信验证码1.2.2 短信验证码登录、注册1.2.3 校验登录状态 1.3 实现发送短信验证码功能1.3.1 页面流程1.3.2 代码实现 1.41.51.6 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《Redis》的实战篇的…

16 stack和queue习题

最小栈 最小栈 思路 用两个栈实现&#xff0c;一个栈正常插入和删除&#xff0c;另一个栈记录当前最小元素&#xff0c;第一个栈删除的时候&#xff0c;如果和最小的栈顶元素相等&#xff0c;最小的栈也删除元素 class MinStack { public:MinStack() {}void push(int val) {…

关于使用过别人的GitHub/Gitee账号提交东西到仓库后,自己的仓库提交失败问题的解决方法

目录 引言 问题出现的原因 问题的解决方法 打开控制面板 方法一&#xff1a; 方法二&#xff1a; 进入Windows凭据管理器 结语 引言 这个问题折磨了我将近三个小时&#xff0c;为了减少有人和我一样走弯路且防止自己忘记解决方法&#xff0c;便有了这篇文章。 问题出现…

RequestResponse使用

文章目录 一、Request&Response介绍二、Request 继承体系三、Request 获取请求数据1、获取请求数据方法&#xff08;1&#xff09;、请求行&#xff08;2&#xff09;、请求头&#xff08;3&#xff09;、请求体 2、通过方式获取请求参数3、IDEA模板创建Servlet4、请求参数…

android studio设置flutter和dart的sdk配置

提示没有配置dart sdk的时候&#xff0c;其实只需要配置一下flutter的sdk就可以了&#xff0c;因为flutter的安装包里面包含了dart的sdk&#xff1a; 按照提示选中这个flutter的安装包路径就可以了&#xff1a; 并且需要开启windows的开发者开关&#xff1a;start ms-settings:…

C++/CLI介绍

什么是C++/CLI C++/CLI的链接 上图实现cli编译的obj文件和非cli编译的目标文件之间实现链接。 上图实现cli编译的obj文件和lib文件之间进行链接 上图实现cli编译的代码对非cli编译的dll的引用 C++/CLI基本语法 基本类型

【Java基础】IO流(三):字符流的FileReader(文件字符输入流)和 FileWriter(文件字节输出流)

目录 字符流 1、FileReader&#xff08;字符输入流&#xff09; 1.1、无参的read( )方法示例 ​编辑 1.2、有参的read(char[ ] buffer)方法示例 2、FileWriter&#xff08;字符输出流&#xff09; 字符流 字符流的底层其实就是字节流&#xff0c;即字符流 字节流 字符集…

mac激活pycharm,python环境安装和包安装问题

1.PyCharm到官网下载就行 地址&#xff1a;Other Versions - PyCharm (jetbrains.com) 2.MacOS 下载python环境&#xff0c;地址&#xff1a; Python Releases for macOS | Python.org 3.PyCharm环境配置&#xff1a; 4. 如果包下载不下来可以换个源试试 pip install py…

前后端分离:现代Web开发的协作模式

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【NTN 卫星通信】 TN和多NTN配合的应用场景

1 场景描述 此场景描述了农村环境&#xff0c;其中MNO (运营商TerrA)仅在城市附近提供本地地面覆盖&#xff0c;而MNO (SatA)提供广泛的NTN覆盖。SatA使用GSO轨道和NGSO轨道上的卫星。SatA与TerrA有漫游协议&#xff0c;允许:   所有TerrA用户的连接&#xff0c;当这些用户不…

Linux批量注释

1.注释行 1.按ctrlv进入块选择模式 &#xff0c;然后上下键选中需要注释的行 2.按shifti(也就是大写I) 然后输入// 或 # 3.按ESC键 2.取消注释行 1.按ctrlv进入块选择模式&#xff0c; 然后上下键选中需要取消注释的行 2.然后按d