html5语义化边框,html5 css3新特性

HTML5

html5新特性特点：

1、语法更简单

2、标签的语义化

3、语法更宽松

4、多设备跨平台

5、自适应网页设计

一、语义化标签

1、 头部标签

2、 导航标签

3、 内容标签

4、 定义文档某个区域

5、 侧边栏标签

6、  尾部标签

7、其他标签

main 主要区域(只能有一个)menu 菜单 figure 独立块  figcaption独立块元素标题

二、多媒体标签

1、视频标签

属性

src 路径url

controls  播放控件(必须有这个属性，不然视频控件不会出现)

width/height   设置宽高

muted  静音播放  tautoplay(可静音播放)

loop  循环播放

poster  加载等待图片画面

preload   预加载 auto(自动)none(不加载)

2、音频标签

属性

src 路径url

controls  播放控件(必须有这个属性，不然音频控件不会出现)

autoplay  自动播放 (除去IE都禁用)

loop  循环播放

解决不同浏览器对音频格式兼容问题

Chrome

Chrome、IE9、Safari支持

Chrome、Firefox、IE9、Opera支持

三、表单控件

表单新类型

xx内可添加新类型

email 邮箱

tel  电话

number 数字

placeholder  占位符

max length  最大的长度

date  日期

length  长度

month  月份

表单新属性

required  表单内容不能为空

multiple  可以添加控件的时候，选择多个文件上传

autofocus 页面打开全自动聚焦到表单

outocomplete=“off”   自动补全用户搜索过的内容，但一般关闭，必须加上name

四、用于绘画 canvas 元素。

canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。

Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。

canvas绘制的基本步骤：

第一步：获得上下文 =>canvasElem.getContext('2d');

第二步：开始路径规划 =>ctx.beginPath()

第三步：移动起始点 =>ctx.moveTo(x, y)

第四步：绘制线(线条、矩形、圆形、图片...) =>ctx.lineTo(x, y)

第五步：闭合路径 =>ctx.closePath();

第六步：绘制描边 =>ctx.stroke();

用canvas绘制一个三角形。

五、本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。

H5提供了二种本地存储方法：sessionStorage和localStorage，下面分别介绍一下：

1.sessionStorage：保存的是一个会话的数据，也就是说只在一次会话中有效，关闭就会销毁数据，不是持久的本地数据存储，只是一个会话的存储；

2.localStorage：本地数据持久化存储，在操作上和第一种没有什么区别，只是存储时间上不同。

第一步：基本操作。

1.把value存储到key字段：.setItem( key, value)。

sessionStorage.setItem("key","value");

localStorage.setItem("key","value");

2.获取指定key本地存储的值：.getItem(key)。

varvalue=sessionStorage.getItem("key");

varvalue=localStorage.getItem("key");

3.删除指定key本地存储的值：.removeItem( key)。

sessionStorage.removeItem("key");

localStorage.removeItem("key");

4.清除所有的key/value：.clear()。

sessionStorage.clear();

localStorage.clear();

第二步：其它操作。

storage除了可以用上面说到的方法获取和存储数据，还可以和普通的对象一样，使用点操作和[]来控制数据(下面以localStorage为例子)：

可以通过storage的key()和length实现数据的遍历：

第三步：storage事件(针对localStorage)。

localStorage提供了一个事件storage，当键值改变或者clear的时候，就可以触发storage事件(注册storage和改变值要在不跨域的情况下存在于二个页面)，如下面的例子：

把页面A.html和B.html放正同一个域名下的HTTP服务器里，先打开A.html页面，再打开B.html页面，就可以看见效果了。

上面A.html注册事件的event对象一共有下面几个属性：

1.key：字符串类型，表示被修改，删除或添加的条目的key值；

2.oldValue：表示之前的值，如果是添加一个条目就返回null；

3.newValue：表示现在的新值，如果是添加一个条目就返回null；

4.url/uri：字符串类型，表示触发这个事件的页面地址。

六、地理定位  (高德 百度 谷歌)

Geolocation(地理定位)用于定位用户的位置，获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

七、拖拽

1.简介

(1)蓝图

拖动源

放置目标

拖放并不是单纯的把目标从一个地方移动另一个地方，其实是促成成功交互的操作过程中的反馈。

光标指示当前的位置是否可防置目标

用户提示是移动、链接或者复制

鼠标经过的地方样式改变，提示此处可以放置。

为满足以上的要求，浏览器在拖拽的每个过程中发起一系列的事件。

数据传输：一组对象，这个对象用来公开存储，拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央控制部分，用于反馈的图片以及数据自身的检索全部都在数据传输中管理。类似网络传输谈判，此时根本无需让拖动源和放置目标知道彼此的存在。此时其重要作用的就是MIME类型！

(2)MIME 多功能因特网邮件扩展服务

text/plain

image/png

image/jpeg

text/x-age 传递自定义的信息类型

事件

事件捕获：从父辈–→中间–→子辈

事件冒泡：反向

event.stopPropagation //阻止事件沿事件捕获链向下传递 或者 通过冒泡阶段向上传递。

event.preventDefault //阻止事件的默认行为，比如链接跳转。

2.H5拖拽的7个事件分别是

ondragstart 只能在这个事件的过程中支持dataTransfer通过setData来设置数据。这是为了安全考虑。编号1

ondrag 拖动过程中持续发生的事件。就是鼠标移动的过程中会反复的调用此事件。编号2

ondragenter 拖动跨入了页面中新元素的时候触发，适用于设置拖放的放置反馈。编号3

ondragleave 恢复放置反馈，与上一事件相对。编号4

ondragover 不同于drag事件，此事件是在当前鼠标停留的目标上调用。编号5

ondrop 释放鼠标调用，要放置包含处理放置动作的代码。编号6

ondragend 在拖动源中触发，适合清空拖动过程的状态。编号7

3.设置、传输和控制

设置可以拖动，很简单就一句话

八、WebSocket：时时通讯

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

CSS3

一、边框

1、圆角边框：border-radius

参数：border-radius(左上，右上，左下，右下) /*值为百分比和像素值*/

2、盒子阴影：box-shadow

参数：box-shadow(水平阴影位置(必填)，垂直阴影位置(必填)，模糊距离    ，阴影的尺寸，阴影颜色，外部阴影改为内部阴影(默认为外部阴影))

二、背景

1、背景图片：background-image

参数：background-image：url()

2、背景图片大小：background-size

background-size:宽 高

三、文本属性

1、文本阴影：text-shadow

参数：text-shadow: (水平阴影，垂直阴影，模糊的距离，阴影的颜色)

2、文本溢出：text-overflow

参数：text-overflow: clip | ellipsis | string; /*clip (修剪文本) ellipsis(显示省略符号来代表被修剪的文本)string(使用给定的字符串来代表被修剪的文本)   */

3、换行：word-wrap

参数：word-wrap: normal | break-word /*normal (只在允许的断字点换行(浏览器保持默认处理)break-word(在长单词或 URL 地址内部进行换行))  */

4、设置字体：@font-face

参数

四、2D转换

1、移动：transform

参数：transform：translate(x轴移动距离，y轴移动距离)

五、过度

1、过度：transition

1.1、参数：transition:要过渡的属性 花费时间 运动曲线 何时开始

六、选择器

1、属性选择器

2、结构伪类选择器

3、伪类选择器

八、函数

1、计算盒子宽高：width/height:calc()

1.1、参数：width:calc(100%-80px)

九、透明度

语法：  opacity: value|inherit;

十、弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法：

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

row：横向从左到右排列(左对齐)，默认的排列方式。

row-reverse：反转横向排列(右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

以下实例演示了 column 的使用:

justify-content 属性

内容对齐(justify-content)属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐。

justify-content 语法如下：

justify-content: flex-start | flex-end | center | space-between | space-around

各个值解析:

flex-start：

弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：

弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：

弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)。

space-between：

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等(比如是20px)，同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。

align-items 属性

align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

语法

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

flex-start：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

以下实例演示了 center 的使用:

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各个值解析:

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse -反转 wrap 排列。

以下实例演示了 wrap 的使用:

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

stretch - 默认。各行将会伸展以占用剩余的空间。

flex-start - 各行向弹性盒容器的起始位置堆叠。

flex-end- 各行向弹性盒容器的结束位置堆叠。

center -各行向弹性盒容器的中间位置堆叠。

space-between -各行在弹性盒容器中平均分布。

space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

以下实例演示了 center 的使用:

弹性子元素属性

align-self

align-self 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

十一、媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法：

@media mediatypeand|not|only(media feature) {

CSS-Code;

}

媒体类型

使用 @media 查询来制作响应式设计：

十二、语音

css设置标签内容语音朗读