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>下划线||<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相同。