HTML新增的客户端校验
1、使用校验属性执行校验
required：该属性指定该表单控件必需填写。
pattern：该属性指定该表单控件的值必需符合指定的正则表达式。
min、max、step：这3个属性值对数值类型、日期类型的<input…/>元素有效。
代码实现如下
<form action="#">
<input type="text" required/>
<input type="text"
required pattern=“\d{3}-\d{3}-\d{5}">
</form>
表单控件提供的checkValidity（）方法进行校验。如果checkValidity（）方法返回true ，则表明该表单内的所有表单控件都有效。
代码实现如下
<body>
<form action="">
生日：<input id="birth" name="birth" type="date"><br> 邮件地址：
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交" onclick="return check()">
</form>
<script>
var check = function () {
return commonCheck('birth', '生日', '字段必须是有效的日期')
&& commonCheck('email', '邮箱', '字段必须符合电子邮件的格式')
}
var commonCheck = function (fieid, fieName, tip) {
var targetEle = document.getElementById(fieid);
if (targetEle.value.trim() == '') {
alert(fieName + '字段必须填写');
return false
}
else if (!targetEle.checkValidity()) {
alert(fieName + tip);
return false
}
return true
}
</script>
</body>
自定义错误提示
使用setCustomValidity()方法实现
关闭校验
为<form…/>元素增加Novalidate属性，该属性支持boolean
为type=“submit”的<input…/>或<button…/>元素设置formnovalidate属性。
HTML5 的多媒体支持
audio和video元素
<aideo src="demo.ogg" controls>
不支持video元素
</aideo>
<video src="movie.webm" controls>
不支持video元素
</video>
<audio>audio和video支持的属性
标签属性：
src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制
<video>标签属性
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
级联样式单与css选择器
css概述：CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
css样式单的基本使用
连接外部样式文见：彻底与HTML文档分离，可以一批样式控制多份文档。
<link rel="stylesheet" href="style.css" />
注：使用相对路径即可。关于相对路径前面的博客有介绍（建议百度）
(https://blog.csdn.net/newbee2019/article/details/97873310)
导入外部样式文件：与上一种类似，只是用@important 来引入外部样式单。
使用内部样式定义 每批css样式只控制一份文档
<html>
2 <head>
3 <title>内部样式表演示</title>
4 <style type="text/css">
5 div{
6 width:100px;
7 height:100px;
8 backgrond:#ffccaa;
9 }
10 ul{
11 color:red;
12 font-size:12px;
13 }
14 </style>
15 </head>
16 <body>
17 <div>内部样式表</div>
18 </body>
</html>
使用行内样式 将具体到HTML元素，精准控制。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
CSS选择器
元素选择器 ：最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、div等
代码格式如下
E{.......} （E是元素名）
属性选择器：是元素选择器的扩展
代码格式如下
E{.......}
E[attr]{.......}
E[attr=~"value"]{.......} 选择有att属性的元素，且属性列表中有一个符合val的值的E元素
E[att^="value"]{.......} 选择具有att属性且属性值以val开头的E元素
E[atter*="value"]{.......} 选择具有att属性且属性值包含val的E元素
E[atter$="value"]{.......} 选择具有att属性且属性值以val结尾的E元素
例
input[type]{height: 40px;background-color:red;}
<form action="">
<input type="text" name="name" placeholder="abcd"/>
<input type="submit" >
</form>
input[type = "text"]{height: 40px;background-color:red;}
<form action="">
<input type="text" name="name" placeholder="abcd"/>
<input type="submit" >
</form>
To be continued…
