您的位置：首页 > Web前端 > HTML5

Html5笔记--新内容

2015-07-11 00:00 731 查看
摘要: Html5笔记--新内容

语义化

【推出的理由及其目标】

浏览器兼容性很低

文档结构不够明确

web应用程序的功能收到了限制

【语法的改变】

doctype类型----<!DOCTYPE html> 简化了

指定字符编码的改变-----<meta chartset="UTF-8">

可以省略标记的元素

具有boolean值的属性----不指定值为true，空为true，省略为true，不写为false【checked，checked="checked",checked=""】为true，不写为false

省略引号---checked=checked

【新增的元素】

【article元素】

强调内容，强调独立性，相对独立完整

【section元素】

不要设置样式的容器，如果article,nav,aside更符合请不要使用section，不要对没有标题的内容区域块使用section

【nav元素】

传统导航条，侧边栏导航条，页内导航，翻页操作

nav-ul-li

【aside元素】

页面文章附属引用部分

【time和pubdate】

***************【新增加非主体结构元素】***************

【header元素】

块中标题

<header><h1><nav><ul><li>

【footer和hgroup】

页面中footer，article中的footer，使用类似header

hgroup将标题和子标题进行分组

hgroup-h1-h2 h2是h1的子标题的时候二者用hgroup包裹起来

【address】

呈现文档中呈现联系信息，包括文档作者文档维护者的名字，他们的网站链接，电子邮箱，地址，电话等等

【文档结构】

大纲编排规则，h1-h6，块用section

***************【新增表单元素与属性】***************

【fom属性和formaction属性】

form="formid"

formaction 单击不同的按钮提交到不同的action

<input type='submit'  formction='xxx.action'>
<input type='submit'  formction='yyy.action'>


【formmethod属性和formenctype属性】 

<input type='submit'  formction='xxx.action'  formmethod='post'>
<input type='submit'  formction='yyy.action'  formmethod='get'>

formenctype指定不同的编码方式

<input type='submit'  formction='xxx.action'  formmethod='post' formenctype='test/plain'>
<input type='submit'  formction='yyy.action'  formmethod='get' formenctype='mulitpart/form-data'>
<input type='submit'  formction='yyy.action'  formmethod='get' formenctype='application/x-www-form-urlencoded'>


【formtarget属性和autofocus属性】

每个submit对应打开方式

_blank,_self,_parent,_top,framename

autofocus自动获取焦点

<input type="text" autofocus>


【required属性和labels属性】 

<input type="text" required>

labels块

【标签的control属性和placeholder属性】

标签内部放置一个表单元素，可以通过该标签的control属性来反问该表单元素

var labels=$("#label");

var textbox=labels.control;

textbox.value="123123123";

placeholder属性，默认显示值，模糊显示值，光标获取焦点消失

【list属性和AutoComplete】 

<input name="xxxx" list="greeting">
<datalist id="greeting">
<option value="1111">1111</option>
<option value="2222">2222</option>
</datalist>

autocomplete属性，帮助输入所用的自动完成功能

<input name="xxxx" list="greeting" autocomplete="on/off">

<datalist id="greeting">

<option value="1111">1111</option>

<option value="2222">2222</option>

</datalist>


【pattern属性和SelectionDirection】

pattern满足正则表达式，校验功能，

SelectionDirection（crome不支持），获取用户正向反向选取表单的值

【indeterminate属性】

复选框不明确的选中状态

<input type="checkbox" indeterminate id="idc">


【image】 

<input type="image" src="xx.png" width="50" height="50">


【改良的input元素种类】

【url,email,date,time,datetime.datetime-local,month,week,number,range,search,Tel,color】

type="xxx"

<input type="number" id="num1" min="10" max="100" step="10">

<input type="number" id="num1">
+
<input type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" id="计算" onclick="sum()">

function sum(){
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber=n1+n2;
}

取数字要用 valueAsNumber

range指定范围

<input name="range" type="range" value="25" min="0" max="100" step="5">

search搜索

color颜色选取器

<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value">
<span id="currentColor"></span>

output元素的追加(配合range使用)

<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()">
<ountput id="output">10</output>

function value_change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}


【表单验证】 

<form id="testform" onsubmit="" novalidate="true">
<label for="">Email</label>
<input nme="email" type="email" id="email"><br/>
<input type="submit">
</form>

function check(){
var eamil=document.getElementById("email");
if(email.value==""){
alert("请输入邮箱地址")
}else if(!email.checkValidity()){
alert("请输入正确的邮箱地址")
}
}


【HTML5增强的页面元素】

新增的figure元素和figcaption元素

figure-里面放视频图片，音频视频插件，统计表格，代码示例

figure内部只能放置一个figcaption元素，用来描述

<figure>
<img>
<img>
<img>
<figcaption>
</figure>

新增的details元素和summary元素

details表示内容可以展开，true为展开false为合并

summary从属于details用来点击展开details元素，如果没有summary元素会指定默认文字用来单机展开

<details>
<summary id="detail" onclick="detailclick(this)">
<p id="p" style="visibility:hidden">啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</details>

function detailclick(detail){
var p=$("#p");
if(detail.open){
p.style.visibility="hidden";
}else{
p.style.visibility="visible";
}
}

新增的mark元素

mark高亮的效果

新增的progress元素

代表任务完成进度

<section>
<h2>
<p>完成百分比<progress id="p" style="background0color:@269abc" max=100><span>0</span>%</progress></p>
<input type="button" onclick="" value="单击">
</h2>
</section>

function btn(){
//    for(var i=0;i<=100;i++){
//        setTimeout(function(){
//            updateprogress(i);
//        },2000)
//    }
//for循环里有延时的话是先走完for循环，再一步一步走延时

var i=0 ；
function threadone(){
if(i<=100){
i++;
updateprogress(i);
}
}
setInterval(threadon,100);
}
function updateprogress(newValue){
var progressBar=$("#p");
progressBar.value=newValue;
progressBar.getElementByTagName("span")[0].testContent=newValue;
}

新增的meter元素

进度，百分比等等

<meter value="40" min="0" max="100" low="10" height="90" optimum="80"></meter>

改良的ol列表

<ol start="5" reversed>
<li></li>
</ol>

改良的dl列表

多个名字的列表项，每一项都带有名字的dt用来表示术语，dt后面紧跟一个或者多个dd,不允许有相同名字的dt元素不允许有相同名字的术语

<dl>
<dt>hello</dt>
<dd>你好</dd>
<dt>aaa</dt>
<dd>aaaa</dd>
</dl>

加以严格限制的cite元素和重新定义的small元素

cite标题

<p>我最喜欢的电影是<cite>啦啦啦</cite></p>

small小字引述体，版权信息等等

【range对象】

表示页面上一段连续区域，通过range对象可以获取或者修改网页上任何区域

火狐能够选取多段

<inpt type="button" value="点击我" onclick="rangetest()  ">
<div id="showrange"><div>

function rangetest(){
var html;
showrangediv=$("#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=html+"第"+(i+1)+"段内容，内容为："+range+"<br/>";
}
showrangediv.innerHTML=html;
}
}

selectNode,selectNodeContents,deleteContents

selectNode----选取的是当前选取内容对应的标签

selectNodeContents-----选取的内容

deleteContents----删除内容或者删除标签

<div>元素汇总的内容元素汇总的内容元素汇总的内容</div>

var div=$("#div");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(div);
rangeObj.selectNode(div);
rangeObj.deleteContents();

setStartsetEnd setStart setEnd setStartBefore setStartAfter setEndBefore setEndAfter

【音频视频】

音频播放

Audio提供播放音频文件标准

control添加播放暂停音量控制

audio定义声音

source规定多媒体资源可以是多个

<audio id="audio">

var a=$("#audio");
function c(a.p){
if(a.paused){
a.paly();
}else{
a.pause();
}
}

编解码工具

视频播放

<video id="video" controls="controls">
<source src="xx.mp4">
</video>

var a=$("#video");
//播放暂停
function c(a.p){
if(a.paused){
a.paly();
}else{
a.pause();
}
}


【HTML5拖放】

ondrag

ondrop

【canvas标签】

【canvas使用路径】

【渐变图形与变形图形】

【canvas图形绘制处理】

【canvas应用】

【SVG】

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG 是万维网联盟的标准

未完待续
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航