1.2.5 HTML5 改良的 input 元素的种类
1.2.5.1 新增的input元素种类中的改良与增加 input 元素的种类 (1)
新增的input元素种类中的url类型、email类型、date类型、time类型、datetime类型和datetime-local类型
url类型
<form>
<input type="url" name="url" value="https://www.baidu.com">测试
<input type="submit" value="提交">
</form>
<br/>
<form>
<input type="email" name="email" value="cal@163.com">测试
<input type="submit" value="提交">
</form>
<input type="date" name="date" value="2018/11/13">
<input type="time" name="date" value="10:00">
<input type="datetime" name="datetime" value=""><!--datetime好像并没有什么卵用-->
<input type="datetime-local">
1.2.5.2 改良与增加 input 元素的种类 (2)
新增的input元素种类中的month类型、week类型、number类型、range类型、search类型、tel类型和color类型。
<script>
function sum(){
var n1 = document.getElementById("num1").value;
var n2 = document.getElementById("num2").value;
document.getElementById("result").valueAsNumber = n1 + n2;
}
function sum2(){
var n1 = document.getElementById("num1").valueAsNumber;
var n2 = document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber = n1 + n2;
}
//第一种方法计算的是将字符串链接起来，第二种方法是数字计算
</script>
<input type="month" name="month" value="2010-01">
<input type="week" name="week">
<input type="number" name="number" value="15" min="10" max="100" step="10">
<form>
<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum2()">
</form>
1.2.5.3 改良与增加 input 元素种类 (3) 和表单验证
新增的input元素种类中的output元素的追加，包含表单的验证。让用户对input元素有更加深入的了解。
color属性的例子真的难理解<form>
<form>
<input type="range" name="range" value="25" min="0" max="100" step="5">
<input type="search">
<input type="tel">
<input type="color" onchange="document.body.style.backgroundColor = this.value;">
<!--<input type="color" onchange="document.body.style.backgroundColor =
document.getElementById('currentColor').textContent = this.value;">
这句不写也没有问题-->
<!--onchange 事件属性
当元素值改变时才会运行脚本:-->
<span id="currentColor"></span>
</form>
output使用
<form>
<input type="range" id="range" min="0" max="100" step="10" value="10" onchange="value_change()">
<output id="output">10</output>
</form>
<script>
function check(){
var email = document.getElementById("email");
if(email.value == ""){
alert("请输入email");
return false;
}else if(!email.checkValidity()){
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" novalidate="novalidate">
<!--novalidate是指当提交表单时不对表单数据（输入）进行验证：在这里这个属性不管用
因为在js中又写了检测的代码，可以不写-->
<label for="email">email</label>
<input type="email" name="email" id="email"><br/>
<input type="submit">
</form>
1.2.7 html5增强的页面元素
1.2.7.1 figure、figcaption、details、summary 和 mark 元素
<!--figure元素和figcaption元素
figure元素中只能有一个figcaption元素代表figure的标题-->
<figure>
<img src="1.jpg" alt="图1">
<img src="2.jpg" alt="图2">
<img src="3.jpg" alt="图3">
<figcaption>图片</figcaption>
</figure>
<!--details元素和summary元素
有些浏览器不支持这种新特性
这里我的google浏览器不知道为啥不能正确显示
内容还是会占据网页内容的，不像动态加载网页，本来不显示后来就显示了。-->
<script>
function detail_onclick(detail){
var p = document.getElementById("p");
if(detail.open){
p.style.visibility = "hidden";
} else{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" onclick="detail_onclick(this)">
<summary>速度与激情7</summary>
<!--省略summary元素速度与激情7会显示为详细信息这四个字-->
<p id="p" style="visibility:hidden;">你好吗？</p>
</details>
<!--mark元素-->
<p><mark>mark</mark>元素测试</p>
1.2.7.2 progress 和 meter 元素
HTML5增强页面元素，包含progress和meter元素，progress元素代表一个任务的完成进度，这个进度是不确定的，表示进度正在进行，可以以进度百分比进行展示。
<script>
function btn(){
// for(var i = 0; i <= 100; i++){
// setTimeout(function () {
// updateprogress(i);
// },2000)
// }
//
//上面这一段语言由于js是单线程的，所以程序在将所有i都循环到
//101时之后才会开始执行循环内的setTimeout里的间隔函数。
//应该改成下面的函数才会一步步改变颜色。 var i = 0;
function thread_one(){
if(i<=100){
i++;
updateprogress(i);
}
}
setInterval(thread_one,200);
//setINterval执行无数次；取决于内部函数的结束。
// setTimeout(thread_one,200);
//setTimeout只执行一次
}
function updateprogress(newValue){
var progressBar = document.getElementById("p");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比 <progress style="background-color: aliceblue" id="p" max="100"><span>0</span>%</progress></p>
<input type="button" value="点击" onclick="btn()" value="点击">
</section>
注意js是单线程的程序。
meter元素表示规定范围内的数值量
<meter value="10" min="0" max="100" low="20" optimum="90">999</meter>
表示进度条颜色的变化
1.2.7.3 ol、dl、cite 和 smal l元素
HTML5 增强的页面元素，包含ol、dl、cite和small元素。其中主要对ol进行详细讲解包含新增的start和reversed属性。
<!--ol改良-->
<ol start="5" reversed>
<!--reversed翻转（倒序）-->
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ol>
<!--dl（多个名字的列表项，dt后跟着一个或多个dd元素）（类似于聊天）-->
<dl>
<dt>aaa</dt>
<dd>你好啊</dd>
<dd>hello</dd>
<!--dd元素在后-->
<dt>是啊</dt>
<!--dt元素在前-->
</dl>
<!--cite斜体（表示作品的标题）-->
<p>cite <cite>测试</cite></p>
<!--small元素（标识小字印刷体的元素）-->
<small></small>