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