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

HTML5新增属性

news 2025/7/3 4:08:03

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/6/16 17:44:44

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/6/16 20:36:05

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/7/2 23:16:17

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/6/21 3:27:34

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/7/3 3:03:08

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/7/2 18:34:21

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/6/17 5:04:55

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/6/16 17:16:14