《HTML5与CSS3权威指南》

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012755393/article/details/81087096

第1章 Web时代的变迁

2010年正式推出HTML5。

 

第2章 HTML5与HTML4的区别

(1)新增的元素:

Section元素、article元素、aside元素、header元素、hgroup元素、footer元素、nav元素、figure元素;

video元素、audio元素、embed元素、mark元素、progress元素、time元素、ruby元素、rt元素、rp元素、wbr元素、canvas元素、command元素、details元素、datalist元素、datagrid元素、keygen元素、output元素、source元素、menu元素;

(2)新增的input元素的类型:

Email、url、number、range、date pickers;

(3)废除的元素:

1.能使用CSS替代的元素、2.不再使用frame框架、3.只有部分浏览器支持的元素

(4)新增的属性:

1.表单相关的属性:aotofocus属性、placeholder属性、form属性、required属性、autocomplete、min、max、multiple、pattern与step。

2.链接相关属性

3.其他属性:meta元素的charset属性、script元素的async属性、html元素的manifest属性。

(5)全局属性

contentEditable属性、designMode属性、hidden属性、spellcheck属性、tabindex属性

 

第3章 HTML5的结构

(1)article元素、section元素:section强调分段或分块,而article强调独立性。

 

第4章 表单与文件

(1)新增属性:

form属性、formaction属性、formmethod属性、list属性

(2)input type为file时,可以通过指定multiple属性,一次选择多个文件。

(3)progress元素、meter元素

(4)文件API

FileList对象与file对象:有两个属性name表示文件名、lastModifiedDate表示最后修改日期;

Blob对象表示二进制原始数据,file对象继承了Blob对象,有两个属性size表示字节长度、type表示Blob的MIME类型;

FileReader接口:主要用来把文件读入内存,并且读取文件中的数据。

(5)拖放API

 

第5章 绘制图形

canvas

 

第6章 多媒体播放

video元素和audio元素

(1)属性:

autoplay自动播放、preload预加载、loop是否循环播放、controls是否添加控制条、error属性、networkState属性读取当前网络状态、currentSrc属性、readyState属性、seeking属性和seekable属性、currentTime当前播放位置、startTime属性、duration总的播放时间、played属性、paused属性、ended属性、defaultPlaybackRate默认播放速率、playbackRate当前播放速率、volume播放音量、muted静音状态。

(2)方法:

play方法、pause方法、load方法重新载入媒体进行播放、canPlayType方法是否支持指定的媒体类型。

(3)事件:

Timeupdate:当前播放位置被改变;

 

第7章 本地存储

HTML4中cookies存在几个问题:1.大小被限制在4KB、2.随HTTP发送浪费带宽、3.正确操纵cookies很困难;

HTML5提供sessionStorage、localStorage对象。

本地数据库;

 

第8章 离线应用程序

(1)本地缓存与浏览器网页缓存的区别:

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

(2)manifest文件

可以为每一个页面单独指定一个manifest文件,也可以对整个web应用程序指定一个总的manifest文件。

在指定资源文件的时候,可以把资源文件分为三类,分别是CACHE、NETWORK(显示指定不缓存)、FALLBACK。

在页面的html标签的manifest属性中指定manifest文件的URL地址。

(3)applicationCache对象

applicationCache对象代表了本地缓存,可以用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存。

当浏览器装入新的资源文件时,会触发对象的updateready事件,通知本地缓存已被更新。

swapCache方法:不调用的话本地缓存将在下一次打开本页面时被更新,如果调用的话,本地缓存将会立刻更新。

事件:checking事件、noupdate事件、downloading事件、progress事件、updateready事件、cached事件、error事件。

 

第9章 通信API

HTML5中新增的与通信相关的两个功能—跨文档消息传输功能与使用Web Sockets API来通过socket端口传递数据的功能。

(1)跨文档消息传输

要想接受从其他的窗口那里发送过来的消息,就必须对窗口对象的message事件进行监视。

window.addEventListener(“message”,function(){}, false);

使用window对象的postMessage方法向其他窗口发送消息,该方法定义如下:

otherWindow.postMessage(message, targetOrigin);

(2)Web Socket通信

Var webSocket = new WebSocket(“ws://localhost:8005/socket”);

webSocket.send(“data”);

webSocket.onmessage = function(event){ var data = event.data;};

 

第10章 使用Web Workers处理线程

HTML5中新增的与线程相关的一个功能—使用Web Workers来实现Web平台上的多线程处理功能。

(1)创建后台线程非常简单:

Var worker = new Worker(“worker.js”);

但是在后台线程中是不能访问页面或窗口对象的。

发送消息:worker.postMessage(message);

接收消息:worker.onmessage = function(event){};

(2)线程嵌套

线程中可以嵌套子线程,这样的话我们可以把一个较大的后台线程切分成几个子线程,在每个子线程中各自完成相对独立的一部分工作。

 

第11章 获取地理位置信息

HTML5中,为window.navigator对象新增了一个geolocation属性。

(1)方法:

取得当前地理位置:getCurrentPosition

持续监视当前地理位置的信息:watchCurrentPosition

停止获取当前用户的地理位置信息:clearWatch

 

第12章 CSS3概述

1996年12月,CSS1正式推出;1998年5月,CSS2正式推出;2004年2月,CSS2.1正式推出;2010年,推出CSS3。

 

第13章 选择器

(1)css中的伪元素选择器:

First-line、first-letter、before、after

(2)css3中的结构性伪类选择器:

4个基本的结构性伪类选择器—root选择器、not选择器、empty选择器、target选择器。

(3)选择器:first-child、last-child、nth-child、nth-last-child

(4)UI元素状态伪类选择器

在css3中,共有11种UI元素状态伪类选择器,分别是E:hover,E:active,E:focus,E:enabled,E:disabled,E:read-only,E:read-write,E:checked,E:default,E:indeterminate以及E::selection。

 

第14章 使用选择器在页面中插入内容

(1)将alt属性的值作为图像的标题来显示

Img:after{content: attr(alt); display: block;}

(2)指定项目编号

content: counter(计数器名,编号种类)

 

第15章 文字与字体相关样式

(1)使用服务器端字体—Web Font与@font-face属性

 

第16章 盒相关样式

(1)盒类型:Block、inline、inline-block、inline-table、list-item、run-in、compact

(2)指定针对元素的宽度与高度的计算方法:box-sizing

可以用box-sizing指定宽度与高度是否包含padding及border值。

Box-sizing: content-box | border-box;

 

第17章 与背景和边框相关样式

(1)与背景相关

Background-clip: border(背景显示包括边框)| padding(不包括边框);

background-origin: border(从边框左上角开始) | padding(从内边距左上角开始) | content;

background-size、background-break

(2)图像边框

Border-image

 

第18章 CSS3中的变形处理

(1)在CSS3中,可以利用transform功能来实现文字或图像的旋转(rotate)、缩放(scale)、倾斜(skew)、移动(translate)这四种类型的变形处理。

(2)在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。

 

第19章 CSS3中的动画功能

CSS3中的动画功能分为Transitions功能与Animations功能。

(1)transitions:

transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。

(2)Animations:

animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

 

第20章 布局相关样式

(1)多栏布局

在CSS3中,通过column-count属性来使用多栏布局方式,该属性的含义是将一个元素中的内容分为多栏进行显示。

Column-width:设定每栏的宽度;

Column-gap:设定多栏之间的间隔距离;

Column-rule:在栏与栏之间增加一条间隔线;

(2)盒布局

使用float、position布局存在多栏底部不对齐的问题;

Display: box;

(3)弹性盒布局

使用自适应窗口的弹性盒布局:Box-flex: 1;(容器的空白部分按元素的box-flex属性值进行分配)

改变元素的显示顺序:box-ordinal-group: 整数;

改变元素的排列方向:box-orient: vertical;

指定水平方向与垂直方向的对齐方式:box-pack、box-align;

 

第21章 Media Queries相关样式

(1)在Iphone中的显示

<meta name=“viewport” content=“width=600px” />

(2)media queries使用方法

@media 设备类型 and (设备特性) { 样式代码 }

在CSS3中的media queries模块中也支持对外部样式表的引用。

 

第22章 CSS3的其他重要样式和属性

(1)与颜色相关样式

rgba颜色:background-color: rgba(255,0,0,0.5);

通过alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,而opacity属性只能指定整个元素的透明度。

(2)指定颜色值为transparent

如果将颜色值设定为transparent,则会将背景、文字或边框等的颜色设定为完全透明,相当于使用了值为0的alpha通道。

(3)用户界面相关样式

轮廓:outline

resize属性:它允许用户通过拖动的方式来修改元素的尺寸。

initial属性:可以直接取消对某个元素的样式指定。

 

第23章 综合实例

(1)使用HTML5中新增结构元素来构建网页

(2)使用HTML5+CSS3来构建web应用程序

 

 

 

 

 

 

 

 

 

 

阅读更多

没有更多推荐了,返回首页