HTML5新特性笔记

unit 1 HTML5基础知识

1-1 HTML5概述

HTML5相关概述
开发工具:sublime text3.0;Dreamweaver;notepad;Eclipse;WebStorm....
HTML5新特性

1-2 文档的基本格式

1-3 元素的属性

1:属性: 作用:为元素提供更多信息（语法：标签属性=参数）
2: align属性:对其方式（left 左对齐;right 右对齐;center 居中;）
3: bgcolor属性:添加背景色

1-4 文本元素

b元素:加粗文字.
br元素:强制换行
i元素:文本倾斜
del元素：删除文字
strong元素：强调文本（加粗文字）
wbr元素：安全换行（当浏览器尺寸改变时可以安全换行）
em元素：强调文本（文字倾斜）
s元素：不确定的删除（加删除线）
u元素：文字加下划线
ins元素：强调文本（加下划线）
small元素：字体变小（增加小号字体）
sup元素：上标
sub：下标
dfn元素：解释文本（倾斜文字）
q元素：引用文本（给文本加双引号）
rudy元素：给汉字加拼音（有的浏览器不支持）
cite元素：引用其他标题（倾斜文本）
bdo元素：设置文字方向（rtl 表示从右到左;ltr 表示从左到右）
time元素：表示时间,日期
mark元素：标记文本（为文本加黄色背景）
span元素：表示一般文字（无效果，但方便引入内联样式）

1-5 img导入与超链接

img元素:插入图片
所含属性：
- src:图片来源地址
- alt:当图片无法显示时的替代文字
- width:宽度
- height:高度
- title:鼠标放在图片中会显示的下标
a 元素:表示超链接
类型：
- 连接互联网网页链接：
  href=" "：内填超链接地址
- 连接文档链接：
  href=" "：内填文档址
- 图片链接：
  在 a 标签的内容变成图片即可:在 a 标签的 href 属性中输入链接目的地，在 img 标签的 src 属性：
- 建立电子邮件链接：
  a 标签内的 href="mailto:(邮箱地址)"
- 下载：
  当浏览器遇到无法解析的文件时，自动转化为下载：a 标签中 href=" (下载的文件位置) "
属性：
1. target:表示点击链接后的打开方式
  - _self:当前位置打开（默认）
  - _blank:新窗口打开
  - _top 与 _parent 都与框架有关，暂时不多讲解
2. id:元素身份证，一个特定元素只有一个id
3. name:元素称呼，可以多个元素共用一个name

1-6 绝对路径与相对路径

绝对位置：一个文件的具体位置，与HTML5位置无关。
相对路径：
- 文件与HTML文件在同一目录：直接写文件名.后缀名
- 在HTML文件下一级文件夹：文件夹/文件名.后缀名
- 在HTML文件下下一级文件夹：同级文件夹/下级文件夹/文件名.后缀名
- 在HTML文件上级文件夹：../文件名.后缀名
- 在HTML文件上上级文件夹：../../文件名.后缀名

1-7 列表

ul 属性：无序列表
type 属性：
- circle:空心圆（默认）
- disc:实心圆
- square:实心正方形
ol 元素:有序列表
type 属性：
- 整数 type="1"(默认)
- 英文大写字母 type="A"
- 罗马字母（同理）
start 属性：当开始值不为 1 时使用。设置：start="(开始值)"
value 属性：改变某个 li 内容对应的序号，并使其后序号紧接着排列
自定义列表:
- dl:声明列表
- dt:列表名称
- dd:列表子元素

1-8 表格元素

table 布局

table 元素:声明表格
- border 属性：边框宽度
- caption 属性:给表格添加标题（会在表格上方居中显示）
- thead 属性：表头
- tfoot 属性：页脚
- - cellpadding 属性：设置单元格到边框的距离为 num ( cellpadding="num" )
  - cellspacing 属性：设置单元格双线边框之间的距离为 num ( cellspacing="num" )
    当 cellspacing="0" 时，单元格为单线边框
tr 元素:声明行
- th 属性：标题（居中加粗显示）
td 元素：声明行内单元格

div 布局

div 元素：构建一个模块

style 属性:对 div 进行修饰

1-9 特殊符号的使用以实体名称代替浏览器可能误解的代码

符号	实体名	实体数值	描述
(空格)	& nbsp	& # 160	空格
<	？	& # 60	小于
>	& gt	& #62	大于
&	& amp	& #38	连接符
"	& quot	& #34	双引号
±	& plusmn	& #177	正负号
©	& copy	& #169	著作权
？(®)	?	& #174	注册商标

1-10 内联框架 iframe 元素

src 属性：默认界面
frameborder 属性：有无边框（1为有，0为无）
name 属性：与其他内容进行绑定
height width 属性等。。。

注意：若想要将网页放入内敛框架，需要使用 name 属性
如：

a href="(目标网页)" target="(内敛框架 name 名)"
iframe name="(内敛框架 name 名)"

1-11 通用属性

id 属性：元素身份证（需要使用大小写英文字母开头）
class 属性：设置类别名称，可用于多个元素归类，并用 CSS 设置整类的样式
title 属性：当光标移到选定文件上时会显示的内容（ div title="（显示的内容）" ）
style 属性：样式设计（其中 width 与 height 属性需要单位px）
dir 属性：设置文字走向
lang 属性：设置语言形式（ html lang="zh cn" ）
mate 属性：打开网页后 num 秒后跳转到新网址页面（ mate http-equiv="refresh" content="num;新网址"??? ）
pre 属性：保持输入的空格与换行的效果

unit 2 HTML5布局元素

2-1 突出开头结尾的元素

开头

header 元素：表示标题部分
hgroup 元素：给标题分组

结尾

footer 元素：表示结尾部分

2-2 划分区域的元素

每一个区域都可以看作 div 分布（ div id="article" ）
article 元素：定义独立内容区域
section 元素：表示段落
aside 元素：表示侧边栏
nav 元素：表示导航栏
figure 元素：对媒体进行组合，将图像，图表等进行分组
figcaption 元素：给 figure 元素所建立的组合定义标题
time 元素：表示时间
- datetime 属性：为了让搜索引擎方便识别( time datetime="2015-12-22(方便搜索引擎查找)"2015年12月22日（显示出的内容）)
- pubdate 属性：明确发布时间，为了便于搜索引擎寻找

2-3 进行解释说明的元素

adress 元素：阐述作者的信息，版权，email等（斜体）

unit 3 HTML5表单

3-1 定义表单 form 元素：定义表单

action 属性：指定表单发送地址
method 属性：将表单数据发送给服务器，有 get/post 两种方法
- method="get" :发送后网址后会附加信息（有隐患）
- method="post" :发送后网址后不会附加信息

3-2 input 元素极其属性 input 元素：定义表单内容项

type 属性：单行文本框
- text :一般状态（默认）
- password :密码状态（输入的内容会用小黑圆点代替）
- hidder：里面的内容不会显示，网页设计者可用其向服务器输入变量数据
- email :输入的将是一个邮箱，自动检测格式
- number :表示数值，可与 max 与 min 等连用（ input type="number" max="（最大值）" min="（最小值）" ）
- range :滑块（ input type="range" min="（最小值）" max="（最大值）" value="（默认值）" ）
  实例：
- time/date/week 等：表示时间的输入
  实例：
- radio :单选框,指的是 name 属性相同的选项中单选（ input type="checkbox" name="dx" )
  boy girl
- checkbox :复选框，在提交时会向服务器提交 value 属性内的内容
- search :创建搜索框
- file :创建选取文件的选取框
  - accept :"（选取文件的格式）"
  - multiple :当有这个时，可选取多个文件，否则默认只能选取一个文件 ( input type="file" multiple="" )
- 按钮形式
  - type="submit" :显示提交按钮
  - type="（图片）" src="图片地址" ：点击图片即可提交
  - type="reset" :显示重置按钮
  - type="button" :普通按钮，可用代码进行控制
  - button 元素：按钮形式，功能与 input 类似，但更加美观，更加通用
name 属性：参数名，识别名
value 属性：默认存在于表单中的字
maxlength 属性：规定输入的最大字数
readonly 属性：只读属性，用户不可改变其中的内容，提交时会上传
disabled 属性：提示内容（背景变灰，用户不可改变内容）( input type="text" disabled="" value="(提示内容)" )
placeholder 属性：当被鼠标点击时，会清空里面的内容（ input type="text" placeholder="提示内容" ）
autofocus 属性：自动获得焦点（ input type="text" autofocus="" ）
accesskey 属性：制定快捷键（Alt+自定义）( input type="text" accesskey="b" 效果：Alt+b 则可以自动选择 input 中的文本框 )
tabindex 属性：当按 Tab 键时，改变移动的顺序（ input type="text" tabindex="2" 效果：有 tabindex="1" 的前提下当第二次按 Tab 键时，光标移动到这个文本框）
autocomplet 属性：定义浏览器是否记忆输入内容，on 为开，off 为关，默认为开（ input type="text" autocomplet="on/off" ）
lable 属性：在optgroup 的分组中对下拉列表中的选项进行分组,并可使 option 中出现更加优先的内容
lable 元素：在勾选时点击 lable 的内容也可进行勾选( 用 lable 的 for 属性值与 input 元素的 id 属性值进行绑定 )
例：
- 点击123456时可以进行勾选的两种情况
  123456
- input type="checkbook" id="aaa" value="~~(注意要有 value 值)" >< /input >
  lable for="aaa(与 input 元素的 id 属性值相同)" > 123456 < /lable >

3-3 下拉列表 Select 元素：定义下拉列表
option 属性：建立下拉列表选项内容（value 属性值为发送给服务器的数据）
optgroup 元素：为多个 option 分组，统一管理，类似于 hgroup 的作用
size 属性：定义列表中一次性可显示的列数 multiple 属性：定义是否可以多选
也可添加 disabled 属性与 autofocus 属性
datalist 元素：在输入时会提示选择框中含有的内容（要与 input 连用）
例：input type="text" name="1" list="aaa (与 datalist 元素的 id 绑定)"
datalist id="aaa( input 中的 list 值，进行绑定 )" ~~~~/datalist /input
details 元素：进行详细细节控制 summary 元素：为 details 元素定义标题 open 属性：默认打开 details 元素中的内容（默认为关）
3-4 表单与文本 form 元素：定义表单

novalidate 属性：提交是不检测格式（默认关闭）
formaction 属性：重写服务器
- input type="submit" fromaction="服务器1" ：点击该提交键时会提交到服务器1
progress 元素：进度条
- max 属性：进度最大值
- value 属性：默认初始进度位置
- form 属性：指明表单
Meter 元素度量条
- max 属性：最大值（默认为1）
- min 属性：最小值
- low 属性：视为低标准值（不足则视为低值）
- high 属性：视为高标准值（超过则视为高标准）
- optimum 属性：最佳值，高于 low 值，低于 high 值
encype 属性（略）：发送表单前进行编码
accept-charset 属性（略）：规定服务器处理表单的字符集

fieldset 元素：给表单元素分组（效果：加边框） legend 元素：给 fieldset 元素定标题

fieldset > < legent > ~~(分组的标题)< /legent >< /fieldset >

textarea 元素：建立多行文本框

rows 属性：行数（高度）
cols 属性：宽度
placeholder 属性：当进行输入操作时，会自动删除此属性中的内容

keygen 元素：为提交的内容加密，一个存储在本地，另一个提交至服务器

unit 4 视频音频

4-1 视频控件 video 元素：提供视频支持

controls 属性：添加控制键
src 属性：指定添加的视频位置
width 属性：宽
height 属性：高
poster 属性：指定视频播放前显示的默认位置
autoplay 属性：缓存完成后自动播放（一般不设置）
loop 属性：循环播放
preload 属性：设置在页面打开时是否自动加载
- preload="auto"：自动加载
- preload="none"：不自动加载
- preload="metadate"：只加载基本内容，如大小，时长等，并不加载视频文件本身

source 元素：指定多个视频文件，不需要设置 video 属性中的 src 属性（为了解决浏览器支持格式问题）
source 元素中的 type="video/(文件格式)"

video controls=""
source src="~~.mp4" type="video/mp4"
source src="~~.webn" type="video/webn"
/video

4-2 音频控件 audio 元素：支持音频

controls 属性：音频控件（若没有此属性，则无法显示音频）
src 属性：音频位置
source 属性：为了解决浏览器兼容问题而提供多路径选择

unit 5 Canvas 元素

了解 Canvas 元素

Canvas 元素：处理图形，进行开发，提供函数，定义画布
id 属性：必不可少
Canvas 坐标系：以左上为原点，从左到右为X轴，从上到下为Y轴

5-2 图形绘制 script 元素：增加脚本语言或javascript语言
固定格式：

script type="text/javascript"
var canvas(变量名) = document.getElementById("canvas (画布的id)")
var context(可改变的变量名) = canvas.getContext("2d")
context.moveTo(0,0) ——从0,0点开始
context.lineTo(200,200) ——到200,200这个点
context.stroke(); ——进行图形绘制
beginPath() ——开始新路径
~~~~~~
/script

linewidth ：线宽值 strokeStyle ：轮廓色 fillStyle ：填充色
rect ：绘制矩形：c.rect(X,Y,宽,高) strokeRect ：直接建立矩形 fillRect ：绘制被填充的矩形 arc 元素：创建圆弧或曲线：c.arc(X,Y,半径,起始角,结束角,旋转方向)，其中角度需要用弧度制（如360 o 为Math.PI*2），旋转方向为 true-逆时针，false-顺时针 fill ：进行填充 closePath ：封闭路径
5-3 绘制文字 strokeText :绘制空心文字 fillText :绘制实心文字 font :字体大小
5-4 绘制渐变色线性渐变色：

g(创建渐变色名称)=c(原图型名称).createLinearGradient(X,Y,起始坐标,终止坐标)
g.addColorStop(在0-1之间选值 , 颜色)
g.addColorStop(0.5,red)g.addColorStop(0.8,green)

放射状渐变色：语法基本相同

g=c.createRadiaGradient(内圆圆心X,内圆圆心Y,内圆半径r,外圆圆心X,外圆圆心Y,外圆半径R)

——————————————————————————————————————————————————

学习收藏

原文地址：http://blog.csdn.net/weixin_35757704/article/details/52088865

秒客网