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>