2.3 HTML5新增的常用标签

news2024/12/25 9:53:14

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.coloradmin.cn/o/1522072.html

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

相关文章

145 Linux 网络编程1 ,协议,C/S B/S ,OSI 7层模型,TCP/IP 4层模型,

一 协议的概念 从应用的角度出发&#xff0c;协议可理解为“规则”&#xff0c;是数据传输和数据的解释的规则。 典型协议 传输层 常见协议有TCP/UDP协议。 应用层 常见的协议有HTTP协议&#xff0c;FTP协议。 网络层 常见协议有IP协议、ICMP协议、IGMP协议。 网络接口层 常…

关于振弦采集仪的应用编写

instruction&#xff1a; 1、本应用基于深圳市安传物联科技有限公司所生产的八通道振弦变送器产品。该产品为MAX485 信号的变送设备&#xff0c; 并以Modbus协议输出。 2、本应用采用python语言编写。 功能实现&#xff1a; 1、发送&#xff1a; 01 03 10 00 00 02 C0 CB并…

Android分区存储到底是怎么回事

文章目录 一、Android存储结构二、什么是分区存储&#xff1f;三、私有目录和公有目录三、存储权限和分区存储有什么关系&#xff1f;四、我们应该该怎么做适配&#xff1f;4.1、利用File进行操作4.2、使用MediaStore操作数据库 一、Android存储结构 Android存储分为内部存储和…

Linux安装vLLM模型推理框架问题总汇

简介 vLLM 是一个专为大规模语言模型&#xff08;Large Language Models, LLM&#xff09;推理优化的服务框架和推理引擎。它可以高效地管理和部署预先训练好的大型语言模型&#xff0c;尤其是那些具有极高参数数量和复杂度的模型&#xff0c;如GPT系列及其他基于Transformer架…

算法打卡day19|二叉树篇08|Leetcode 235. 二叉搜索树的最近公共祖先、701.二叉搜索树中的插入操作、450.删除二叉搜索树中的节点

算法题 Leetcode 235. 二叉搜索树的最近公共祖先 题目链接:235. 二叉搜索树的最近公共祖先 大佬视频讲解&#xff1a;二叉搜索树的最近公共祖先视频讲解 个人思路 昨天做过一道二叉树的最近公共祖先&#xff0c;而这道是二叉搜索树&#xff0c;那就要好好利用这个有序的特点…

数据库-mysql安装

我们使用两种方式安装配置mysql数据库 一种采用无安装绿色版 一种采用官方提供的msi&#xff0c;windows安装版 亲测两种都可运行&#xff0c;有的电脑可能其中一种不能运行那可以尝试另外一种&#xff0c;有条件的同学可以试试docker版。 mysql安装 初次安装mysql之前建议大家…

代码随想录day18(2)二叉树:翻转二叉树(leetcode226)

题目要求&#xff1a;将一棵二叉树翻转 思路&#xff1a;若想要翻转二叉树&#xff0c;只需要用swap函数将左右孩子节点翻转即可。注意前序和后序遍历均可&#xff0c;但是对于中序来说会将某些结点的左右孩子翻转了两次&#xff08;画图很明显&#xff09;&#xff0c;硬要用…

工作总结!日志打印的11条建议

前言 大家好&#xff0c;我是 JavaPub。日志是我们定位问题的得力助手&#xff0c;也是我们团队间协作沟通&#xff08;甩锅&#xff09;、明确责任归属&#xff08;撕B&#xff09;的利器。没有日志的程序运行起来就如同脱缰的野&#x1f40e;。打印日志非常重要。今天我们来…

开发指南005-前端配置文件

平台要求无论前端还是后端&#xff0c;修改配置可以直接用记事本修改&#xff0c;无需重新打包或修改压缩包里文件。就前端而言&#xff0c;很多系统修改配置是在代码里修改&#xff0c;然后打包或者是修改编译环境来重新编译。 平台前端的配置文件为/static/js/下qlm_config.j…

家电工厂5G智能制造数字孪生可视化平台,推进家电工业数字化转型

家电5G智能制造工厂数字孪生可视化平台&#xff0c;推进家电工业数字化转型。随着科技的飞速发展&#xff0c;家电行业正迎来一场前所未有的数字化转型。在这场制造业数字化转型中&#xff0c;家电5G智能制造工厂数字孪生可视化平台扮演着至关重要的角色。本文将从数字孪生技术…

SwinTransformer论文笔记

What&#xff1a;Swin Transformer 用了移动窗口的层级式的Vision Transformer. Swin Transformer的思想是让Vision Transformer也能像CNN一样也能分成几个block&#xff0c;也能做层级式的特征提取&#xff0c;从而让提取的特征具有多尺度的概念。&#xff08;设计的初衷是作为…

计算机二级Python题目13

目录 1. 基本题 1.1 基本题1 1.2 基本题2 1.3 基本题3 2. turtle画图 3. 大题 3.1 大题1 3.2 大题2 1. 基本题 1.1 基本题1 lseval(input()) s"" for item in ls:if type(item)type("香山"):s item print(s) 1.2 基本题2 import random random.se…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的手写数字和符号识别(深度学习训练+UI界面+训练数据集)

摘要&#xff1a;开发手写数字和符号识别对于智能交互系统具有关键作用。本篇博客详细介绍了如何运用深度学习构建一个手写数字和符号识别&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&#xff0c;展示了不同模…

电源常用通讯电路详解

数字电源的采样和PWM驱动电路原理&#xff0c;通过这些技术&#xff0c;数字电源可以在内部形成控制闭环。但是要实现电源的控制和管理&#xff0c;还是需要与数字控制核心建立通讯连接。本期将带领大家了解数字电源常用的通讯电路。 一、常用的通讯方式 在前面数字电源与模拟…

运行gazebo机器人模型没有cmd_vel话题

运行赵虚左教程代码出现上诉问题 roslaunch urdf02_gazebo demo03_env.launch 原因&#xff1a;缺少某个包 在工作空间catkin_make编译发现报错 解决&#xff1a; sudo apt-get install ros-noetic-gazebo-ros-pkgs ros-noetic-gazebo-ros-control 下载后再次运行launch文件…

redis中List和hash数据类型

list类型是用来存储多个有序的字符串的&#xff0c;列表当中的每一个字符看做一个元素&#xff0c;一个列表当中可以存储一个或者多个元素&#xff0c;redis的list支持存储2^32-1个元素。redis可以从列表的两端进行插入&#xff08;pubsh&#xff09;和弹出&#xff08;pop&…

Flink 集群部署模式

文章目录 前言一、会话模式&#xff08;Session Mode&#xff09;二、单作业模式&#xff08;Per-Job Mode&#xff09;三、应用模式&#xff08;Application Mode&#xff09; 前言 Flink支持多种集群部署模式&#xff0c;以满足不同场景和需求。以下是Flink的主要集群部署模…

外包干了3天,技术明显进步。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…

奇怪的比赛(Python,递归,状态压缩动态规划dp)

目录 前言&#xff1a;题目&#xff1a;思路&#xff1a;递归&#xff1a;代码及详细注释&#xff1a; 状态压缩dp&#xff1a;代码及详细注释&#xff1a; 总结&#xff1a; 前言&#xff1a; 这道题原本是蓝桥上的题&#xff0c;现在搜不到了&#xff0c;网上关于此题的讲解…

【ESP32接入国产大模型之MiniMax】

1. MiniMax 讲解视频&#xff1a; ESP32接入语言大模型之MiniMax MM智能助理是一款由MiniMax自研的&#xff0c;没有调用其他产品的接口的大型语言模型。MiniMax是一家中国科技公司&#xff0c;一直致力于进行大模型相关的研究。 随着人工智能技术的不断发展&#xff0c;自然语…