HTML5新增元素(下)
- output：输出元素，与label同样有for属性，常作为实时(或JS)输出的载体。
<!--output demo-->
<!--oninput属性:输入即触发-->
<form oninput="x.value = parseInt(a.value)+parseInt(b.value)">
<input type="range" name="a" value="50"> +
<input type="number" id="b" value="50"> =
<output name="x" for="a b"></output>
</form>
-
figure与figcaption：
- figure：独立内容，移除对网页无影响；通常用来表示图片统计图，代码示例，表格统计，音视频插件等；
- figcaption：在figure元素之内，作为标题元素使用；一个figure内建议只使用一个figcaption，并放在figure元素的第一个或最后一个位置。
<figure>
<figcaption>这是一群美女</figcaption>
<img src="1.jpg" alt="" width="50">
<img src="2.jpg" alt="" width="50">
<img src="3.jpg" alt="" width="50">
</figure>
* ***details与summary***：
* *details*：有一个open属性，true/false；可通过鼠标点击改变其open状态；默认为闭合状态，可添加open属性改变默认值，也可通过js改变open属性的值实现；
* *summary*：作为标题元素使用；若不存在该元素，浏览器会默认为details元素添加一个标题(使用"详细信息",但不添加summary元素)；summary元素只可以有一个，若存在多个，只有第一个summary能实现其标题功能，其他与普通元素一样；可以放在details元素内任何位置，但建议放在第一个，更易代码阅读。
```html
<!--details & summary demo-->
<head>
<meta charset="UTF-8">
<title>Details与Summary的示例</title>
<script>
function check() {
var details = document.getElementById("details");
details.open = true; /*可通过这种形式打开，也可通过在details元素中直接添加open属性打开*/
// alert(details.open);
}
</script>
</head>
<body onload="check()">
<!--此处添加了open属性,即details元素默认为打开状态; 否则默认为闭合状态-->
<details id="details" open>
<!-- 若不存在summary，则浏览器会使用默认字符，如"详细信息" -->
<summary>文章列表</summary>
<p>第一篇文章</p>
<p>第一篇文章</p>
<p>第一篇文章</p>
<p>第一篇文章</p>
</details>
</body>
-
mark：通过该元素可以高亮显示元素中的内容。
<p><mark>mark</mark>是高亮的</p> - progress：进度条；两个属性：value当前进度值，max最大值。
<!--progress 从0到100实时变化 demo-->
<body>
<script>
// 传入rate值，实时更新progress的执行方法
function btn() {
var i = 0;
var supdate = setInterval(update, 100); /*不停的根据指定周期执行指定函数，并返回一个对象*/
function update() {
if (i < 100) {
i++;
updateProgress(i);
} else {
clearInterval(supdate); /*根据setInterval返回的对象进行人为终止*/
console.log(i);
}
}
}
// 更新进度条方法
function updateProgress(rate) {
var progressBar = document.getElementById("p");
// 进度条的value = span标题的内容 = 传入的rate值
progressBar.value = document.getElementsByTagName("span")[0].textContent = rate;
}
</script>
<section>
<h2></h2>
<p>完成的百分比
<progress id="p" max="100" value="0"></progress><span>0</span>%
</p>
<input type="button" onclick="btn()" value="点击">
</section>
</body>
-
meter：指定范围的度量器，作为计量器，尺度使用。共六个属性如下：
- value：当前度量值；
- min：最小值；
- max：最大值；
- low：下限值；
- high：上限值；
- optimum：最佳值；
<small>注：high < value < low时，meter显示为黄色；low <= value <= high显示绿色。
cite：引用，通常用作表示作品，如小说作品，电影作品等；以斜体形式显示。
<cite>速度与激情</cite>small：小型文本，通常作为旁注；如免责声明，注意事项，法律限制，版权声明等。
<!--small demo-->
<footer>
<small>版权声明：</small>
</footer>
<!--small demo2-->
<dl>
<dt>单人间</dt>
<dd>399 元 <small>含早餐，不含税</small></dd>
<dt>双人间</dt>
<dd>599 元 <small>含早餐，不含税</small></dd>
</dl>
HTML5新增属性(下)
-
start,type,reversed：三个ol元素的属性，其中start，type为HTML4.01不赞成而HTML5支持的属性，reversed为HTML5新增的属性。
- start：设置起始(列表第一个)索引值；
- type：设置索引值类型，有如下5种类型：1，A，a，I，i；
- reversed：设置是否反转；若添加该属性，则索引值(和内容无关)会反转。
<!-- start表示li起始索引值，reversed表示反转 --> <!--此示例显示的序列为E,D,C,B,A start定义了第一个索引值为E，reversed定义了逆向，即按E,D顺序--> <ol start="5" reversed type="A"> <li>第1个列表</li> <li>第2个列表</li> <li>第3个列表</li> <li>第4个列表</li> <li>第5个列表</li> </ol>
* ***control***：label对象(非元素,可通过JS获取label元素返回label对象，也可通过JS创建label对象)的属性；通过该对象属性，可以访问label标签下的第一个表单元素，如表单元素中存在for属性绑定，则优先访问绑定的第一个表单元素。
> <small>表单元素(共7个)：input、select、textarea、button、datalist、keygen、output (最后3个为HTML5新增的表单元素)。
```html
<!--label对象control属性 demo-->
<body>
<script>
// 设置邮编默认值
function setValue() {
// 创建label对象，这里只用来说明创建方法
// var label = document.createElement("LABEL");
// 获得label对象
var label = document.getElementById("label");
// 访问label对象绑定的第一个表单元素,如无绑定,则访问第一个表单元素
var inputValue = label.control;
inputValue.value = "1000001"; /*这里的值可以突破maxlength属性的限制*/
}
</script>
<form>
<label for="txt" id="label">
邮编:
<input maxlength="6" id="txst">
<!-- control属性访问的是这个input元素 -->
<input maxlength="6" id="txt">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
</body>
-
placeholder：文本框元素属性；文本框未输入状态时显示的提示用语（常见的文本框中的灰色提示文字）。输入字符后自动消失。
<input type="text" placeholder="请输入姓名">
<small>文本框元素：input、textarea。
-
list：文本框元素属性；引用数据列表(▽提示下拉)，其中包含输入字段的预定义选项，也允许用户输入；属性值为某个datalist表单元素的id；输入字符时，若字符存在datalist中，会自动提示。
- datalist：定义选项列表。请使用 input 元素的 list 属性来绑定 datalist。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
<input type="text" list="listgroup"> <!-- list属性值为datalist元素的id值 --> <datalist id="listgroup"> <!-- 输入value相关字符，会自动提示； 输入的是value值，后面的文字只是解释说明作用--> <option value="ios">IOS学习</option> <option value="hack">入侵学习</option> <option value="golang">GO学习</option> </datalist>
* ***autocomplete***：form、input元素属性；规定输入字段是否应该启用自动完成功能，on/off，默认值一般为on，默认值由浏览器预定义。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
> <small>autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
```html
<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get" autocomplete="on">
First name:
<input type="text" name="fname" />
<br /> Last name:
<input type="text" name="lname" />
<br /> E-mail:
<!--email涉及到个人隐私，未保证隐私不泄露，这里将autocomplete设置为off；即浏览器下次无法提示曾用email-->
<input type="email" name="email" autocomplete="off" />
<br />
<input type="submit" />
</form>
- pattern：input属性，规定用于验证输入字段的正则表达式。
<small>pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password。
<!--pattern demo-->
<form>
<label>
姓名：
<!-- pattern规定此输入框必须输入A-Z之间的三个字符 -->
<input type="text" pattern="[A-Z]{3}">
</label>
<input type="text" list="datalist" pattern="[A-Z]{3}">
<datalist id="datalist">
<option value="IOS">IOS学习</option>
<!-- 此项value值不符合pattern规则，所以在下拉列表中不会显示 -->
<option value="ANDROID">android学习</option>
<option value="WEB">web学习</option>
</datalist>
<input type="submit" value="提交">
</form>
-
selectionDirection：input&textarea属性，用于获取用户选择方向的行为，须通过JS方法获取。
- forward：返回值，表示用户从左往右选择，或是有字符未选择的默认值；
- backward：返回值，表示用户从右往左选择；
- none：表示文本框中未输入任何字符
<small>若从右往左选择后，进行了删除、替换、点击等行为，均返回forward。
<body>
<script>
function AD() {
// var txt = document.getElementById("txt");
// 上方方法与下方方法结果相同，只是不同获取input节点的方法。
var txt = document.forms[0]['txtName'];
var userAction = txt.selectionDirection;
alert(userAction);
}
</script>
<form>
<input type="text" id="txt" name="txtName">
<input type="button" value="获取用户选择文字方向" onclick="AD()">
</form>
</body>
* ***indeterminate***：input元素***checkbox***类型的属性，表示非明确状态，即选取与非选取之间。必须通过JS修改，默认值为false；该状态的下一个状态为选中。
```html
<input type="checkbox" id="cb">
<script>
var cb = document.getElementById("cb");
cb.indeterminate = true;
</script>
-
height,width：input元素image类型的新属性，定义图片按钮的高度和宽度。
<input type="image" src="submit.gif" width="20" height="20">
HTML5之Range[范围]对象-(上)
Range对象为页面上一段连续区域，可通过Range对象获取或修改网页上的任何区域。
Selection对象与Range对象的使用
- 通过var selection = document.getSelection()获取被选中的信息，包括选中区域数，区域内容等；
- 通过selection.rangeCount属性获取被选中的区域数；
- 若rangeCount大于0，说明存在选中区域；则可通过selection.getRangeAt(i)获取对应i索引值的区域内容。
<small>1. 索引值i：根据内容的先后顺序依次索引，并非根据选择先后顺序索引；</small>
<small>2. 根据浏览器的不同，可选择区域也会不同；如chrome只能选择一个区域，firefox则可选择多个区域。</small>
<!--Selection & Range Demo-->
<body>
<script>
function showRanges(argument) {
var html;
var rangesContainer = document.getElementById("rangesContainer");
var selection = document.getSelection();
if (selection.rangeCount > 0) {
html = "您选取了" + selection.rangeCount + "个区域<br/>";
for (var i = 0; i < selection.rangeCount; i++) {
/*返回指定索引值的range对象*/
var rangeContent = selection.getRangeAt(i);
console.log(rangeContent + "--" + rangeContent.toString());
/*直接打印range对象和range.toString()效果相同*/
html += "第" + (i + 1) + "段内容为：" + rangeContent + "<br/>";
}
rangesContainer.innerHTML = html;
}
}
</script>
<h3>Selection对象与Range对象示例</h3>
<input type="button" value="点击显示选择区域的数量与内容" onclick="showRanges()">
<div id="rangesContainer"></div>
</body>
Range对象的方法
<small>关于节点、子节点：
<p>this is a <b>text</b></p>，其中p对象为一个节点，this is a是p节点的第一个子节点(是一个text对象)；节点即元素(标签)对象；获取子节点的方法：节点.firstChild即可获取第一个子节点。更多节点可通过节点.childNodes[i]访问。</small>
-
Range的选择与删除
-
selectNode(refNode)：选取整个元素（包含节点本身）,
参数refNode:被选中的节点，如<p>text</p>； -
selectNodeContents(refNode)：选取元素中的内容(所有子节点，不包含节点本身)，如
<p>text<b>demo</b>text</p>中的text<b>demo</b>text； - deleteContents()：删除选取的Node或Contents，根据使用上述两个不同的选取方法决定；
-
selectNode(refNode)：选取整个元素（包含节点本身）,
<body>
<script>
function deleteContents(mode) {
// 创建一个Range对象
var rangeObj = document.createRange();
var demoArea = document.getElementById("demo");
if (mode) { /如果为true，表示删除整个元素/
// 选取整个Node
rangeObj.selectNode(demoArea);
rangeObj.deleteContents();
} else { /如果为false，表示仅删除元素中的内容/
// 选择Node中的Contents
rangeObj.selectNodeContents(demoArea);
rangeObj.deleteContents();
}
}
</script>
<div id="demo" style="background-color: #f00; width: 300px; height: 300px;">这是一个Range方法DEMO</div>
<button onclick="deleteContents(true)">删除整个元素</button>
<button onclick="deleteContents(false)">仅删除元素中的内容</button>
</body>
* ######Range范围起始的设置
* ***setStart***(*refNode*,*offset*)：设置Range的开始位置，`refNode：包含新的开始点的节点；offset：新开始点在refNode中的位置`；
* ***setEnd***(*refNode*,*offset*)：设置Range的结束位置，`refNode：包含新的开始点的节点；offset：新开始点在refNode中的位置`；
> <small> setEnd设置的位置如果超出refNode的长度，则会设置失败。
```html
<!--setStart & setEnd Demo-->
<body>
<script>
function deleteChar(argument) {
var div = document.getElementById("rangeDemo");
// 获取div对象的第一个子节点,即"13123123asdasdasd这是";无法使用div这个节点，这个节点没有length、也没有data属性，Range无法选取范围。
//var child = div.firstChild;
//通过另一种方法获取第一个子节点，第一个子节点是文本对象，有length和data
//第二个子节点为<b>...</b>，这个下面还有一个子节点，也是文本对象。
//<b>...</b>节点的长度为1，如要操作该节点的子节点，则如下：
//var child = div.childNodes[1].firstChild;
var child = div.childNodes[0];
printObj(child);
var rangeObj = document.createRange();
var begin = document.getElementById("begin").valueAsNumber;
var end = document.getElementById("end").valueAsNumber;
rangeObj.setStart(child, begin); /*设置range在节点中的起始位置*/
//end若超出child的长度，则会再控制台报错，设置失败
rangeObj.setEnd(child, end); /*设置range在节点中的结束位置(含)*/
rangeObj.deleteContents();
}
function printObj(obj) {
var str = "";
var printPlace = document.getElementById("printObj");
//obj是一个键值对
for(var key in obj) {
str += key + ":" + obj[key] + "<br/>";
}
printPlace.innerHTML = str;
}
</script>
<div id="rangeDemo" style="background-color: #00f; width: 300px;height: 300px;">13123123asdasdasd这是<b>一个很多子节点的，</b>用来被删除的内容</div>
<label>起始位置：
<input type="number" id="begin" value="0">
</label>
<label>结束位置：
<input type="number" id="end" value="3">
</label>
<button onclick="deleteChar()">删除指定位置内容</button>
<div id="printObj"></div>
</body>
- setStartBefore(refNode)：设置Range的开始位置位于refNode节点之前；
- setEndAfter(refNode)：设置Range的结束位置位于refNode节点之后；
- setStartAfter(refNode)：设置Range的开始位置位于refNode节点之后；
- setEndBefore(refNode)：设置Range的结束位置位于refNode节点之前；
<!--setStartBefore & setEndAfter Demo-->
<body>
<script>
// 逐行删除，从第一行开始
function deleteRow() {
var table = document.getElementById("myTable");
/*判断表单行数是否大于0，若等于0，则不能进行删除操作*/
if (table.rows.length > 0) {
// 创建Range对象
var rangeObj = document.createRange();
var row = table.rows[0]; /*获取table的第一行*/
// 设置Range的开始范围为row节点之前
rangeObj.setStartBefore(row);
// 设置Range的结束范围为row节点之后
rangeObj.setEndAfter(row);
// 删除节点，row节点之前和row节点之后，Range的范围就是整个row节点，即删除第一行。
rangeObj.deleteContents();
}
}
</script>
<table id="myTable" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容5</td>
<td>内容6</td>
</tr>
</table>
<button onclick="deleteRow()">删除第一行内容</button>
</body>
