
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键时,光标索引顺序
<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>
新增的结构元素
- <article>元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容(一篇博客、文章、论坛贴子 或 其他任何独立的内容)
- <aside>当前页面或文章的附属部分(相关的引用、侧边栏、广告 或区别与主要内容的部分)。
- <nav>定义导航链接的部分
- <section>文档的某个区域,对于网站中页面上的内容进行分块
- <time>标签定义公历的时间(24 小时制)或日期
- < address>定义文档作者/所有者的联系信息
- <hgroup>对标题元素进行分组
- <header>定义文档或者文档的一部分区域的页眉
- <footer>定义文档或者文档的一部分区域的页脚
- <figure>标签规定独立的流内容(图像、图表、照片、代码等等)
- <figcaption>标签定义 figure 元素的标题(caption),必须一起使用
- <details> 标签用于描述文档或文档某个部分的细节。(带有一个小箭头, 可以打开隐藏在里面的元素)
- <summary> 配合使用可以为 details 定义标题
- <cite> 通常表示它所包含的文本对某个参考文献的引用
- <small> 标签呈现小号字体效果。
- <progress> 进度条
- <meter> 定义已知范围或分数值内的标量
表单新增元素和属性
- 可以在表单外写控件,通过from属性引入 <input form = “form_id /”>
- 可以单独为按钮添加formaction、formmethod、formenctype、formtaget ,改变表单地址、方法、类型、方式
- <input type=”text” autofocus/;>可以为表单增加autofocus属性,使控件在页面打开时自动获得焦点
- required 属性必需在提交之前填写输入字段
- labels 属性,在JS中使用,代表该元素所绑定的标签元素所组成的集合
function showcount(){
var myinput = document.getElementById('myinput');
alert(myinput.labels.length);}
- 在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获得该控件"}
- 为控件添加placeholder属性,在未输入时显示提示文字,如上面这个控件
- 在JS中 ,可以对复选框添加 indeterminate 属性,说明复选框处于尚未明确状态
三种状态 : 尚未明确选取 选取 未选取
var check = document.getElementById('cc');
check.indeterminate = true;
- 文本框的list属性添加一个类似下拉菜单的选项
<input list="datalist1"/>
<datalist id="datalist1">
<option value="cwj95"></option>
<option value="正励志"></option>
<option value="cwj95.com"></option>
</datalist>
- AutoComplete为表单元素增加自动填写功能
- patten属性表示 该内容必须符合正则表达式的规则
- 在JS中,可以通过控件内的selectionDirection表示用户的正反选方向
- 增加了许多input种类,
- 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() | 返回该范围表示的文档区域的纯文本内容。 |
过来学习下
多多交流
共勉