H5学习笔记1

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>下划线||上标||下标||<!--注释文字-->

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相同。