HTML5与CSS3权威指南(未完待整理)

阿榄

墨衍会员 · AI 创作全网分发码龄18年

关注

原创最新推荐文章于 2025-07-17 12:39:40 发布 778 阅读 AI 写同款· GEO 优化 ›

Html5 + Css3笔记详细汇总大全阅读详情

HTML5与CSS3权威指南

1. 自动获得焦点:<p><label><input name=autofocus></label></p>

2. 结构:

3. 标记

3.1 不允许写结束标记的: area , base, br, col, command, embed, hr, img, input, keygen,link, meta, param, sourse, track, wbr

3.2 可以省略结束标记的: li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody,tfoot, tr, td, th /// <p>结束不用写

3.3 可以省略全部标记的: html, head, body, colgroup, ,tbody ///

4. HTML5与HTML4的区别

4.1 语法改变

4.2 标记方法 <! DOCTYPE html> 不分大小写和单双引号

4.3 指定字符编码 <meta charset=”utf-8”>

4.4 Boolean属性可以不写属性值<input readonly>

4.5 属性值不含空字符串,<,>,=,单双引号时,可以省略属性值两边的引号

4.6

5. 新增结构元素

5.1 <section></section 表示内容区块

5.2 <article></article>表示与上下文不相关的独立内容

5.3 <header></header>表示页面中内容区块或整个页面的标题

5.4 <hgroup></hgroup>用于对整个页面或页面中一个内容区块的标题进行组合

5.5 <footer></footer> 表示整个页面或页面中的一个内容区块的脚注

5.6 <nav></nav> 表示页面中导航链接的部份

5.7 <figure><figcaption></figcaption><p></p></figure>表示独立的流内容,一般表示文档主体流内容中的一个独立单元,使用figcaption为其添加标题

6. 新增其他元素

6.1 <video src=”movie.ogg” controls=”controls”>你的浏览器不支持video元素</video>

6.2 <audio src=”someaudio.wav”>audio元素</audio>

6.3 …….

……….

全局属性 Document.designMode=”on” 指定整个页面是否可以编辑,在js指定

<ul contentEditable=”true”> 指定可以编辑的元素(IE9以上支持)

<input type=text spellcheck=”true”> 对用记进行拼写和语法检查//只针对text和textarea

Tabindex 当用tab键切换焦点时,获取被访问到的索引

表单验证

Required

Patterm

Min max

Step 指定数值增加减少的数值

取消验证

//novalidate

//formnovalidate

使用canvas 绘制矩形

Draw(‘mycanvas’)

Functiondraw(id){

Var canvas=document.getElementById(id)//获取画布

If(canvas==null) return false;

Var context=canvas.getContext(‘2d’);////取得图形上下文, 注:没有3d /4d

Context.fillStyle=”#eeeeff”; //设置填充样色(背景)

Context.fillRect(0, 0, 400,300);/// 绘制并填充距形(背景)

Context.fillStyle=”red”; ////设置填充样色

Context.strokeStyle=’blue’; ////设置边框样式

Context.lineWidth=1; /////指定线宽

////绘制距形

Context.fillRect(50,50,100,100); ////绘制并填充距形

Context.strokeRect(50,50,100,100); ////设置距形边框

////绘制圆形 arc可以绘制圆形,圆弧

////context.arc(x, y, radius,startAngle, endAngle, anticlockwise)

////x, y 为起点坐标, radius为圆形半径,startAngle为开始角度, endAngle为结束角度, anticlockwise为是否顺时针方向

Context.beginPath();

Context.arc(25,25,10, 0,Math.PI*2,true);

Context.closePath();

Context.fillStyle=’rgba(255,0,0,0.25)’;

Context.fill();

}

Context.clearRect(x,y,width,height) //擦除指定区域中的图形

WebStorage HTML5已弃用cookies, 是cookies的改良版

Cookies的限制: 4kb , 浪费发送cookies时使用的带宽, 复杂

掌握两者区别和使用

1. sessionStorage(临时保存)

将数据保存在session中, session就是从用户进入网站到浏览器关闭所经过的时间. Session对象可以用来保存这段时间内所要求的任何数据

保存数据:sessionStorage.setItem(key,value);

读取数据: 变量=sessionStorage.getItem(key);

2. localStorage (永久保存)

将数据保存在客户端本地的硬件设备(硬盘或其他设备)中, 即使浏览器被关闭, 该数据仍然存在,下次打开网站时可以继续使用

保存数据:localStorage.setItem(key, value);

读取数据: 变量=localStorage.getItem(key);

注:保存时不允许重复保存相同的键名, 保存后,可以改键值,不许改键名(只能取新的键名再保存)

案例:

//sessionStorage示例

function saveStorage(id){

vartarget=document.getElementById(id);

varstr=target.value;

sessionStorage.setItem(‘message’,str)

////var time=newDate().getTime();

//// sessionStorage.setItem(time,str)

}

function loadStorage(id){

vartarget=document.getElementById(id);

varmsg=sessionStorage.getItem(’message’);

target.innerHTML=msg;

//sessionStorage.length

//sessionStorage.key(value)

}

///localStorage示例 ///可作为简易数据库

function saveStorage(id){

vartarget=document.getElementById(id);

varstr=target.value;

localStorage.setItem(‘message’,str)

//vardata=new Object()

//data.name=document.getElementById(‘name’).value;

//data.email= document.getElementById(‘email).value;

//data.tel= document.getElementById(‘tel).value;

//var str=JSON.stringify(data); /////将对象转换成JSON格式

//localStorage.setItem(data.name, str);

}

function loadStorage(id){

vartarget=document.getElementById(id);

varmsg=localStorage.getItem(‘message’);

target.innerHTML=msg;

//localStorage.length

//localStorage.key(value)

//var find= document.getElementById(‘name’).value;

//var str=localStorage.getItem(find);

//var data=JSON.parse(str); ////将取得的数据转换成JSON对象

//alert(data.name)

}

Function clearStorage(){

localStorage.clear();////清除

}

本地数据库

概念不需要存储在服务器上的数据库, 被称为 SQLLite 的文件型SQL数据库

步骤

1. 创建访问数据库的对象 openDatabase

var db=openDatabase(‘mydb’, ‘1.0’, ‘Test DB’,2*1024*1024);

//1是数据库名, 2是版本号, 3是数据库描述, 4是数据库大小 , 本方法返回数据库对象,如果数据库不存在,则创建

2. 使用事务处理 transaction

db.transaction(function(tx){

tx.executeSql(“CREATE TABLE IF NOT EXISTS LOGS (id unique, Log)”);

})

///使用事务处理,可以防止在对数据库进行访问及执行有关操作的时候受到外界的打扰. 在操作完成之前,阻止别的用户访问数据库

3. 用executesql来执行查询

transaction.executeSql(sqlquery, [], dataHandler, errorHandler);

//1为需要执行的SQL语句. 2为SQL语句中所有使用到的参数的数组, 在executeSql中, 将SQL语句中所要使用到的参数先用”?”代替,然后依次将这些参数放在第二个参数中

//transaction.executeSql(“UPDATE people set age=? Wherename=?;”, [age,name]);

//3为执行sql语句成功时调用的回调函数

//function dataHandler(transaction,results){///rows[index]}

//4为执行失败时的回调

///function errorHandler(transaction,errmsg){////}

////实例 P163

八. 离线应用程序

8.1 概念

本地缓存和网页缓存的区别

-1.本地缓存是为整个web应用程序服务的,浏览器的网页缓存只服务于单个网页,任何网页都具有网页缓存,而本地缓存只缓存你指定的网页

-2.网页缓存不安全,不可靠. 本地缓存是可靠的,我们可以控制缓存的内容和缓存的更新,利用缓存对象的各种属性.状态和事件来开发更加大的离线应用程序

8.2 manifest

指定哪些内容需要缓存,哪些不需要缓存

Manifest 检查文件有没有更新,浏览器与服务器交互过程, 并对本地缓存的更新过程

本地缓存是通过manifest来管理的,可以为每一个页面单独指定一个manifest,也可以整个web应用指定一个总的manifest文件.

Manifest样例

CACHE MANIFEST

#文件开头必须书写

#manifest的版本号

#version 7

CACHE: ////指定需要被缓存在本地的资源文件,为某个页面指定时,不需要把页面本身指定进来,因为如果一个页面具有manifest,浏览器会自动对这个页面进行本地缓存

Other.html

Hello.js

Images/myphoto.jpg

NETWORK: ///显式指定不进行本地缓存的资源文件,这些文件只有当客户端和服务器建立连接时才能访问..*为通配符,表示没有在本manifest文件中指定的资源文件都不进行本地缓存.

http://lulingniu/notoffline

notoffline.asp

FALLBACK: ///每行中指定两个资源文件,第一个资源文件能够在线访问时使用,第二个资源文件为不能在线访问时使用的备用资源文件

Online.js locale.js

CACHE:

Newhello.html

Newhello.js

/////注:真正运行测试的时候,需要配置服务器,让服务器支持text/cache-manifest这个MIME类型.

/////注:允许在同一个manifest重复书写同一类别

/////注: 要在html标签标示manifest的url地址

////<htmlmanifest=’hello.manifest’>…</html> ////为单个页面指定一个manifest文件

/////<htmlmanifest=”global.manifest”> ….</html> /////为整个web应用程序指定一个总的manifest文件

8.3 浏览器与服务器的交互过程

8.3.1 首次浏览网站

-1.浏览器向服务器请求访问 http://xxx

-2.服务器返回index.html网页

-3.浏览器解析index.html网页,请求页面上所有资源,包括HTML文件,图像,CSS,JS,以及 manifest

-4.服务器返回所有资源

-5.浏览器处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身

-6服务器返回所有要求本地缓存的文件.

-7.浏览器对本地缓存进行更新,存入包括页面本身在内的所有要求本地缓存的资源文件,并且触发一个事件,通知本地缓存被更新

8.3.2再次打开浏览器浏览,而且manifest没有被修改过

-1.浏览器向服务器请求访问 http://xxx

-2.浏览器发现这个页面被本地缓存,于是使用本地缓存中的index.html.

-3.浏览器解析index.html网页,并使用所有本地缓存中的资源文件

-4.浏览器向服务器请求manifest文件

-5.服务器返回一个304代码,通知浏览器manifest没有发生变化.

8.3.3再次打开浏览器,而且manifest已经被更新过

-1.浏览器向服务器请求访问 http://xxx

-2.浏览器发现这个页面被本地缓存,于是使用本地缓存中的index.html.

-3.浏览器解析index.html网页,并使用所有本地缓存中的资源文件

-4.浏览器向服务器请求manifest文件

-5.服务器返回更新过的manifest文件.

-6浏览器处理manifest文件,发现该文件已被更新,于是请求所有要求进行缓存的资源文件,包括index.html本身

-7.浏览器返回要求进行本地缓存的资源文件.

-8.浏览器对本地缓存进行更新,存入所有新的资源文件,并触发一个事件,通知本地缓存被更新

/////注:通过修改版本号的方式,可以让浏览器重新下载修改过的资源文件

8.4 ApplicationCache对象

//用来通知用户本地缓存已经被更新,也允许用户手工更新本地缓存

//当浏览器对本地缓存进行更新,并且把manifest所要求的资源下载到本地后,会触发applicationCache对象的updateready事件,通知本地缓存已被更新.可以利用这个事件通知用户,用户需要手工刷新页面来得到最新版本的资源

onUpdateReady

//本地缓存被更新时触发的ApplicationCache对象的事件

swapCache方法

//只能在updateReady事件被触发时调用, 本地缓存会马上更新(但是图片脚本等资源文件也需要重新打开本页面才生效), 如果不调用,那将在下次打开画面时再更新

//applicationCache.onUpdateReady=function(){

//本地缓存已更新,通知用户

alert(“正在更新本地缓存…..”)

applicationCache.swapCache();

alert(“本地缓存已更新,请刷新页面”)

}

applicationCache.update(); ///检查服务器上的manifest是否有更新,如果有,浏览器会自动下载manifest文件中所有请求本地缓存的文件,当这些文件下载完成时,会触发updateReady事件,询问用户是否立即刷新页面,如果用户选择立即刷新,则调用swapCache方法手工更新,更新完毕后刷新页面.

示例:

<p>swapCache方法示例</p>

</body>

Function init(){

SetInterval(function(){

//手工检查是否有更新

applicationCache.update();

},5000)

applicationCache.addEventListener(“updateready”,function(){

if(confirm(‘本地缓存已被更新,是否刷新获取新版本?’)){

//手工更新本地缓存

applicationCache.swapCache();