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

HTML5新增属性

news 文章来源：https://blog.csdn.net/sjc122333/article/details/143274272 2024/11/1 8:42:21

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>

HTML5新增属性

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

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

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超市收银系统

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

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

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

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

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

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

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

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

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

myip参数 shodan myip（查看自己的出口IP,哪个地址链接的公网)挂黑网站查找我们今天看一看找一下，有些已经被黑的网站好吧，就是利用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 好，给了一个按钮，第一道题目就不会做看的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）正式发布：鸿蒙诞生以来最大升级，碰一碰、小艺圈选重磅上线

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

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

pytest 单元框架里，前置条件

1.使用 setup 函数级的（setup_function、teardown_function）只对函数用例生效，而且不在类中使用类级的（setup_class、teardown_class）在类中使用，类执行之前运行一次，类执行之后运行一次类中方…...

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

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

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

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

MySQL全文索引检索中文

MySQL全文索引检索中文 5.7.6版本不支持中文检索，需要手动修改配置 ft_min_word_len 1 ，因为默认配置 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地址有什么差异

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

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

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

题目： 题解： #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

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

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

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

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

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

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

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

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

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

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

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

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

el-table相关的功能实现

1. 表格嵌套表格时，隐藏父表格的全选框场景：当table表格设置复选（多选）功能时，如何隐藏表头的复选框，不让用户一键多选。 <el-table :header-cell-class-name"cellClass">// 表头复选框禁…...

编程日记 2024/10/28 5:48:57

衡石分析平台系统分析人员手册-展示类控件创建富文本攻略

富文本富文本控件是一种常见的控件，可用来展示文本信息、用户属性信息，在数据分析中起到辅助分析的功能。富文本常见的使用场景有： 仅展示纯文本信息。在富文本中展示数据集字段、指标、参数等信息。使用富文本展示用户属性相关信息。在…...

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

为什么在网络中不能直接传输数据

为什么在网络中不能直接传输数据原因在网络中不能直接传输原始数据形式，主要有以下几方面原因： 数据表示的多样性：不同的计算机系统、编程语言和应用程序对数据的表示方式可能各不相同。例如，整数在不同的编程语言中可能有不同…...

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

javascript实现aes算法(支持微信小程序)

概述： 本代码是本人从c代码上转换成的javascript代码，并测试验证通过的。代码比较长1000多行，考虑放其他地方要么要会员要么容易关闭，不容易被需要的获取到，故直接贴在本文档下面的章节，功能代码。测试平…...

编程日记 2024/10/28 5:43:52

Centos系统新增网卡后获取不到网卡的IP地址解决方法

一、问题描述当我们给Centos系统添加了新的网卡后，使用查看IP地址命令【ip addr】时，发现新网卡没有获取到对应的IP地址信息，如下图所示：二、解决方法有两种解决方法：一种是自动获取IP地址；另外一种是手动配置IP地址； 2.1、自动获取IP地址 #自动获取网卡的IP地址命…...

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

U-net医学分割网络——学习笔记

《U-Net: Convolutional Networks for Biomedical Image Segmentation》一、提出背景 U-Net 的提出是为了解决生物医学图像分割的几个关键问题：需要像素级的精确分割、标注数据稀缺、滑动窗口方法效率低以及多尺度特征融合的需求。U-Net 通过对称的 U 型全卷积结…...

编程日记 2024/10/28 5:40:48

CIM+全场景应用，铸就智慧城市发展新篇

在数字化浪潮的推动下，智慧城市建设正成为全球城市发展的新趋势。而CIM（城市信息模型）作为智慧城市建设的核心，正以其强大的数据集成和分析能力，引领着城市发展的新篇章。今天，让我们一起探讨CIM全场景应用…...

编程日记 2024/10/28 5:38:45

ts：对象数组的简单使用

ts中对象数组的简单使用一、主要内容说明二、例子1、源码12、源码1运行效果三、结语四、定位日期一、主要内容说明平常ts创建数组的格式如下： let array:string[]["元素1","元素2","元素3","元素3","元素4"…...

编程日记 2024/10/28 5:37:43

当我们在微服务中使用API网关时，它是否会成为系统的瓶颈？这种潜在的瓶颈如何评估和解决？如何在微服务架构中保证高效请求流量？｜API网关｜微服务｜异步处理

目录 1. API网关在微服务中的角色与重要性 2. API网关瓶颈的评估 2.1 请求延迟分析 2.2 并发请求量监控 2.3 内存和CPU使用情况 2.4 限流和熔断机制评估 2.5 日志分析 3. API网关瓶颈的解决方案 3.1 缓存机制优化 3.2 负载均衡优化 3.3 异步处理与消息队列 3.4 限流…...

编程日记 2024/10/28 5:36:43

微服务设计模式 - 特性标志（Feature Flags）

微服务设计模式 - 特性标志（Feature Flags） 定义特性标志（Feature Flags），又称特性开关（Feature Toggles），是一种常见的云计算设计模式，允许开发人员通过配置动态地打开…...

编程日记 2024/10/28 5:33:40

教做美食的网站/营销型网站内容

今天给大家列出一些代码，仅供参考列出数据层和逻辑层的代码WebPage类1using System; 2using System.Collections.Generic; 3using System.Text; 4using System.Web; 5using System.Web.SessionState; 6using System.Web.UI; 7using System.Web.UI.WebControls; 8usi…...

编程日记 2024/11/1 7:04:19

花卉网站建设策划书/什么是搜索引擎优化的核心

对于 React 组件来说，refs 会指向一个组件类的实例，所以可以调用该类定义的任何方法。如果需要访问该组件的真实 DOM，可以用 ReactDOM.findDOMNode 来找到 DOM 节点，但我们并不推荐这样做。因为这在大部分情况下都打破了封装性&…...

编程日记 2024/11/1 0:40:26

彩票投资理财平台网站建设/深圳专业seo

技术宅改变世界 http://blog.geek18.com 是广州金矿信息科技有限公司的官方博客,主要搜集极客相关的信息和感兴趣的互联网资讯,也有一些编程方面的心得和教程等.转载于:https://www.cnblogs.com/iammatrix/p/5516311.html...

编程日记 2024/10/31 21:32:44

建立网站/百度投诉电话24小时

转载于:https://www.cnblogs.com/deerchao/archive/2008/02/12/1067304.html...

编程日记 2024/10/31 16:29:55

b2c网站开发多少钱/二十条优化措施全文

部分内容参考：http://www.aspbc.com/tech/showtech.asp?id1256 在开发的过程中，经常使用window.onload和body onload两种，很少使用document.onreadystatechange，但这次写了一个js，使用window.onload和body.onload都实…...

编程日记 2024/10/31 9:15:54

山西大同专业网站建设价格/怎么做网站教程视频

近期有个网友问我这个问题，我就上网搜了下，结果非常失望。有几个在CSDN上发的求助帖。看到最后都没有找到明白的答案。这里笔者在网上找到了API函数SetParent（），并对网上的错误进行了改动，并给出了简单实例…...

编程日记 2024/10/31 7:47:46