| 值 | 换行规则 | IE5+ | chrome |
| normla | 使用浏览器默认的规则 | 支持 | 支持 |
| keep-all | 只能再半角空格或连字符处理换行 | 支持 | 不支持 |
| break-all | 允许再单词内换行 | 支持 | 支持 |
<ol start="1" type="A" type="1" reversed="reversed">
当我们再绘制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制：
（1）fillStyle 属性：填充的样式，在这个属性里设置填入的填充颜色值。
（2）strokeStyle属性：图形边框的样式，在这个属性里面设置填入边框的填充颜色。
details 元素是一种用于标识该元素内部的子元素可以被展开，收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，该元素内部的子元素被展开显示，当false，其子元素收缩不显示。该属性默认false.
summary元素属于details元素，用鼠标点击summary元素的内容字符时，details元素中的其他素有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认的文字以供点击。
<p id ="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" οnclick="saveStorage('input')；">
<input type="button" value="读取数据" οnclick="loadStorage('mgs')；">
function saveStorage(id){
var data = document.getElementByid(id).value;
var time = new Date().getTime();
localStorage.setItem(time,data);
loadStorage('msg');
}
function loadStorage(id){
var result ='<table border="1">';
for(var i=0;i<localStorage.length;i++){
var key = loadStorage.key(i);
var value = loadStorage.getItem(key);
var date = new Date();
date.setTime(key);
var dateStr = date.toGMTString();
result +='<tr><td>'+'这是第'+i+'条数据'</td><td>'+value+'</td><td>'+dateStr+'</td></tr>';
}
result += '</table>';
var target = document.getElementByid(id);
target.innerHTML = result;
}
function clearStorage(id){
localStorage.clear();
}
----------------------------------------
function saveStorage(id){
var target = document.getElementByid(id);
var str = target.value;
localStorage.setItem("mess",str);
}
function loadStorage(id){
var target = document.getElementByid(id);
var msg = localStorage.getItem("mess");
target.innerHTML = msg;
}
meter元素表示规定范围内的数量值。
meter元素有6个属性：
1.value属性：在元素中特地的表示出来的实际值。该属性默认0，可以为该属性制定一个浮点小数值。
2.min属性：指定规定范围时允许使用的最小值，默认0，在设定该属性时不能小于0.
3.max属性：指定规定的范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值1.
4.low属性：规定范围的下限值，必须小于或者等于high的值。
5。high属性：规定范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样如果该属性的值大于max属性的值，那么把max属性的值视为high的值。
6.optimum属性：最佳值属性值必须在min属性值与max属性值之间，可以大于high属性值。
<audio controls="controls" src="*.mp3"></audio>
//文字阴影效果，第三个length为阴影半径
text-shadow：length length length color
time 元素代表24小时中的某个时间或者日期，表示时间时允许带时差
<time datetime="2018-08-08" pubdate="pubdate">2018年05月27</time>
pubdate 属性的话，就是表示的当前文章的发布时间！
<time datetime="2018-08-08T22:22"></time>
<time datetime="2018-08-08T22:22Z">UTC标准时间</time>
<time datetime="2018-08-08T22:22+8:00">中国时间</time>
transform 功能：
-ms-transform:; IE9
-moz-transform:; Firefox
-webkit-transform:; Safari chrome
-o-transform:; opera
在body的属性里面，使用οnlοad="draw('canvas');"语句，调用脚本文件中的draw函数进行图形绘画。
<body οnlοad="draw('canvas')">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
function draw(id){
var canvas = document.getElementByid(id);
var context = canvas.getContext('2d');
context.fillStyle="#f1f2f3";
context.fillRect(0,0,400,400);
for(var i =0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math,PI*2,true);
context.closePath();
context.fillStyle ="rgba(255,0,0,0.25)";
context.fill();
}
context.fillText('麦子学院',50,50);
context.strokeText('麦子学院',50,100);
}
<p>硬盘使用情况：<meter value="43.9" max="119" min="0" low="50" high="70" optimum="70">43.9/119</meter>GB</p>
figure 元素是一种元素的组合，带有可选标题。figure元素用来表示页面上一块独立的内容，如果将它从王爷上删除不会给我们的网页造成影响。
figcaption 元素表示figure 元素的标题，它属于figure元素，figcaption 元素必须书写在figure元素内部，可以写在figure元素内的其他从属有前面或后面。一个figure元素最多只允许放置一个fig caption元素
cookies的缺点：
1，大小限制在4kb
2, 带宽浪费
3，难以操作
h5提供了在客户端保存数据的功能：webStorage
就是把数据保存在session 对象之中。 session 就是在打开网站到关闭网站之间要求进行保存的数据。
sessionStorage
临时保存的用法：
sessionStorage.setItem('key','value');
//sessionStorage.key ='value';
临时数据读取的方法：
变量 = sessionStorage.getItem('key');
//sessionStorage.key;
就是将数据保存在客户端本地的硬件设备上，如果浏览器被关闭，这个数据不会丢失，下次打开可以继续使用。这个功能就是localStorage 永久保存功能
localStorage
永久保存数据的方法
localStorage.setItem('KEY','VALUE');
//loadStorage.key
永久读取的方法：
变量 = localStorage.getItem('key');
//变量 = localStorage.key;
progress 进度条 属性: value表示完成了多少，value小于等于max且大于0，max总共多少，max大于0
source 元素指定多个播放格式与编码：
source 元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
视频保证兼容：
<video>
<source src="video.m4v" type="video/mp4"/>
<source src="video.webm" type="video/webm"/>
<source src="video.ogv" type="video/ogg"/>
<source src="video.mp4" />
</video>
//阴影部分
box-shadow:30px 30px 15px #ccc;
canvsa: canvas 是在html5中新增的一个重要元素，专门用来绘制图形。
在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas 对象的getContext()方法获得图形上下文。在draw函数中把参数设置为"2d";
绘制4个不同半径的圆角边框：
border-top-left-radius:左上角半径。
<progress max="100" value="85"></progress>
function draw(id){
var canvas = document.getElementByid(id);
var context = canvas.getContext('2d');
context.fillStyle ="green";
context.fillRect(0,0,400,300);
window.location = canvas.toDataURL("image/jpeg");
}
mark ：高亮
rotate 旋转，在参数中规定角度
使用方法：
-ms-transform:rotate(); IE9
-moz -transform:rotate(); Firefox
-webkit-transform:rotate(); Safari chrome
-o-transform:rotate(); opera
crticle 内嵌标签
footer address
aside
nav:传统导航条，侧边栏导航，页内导航，翻页操作
section
<meta charset="utf-8"/>
<a name="top">顶部</a>
<a href="#top">回顶部</a>
cellpadding="10" 样式，单元格之间边距 rules="all/none" 显示线条
valign="center" 居中 maxlength ="10"
<caption>标题</caption>
<frameset rows="90,90" frameborder="0" border="1">
<frame name="top" src=".html">
<frameset cols="20%,80%">
<frame name="left">
<frame name="right">
</frameset>
<frame name="bottom">
</frameset>
get方式提交时，会将表单的内容附加在url地址的后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性
post 方式提交时，会将表单中的数据一并包含在表单主体中，一期传动到服务器中处理，没有数据大小限制。
a:link 正常连接的样式
a:hover 鼠标放上去的样式
a:active选择链接时的样式
a:visited已经访问过的链接的样式
background-repeat:repeat ;repeat-x;repeat-y;no-repeat;
background-position:center;
text-indent:20px;首行缩进
letter-spacing 字符间距
word-spacing 单词间距
direction：rtl; ltr;文本方向
text-transform:capitalize;uppercase;lowercase;文本大小写
border-left-style:solid dashed dotted double
border-color:#ccc #ddd;//3D效果
background:none; ol=ul
list-style-type:circle; disc;square;decimal; decimal-leading-zero;
list-style-image:url(image/arr.gif);
list-style:circle inside url(image/arr.gif);//图片不存在，以空心圆显示
<!--[if IE9]>9<![endif]--> //判断浏览器版本
//样式相同
[id*=section]{
background:green;
}
在html5中，对input 元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，内容是否符合给定格式。当检查不符合时，不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。
在html5中，为单行文本框增加了一个list 属性，该属性的值为某个datalist 元素的id.datalist 元素也是h5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist 元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
以前checkbox只有选取和非选区状态， 在h5中使用js对该元素使用indeterminate属性，设置尚未明确是否选择状态
帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在H5之前，存在安全方面的缺陷，只要使用AutoComplete属性，安全性方面也可以得到很好的控制。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8"/>
</head>
<style type="text/css">
.tabClass,.tabClass tr td{
border:1px solid #ccc;
}
</style>
<body>
<script>
在H4中，表单元素具有一个enctype 属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。
在H5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。
Restful: rest，表现层状态转化，描述了一个架构样式的网络系统，比如WEB应用程序。
首次出现在2000年，在目前主流的三种WEB交互方案中，rest 比soap ,xml-rpc 更加简单明了。
只要遵循rest 涉及原则的程序就是restful.
function sum(){
var n1= document.getElementById("num1").valueAsNumber;
var n2= document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber= n1+n2;
}
function changeRange(){
var number = document.getElementById("range").value;
document.getElementById("output").value = number;
}
function checkForm(){
var username= document.getElementById("username").value;
if(!/^[a-zA-Z0-9_]+$/.test(username)){
alert("username valite not suceessed!");
return false;
}
var pwd= document.getElementById("pwd").value;
if(/^[\s\n\t\r]*$/.test(pwd)){
alert("pwd valite not suceessed!");
return false;
}
}
//checkbox 第三种形态
var cb = document.getElementById("cb");
cb.indeterminate = true;
//正则相关：
var patt = new RegExp("javaScript");
var str = "!";
var res =/[a-zA-Z0-9]/.test(str);
console.info(res);
//斜线后面的i代表不分大小写，g代表全局
var str = "ABCd";
var res =/[a-z]/ig.test(str);
console.info(res);
//数组知识
var arr= ['a','b','c','d','e'];
//join方法默认采用逗号分隔，也可以写逗号
var res = arr.join();
res = arr.join(',');
//采用空格分开
res = arr.join('');
console.log("write:"+res);
res = arr.reverse();
console.log(res);
//------------------------------------------
var str ='Hello MaiZi Edu';
var res = str.replace(/A-Z/g,func);
var matchStr = str.match(/Ma/ig);
console.info("比对结果："+matchStr);
function func(match){
return 'king_'+match.toLowerCase();
}
console.log(res);
res = str.split(/\s+/);
console.log(res);
var execStr = /is/i.exec('this is a test');
console.log(execStr);
console.log(execStr[0]);
//-----------------------------------------
var arr =[];
console.info("得到："+arr);
//往数组中set 值的两种方式
arr[0]='a';
arr[1]='b';
arr.push('c');
arr.push('d');
console.info(arr);
//得到数组的最后一个元素，并且删除掉。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
var res = arr.pop();
console.log("dedao :"+res);
console.log("dedaoarr :"+arr);
//向数组的开头添加一个或更多元素，并返回新的长度
arr.unshift(1,2,3);
console.log("dedaoarr :"+arr);
//-----------------------------------------
//替换特殊字符，并且返回大写的数组
var arr =['a!','b!','c!','e!','e'];
var res = arr.map(Trans);
function Trans(x){
return x.replace(/!/g,'?').toUpperCase();
}
console.log(res);
//-----------------------------------------
var x = null;
x = undefined;
x = 123;
x = 12.3;
x ='king';
x =true;
x =[];
x = window;
x =function(){};
console.log(x);
var arr = [];
arr[undefined] = 'g';
arr['name'] = 'h';
console.log(arr);
console.log(arr.length);
var arr = new Array(10);
arr =[];
arr[100] = 'abc';
console.log("长度："+arr.length);
var arr = [1,2,3,4,5,6,7,8];
//设置为3，后面的会截取掉
arr.length=3;
console.log(arr);
//--------------------------------------------
var arr= ['a','b','c','d','e','B','A','C'];
arr.sort();
console.log(arr);
var arr = [1,2,11,20];
//按照ASCII 码值排序
arr.sort();
console.log(arr);
//---------------------------------------------
var arr = [1,16,99,2,11,20];
arr.sort();
console.log(arr);
//按照数值大小排序，从小到大
arr.sort(function(a,b){
return a-b;
});
console.log(arr);
//按照数值大小排序，从大到小
arr.sort(function(a,b){
return b-a;
});
console.log(arr);
var users =[
{name:'D',age:12},
{name:'A',age:12},
{name:'B',age:13},
{name:'C',age:14}
];
users.sort(function(a,b){
if(a.name>b.name){
return 1;
}else if(a.name<b.name){
return -1;
}
return 0;
});
console.log(users);
for(var i in users){
console.log(users[i]['name']);
}
//------------------------------------------
//通过构造函数Array()创建数组
var a = new Array();
var b = new Array(5);
console.log(a.length);
var a = new Array(1,2,'KING',false,2.3,null);
console.log(a);
var obj={};
obj[0] = 'a';
obj[1] = 'b';
console.log(obj);
var arr =[];
arr[0] ='a';
arr[1] ='b';
arr[-123]='c';
console.log(arr.length);
//--------------------------------------------
var arr = ['a','b','c','d','e','f','g'];
//从零开始截取，截取3位
var res = arr.slice(0,3);
console.log(res);
var arr=[1,2,3];
var res;
//拼接数组
res = arr.concat(4,5,6).concat([7,8,9]);
console.log(res);
//------------------------------------------
//检测一个对象是否时另外一个对象的原型（或者处于原型链中）
var obj={x:1};
var obj1 =Object.create(obj);
console.log(obj.isPrototypeOf(obj1));
console.log(Object.prototype.isPrototypeOf(obj1));
var person={};
Object.defineProperties(person,{
'username':{
value:'king',
writable:true,
enumerable:true,
configurable:true
},
age:{
value:12,
writable:false
}
});
var obj= {};
Object.defineProperty(obj,'y',{
value:56,
writable:true,//代表是否可写
enumerable:true,//是否可枚举
configurable:false //是否可配置
});
console.log(obj.y);
obj.y=777;
console.log(obj.y);
for(p in obj){
console.log(p);
}
console.log(Object.keys(obj));
console.log(Object.getOwnPropertyNames(obj));
var arr = ['a','b','c','d','e','f','g'];
var res;
res = arr.indexOf('a');//0
res = arr.indexOf('A');//-1
var obj={};
console.log(obj.toString());
var arr = new Array();
console.log(arr.toString());
console.log(Object.prototype.toString.call(arr));
var str ="！@%#";
var res = /\w/.test(str);
console.info(res);
//----------------------------------------
var arr = ['a','b','c','d','e','f','g'];
//解码；
var url="http://www.baidu.com/test.php?search=this is a test ";
var res = encodeURI(url);
var res = decodeURI(res);
document.write(res);
url ="http://www.jd.com/test.php?search=this is a test ";
res= encodeURIComponent(url);
document.write(res);
res = decodeURIComponent(res);
console.info(res);
//-----------------------------------------
var person={
username:'king',
age:12,
salary:1234.12,
addr:'北京',
sex:'男'
};
//取值的两种方式
console.log("用户名："+person.username+"\n年龄："+person['salary']);
console.log(obj.hasOwnProperty('toString'));
delete foo.prototype.z;
console.log('z' in obj);
console.log(obj.hasOwnProperty('z'));
var obj ={
x:1,
y:2,
z:3,
username:'king',
age:12,
addr:'beijing'
};
for(var p in obj){
console.log(p);
}
Object.prototype.toString.call(obj).slice(8,-1);
res = arr.indexOf('a');
res = arr.indexOf('A');
res = arr.indexOf('a',2);
res = arr.lastIndexOf('a');
console.info(Array.isArray(arr));
console.info(Array.isArray([]));
console.info(Array.isArray({}));
console.info(arr.toString());
res = str.match(/is/i);
res = str.search(/is/i);
res = str.replace(/is/ig,'!');
//时间
var d = new Date();
console.log(d.getDate());
console.log(d.getDay());
console.log(d.getFullYear());
console.log(d.getMonth());
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
console.log(d.getMilliseconds());
console.log(d.getTime());
var arr= ['a','b','c','d','e'];
delete arr[0];
console.log("内容："+arr+"\t"+arr.length);
//$2$3$1 月日年
var str ='2015-09-27';
var res = str.replace(/(\d{4})-(\d){2}-(\d{2})/,'$2$3$1');
console.log(res);
//数组循环
var str =[1,2,3,4,5,6];
str.forEach(function(x){
console.log(x);
});
//2
var arr = [,,];
console.log(arr.length);
var arr =[1,2,34,5];
var res = arr.reduce(function(a,b){
return a+b;
});
console.log(res);
</script>
<form action="C:\Users\luoxian\Desktop\index2.html">
<table class="tabClass">
<tr>
<td>
<!--url验证,必须有http://-->
<label>url验证:</label>
<input type="url" name="url" value="http://www.baiduc.com"/>
</td>
<td>
<!--email验证-->
<label>email验证:</label>
<input type="email" name="email" value="15290810931@163.com">
</td>
<td>
<input type="date" name="date" >
<input type="time" name="time" value="10:00:00">
<input type="datetime-local" name="datetimeLocal" >
<input type="month" name="month" >
<input type="week" name="week" >
</td>
</tr>
<tr>
<td>
<!--step 每次步长-->
<input type="number" name="number1" id="num1" value="2" min="2" max="100" step="5" >
+
<input type="number" name="number2" id="num2">
=
<input type="number" name="result" id="result" readonly>
<input type="button" value="计算" οnclick="sum()">
</td>
<td>
<input type="range" name="range" id="range" value="25" min="0" max="100" step="5" οnchange="changeRange()"/>
<output id="output">25</output>
</td>
<td>
<label>搜索框验证：</label>
<input type="search" name="search" id="search">
</td>
</tr>
<tr>
<td>
<label>手机号验证：</label>
<input type="tel" name="tel" id="tel">
</td>
<td>
<input type="color" name="color" οnchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent= this.value;">
<span id="currentColor"></span>
</td>
<td>
<label>checkbox 的三种状态：选中，未选中，不明确状态</label>
<input type="checkbox" indeterminate id="cb">属性测试
</td>
</tr>
<tr>
<td>
<form>
<input type="text" formenctype="text/plain">
<input type="text" formenctype="multipart/form-data">
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
</td>
<td>
<label></label>
<input type="button" value="btn" οnclick='alert("gaga")'/>
</td>
<td>
<label></label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="submit" value="提交"/>
</form>
<table class="tabClass">
<tr>
<td><label>formmethod 属性来对每一个表单元素分别指定不同的提交方法</label></td>
<td>
<form id = "testform">
<input type="submit" name="s1" value="提交到百度" formmethod="post" formaction="www.baidu.com"/>
<input type="submit" name="s2" value="提交到京东" formmethod="get" formaction="www.jd.com"/>
</form>
</td>
<td>
<form>
<label>自动提示</label>
<!--autocomplete on off ""-->
<input type="text" name="greeting" autocomplete="on" list="greetList">
<datalist id="greetList" style="display:none">
<option value="ABC">A</option>
<option value="BCD">B</option>
<option value="CDE">C</option>
</datalist>
</form>
</td>
</tr>
<tr>
<td>
<form action="C:\Users\luoxian\Desktop\index2.html">
<label>正则：从A-Z,限定是三个字符</label>
<!--从A-Z,限定是三个字符""-->
<input type="text" name="greeting" pattern="[A-Z|a-z]{3}">
<input type="submit" value="提交"/>
</form>
</td>
<td>
<form action="C:\Users\luoxian\Desktop\index2.html" οnsubmit="checkForm()">
<label>正则表达</label>
<input type="text" id="username" class="username" />
<input type="password" id="pwd" class="pwd" />
<input type="submit" value="提交"/>
</form>
</td>
<td></td>
</tr>
</table>
</body>
</html>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
