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相同。
H5学习笔记1的更多相关文章
- H5 学习笔记(一、关于position定位)
主要是relative与absolute的用法: 1.relative 依据left right top bottom 等属性在正常文档流中脱离位置,即相对于他的正常文档流位置进行移动.两个都为rel ...
- 8.3 H5学习笔记
隐藏域 <form action="" method="post" enctype="multipart/form-data"> ...
- 7.29 H5学习笔记
常用实体字符小于号 < 大于号 > 和号 & 引号 " 撇号 ' 分 ¢ 镑 £ 日元 ¥ 欧元 € 小节 § 版权 © 注册 ...
- h5学习笔记:vuethink 配置
vuethink 是一款基于PHP TP5和Vuejs 结合的后台框架,设计起来是使用较为前沿.在使用的过程,需要对这款开源的后台做一些调整和面对一些细节的坑.前段时间也因为有项目需求,所以下载了玩了 ...
- H5学习笔记-应用缓存,Web worker,服务器发送事件
↑亮了 应用缓存用法 <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The co ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- springmvc学习笔记--支持文件上传和阿里云OSS API简介
前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...
- springmvc学习笔记--Interceptor机制和实践
前言: Spring的AOP理念, 以及j2ee中责任链(过滤器链)的设计模式, 确实深入人心, 处处可以看到它的身影. 这次借项目空闲, 来总结一下SpringMVC的Interceptor机制, ...
- box2dweb 学习笔记--sample讲解
前言: 之前博文"台球游戏的核心算法和AI(1)" 中, 提到过想用HTML5+Box2d来编写实现一个台球游戏. 以此来对比感慨一下游戏物理引擎的巨大威力. 做为H5+box2d ...
随机推荐
- Python 字节码是什么
了解 Python 字节码是什么,Python 如何使用它来执行你的代码,以及知道它是如何帮到你的. 如果你曾经编写过 Python,或者只是使用过 Python,你或许经常会看到 Python 源代 ...
- 洛谷 P1777 帮助_NOI导刊2010提高(03) 解题报告
P1777 帮助_NOI导刊2010提高(03) 题目描述 Bubu的书架乱成一团了!帮他一下吧! 他的书架上一共有n本书.我们定义混乱值是连续相同高度书本的段数.例如,如果书的高度是30,30,31 ...
- linux内核设计与实现一书阅读整理 之第三章
chapter 3 进程管理 3.1 进程 进程就是处于执行期的程序. 进程就是正在执行的程序代码的实时结果. 内核调度的对象是线程而并非进程. 在现代操作系统中,进程提供两种虚拟机制: 虚拟处理器 ...
- PHP获取IP地址的方法,防止伪造IP地址注入攻击
PHP获取IP地址的方法 /** * 获取客户端IP地址 * <br />来源:ThinkPHP * <br />"X-FORWARDED-FOR" 是代理 ...
- 解题:NOI 2016 优秀的拆分
题面 其实题目不算很难,但是我调试的时候被玄学了,for循环里不写空格会RE,写了才能过.神**调了一个多小时是这么个不知道是什么的玩意(真事,可以问i207M=.=),心态爆炸 发现我们只要找AA或 ...
- Qt 文档编辑设置
该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 前面已经在主窗口中添加了菜单和工具栏,这一篇中我们将实现基本的文本编辑功能 ...
- js判断当前浏览器是pc端还是移动端
根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="text/javascript ...
- css选择器 nth-child
html代码: <div> <p>多云转晴</p> <p>多云转晴</p> <p>多云转晴</p> <p> ...
- jar包读取包内properties文件
properties位于src目录下 project --src -----package -----test.properties Properties p = new Properties(); ...
- 一篇很棒的 MySQL 触发器学习教程
一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动 ...