html笔记

canvas是HTML6新增的专门用来绘制图形的元素，通过canvas技术，用户可以在web中绘制各种图形。canvas元素它是一块无色透明地区域，它只是一个容器，开发者通过JavaScript脚本可以轻松地在区域上实现任意绘图。
canvas绘制步骤：
1.在html5页面中添加canvas元素，定义id属性值以便接下来调用

2.使用id寻找页面中的canvas元素
var c=document.getElementById（“myCanvas”）；
3.通过canvas元素的getContext方法来获取其上下文（Context），即创建Context对象，以获取允许进行绘制的2d环境
var content=c.getContext（“2d”）；
4.使用JavaScript脚本来进行绘制
context.fillStyle=’#ff0000’；
context.fillRect（50,25,100,50）
canvas绘制简单图形
beginPath（）定义了一个新的路径绘制动作的开始
moveTo（） 为指定点创建一个新的子路径 这个点就变成新的上下文点
lineTo（） 以上下文为起点 到方法参数中指定的点之间画一条直线
stroke（） 为所画的线赋予颜色 并使其可见 如果没有特别指定颜色默认为黑色直线
相关属性：
lineWidth：直线的宽度
strokeStyle：直线的颜色
直线端点样式：HTML5 canvas支持三种直线的端点样式，包括：butt，round，和square。设定端点样式是用lineCap属性设定。缺省情况下，将使用butt样式
线性渐变：
1.create lineargradient()方法创建canvasgradient对象，语法如下：var grad = context.creatlineargradient(x1,y1,x2,y2);其中第一个坐标为渐变的起点，第二个为渐变的终点。
2.使用grab.addcolor（position，color）。
绘制径向渐变：
同样为createradialgradient和和addcolorstop
绘制阴影：
shadwoecolor shadowblur（模糊度） shadowoffsetx 设置或者返回阴影与形状的水平距离
shadowoffsety 设置或者返回阴影与形状的垂直距离
绘制透明度：
globalalpha：属性设置或返回绘图的当前透明值。属性是介于（0-1）。

<pre> 保留文本格式的排版效果
nobr:取消文本换行
code:等宽文字标记

<ruby>
		文字
	<rt>文字标记</rt>
</ruby>

hspace:图像水平间距
vspace:图像垂直间距

滚动文字
marquee 属性：
direction：up,down,left,right
behavior:scroll循环滚动 slide只滚动一次就停止 alternate来回交替进行滚动
scrollamount=3滚动速度
scrolldelay=1000;滚动时间间隔（毫秒）
loop=10;循环滚动10次
-->添加背景音乐
自动播放

新增表单元素
input输入类型：
email：定义用于email地址的字段
url：定义用于输入URL的字段
number：定义用于输入数字的字段
range：定义用于精确值不重要的输入数字的控件
Data Pickers：data：定义data控件。mouth：定义mouth和year控件（不带时区）。
week：定义week和year控件。time：定义用于输入时间的控件。datetime：定义data和time控件，基于UTC时区。
search：定义用于输入搜索字符串的文本字段
tel：定义用于输入电话号码的字段
color：定义拾色器
autocomplete：规定元素输入字段是否应该启用自动完成功能 例子：弹出先前输过的内容供选择
加个“off”就是关闭
autofocus：规定当页面加载时元素应该自动获得焦点
form:规定元素所属的一个或多个表单 可以放在form标签的外面
formaction：规定党表单提交时处理输入空间的文件的URL
formenctype：规定当表单数据提交到服务器时如何编码
formmethod：定义发送表单数据到action URL的HTTP方法
formnovalidate：formnovaliate属性覆盖元素的novaliate属性
formtarget：规定表示提交表单后在哪里显示接收到响应的名称或关键词
除了formnovalidate属性，其它属性都是只针对type=“submit”和type=“image”
新增的height和width属性：规定元素的高度和宽度（只针对type=“image”）。
list 属性引用元素，其中包含元素的预定义选项
新增的min max和step属性 step：为输入框规定合法的数字间隔
multiple：属性规定允许用户输入到元素的多个值
pattern：规定用于验证元素的值的正则表达式
placecholder：规定可描述输入字段预期值的简短的提示信息
required：规定必须在提交表单的之前输入字段
新增input属性：
autocomplete：自动补全
autofocus：自动获得焦点
form：指明该input所属表单，运用该属性可将input标签放到表单之外
list：datalist
min，max，step：最小值，最大值，数据间隔
multiple：多文件上传和file一起使用
pattern：验证正则表达式pattern=“[A-Za-z]{3}”
placeholder：文本框内的提示信息
required：
formaction：修改form标签内的action属性值
formtype：修改enctype
formmethod：修改提交方式
formnovalidate：不验证表单
formtarget：提交数据后是否开启新的页面
新增的form元素：
datalist：为输入提供一个可选的列表

<input type="text" list="mylist">
<datalist id="mylist">
  
</datalist>

Keygen：秘钥对生成器（浏览器支持度不高）
output：显示计算结果或脚本输出text

１.新增结构元素
section　定义文档中的节，如章节　页眉　页脚　文档其它部分××××
article 独立 完整的内容块 可独立页面使用
footer 页脚 定义的section*****
header 页眉 导航 LOGO可以是网页其他位置*****
nav 标签代表页面的一个部分 导航连接部分*****
aside 非正文 单独部分可删除 辅助内容 侧边栏****
hgroup 对网页或区段section的标题元素（h1–h6）进行组合****
figure 元素的组合 多用于图片与图片描述的组合*****

Div+CSS的布局方式

<div id="结构元素名称">   容器

                <header>
                 <nav>  导航
<article>                         <aside>侧边栏
<section>块
                 <footer>页脚

常用的语义性元素
mark 定义带有记号的文本
progress 定义运行中的任务进度 （进程）
time 表示时间日期值
details 规定用户可见或者隐藏的需求的补充细节
datallist 定义选项列表 与input元素配合使用，选择框
ruty 定义ruby注释 与和标签配合使用
menu 菜单列表
command 定义用户可调用的命令

废除的元素 能用CSS代替 不支持frame 支持iframe

编解码器：有损压缩
视频编解码器：H.246 VP8 Ogg Theora
音频编解码器：AAC MP3 Ogg Vorbis
HTML5中播放音频：1.audio元素 src属性和controls属性
2.source元素中src和type属性
HTML5中播放视频：1.video元素 src属性和controls属性
2.同音频上
音视频相关方法：
canplaytype()
load()
pause()
play()

HTML5语法变化：
1、标签不区分大小写
2、元素可以省略结束标签
3、允许省略属性的属性值
4、允许属性不使用引号

CSS3边框总结
border-image:url(.jpg) 30px round;
30px：上右下左30px
round平铺
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

背景属性
background-origin:padding-box|border-box|content-box
padding-box:背景图像填充框的相对位置
border-box:背景图像边界框的相对位置
content-box：背景图像的相对位置的内容框

background-clip:padding-box|border-box|content-box
padding-box:默认值。从边框区域向外裁剪背景
border-box:从补白区域向外裁剪背景
content-box：从内容区域向外裁剪背景
text-shadow—>与box-shadow用法相似
text-overflow:用来定义省略文本的处理方式
clip:修剪文本
ellipsis:显示省略号来代表被修剪的文本
String

word-wrap:normal|break-work
break-work:在长单词或url地址内部进行换行
@font-face{
font-family:;
src:url(sansation_bold.ttf);
font-weight:;
}