HTML5学习总结-01 开发环境和历史
2016-09-04 15:26
483 查看
1 搭建HTML5开发环境
1 安装一款支持HTML5的浏览器FireFox, Chrome
2 开发工具
SublineText, Eclipse, HBuilder, WebStorm
注:使用HBuilder需要注册账号,可以使用以下账户登陆:
xpws2000@qq.com 123welcome
3 调试工具
IE下的调试工具WebDeveloper Tool(F12)
FireFox下的调试工具FireBug, HttpRequester
2 常用代码
one.html<!DOCTYPE html> <!--根标签--> <html> <!--头部--> <head> <!--头部标签--> <title>我的第一个HTML页面</title> <!--设置编码 --> <meta charset="utf-8"> </head> <!--主要内容--> <body> <div>HelloWorld!</div> </body> </html>
3 常用标签
常用标签标题:h1、h2、h3、h4、h5,h6 段落:p 换行:br 分割线:hr 容器:div、span(用来容纳其他标签) 表格:table、tr、td 列表:ul、ol、li 图片:img 表单:input 链接:a
例子:
<img src="//www.baidu.com/img/baidu_jgylogo3.gif" alt="网络速度慢,正在加载" />
src属性需要填写相对路径,绝对路径。
相对路径:资源在当前的项目中 ./ ../
绝对路径:资源在外界 http:// https://
alt 属性当图片资源加载不成功时给的提示。
width,height显示图片宽度可以用像素,也可以用百分比。
4 利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width, initial-scale=1">
5 HTML5的历史
4 移动开发
H5面向移动开发<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable"> <title>测试</title> <style> * { margin: 0; padding: 0; } div { background-color: green; text-align: center; //line-height: 300px; border: 4px solid red; } button{ width: 200px; height: 100px; } </style> </head> <body> <div id="mainBox"> <button id='btn'>Display Device Info</button> </div> <script type="text/javascript"> function displayDeviceInfo() { var h = ""; h += " 网页可见区域宽:" + document.body.clientWidth + "\n"; h += " 网页可见区域高:" + document.body.clientHeight + "\n"; h += " 网页可见区域宽:" + document.body.offsetWidth + " (包括边线和滚动条的宽)" + "\n"; h += " 网页可见区域高:" + document.body.offsetHeight + " (包括边线的宽)" + "\n"; h += " 网页正文全文宽:" + document.body.scrollWidth + "\n"; h += " 网页正文全文高:" + document.body.scrollHeight + "\n"; h += " 网页被卷去的上:" + document.body.scrollTop + "\n"; h += " 网页被卷去的左:" + document.body.scrollLeft + "\n"; h += " 网页正文部分上:" + window.screenTop + "\n"; h += " 网页正文部分左:" + window.screenLeft + "\n"; h += " 屏幕分辨率的宽:" + window.screen.width + "\n"; h += " 屏幕分辨率的高:" + window.screen.height + "\n"; h += " 屏幕可用工作区宽度:" + window.screen.availWidth + "\n"; h += " 屏幕可用工作区高度:" + window.screen.availHeight + "\n"; h += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色" + "\n"; h += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸" + "\n"; alert(h); //document.getElementById("mainBox").style.width = window.screen.width + 'px'; //document.getElementById("mainBox").style.height = window.screen.height + 'px'; } var btn= document.getElementById("btn"); btn.onclick = function(){ displayDeviceInfo(); } </script> </body> </html>
测试在手机上打印上面这段HTML5代码,其中
<meta name="viewport" content="width=device-width, initial-scale=1"> 代表的含义: width=device-width 页面宽度等于设备宽度 initial-scale=1 页面初始的缩放比例, 1 = 100% ,原始比例缩放。 user-scalable=no 页面不可以缩放 其他常用的属性还有: device-width - viewport的宽度 device-height - viewport的高度 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
显示效果如下图所示
资料参考:
http://www.cnblogs.com/2050/p/3877280.html http://www.w3school.com.cn/tags/tag_img.asp
相关文章推荐
- 点击图片选定区域跳转到连接地
- html5开始之网页结构
- HTML5 Canvas绘图基础(待更新)
- (24)HTML5-窗体切换
- h5学习笔记:Table2
- (23)HTML5-Cookie和Session
- HTML5学习总结-番外05 响应式布局
- h5圆环进度条
- html5 WEB缓存
- HTML5 data-* 自定义属性
- HTML5常识总结(一)
- 关于display的属性:block和inline-block以及inline的区别
- html5,表格与框架综合布局
- HTML5触屏设备单点触控事件
- (22)HTML5-web应用基础
- HTML5无刷新修改Url,history pushState/replaceState
- HTML5 history新特性pushState、replaceState
- ajax与HTML5 history pushState/replaceState实例
- html5学习
- 初学html5 <canvas>学习笔记