H5学习笔记
1.创建超链接：
target=”_blank”:链接的目标网页会在新的窗口中打开。
target=”_parent”:链接的目标会在当前窗口中打开，如果在框架网页中，则会在上一层框架打开目标网页。
target=”_self”:链接的目标会在当前运行的窗口中打开，这是默认值。
target=”_top”:链接的目标会在浏览器窗口打开，如果有框架的话，网页中的所有框架也会被删除。
target=”_窗体名称”：链接的目标会在有指定名称的窗口或框架中打开。
2.<p></p>段落|||<br/>换行||<pre></pre>按照原始代码的排列方式进行显示||<blockquote></blockquote>表示引用文字，会将标记内的文字换行并缩进||<hr/>添加分隔线||<b></b>粗体||<i></i>斜体||<u></u>下划线||<sup></sup>上标||<sub></sub>下标||<!--注释文字-->
3.链接到e-mail邮箱：<a href=”mailto:E-Mail账号”>..</a>
如果收件人不只一个人，可以用分号（；）分区，eg:
<a href =”mailto:eileen@mail.com;eileen01@mail.com”>写信给版主</a>
设置主题：<a href =”mailto:eileen@mail.com？Subject=我的意见”>写信给版主</a>
邮件抄送：<a href =”mailto:eileen@mail.com？cc=abc@mail.com”>写信给版主</a>
秘密抄送：<a href =”mailto:eileen@mail.com？bcc=abc@mail.com”>写信给版主</a>
邮件正文文字：<a href =”mailto:eileen@mail.com？Body=我要参加”>写信给版主</a>
链接到文件：<a href=”abc.zip”>下载</a>
4.表格和表单：
nowrap:让单元格文字不换行。Eg:<td nowrap>..</td>
合并单元格：合并左右列：<td colspan=”2”>...</td>
合并上下行：<td rowspan=”3”>...</td>
遇到空白单元格时：只要在空白单元格中输入一个全角空格或“ ”,就能正常显示
网页文件最好少用table，table过多会让网页下载速度变慢
表单组件被分为了4大类：文字组件、列表组件、选择组件、按钮组件。
（1输入组件）<form method=”post” action=”abc.asp”>...</form>
Method属性用于设置发送数据的方式，设置值有post和get两种。利用get方式发送数据时，数据会直接加在URL之后，安全性比较差，并且有255个字符的字数限制，适用于数据量小的表单。post方式是将数据封装之后再发送，字符串长度没有限制，数据安全性比较高。对于需要保密的信息，例如用户账号、密码、身份证号、地址以及电话等，通常会采用post方式进行发送。
属性action 用来指出发送的目的地。
enctype是表单发送的编码方式，只有method=”post”时才有效，共有三种模式：
enctype=”application/x-www-form-urlencoded”:默认值。
enctype=”multipart/form-data”:用于上传文件的时候。
enctype=”text/plain”：将表单属性发送到电子邮箱时，enctype值必须设为”text/plain”,否则将会出现乱码。
autocomplete用来设置input组件是否使用自动完成功能。
novalidate用来设置是否要在发送表单时验证表单，如果需要验证填入novalidate即可。
Readonly属性：如果不想让用户在文本框内输入数据，可以在<input>或<textarea>标记中加上readonly属性。
日期域date（H5新功能，IE不支持）：<input type=”date” name=”selectdate” />
数字域number（H5新功能，目前IE不会显示上下键）：
<input type=”number ” name=”selectnumber” value=”5” min=”3” max=”20” />
颜色域color（H5新功能）：当单击颜色域时，会产生颜色菜单，让用户选择颜色。
<input type=”color ” name=”selectcolor” value=”#ff00ff” />属性value用来设置默认颜色
范围域range （H5新功能）:类似number域，只是range的界面是水平的滚动条。
搜索域search（H5新功能）：外观与一般文本框相同，但是当用户输入文字之后，搜索域右边就会显示“X”，单击“X”就可以删除搜索域中的文字。
（2列表组件）select组件：<select></select>用来产生空的列表，<option></option>用来设置列表中的选项。size表示列表的行数，multiple表示此域中的选项可以多选。
datalist（H5新功能）：由<datalist></datalist>标记与<option>标记组成，必须与<input>组件的list属性一起使用。功能类似于自造词列表，主要是让用户输入第一个字，就可以从列表中找出符合的词语。
Eg:<input list=”browsers” />
<datalist id=”browsers”>
<option value=”IE”></option>
<option value=”Chrome”></option>
</datalist>
（3选择组件）单选按钮radio，复选框checkbox
（4按钮组件）提交submit。重置reset。普通按钮button无任何作用，搭配script语法完成想要的结果。
表单分组：当表单属性太多太长时，可以将表单中的问题分门别类。用来将表单分组的标记是<fieldset></fieldset>.<legend></legend>标记可以设置分组标题。
5.多媒体
网页上的图片的分辨率只要72dpi就够了。最好不要超过30kb.建议先将图片分割成数张小图，再“拼”到网页上。Maggy的图片素材、阿芳图库等。
<img src=”animal/c.jpg” />
<video>可以显示图像，<audio>只有声音，不会显示图像。
<audio src=”ab.mp3” type=”audio/mpeg” controls></audio>
可以设置的属性：
src=”ab.mp3”:设置音乐文件名，<audio标记支持mp3,wav,ogg3种音乐格式。
autoplay:加入此属性表示自动播放。
controls:表示显示播放面板。
loop:表示循环播放。
preload:是否预先加载，减少用户等待时间。属性值有auto,metadata,none.当设置autoplay属性时，preload属性会被忽略。
auto：网页打开时就加载影音。
metadata:只加载meta信息。
none：网页打开时不加载影音。
width/height:设置播放面板的宽度和高度，单位为像素。
type=”audio/mpeg”：指定播放类型，不需要让浏览器去检测文件格式。
IE浏览器只支持MP3.Google Chrome支持三种格式。Apple Safari支持MP3和WAV。Firefox支持WAV和OGG。Opera支持WAV和OGG。
H5提供了<source>标记，可以同时指定多种音乐格式，浏览器会依序找到可以播放的格式。
<video>标记支持3种影音格式：OGG,MP4，WEBM(VP8编码)。
IE浏览器只支持MP4。Google Chrome支持三种格式。Apple Safari支持MP4。Firefox支持WEBM。Opera支持WEBM和OGG。
添加flash动画：<embed src=”movie.swf” width=”100” height=”100”>
使用iframe嵌入优酷视频：
<iframe name=”f1” src=”new_page.htm” width=”300” height=”400”>你的浏览器不支持iframe框架。</iframe>
可以设置的属性
src=”new_page.htm”:想要显示在窗格中的文件路径以及文件名。
name=”f1”:框架窗格名称。
width=”300”/height=”400”:窗格的宽度和高度。
seamless:隐藏边框及滚动条，让网页看不出来嵌入了iframe框架。
Eg:<h3>加入iframe框架</h3>
<p>
<a href=”ch1.htm” target=”main”>浪淘沙</a>
<a href=”ch2.htm” target=”main”>虞美人</a>
</p>
<iframe name=”main” src=”ch1.htm” width=”350” height=”380” seamless>你的浏览器不支持iframe框架！</iframe>
想要用iframe嵌入视频，只要将src改成视频网址即可。
想让优酷影音自动播放视频，只要在影片地址最后加上“?autoplay=1”，就会在网页打开时自动播放视频。
Eg:<iframe src=”http://www.youku.com/embed/uq2rbrjp3kq?autoplay=1”></iframe>
6.网页存储Web Storage,是一种将少量数据存储在客户端（client）磁盘的技术。
两种方式：localStorage，sessionStorage。两者的主要差异在于生命周期和有效范围。
localStorage:执行删除命令才会消失，同一网站的网页可以跨窗口和分页。
sessionStorage：浏览器窗口或分页（tab）关闭就会消失，仅对当前浏览器窗口或分页有效。
检测浏览器是否支持Web Storage:
if(typeof(Storage)==”undefined”)
{
alert(“您的浏览器不支持Web Storage”);
}else{
//localStorage和sessionStorage程序代码
}
6.1访问localStorage
JavaScript基于“同源策略”，有来自相同网站的网页才能互相调用的限制。localStorage API通过JavaScript操作，同样只有相同来源的网页才能取得同一个localStorage.
相同网站是指协议，主机（domain与ip），传输端口（port）都必须相同。
H5标准中，Web Storage 只允许存储字符串数据。
方法：（1）Storage对象的setItem和getItem方法
存储使用setItem方法：window.localStorage.setItem(key,value);
key是变量value是key的值
读取使用getItem方法：window.localStorage.getItem(key);
（2）数组索引
存储语法：window.localStorage[“key”]=”value”;
读取语法：var value=window.localStorage[“key”];
（3）属性
存储语法：window.localStorage.key=”value”;
读取语法：var value=window.localStorage.key;
前面的window可以省略不写
6.2删除localStorage
删除某一条localStorage可以调用remove方法或者delete属性进行删除，例如：
window.localStorage.removeItem(“key”);
delete window.localStorage.key;
elete window.localStorage[“key”];
要想删除localStorage全部数据，可以使用clear()方法。
localStorage.clear();
6.3访问sessionStorage
sessionStorage 只能保存在单一的浏览器窗口或分页（tab）,关闭浏览器后存储的数据就丢失了。其最大的用途在于保存一些临时的数据，防止用户重新整理网页时不小心丢失这些数据。sessionStorage的操作方法与localStorage相同。