HTML5新增元素及其属性
HTMl5新增标签,有语义,可以更容易被搜索到。
常见的有以下几种标签元素,所有的新增元素可以w3cschool手册查看。
HTML5新增结构元素
结构标签 | 描述 |
---|---|
header | 页面或页面中某一个区块的页眉,通常是一些引导和导航信息。 |
nav | 可以作为页面导航的链接组 |
section | 页面中的一个内容区块,通常由内容及其标签组成 |
article | 代表一个独立的、完整地相关内容快,可独立于页面其他内容使用 |
aside | 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容 |
footer | 页面或页面中某一个区块的脚注 |
结构标签具体用法不详细描述。
HTML5新增网页元素
网页元素标签 | 描述 |
---|---|
video | 定义视频,如影片或者其他视频 |
audio | 定义音频 |
canvas | 定义图形 |
datalist | 定义可选数据的列表 |
time | 标签定义日期或时间 |
mark | 在视觉上向用户呈现那些需要突出的文字 |
progress | 运行中的进度(进程) |
video,audio和canvas后面再具体详细描述。
mark
<p>测试<mark>mark</mark>标签</p>
datalist
<input type="text" list="test">
<datalist id="test">
<option value="1">the first</option>
<option value="2">the second</option>
<option value="3">the third</option>
</datalist>
选择后value的值会填入text框,后面的可以是对值的说明。
progress
<p><progress ></progress></p>
<p><progress value="20" max="100"></progress></p>
上面没有填属性的对应对第一个样式,是动态的
第二个样式是有值的情况下对应的进度条
time
不多说了,主要是语义化。
HTML5废除的元素
- 能用CSS替代的元素:
<big> <center> <font> <s> <u> <strike>
等 - 不再使用frame框架
- 只有部分浏览器支持的元素:
<applet> <blink> <bgsound> <marquee>
等 - 其他被废除的元素:
<rb> <dir> <isindex> <listing> <nextid>
等
HTML5新增全局属性
全局属性 | 描述 |
---|---|
contentEditable | 规定是否允许用户编辑内容,布尔型属性 |
designMode | 规定整个页面是否编辑,需要js来实现,布尔型属性 |
hidden | 规定对元素进行隐藏 |
spellcheck | 规定是否必须对元素进行拼写或语法检查,布尔型属性 |
tabindex | 规定元素的tab键迭制次序 |
<p>contenteditable</p>
<p contenteditable="true">可编辑的行</p>
<p>hidden</p>
<p hidden="hidden">被我隐藏了</p>
<p>tabindex</p>
<p>
<input type="text" tabindex="3">
<input type="text" tabindex="2">
<input type="text" tabindex="1">
</p>
<p></p>
<!-- <script>
document.designMode="on";//打开全部可编辑
document.designMode="off";//关闭全部可编辑
</script> -->
HTML5新 增表单元素及其运用
HTML5新增input类型
input类型 | 描述 |
---|---|
电子邮箱地址文本框,提交表单时会自动验证email的值 | |
url | 网页的URL,提交表单时会自动验证URL的值 |
number | 只包含数值的字段,能够设定对所接受的数字的限定 |
range | 滑动条,特定值范围内的数值选择器 |
search | 用于搜索引擎(搜索框) |
Date pickers | 拥有多个可供选取日期的新输入类型 |
新增input属性
input类型 | 描述 |
---|---|
autofocus | 页面加载时自动获取焦点 |
required | 规定输入域不能为空 |
placeholder | 提供一种提示(hint),输入域为空时显示,获得焦点时消失 |
pattern | 规定验证input域的模式(正则表达式) |
height、width | 仅适用于image类型的input标签的图像高度和宽度 |
validityState对象
Validity属性获取表单元素的validityState对象,改对象包括8个方面的验证结果
var validityState=document.getElementById("uName").validity;
HTML5中querySelector()来获取元素
属性 | 描述 |
---|---|
valueMissing | 必填的表单值为空 |
typeMismatch | 输入值与type类型不匹配 |
patternMismatch | 输入值与pattern特性的正则不匹配 |
tooLong | 输入内容超过限定长度 |
rangeUnderflow | 输入值小于min特性的值 |
rangeOverflow | 输入值大于max特性的值 |
stepMismatch | 输入值不符合step特性规则 |
customError | 使用自定义验证错误提示信息 |
valueMissing
目的:确保表单中的值已填写
用法:将表单元素设置了ruquired特性,则为必填项;如果必填项输入值为空,valueMissing属性会将返回true,否则返回false。
<input type="text" required="required"/>
typeMismatch
目的:保证输入值与预期类型相匹配(url、email等)
用法:指定表单控件的type特性值,如输入值不符合对应的表单类型,typeMismatch属性会将返回true,否则返回false。
patternMismatch
目的:根据表单元素设置的格式规则验证输入是否为有效格式
用法:在表单元素的上设置pattern特性,并赋予适当的匹配规则,如输入值不符合验证模式规则,patternMismatch属性会将返回true,否则返回false。
setCustomValidity,提示内容
invalid 事件:只要发生表单验证,所有未通过验证的表单元素都会触发一个invalid事件。
<div class="body">
<form action="#" method="post">
<h2><span></span>注册账号</h2>
<div class="table">
<div class="table-row">
<div class="table-cell"><label for="nickname"><span>*</span>昵称:</label></div>
<div class="table-cell"><input type="text" autofocus="autofocus" placeholder="英文、数字长度为6-10个字符" name="nickname" id="nickname" required pattern="[A-z0-9]{6,10}"></div>
</div>
<div class="table-row">
<div class="table-cell"><label for="password"><span>*</span>密码:</label></div>
<div class="table-cell"><input type="password" placeholder="长度为6-16个字符" name="password" id="password" required pattern="[A-z0-9]{6,16}"> </div>
</div>
<div class="table-row">
<div class="table-cell"><label for="tel"><span>*</span>手机号码:</label></div>
<div class="table-cell"><input type="tel" placeholder="以13|14|15|17|18开头" name="tel" id="tel" required pattern="^1[34578][0-9]{9}$">
<span class="tel-tip">忘记密码时可用手机号找回密码</span></div>
</div>
<div class="table-row">
<div class="table-cell"><label for="email"><span>*</span>邮箱:</label></div>
<div class="table-cell"><input type="email" name="email" id="email" required></div>
</div>
<div class="table-row">
<div class="table-cell"><label for="age">年龄:</label></div>
<div class="table-cell"><input type="age" name="age" id="age"></div>
</div>
<div class="submit-box">
<button id="submit">立即注册</button>
</div>
<div style="height:1px;"></div>
</div>
</form>
</div>
<script>
var form = document.querySelector("form");
form.addEventListener("invalid", function (e) {
var target_element = e.target;
var valid = target_element.validity;
var name = target_element.name;
switch (name) {
case "nickname":
if (valid.valueMissing) {
target_element.setCustomValidity('昵称不能为空');
} else if (valid.patternMismatch) {
target_element.setCustomValidity('昵称必须为英文、数字长度为6-10个字符');
} else {
target_element.setCustomValidity("");
}
break;
case "password":
if (valid.valueMissing) {
target_element.setCustomValidity('密码不能为空');
} else if (valid.patternMismatch) {
target_element.setCustomValidity('密码长度必须为6-16个字符');
} else {
target_element.setCustomValidity("");
}
break;
case "tel":
if (valid.valueMissing) {
target_element.setCustomValidity('手机号不能为空');
} else if (valid.patternMismatch) {
target_element.setCustomValidity('请输入正确的手机号');
} else {
target_element.setCustomValidity("");
}
break;
case "email":
if (valid.valueMissing) {
target_element.setCustomValidity('y邮箱不能为空');
} else if (valid.typeMismatch) {
target_element.setCustomValidity('请输入正确的邮箱');
} else {
target_element.setCustomValidity("");
}
break;
default:
break;
}
}, true)
</script>
valid伪类
input:valid 验证通过的样式,如上图红色框框
input:invalid 验证未通过的样式,如上图绿色框框
正则表达式
正则表达式
又称正规表示法、常规表示法:使用单个字符串来描述、匹配一系列符合某个句法规则。在很多文本编辑器里,正则表达式通常被用来检索、替换那些符合某个模式的文本。
RegExp对象用于规定在文本中检索的内容
测试工具:http://tool.oschina.net/regex/
使用正则表达式
新建一个RegExp对象:
var reg=/pattern/attributes;
var reg=new RegExp(pattern,attributes);
修饰符:
- i:执行对大小写不敏感的匹配;
- g:执行全局匹配 (查找多有匹配而非在找到第一个匹配后停止);
- m:执行多行匹配。
正则表达式量词详见w3cschool手册
分类 | 量词 | 描述 |
---|---|---|
元字符 | . | 匹配任何字符,除换行符(newline) |
元字符 | \d | 匹配任何数字字符 |
元字符 | \s | 匹配空格 |
元字符 | \w | 匹配任何字母数字(字母或数字)字符 |
元字符 | ^ | 字符串需以模式起始 |
元字符 | $ | 字符串需以模式结束 |
限定符 | * | 限定符前的子模式必须出现0次或多次 |
限定符 | + | 限定符前的子模式必须出现1次或多次 |
限定符 | ? | 限定符前的子模式必须出现1次或0次 |
限定符 | {n} | 限定符前的子模式必须出现n次 |
限定符 | ( ) | 集合字符或/和元字符为子模式 |
元字符 | | | 选替(这个或那个) |
字符类 | [ ] | 一组匹配单一字符的规则 |
常用方法:
方法 | 描述 |
---|---|
reg.test(string) | 测试正则表达式是否匹配字符串 |
reg.exec(string) | 逐个匹配,并返回当前结果,每次只返回一个数据 |
String类中可以支持正则的方法:
方法 | 描述 |
---|---|
search | 检索与正则表达式相匹配的值 |
match | 找到一个货多个正则表达式的匹配 |
replace | 替换与正则表达式匹配的子串 |
split | 把字符串分割为字符串数组 |
表单验证
表单提交时会触发submit事件
当submit事件返回false时可以阻止提交
第一种方式
<form action="#" method="post" onsubmit="return validate();" id="from">
<input type="submit">
</form>
<script>
function validate(){
return false; //false 会传到onsubmit上
}
</script>
第二种方式
<form action="#" method="post" id="form">
<input type="submit">
</form>
<script>
var form = document.querySelector("#form");
form.addEventListener("submit", function (e) {
e.preventDefault(); //阻止事件发生
}, true)
</script>
本博客仅用于记录web前端学习情况