HTML5新元素

前端技术 / / 3 条评论 /

HTML 5 是当前Web前端开发主流格式，配合CSS3不仅对手机有更好的适配，而且对前端开发更加方便，目前主流的浏览器都已经支持了HTML5

HTML5的头文件声明非常简单   <!DOCTYPE  html>

指定字符编码:   <meta charset=”UTF-8″>

背景色：<body  bgcolor=”red”>  和  <background =”usr1.jpg”>方法

框架: <frame><frameset>已经过时了，目前只支持<iframe>这种内联框架

引入CSS样式可以通过 <link rel=”stylesheet” type=”text/html”  href=””> 或 <style src=””>

新增的全局属性

contentEditable   使元素在页面可编辑
designMode       使全部页面可编辑，只有在JS中才能设置和使用
hidden          元素隐藏
spellcheck      拼写检查
tabindex        按下Tab键时，光标索引顺序

 

你可以编辑我!!!!因为我有一个contentEditable属性
<div contenteditable="">你可以编辑我!!!!因为我有一个contentEditable属性</div>

<button onclick="des()" >使页面全可编辑</button>    
// 上面HTML ， 下面 JS实现
<script>function des(){
var button = document.getElementsByTagName('button')[0];
if(document.designMode != "on"){
document.designMode = "on";button.innerHTML="使页面不可编辑";}
else{document.designMode = "off";button.innerHTML="使页面全可编辑";
}}</script>
|

这里的输入框有spellcheck属性，在输入单词错误时，会出现红色的下划线

<!--  因为有hidden所以大家看不到  -- >
<span id="ces" hidden>这里有一段文字，但是你看不到</span>

新增的结构元素

  1. <article>元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容(一篇博客、文章、论坛贴子 或 其他任何独立的内容)
  2. <aside>当前页面或文章的附属部分(相关的引用、侧边栏、广告 或区别与主要内容的部分)。
  3. <nav>定义导航链接的部分
  4. <section>文档的某个区域，对于网站中页面上的内容进行分块
  5. <time>标签定义公历的时间（24 小时制）或日期
  6. < address>定义文档作者/所有者的联系信息
  7. <hgroup>对标题元素进行分组
  8. <header>定义文档或者文档的一部分区域的页眉
  9. <footer>定义文档或者文档的一部分区域的页脚
  10. <figure>标签规定独立的流内容（图像、图表、照片、代码等等）
  11. <figcaption>标签定义 figure 元素的标题（caption），必须一起使用
  12. <details> 标签用于描述文档或文档某个部分的细节。(带有一个小箭头， 可以打开隐藏在里面的元素)
  13. <summary> 配合使用可以为 details 定义标题
  14. <cite> 通常表示它所包含的文本对某个参考文献的引用
  15. <small> 标签呈现小号字体效果。
  16. <progress> 进度条
  17. <meter> 定义已知范围或分数值内的标量

表单新增元素和属性

    1. 可以在表单外写控件，通过from属性引入 <input form = “form_id /”>
    2. 可以单独为按钮添加formaction、formmethod、formenctype、formtaget ，改变表单地址、方法、类型、方式
    3. &ltinput type=”text” autofocus/;>可以为表单增加autofocus属性，使控件在页面打开时自动获得焦点
    4. required 属性必需在提交之前填写输入字段
    5. labels 属性，在JS中使用，代表该元素所绑定的标签元素所组成的集合

function showcount(){
     var myinput = document.getElementById('myinput');
     alert(myinput.labels.length);}
    1. 在HTML5中，可以在标签内放置表单元素，并且在JS中可以通过control属性访问它
<label id="testlabel">
     <input type="text" />
</label>
<button onclick="setdefa()">设置默认值</button>
function setdefa(){
var lab = document.getElementById('testlabel');
var input  =lab.control;
input.value="通过control获得该控件"}
    1. 为控件添加placeholder属性，在未输入时显示提示文字，如上面这个控件
    2. 在JS中 ，可以对复选框添加 indeterminate 属性，说明复选框处于尚未明确状态

三种状态  ：   尚未明确选取   选取   未选取

var check = document.getElementById('cc');
check.indeterminate = true;
    1. 文本框的list属性添加一个类似下拉菜单的选项

 

<input list="datalist1"/>
<datalist id="datalist1">
     <option value="cwj95"></option>
     <option value="正励志"></option>
     <option value="cwj95.com"></option>
</datalist>
  1. AutoComplete为表单元素增加自动填写功能
  2. patten属性表示 该内容必须符合正则表达式的规则
  3. 在JS中，可以通过控件内的selectionDirection表示用户的正反选方向
  4. 增加了许多input种类，
    • email
    • url
    • number
    • range
    • Date pickers (date, month, week, time, datetime, datetime-local)
    • search
    • color

HTML5新Range对象

一：Range对象的概念

Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改页面上的任何区域，
可以通过如下创建一个空的Range对象，如下：

var range = document.createRange();

在html5中，每一个浏览器窗口及每一个窗口中都有一个selection对象，代表用户鼠标在页面中所选取的区域，(注意：经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象；

var selection = document.getSelection(); 或者
var selection = window.getSelection();

每一个 selection对象都有一个或者多个Range对象，每一个range对象代表用户鼠标所选取范围内的一段连续区域，在firefox中，可以通过 ctrl键可以选取多个连续的区域，因此在firefox中一个selection对象有多个range对象，在其他浏览器中，用户只能选取一段连续的区 域，因此只有一个range对象。
可以通过selection对象的getRangeAt方法来获取selection对象的某个Range对象，如下：

var range = document.getSelection().getRangeAt(index);

getRangeAt方法有一个参数index，代表该Range对象的序列号；我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了多少内容；
当用户没有按下鼠标时候，该参数的值为0.
当用户按下鼠标的时候，该参数值为1.
当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候，该参数值代表用户选取区域的数量。
当用户取消区域的选取时，该属性值为1，代表页面上存在一个空的Range对象；

JS代码如下：

 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;
 	 	 }
 	 	 }

二：Range对象的属性和方法

方法 描述
cloneContents() 返回新的 DocumentFragment 对象，它包含该范围表示的文档区域的副本。
cloneRange() 创建一个新的 Range 对象，表示与当前的 Range 对象相同的文档区域。
collapse() 折叠该范围，使它的边界点重合。
compareBoundaryPoints() 比较指定范围的边界点和当前范围的边界点，根据它们的顺序返回 -1、0 和 1。比较哪个边界点由它的第一个参数指定，它的值必须是前面定义的常量之一。
deleteContents() 删除当前 Range 对象表示的文档区域。
detach() 通知实现不再使用当前的范围，可以停止跟踪。如果调用了范围的这个方法，那么接下来调用的该范围任何方法都会抛出代码为 INVALID_STATE_ERR 的 DOMException 异常。
extractContents() 删除当前范围表示的文档区域，并且以 DocumentFragment 对象的形式返回那个区域的内容。该方法和 cloneContents() 方法与 deleteContents() 方法的组合很相似。
insertNode() 把指定的节点插入文档范围的开始点。
selectNode() 设置该范围的边界点，使它包含指定的节点和它的所有子孙节点。
selectNodeContents() 设置该范围的边界点，使它包含指定节点的子孙节点，但不包含指定的节点本身。
setEnd() 把该范围的结束点设置为指定的节点和偏移量。
setEndAfter() 把该范围的结束点设置为紧邻指定节点的节点之后。
setEndBefore() 把该范围的结束点设置为紧邻指定节点之前。
setStart() 把该范围的开始点设置为指定的节点中的指定偏移量。
setStartAfter() 把该范围的开始点设置为紧邻指定节点的节点之后。
setStartBefore() 把该范围的开始点设置为紧邻指定节点之前。
surroundContents() 把指定的节点插入文档范围的开始点，然后重定范围中的所有节点的父节点，使它们成为新插入的节点的子孙节点。
toString() 返回该范围表示的文档区域的纯文本内容。

 

原创文章转载请注明：转载自：HTML5新元素

3 条评论

发表回复

*