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.mzph.cn/diannao/58053.shtml

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

相关文章

在浏览器中运行 Puppeteer:解锁新能力

Puppeteer&#xff0c;这个强大的浏览器自动化工具&#xff0c;通常在Node.js环境中运行。但你有没有想过&#xff0c;在浏览器本身中运行Puppeteer会是什么样子&#xff1f;这不仅能让我们利用Puppeteer的功能完成更多任务&#xff0c;还能避开Node.js特定的限制。 支持的功…

【Canvas与桌面】文山甲密铺桌面壁纸 1920*1080

【成图】 不加蒙版的部分截图&#xff1a; 加上蒙版的桌面壁纸图&#xff1a; 不加蒙版的桌面壁纸图&#xff1a; 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8&qu…

ts:对象数组的简单使用

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

在 Ubuntu 22.04 LTS 上安装 NVM (Node Version Manager) 管理和切换不同版本的 Node.js npm

安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash# nvm --version 0.40.1安装 Node.js 的不同版本 列出所有可用的 Node.js 远程版本 nvm ls-remotenvm install v18.20.4# node --version v18.20.4# nvm current v18.20.4npm 是 …

Java语言-异常

目录 1.异常的概念与体系结构 1.1 异常的概念 1.2 异常的体系结构 1.3 异常的分类 1.3.1 编译时异常(受查异常) 1.3.2 运行时异常(非受查异常) 2.异常的处理 2.1 防御式编程 2.1.1 LBYL 2.1.2 EAFP 2.2 异常的抛出 2.3 异常的捕获 2.3.1 异常声明throws 2.3.2 …

gin入门教程(6):全局中间件,自定义中间件

在 Gin 中&#xff0c;中间件用于处理请求的预处理和后处理&#xff0c;可以实现日志、身份验证、跨域资源共享&#xff08;CORS&#xff09;等功能。下面是如何使用和创建中间件的基本步骤&#xff1a; 1. 使用内置中间件 Gin 提供了一些内置中间件&#xff0c;例如&#xf…

Docker 下备份恢复oracle

1.docker导出容器镜像 ##docker save -o 导出后的镜像名称.tar 容器名称|镜像id docker save -o oracle_11g.tar 3fa112fd3642 2.下载镜像上传镜像略 3.加载镜像 ##docker load -i <archive_file> docker load -i oracle11g11201.tar 4.添加版本号…

LeetCode 3185.构成整天的下标对数目 II:哈希表

【LetMeFly】3185.构成整天的下标对数目 II&#xff1a;哈希表 力扣题目链接&#xff1a;https://leetcode.cn/problems/count-pairs-that-form-a-complete-day-ii/ 给你一个整数数组 hours&#xff0c;表示以 小时 为单位的时间&#xff0c;返回一个整数&#xff0c;表示满足…

Spring IoC DI

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 JavaEE专栏:JavaEE 关注博主带你了解更多数据结构知识 目录 1. 应用分层 1.1 如何分层: 1.2 MVC与三层架构区别联系 2. Spring 3.IoC & DI⼊⻔ 3.1 什么是IoC&#xff1f; 3.2 DI 介绍 …

ctfshow——web(持续更新)

文章目录 1、web签到题——base64编码特征2、web2——登录框测试&sqlmap使用3、web3——php伪协议 1、web签到题——base64编码特征 查看源代码&#xff1a; base64编码特征&#xff1a;大小写数字&#xff0c;偶尔最后几位是。 2、web2——登录框测试&sqlmap使用 …

合约门合同全生命周期管理系统:企业智能合同管理的新时代

合约门合同全生命周期管理系统&#xff1a;企业智能合同管理的新时代 1. 引言 随着现代企业的快速发展&#xff0c;合同管理的复杂性日益增加。无论是采购合同、销售合同还是合作协议&#xff0c;合同管理已成为企业运营中至关重要的一环。传统的手工合同管理方式往往效率低下…

解读AVL树:平衡二叉搜索树的奥秘

✨✨小新课堂开课了&#xff0c;欢迎欢迎~✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C&#xff1a;由浅入深篇 小新的主页&#xff1a;编程版小新-CSDN博客 前言&#xff1a; 前面我们已经介绍了二叉搜…

交易逆序对的总数 ---- 分治-归并

题目链接 题目: 分析: 解法一: 暴力解法, 遍历所有的数对, 找到逆序对, 需要两重for循环, 一定会超时解法二: 归并排序的思想如果我们将数组分成两半, 我们在每一半中各找一个数字, 判断是否为逆序对, 再根据归并的思想, 再将一半数组分半, 判断是否为逆序对, 直到数组只有一…

【论文笔记】xGen-MM (BLIP-3): A Family of Open Large Multimodal Models

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: xGen-MM (BLIP-3): A Fami…

网络编程_day3

#1024程序员节 #三次握手四次挥手#四次挥手#udp#recvfrom#sendto#服务器模型#客户端模型#Linux IO模型#阻塞式IO#非阻塞IO#设置非阻塞的方式 目录 【0】复习 【1】三次握手四次挥手 四次挥手 四次挥手既可以由客户端发起&#xff0c;也可以由服务器发起 【2】udp 1. 通信流程 2…

实验:使用Oxygen发布大型手册到Word格式

此前&#xff0c;我曾发表过一篇文章《结构化文档发布的故事和性能调优》&#xff0c;文中讨论了在将大型DITA手册转换为PDF格式时可能遇到的性能挑战及相应的优化策略。 近日&#xff0c;有朋友咨询&#xff0c;若将同样的大型手册输出为MS Word格式&#xff0c;是否也会面临…

Linux复习-C++

参考博客&#xff1a; https://blog.csdn.net/qq_45254369/article/details/126023482?ops_request_misc%257B%2522request%255Fid%2522%253A%252277629891-A0F3-4EFC-B1AC-410093596085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&req…

[JAVAEE] 多线程的案例(一)-单例模式

目录 一. 单例模式 二. 单例模式的使用时机 三. 单例模式的关键代码 四. 单例模式的几种实现方式 4.1 饿汉方式(急) 4.2 懒汉模式(缓) a. 解决原子性的问题 b. 解决程序运行效率低下的问题 c. 解决指令重排序的问题(其次是为了解决内存可见性的问题) 五. 总结 一. …

HCIP-HarmonyOS Application Developer 习题(十七)

&#xff08;判断&#xff09;1、对于用户创建的一些临时卡片在遇到卡片服务框架死亡重启&#xff0c;此时临时卡片数据在卡片管理服务中已经删除&#xff0c;且对应的卡片ID不会通知到提供方&#xff0c;所以卡片使用方需要自己负责清理长时间未刚除的临时卡片数据。 答案&…

QT:MaintenanceTool 模块安装工具

QT的MaintenanceTool 工具对已安装的 Qt 进行卸载、修复等其他操作时提示At least one valid and enabled repository required for this action to succeed 解决方式&#xff1a;在设置中添加一个临时的仓库 https://mirrors.tuna.tsinghua.edu.cn/qt/online/qtsdkrepositor…