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

HTML5新增属性

news 2026/2/11 0:34:02

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58