HTML5新增属性

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中与视频的属性基本一致,但是没有posterwidthheight

<!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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/460734.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python画图|坐标轴比例设置方法

【1】引言 在前序学习进程中&#xff0c;我们通过ax.set_box_aspect()函数掌握了坐标轴等比例设置方法。 担当我在回顾以前的学习文章时&#xff0c;发现ax.axis()函数也可以设置坐标轴比例&#xff0c;比如下述文章&#xff0c;文章可通过点击链接直达&#xff1a; python画…

[前端][基础]JavaScript

1&#xff0c;JavaScript简介 JavaScript 是一门跨平台、面向对象的脚本语言&#xff0c;而Java语言也是跨平台的、面向对象的语言&#xff0c;只不过Java是编译语言&#xff0c;是需要编译成字节码文件才能运行的&#xff1b;JavaScript是脚本语言&#xff0c;不需要编译&…

用于文档理解的局部特征

本文介绍了一种名为DocFormerv2的多模态Transformer模型&#xff0c;它专为视觉文档理解&#xff08;VDU&#xff09;而设计。该模型可以处理视觉、语言和空间特征&#xff0c;利用编码器-解码器架构&#xff0c;并通过不对称地使用新颖的无监督任务进行预训练&#xff0c;以促…

Chromium127编译指南 Linux篇 - 额外环境配置(五)

引言 在成功获取 Chromium 源代码后&#xff0c;接下来我们需要配置适当的编译环境&#xff0c;以便顺利完成开发工作。本文将详细介绍如何设置 Python 和相关的开发工具&#xff0c;以确保编译过程无碍进行。这些配置步骤是开发 Chromium 的必要准备&#xff0c;确保环境设置…

HTTP相关返回值异常原因分析,第二部分

今天我们讲讲HTTP相关返回值异常如何解决&#xff08;实例持续更新中&#xff09; 一、4xx状态码 这些状态码表示请求有问题&#xff0c;通常是由于客户端的错误引起的。 1.1 400 Bad Request: 请求格式不正确&#xff0c;服务器无法理解。 状态码400的含义&#xff1a; …

.NET内网实战:通过白名单文件反序列化漏洞绕过UAC

01阅读须知 此文所节选自小报童《.NET 内网实战攻防》专栏&#xff0c;主要内容有.NET在各个内网渗透阶段与Windows系统交互的方式和技巧&#xff0c;对内网和后渗透感兴趣的朋友们可以订阅该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介绍 03原理分析 在渗透测试和红…

Spring Boot 实现文件分片上传和下载

文章目录 一、原理分析1.1 文件分片1.2 断点续传和断点下载1.2 文件分片下载的 HTTP 参数 二、文件上传功能实现2.1 客户端(前端)2.2 服务端 三、文件下载功能实现3.1 客户端(前端)3.2 服务端 四、功能测试4.1 文件上传功能测试4.2 文件下载功能实现 参考资料 完整案例代码&…

【数据结构】-数组

数组 特点&#xff1a; 数组的地址连续&#xff0c;可以通过下标获取数据。 1. 数组扩容 步骤&#xff1a; $1. 创建一个比原来数组更长的新数组 $2. 让原来数组当中的数据依次复制到新数组当中 $3. 让arr指向新数组&#xff0c;原数组空间释放 2. 数组插入 2.1 最后位置…

智慧小区:科技之光点亮幸福家园

智慧社区的未来发展方向与趋势 从智能化管理到便捷化服务&#xff0c;从环保节能到安全监控&#xff0c;智慧社区正以其前瞻性的视野和创新性的技术&#xff0c;引领着未来城市生活的新方向。从智慧社区的基本概念中通过运用现代科技手段&#xff0c;如物联网、云计算、大数据…

0,国产FPGA(紫光同创)-新建PDS工程

国产FPGA正在蓬勃发展&#xff0c;紫光同创FPGA是大家竞赛时经常遇到的一款国产FPGA&#xff0c;本专栏从IP核开始一直到后续图像处理等。 开发板&#xff1a;盘古50K标准板 1&#xff0c;新建PDS工程 点击File&#xff08;1&#xff09;&#xff0c;然后是New Projects&#…

深入解析Sysmon日志:增强网络安全与威胁应对的关键一环

不断演进的网络安全领域中&#xff0c;保持对威胁的及时了解至关重要。Sysmon日志在这方面发挥了至关重要的作用&#xff0c;通过提供有价值的见解&#xff0c;使组织能够加强其安全姿态。Windows在企业环境中是主导的操作系统&#xff0c;因此深入了解Windows事件日志、它们的…

yocto 下基于SDK的 tcpdump 移植

系列文章目录 【1】yocto系统构建 【2】yocto下mosquitto用户名和密码配置 【3】yocto 下基于SDK的 tcpdump 移植 文章目录 系列文章目录前言一、移植tcpdump的意义二、移植步骤1. 准备Yocto环境2.获取源码&#xff0c;配置和编译3.移植到目标设备4.测试tcpdump 总结 前言 tc…

使用python提取日志里面的role_id、vip字段的值,(vip字段可能为空或者缺失,此时需要给默认值0):

日志样例&#xff1a; 1068 1529597015396 g60-database-380.i.nease.net /home/g60/gamedata/log/g60_GameStatistic_20180622.log 380_game02 G60_GameStatistic 1529596878_35 [2018-06-22 00:01:18][MercLevelUp],{"merc_capacity":2739,"cur_level"…

fastGpt

参考本地部署FastGPT使用在线大语言模型 1 rockylinx 1 ollama安装 在rockylinux中安装的&#xff0c;ollama由1.5G&#xff0c;还是比较大&#xff0c;所有采用在windows下下载&#xff0c;然后安装的方式&#xff0c;linux安装 tar -C /usr -xzf ollama-linux-amd64.tgz #…

记一次踩坑ConcurrentModificationException

这段代码中&#xff0c;oDo 是一个 List 类型的对象&#xff0c;subbedList 是从 oDo 中通过 subList(0, 3) 方法获取的子列表。subList 方法返回的是原列表 oDo 的一个视图&#xff0c;而不是一个独立的列表。这意味着对 subbedList 的任何修改都会反映到 oDo 上&#xff0c;反…

实时数据处理:技术支持和优势

在当今快节奏的数字世界中&#xff0c;企业不断寻找在竞争中保持领先地位的方法。批量和近实时的数据处理方法已经无法满足企业对于数据处理速度要求了。因此实时数据处理出现&#xff0c;逐渐帮助企业获取更快速的决策能力。本文&#xff0c;我们将深入研究实时处理&#xff0…

Django 5 增删改查 小练习

1. 用命令创建目录和框架 django-admin startproject myapp cd myapp py manage.py startapp app md templates md static md media 2. Ai 生成代码 一、app/models.py from django.db import modelsclass Product(models.Model):name models.CharField(max_length255, verb…

苏州金龙技术创新赋能旅游新质生产力

2024年10月23日&#xff0c;备受瞩目的“2024第六届旅游出行大会”在云南省丽江市正式开幕。作为客车行业新质生产力标杆客车&#xff0c;苏州金龙在大会期间现场展示了新V系V12商旅版、V11和V8E纯电车型&#xff0c;为旅游出行提供全新升级方案。 其中&#xff0c;全新15座V1…

Atlas800昇腾服务器(型号:3000)—SwinTransformer等NPU推理【图像分类】(九)

服务器配置如下&#xff1a; CPU/NPU&#xff1a;鲲鹏 CPU&#xff08;ARM64&#xff09;A300I pro推理卡 系统&#xff1a;Kylin V10 SP1【下载链接】【安装链接】 驱动与固件版本版本&#xff1a; Ascend-hdk-310p-npu-driver_23.0.1_linux-aarch64.run【下载链接】 Ascend-…

14. NSWindow 窗口与 NSWindowController 窗口控制器

NSWindowController窗口控制器主要用于管理xib/storyboard文件中加载的NSWindow对象&#xff1a;1、创建一个基于xib或storyboard的NSWindowController子类会自动创建一个NSWindow&#xff1b;2、如果手工创建NSWindow对象&#xff0c;则需要维护NSWindowController和NSWindow之…