史上最全的html5知识点（自用笔记二）
改良的input属性
改良与增加input元素的种类
input元素所包含的种类：url类型、email类型、time类型、datetime类型、detetime-local类型、month类型、number类型、range类型、search类型、Tel类型、color类型。
url类型、email类型、time类型、datetime类型、detetime-local类型
<!-- url类型-->
<form>
<input name="url" type="url" value="http://www.baidu.com">
<input type="submit" value="提交">
</form>
<!-- email类型-->
<form>
<input name="email" type="email" value="@qq.com">
<input type="submit" value="提交">
</form>
<!-- date类型-->
<input type="date" name="date" value="">
<!-- time类型-->
<input name="time" type="time" value="10:00">
<!-- datetime类型-->
<input name="datetime" type="datetime" value="">
<!-- datetime-local类型-->
<input name="datetimelocl" type="datetime-local">
month类型、number类型、week类型。
<!-- month类型-->
<input name="month" type="month" value="2021-01-26" >
<!--week元素-->
<input name="week" type="week">
<!--number元素-->
<input name="number" type="number" value="15" min="10" max="100" step="10">
<!--计算器-->
<br>
<script>
function sum() {
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber=n1+n2;
}
</script>
<form>
<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum()">
</form>
range类型、search类型、Tel类型、color类型
<!-- range类型 -->
<input name="range" type="range" value="25" min="0" max="100"step="5">
<!-- search类型-->
<input type="search">
<!--tel类型-->
<input type="tel">
<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentcolor').textContent=this.value">
<span id="currentcolor"></span>
<!--output元素的追加-->
<br>
<script>
function value_chaneg() {
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input id="range" type="range" min="0" max="100" step="5"value="10" οnchange="value_chaneg()">
<output id="output">10</output>
</form>
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<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="true">
<label for="">email</label>
<input name="email" type="email" id="email"><br/>
<input type="submit">
</form>
</body>
</html>
效果：
html5增强的页面元素
figure、figcaption、details、summary
figure：是一种可选元素，带有组合标题，用来表示网页上独立的内容。从网页上
移除不会对网页上其他内容产生影响。
figcaption：从属figure元素，一个figure元素最多可以包含一个figcaption
元素，但准许放置其他元素。
details：是用于标识该元素内部的子元素可以被展开，收缩显示的元素。该元素有
bool类型的open属性，该属性值为true时，其内部的子元素是被展开，
false时，其内部元素是收缩起来的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- figure元素以及figcaption元素-->
<figure>
<img src="吾皇1.jpg" alt="吾皇">
<img src="吾皇2.jpg" alt="吾皇">
<figcaption>吾皇</figcaption>
</figure>
<br/>
<!-- detals元素和summary元素-->
<script>
function detail_onclick(detail) {
var p=document.getElementById("p");
if (detail.open){
p.style.visibility="hidden";
}esle{
p.style.visibility="visible";
}
}
</script>
<details id="dateil" onclick="detail_onclick(this)">
<summary>上阳赋</summary>
<p id="p" style="visibility: hidden">
这是章子怡主演的电视剧
</p>
</details>
</body>
</html>
progress元素、meter元素
progress：代表一个任务的完成进度，可以是确定也可以不确定的。可以使用从
0-100来表示任务完成情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function btn() {
var i=0;
function thread_one() {
if (i<=100){
i++;
updateprogress(i);
}
}
setInterval(thread_one,100);
}
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: #63ff69" id="p" max="100"></progress> </span>%</progress></p>
<input type="button" onclick="btn()" value="点击">
</section>
</body>
</html>
效果：
meter：规定范围内的数值量。比如总的统计的量，投票的总数。
<!--meter元素-->
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>
ol元素、dl元素
在html5中，为ol元素添加了start属性和reversed属性。dl表示多个名字列表
项，每一项带有一个或多个dt元素，一个dt元素紧跟着一个或者多个dd元素，
在一个元素内不能有相同名字的元素，也不可有相同的术语。
<!-- ol-->
<ol start="5">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<!-- ol-->
<dl>
<dt>hello</dt>
<dd>你好</dd>
<dt>博客</dt>
<dd>CSDN博客</dd>
</dl>
cite元素、dl元素
cite元素表示作品，例如一本书，一首歌曲的名称等。
small元素用来标识小字印刷体的元素。
<!--cite元素-->
<h3>cite元素</h3>
<p>我最喜欢<cite>吾皇万睡</cite></p>
<!--small-->
<small></small>
hetml5编辑API之Range对象
Range对象的基本概念
一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function rangeTest() {
var html;
showRangeDiv=document.getElementById("showRange");
selection=document.getSelection();
if (selection.rangeCount>0){
html="您选取了>"+selection.rangeCount+"<内容<br/>";
for (var i=0;i<selection.rangeCount;i++){
var range=selection.getRangeAt(i);
html+="第"+(i+1)+"段内容："+range+"<br/>";
}
showRangeDiv.innerHTML=html;
}
}
</script>
Selectiond 对象与Range对象的使用
<input type="button" value="点就我" onclick="rangeTest()">
<div id="showRange"></div>
</body>
</html>
效果：
Range对象的SelectionNode、SelecNodeContent、DeleteContent方法。
SelectionNode：表示range对象的起点为某个节点的起点，range对象的终点是某个节点的终点。SelecNodeContent：表示range对象的起点为所有节点的起
点，range对象的终点是所有节点的终点。range对象所包含的节点在页面中全部删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function deleteRangeContent(onlyContent) {
var div=document.getElementById("div");
var rangeObj=document.createRange();
if (onlyContent){
rangeObj.selectNodeContents(div);
rangeObj.deleteContents();
}else {
rangeObj.selectNode(div);
rangeObj.deleteContents();
}
}
</script>
<div id="div" style="background-color: #74ffd1;width:200px;height: 50px" >
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>
效果：
Range对象的setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法
setStart：用于某个节点某个位置指定为range对象所代表位置的起点。
setEnd：用于某个节点某个位置指定为range对象所代表位置的起点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function deleteChar() {
var div=document.getElementById("myDiv");
var textNode=div.firstChild;
var rangeObj=document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();
}
</script>
<div id="myDiv" style="color: #ff2e1b">这是要删除的文字</div>
<button onclick="deleteChar()">删除文字</button>
</body>
</html>
效果：
Range对象的cloneRange、cloneContent、extractContent方法。
cloneRange：对当前Range对象进行复制，该方法返回当前Range对象。
cloneContent：用于在页面上追加一段html代码，并且将range对象所代表的
html代码克隆岛新的html上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function cloneRange() {
var rangeObj=document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"));
var rangeClone=rangeObj.cloneRange();
alert(rangeClone.toString());
}
</script>
<p id="p">这是随便书写的内容</p>
<button onclick="cloneRange()">克隆</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function cloneContent() {
var div=document.getElementById("div");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(div);
var docFrangMent=rangeObj.cloneContents();
div.appendChild(docFrangMent);
}
</script>
<div id="div">你好么</div>
<br/>
<button onclick="cloneContent()">克隆</button>
<br/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function moveContent() {
var srcDiv=document.getElementById("srcDiv");
var distDiv=document.getElementById("distDiv");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(srcDiv);
var documentFragment=rangeObj.extractContents();
distDiv.appendChild(documentFragment);
}
</script>
<div id="srcDiv" style="background-color: aquamarine;width: 300px;height: 50px">你好</div>
<div id="distDiv" style="background-color:red;width: 300px;height: 50px"></div>
<button onclick=" moveContent()">移动元素</button>
</body>
</html>
效果：
Range对象的insertNode、compareBoundaryPoints方法
insertNode：用于指定节点插入到range对象所代表的的位置中。插入位置为某range对象所代表区域的起点位置中。
compareBoundaryPoints：用于比较两个range对象的起点位置或终点位置，两个位置可以互相比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function moveButton() {
var btn=document.getElementById("button");
var section=document.getSelection();
if (section.rangeCount>0){
var range=section.getRangeAt(0);
range.insertNode(btn);
}
}
</script>
<div onclick="moveButton()" style="width: 400px;background-color: aquamarine">我随便写的文字</div>
<button id="button">按钮</button>
</body>
</html>
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function testPlace() {
var boldText=document.getSelection("boldTest");
var boldRange=document.createRange();
boldRange.selectNodeContents(boldText.firstChild);
var section=document.getSelection();
if (section.rangeCount>0){
var selRange=section.getRangeAt(0);
if (selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0){
alert("选取的文字在粗体前面");
}else{
if (selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0)
alert("选择的文字在粗体后面");
}
}
}
</script>
这是我的<b id="boldTest">博客</b>请多关注
<br/>
<button onclick="testPlace()">位置比较</button>
</body>
</html>
Range对象的collapse、detach方法
collapse：用于range对象所代表区域的终点移动到起点处，或者range对象所代表区域的起点移动到终点处。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var rangeObj=document.createRange();
function selectRangeContents() {
var div = document.getSelection("div");
rangeObj.selectNode();
}
function unselect() {
rangeObj.collapse(false);
}
function shouRange() {
alert(rangeObj.toString());
}
</script>
<div id="div" style="background-color: aqua;width: 300px;height: 50px;">
元素的内容
</div>
<button onclick="selectRangeContents()">选择元素</button>
<button onclick="unselect()">取消元素</button>
<button onclick="shouRange()">显示Range内容</button>
</body>
</html>
======================================
‵□′）╯✧Duang~送你五毛钱特效！
动一动小手
♥点个♥