当前位置： 首页 > news >正文

HTML5新增属性

news 2025/9/16 18:50:58

1、HTML5

1.1 新增布局标签
  • header：用于定义文档或者section的页眉；
  • footer：用于定义页面或section的底部信息；
  • nav：用于定位页面上的导航链接部分；
  • article：用于定位文档或者页面中的独立部分，可以在不丢失原本意义的情况下独立存在；
  • section：用于定位文档中的节，代表可以是一个独立的部分，通常包含标题；
  • aside：用于定位和页面主要内容有关但可以被单独引用的内容；
  • main：文档的主要内容，WHATWG中没有语义；
  • hgroup：包裹连续的标题，W3C将其删除。

article中可以有多个section；

section强调将内容分为一块，article强调内容为一个整体，内容比较完整。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增布局标签</title><style>* {margin: 10px auto;text-align: center;}aside {float: right;}</style>
</head><body><header>个人博客</header><nav><a href="#">首页</a><a href="#">文章分类</a><a href="#">我的</a></nav><main><article><h3>文章1</h3><section><h3>章节1</h3><p>主要内容：.........................</p></section><section><h3>章节2</h3><p>主要内容：.........................</p></section><section><h3>章节3</h3><p>主要内容：.........................</p></section></article></main><aside><nav><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li></ul></nav></aside><footer><p>联系我们</p><p>网站备案号：✖️✖️✖️✖️✖️✖️✖️</p></footer>
</body>
</html>
1.2 新增状态标签
  • meter：展示测量结果在已知范围的位置，如手机电量提示。
    • max：最大值；
    • min：最小值；
    • high：高值；
    • low：低值；
    • optimum：最优值；
    • value：当前值。
  • progress：显示操作进度，如文件上传进度条。
    • max：最大值；
    • value：当前值。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增状态标签</title>
</head><body><span>手机电量: </span><meter max="100" min="0" high="20" low="10" optimum="90" value="50"></meter><br><span>上传进度: </span><progress max="100" value="60"></progress>
</body></html>
1.3 新增列表标签
  • datalist：用于对搜索框关键字的提示；
  • details：用于展示问题和答案，或对专有名词进行解释；
  • summary：写在details中，指定问题或专有名词。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增列表标签</title>
</head><body><input type="text" list="data"><button>搜索</button><datalist id="data"><option value="d1">d1</option><option value="d2">d2</option><option value="d3">d3</option><option value="d4">d4</option></datalist><details><summary>标题</summary><p>这是标题的解释</p></details>
</body></html>
1.4 新增文本标签
  • ruby：包裹需要注音的文字；
  • rt：包裹拼音，写在待注音文字的下面；
  • mark：标记文字，使其背景变为淡黄色。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增文本标签</title>
</head><body><ruby><span>注音文字</span><rt>zhù yīn wén zì</rt></ruby><hr><p>这是一个<mark>段落</mark>。</p>
</body></html>
1.5 表单新增功能
  • placeholder：提示文字；
  • required：表示该字段不能为空；
  • autofocus：光标焦点自动锁定，多个该标签光标锁定第一个；
  • autocomplete：自动根据历史记录生成相关关键词；
  • pattern：正则表达式，验证输入的格式，输入不能为空值；
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增表单控件属性</title><style>#self {margin-left: 100px;height: 100px;width: 200px;}#button {position: relative;left: 10px;bottom: 10px;}textarea::placeholder {text-align: center;line-height: 100px;font-size: 30px;}</style>
</head><body><form action=""><label for="account">账号：</label><input type="text" name="account" id="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}"><br><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="请输入密码" required><br><label for="gender">性别：</label><input type="radio" name="gender" id="gender" required>男<input type="radio" name="gender" id="gender">女<br><label for="hobby">爱好：</label><input type="checkbox" name="hobby" id="hobby" required>爱好1<input type="checkbox" name="hobby" id="hobby">爱好2<input type="checkbox" name="hobby" id="hobby">爱好3<br><label for="self">个人简介：</label><br><textarea name="self" id="self" placeholder="点击输入" required></textarea><button id="button">提交</button></form>
</body></html>
1.6 input新增属性
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>input新增属性</title>
</head><body><!-- 表单在属性中添加 novalidate 表示去除表单中所有验证 --><form action="" novalidate>邮箱：<input type="email" name="email" required><br>网址：<input type="url" name="url" required><br>数字：<input type="number" name="number" max="80" min="20" step="5" required><br>搜索：<input type="search" name="search" required><br>电话：<input type="tel" name="tel" required><br>滑块：<input type="range" name="range" max="80" min="20" step="5" value="25" required><br>颜色选择器：<input type="color" name="color" required><br>日期：<input type="date" name="date" required><br>月份：<input type="month" name="month" required><br>周：<input type="week" name="week" required><br>时间：<input type="time" name="time" required><br>时间和日期：<input type="datetime-local" name="datetime-local" required><br><button>提交</button></form>
</body></html>
1.7 video新增属性
  • controls：媒体控制；
  • loop：循环播放；
  • autoplay：自动播放，必须静音播放属性在时才播放，除非媒体参与度为高；
  • muted：静音播放；
  • poster：视频封面，未点击时为引入图片大小，视频播放为视频大小，最好大小一致；
  • src：引入视频地址；
  • width：视频的宽；
  • height：视频的高。
  • proload：视频预加载；
    • none：不预先加载视频；
    • metadata：仅预先获取视频的元数据（基本信息）；
    • auto：下载整个视频文件。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>新增媒体标签</title><style>video {height: 300px;margin-top: 10px;}.video {text-align: center;}</style>
</head><body><div class="video"><video src="./videos/video.mp4" controls loop autoplay></video><br><video src="./videos/video.mp4" controls muted loop poster="./videos/touxiang.png" preload="auto"></video></div>
</body></html>
1.8 audio新增属性

audio中与视频的属性基本一致，但是没有poster、width、height

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>音频新增属性</title><style>audio {width: 600px;}.mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.592);}.dialog {position: absolute;top: 0;bottom: 0;left: 0;background-color: aqua;right: 0;text-align: center;width: 400px;height: 400px;line-height: 400px;margin: auto;font-size: 40px;}span {border: 1px wheat solid;cursor: pointer;}</style>
</head><body><audio id="music" src="./videos/反方向的钟 - 周杰伦.mp3" controls loop preload="auto"></audio><div class="mask" id="mask"><div class="dialog" id="dialog"><span>登录</span><span onclick="play()">试听</span></div></div><script>function play(){music.play()mask.style.display = "none"}</script>
</body></html>
1.9 新增全局属性
  • contenteditable：是否可被用户编辑；
  • draggable：元素是否可被拖动；
  • hidden：隐藏元素；
  • spellcheck：拼写检查，需要在浏览器设置中打开；
  • contextmenu：规定元素的上下文菜单，用户鼠标右键点击元素时显示；
  • data-*：存储页面私有定制数据。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新增全局属性</title><style>.contenteditable {border: 1px solid black;padding: 5px;}.draggable {cursor: move;}.hidden {display: none;}.spellcheck {border-bottom: 1px dotted red;}.contextmenu {display: inline-block;margin: 5px;}[data-custom] {background-color: yellow;}</style>
</head><body><div contenteditable="true" class="contenteditable">Contenteditable 属性: 使元素可编辑</div><div draggable="true" class="draggable">Draggable 属性: 使元素可以拖动</div><div class="hidden">Hidden 属性: 隐藏元素</div><div spellcheck="true" class="spellcheck">Spellcheck 属性: 开启拼写检查</div><div contextmenu="exampleMenu" class="contextmenu">Contextmenu 属性: 规定元素的上下文菜单</div><div data-custom="customData">Data-* 属性: 存储页面私有定制数据</div><!-- 示例上下文菜单 --><menu type="context" id="exampleMenu"><li><a href="#copy">复制</a></li><li><a href="#paste">粘贴</a></li><li><a href="#cut">剪切</a></li></menu>
</body></html>
1.10 H5兼容问题

在一些低版本ie浏览器中有些H5样式不支持，引入谷歌写的js文件和一些设置可使得兼容性更好。

<head>
<!-- 让IE浏览器处于最优渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 针对国产浏览器，让浏览器优先使用webkit内核 -->
<meta name="render" content="webkit">
<!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
</head>

相关代码地址：https://gitee.com/justinc666/front-end/tree/master/HTML5

相关文章：

HTML5新增属性

1、HTML5 1.1 新增布局标签 header&#xff1a;用于定义文档或者section的页眉&#xff1b;footer&#xff1a;用于定义页面或section的底部信息&#xff1b;nav&#xff1a;用于定位页面上的导航链接部分&#xff1b;article&#xff1a;用于定位文档或者页面中的独立部分&a…...

编程日记 2024/10/28 6:22:41

软件开发术语(E开头)---持续更新

e—business 电子商务EAI (enterprise application integration）企业应用程序集成（整合）EBCO (empty base class optimization） 空基类优化(机制）Edge and Vertex Connectivity 割边/割点 Edge Coloring 边染色 EDI （Dlectronic Data Interchange）电子数据交换effic…...

编程日记 2024/10/28 6:21:40

多机器人编队避障算法（1）

文章目录 前言一、基于感知的避障1.基于感知的Epuck2避障思路(理论)2.基于感知的Epuck2避障实现(现实)3.距离传感器结合红外传感器修复避障Bug4.问题5.代码逻辑图 二、基于人工势场力的避障1.基于人工势场的Epuck2避障思路(理论)2.基于人工势场力的Epuck2避障实现(现实) 三、两…...

编程日记 2024/10/28 6:20:39

【网站项目】SpringBoot401超市收银系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

编程日记 2024/10/28 6:19:37

KD树详解：多维数据高效搜索的利器

摘要 在处理多维数据时&#xff0c;如何高效地进行搜索与查询成为一个关键问题。KD树&#xff08;K-Dimensional Tree&#xff09;作为一种高效的多维数据结构&#xff0c;广泛应用于计算机视觉、机器人导航、数据库检索等领域。本文将详细介绍KD树的基本概念、结构、构建算法…...

编程日记 2024/10/28 6:18:36

从裸机到70B大模型2：基础设施设置与脚本

从裸机到70B大模型2&#xff1a;基础设施设置与脚本 随着深度学习技术的不断发展&#xff0c;神经网络模型的规模逐渐扩大&#xff0c;从单个模型到大型70B模型&#xff0c;所需的计算资源和存储空间也在不断增加。为了训练这些大型模型&#xff0c;我们需要一套高效的基础设施…...

编程日记 2024/10/28 6:17:34

shodan4，挂黑网站查找，弱口令网站搜索

myip参数 shodan myip&#xff08;查看自己的出口IP,哪个地址链接的公网)挂黑网站查找 我们今天看一看找一下&#xff0c;有些已经被黑的网站好吧&#xff0c;就是利用shodan查看一下哪些网站已经被黑了。 shodan search -limit 10 -fields ip_str,port http.title:hacked b…...

编程日记 2024/10/28 6:16:32

spring boot 整合Knife4j

项目依赖配置 在本项目中，我们使用了以下关键依赖，以支持 Spring Boot 和 API 文档生成。 1. Spring Boot 版本 为了构建一个可靠和高效的 Spring Boot 应用程序，我们使用以下父级依赖： <parent><groupId>org.springframework.boot</groupId><art…...

编程日记 2024/10/28 6:14:30

攻防世界的新手web题解

攻防世界引导模式 1、disabled_button 好&#xff0c;给了一个按钮&#xff0c;第一道题目就不会做 看的wp<input disabled class"btn btn-default" style"height:50px;width:200px;" type"submit" value"flag" name"auth&q…...

编程日记 2024/10/28 6:13:29

【国潮来袭】华为原生鸿蒙 HarmonyOS NEXT（5.0）正式发布：鸿蒙诞生以来最大升级，碰一碰、小艺圈选重磅上线

在昨日晚间的原生鸿蒙之夜暨华为全场景新品发布会上&#xff0c;华为原生鸿蒙 HarmonyOS NEXT&#xff08;5.0&#xff09;正式发布。 华为官方透露&#xff0c;截至目前&#xff0c;鸿蒙操作系统在中国市场份额占据 Top2 的领先地位&#xff0c;拥有超过 1.1 亿 的代码行和 6…...

编程日记 2024/10/28 6:09:24

pytest 单元框架里，前置条件

1.使用 setup 函数级的&#xff08;setup_function、teardown_function&#xff09;只对函数用例生效&#xff0c;而且不在类中使用类级的&#xff08;setup_class、teardown_class&#xff09;在类中使用&#xff0c;类执行之前运行一次&#xff0c;类执行之后运行一次 类中方…...

编程日记 2024/10/28 6:08:23

数字IC后端实现 | Innovus各个阶段常用命令汇总

应各位读者要求&#xff0c;小编最近按照Innovus流程顺序整理出数字IC后端项目中常用的命令汇总。限于篇幅&#xff0c;这次只更新到powerplan阶段。有了这份Innovus常用命令汇总&#xff0c;学习数字IC后端从此不再迷路&#xff01;如果大家觉得这个专题还不错&#xff0c;想继…...

编程日记 2024/10/28 6:06:21

MySQL全文索引检索中文

MySQL全文索引检索中文 5.7.6版本不支持中文检索&#xff0c;需要手动修改配置 ft_min_word_len 1 &#xff0c;因为默认配置 4 SHOW VARIABLES LIKE ft%; show VARIABLES like ngram_token_size;配置 修改 MySQL 配置文件 vim /etc/my.cnf在配置的 [mysqld] 下面添加**ft_…...

编程日记 2024/10/28 6:03:16

pikachu靶场-Cross-Site Scripting(XSS)

sqli-labs靶场安装以及刷题记录-dockerpikachu靶场-Cross-Site Scripting pikachu靶场的安装刷题记录反射型xss(get)反射型xss(post)存储型xssDOM型xssDOM型xss-xxss盲打xss之过滤xss之htmlspecialcharsxss之href输出xss之js输出 pikachu靶场的安装 刷题记录 反射型xss(get) …...

编程日记 2024/10/28 6:00:12

在数据库访问中，使用localhost、127.0.0.1和IP地址有什么差异

在数据库访问中&#xff0c;使用127.0.0.1和IP地址&#xff08;在本地环境中通常指的是局域网IP或环回地址&#xff09;的速度差异&#xff0c;实际上是非常微小的&#xff0c;甚至在很多情况下可以忽略不计。不过&#xff0c;为了更深入地理解这个问题&#xff0c;我们可以从以…...

编程日记 2024/10/28 5:59:11

C语言 | Leetcode C语言题解之第513题找树左下角的值

题目&#xff1a; 题解&#xff1a; #define MAX_NODE_SIZE 10000int findBottomLeftValue(struct TreeNode* root){int ret;struct TreeNode** queue (struct TreeNode **)malloc(sizeof(struct TreeNode) * MAX_NODE_SIZE);int head 0;int tail 0;queue[tail] root;whil…...

编程日记 2024/10/28 5:58:07

人工智能：改变未来生活与工作的无尽可能

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;正成为推动全球变革的重要力量。无论是在医疗、企业&#xff0c;还是日常生活中&#xff0c;AI技术通过赋能各行业&#xff0c;正在深刻地改变我们的生活和工作方式。这些变化为我们提供了便捷与效率的同时&a…...

编程日记 2024/10/28 5:56:04

讲一讲 kafka 的 ack 的三种机制？

大家好&#xff0c;我是锋哥。今天分享关于【K讲一讲 kafka 的 ack 的三种机制&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲一讲 kafka 的 ack 的三种机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka的消息确认机制&…...

编程日记 2024/10/28 5:55:03

若依框架部署到服务器后头像资源访问404

排错过程 第一开始以为是代理出问题了 官网给出的解决方案 第一种是用代理后端接口&#xff0c;第二种是重写路径直接访问静态文件 接口通过捕获profile开头的路径/profile/avatar…&#xff0c;转为/home…/avatar找到我们在该路径下的文件 但是我想了一下&#xff0c;我ngin…...

编程日记 2024/10/28 5:53:01

纯GO语言开发RTSP流媒体服务器-RTSP推流直播、本地保存录像、录像回放、http-flv及hls协议分发

温馨提示&#xff1a;我们分享的文章是给需要的人&#xff0c;不需要的人请绕过&#xff0c;文明浏览&#xff0c;误恶语伤人&#xff01; 前言 在软件开发中遇到使用流媒体音视频的行业比较多&#xff0c;如安防监控系统、无人机巡逻视频上云处理、直播平台、教育与企业培训…...

编程日记 2024/10/28 5:49:58

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/9/15 5:18:46

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/8/7 12:20:58

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/9/13 17:44:06

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/8/30 16:34:33

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/9/15 8:33:21

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/9/12 23:22:11

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/9/4 1:22:39

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/9/15 23:02:52

DBLP数据库是什么？

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

编程新知 2025/9/2 16:53:06

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

编程新知 2025/7/21 10:05:49