http://www.w3school.com.cn/html/
实践方法：
（1）打开上面的网址， 打开你电脑中的记事本（如果会用dreamweaver的话可以用dreamweaver）。记事本是最简单的编写网页的工具，dreamweaver相对来说更加专业点，功能也更全面点。
（2）打开上面的网址后，你会看到有个“现在开始学习 HTML ！”（带下划线的红色字体），然后点进去，会看到如下一段代码：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
（3）将这段代码复制到你的记事本里，点另存为index.html
（4）这时你会发现刚刚保存的index.html变成了一个“e”文件，其实这就是一个很简答的网页
（5）用浏览器打开这个网页，显示如下内容：
My First Heading
My first paragraph.
也就是这个网页显示了两行文字。
（6）对于步骤（2）中的那段代码的具体含义，可以学习上面网址中的教程，里面有具体的说明
简单来说，HTML就是由一个个标签组成的，所以学习HTML的重点，就是学习HTML标签的含义和用法
一、 HTML5新增的标签
（1）header nav main footer section article hgroup figure figcaption aside
video audio canvas
（2）如何让新标签兼容低版本浏览器： html5shiv.js
二、 HTML5新增的表单控件
一、表单控件的新属性
<input type="text" placeholder="" required autofocus pattern="abc" >
二、新增的表单控件
（1）<input type="email">
（2）<input type="url">
（3）数字控件： type="number"
(4) 滑动组件： type="range"
(5) 拾色器： type="color"
(6) 日期控件： type="date"
三、本地存储
1、 三种本地存储 ： cookie webStorage(localStorage sessionStorage)
2、localStorage的API
(1)写入： localStorage.setItem(键，值) //值只能是字符串
localStorage.user = "123" localStorage["user"] = "123"
（2）读取 var user = localStorage.getItem("user")
var user = localStorage.user
(3)删除： localStorage.removeItem("user") localStorage.clear()
（4）修改： localStorage.setItem("user","890")
3、sessionStorage的API
sessionStorage.setItem(键，值)
sessionStorage.getItem(键)
sessionStorage.removeItem(键)
sessionStorage.clear()
**********重点**********
4、cookie webStorage(localStorage sessionStorage)三者的区别
四、离线存储
（1） *.manifest (*.appcache)
index.html <html manifest="*.manifest">
(2) 理解离线存储的更新方式
五、移动端的布局思路：
1、设备像素比（倍率） 逻辑像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 <meta name="viewport" content="width=device-width,maximum-
scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no"">
3、使用rem单位
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
})
function success(pos){
纬度: pos.coords.latitute
经度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success)
七、地理定位和百度地图API的结合
八、视频，音频 <video autoplay="autoplay" controls="controls" loop="loop" poster=""
preload="preload"> <audio>
九、移动端事件：
(1) ontouchstart ontouchmove ontouchend
(2) 如何判断是否为移动端： if ("ontouchstart" in document){}
(3) 移动端事件的事件对象及常用属性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移动端常见问题及解决方案：
a、 click事件 300ms的延迟： <1>zepto的tap事件 （2） fastclick.js
b、 zepto的tap事件有点透问题 ： （1） fastclick.js
(5) zepto的touch模块： tap singleTap doubleTap longTap
swipeLeft swipeRight swipeUp swipeDown
十、swiper.js的使用 （参考官网）
十一、 canvas
(1) <canvas width="600" id="can"></canvas> 300*150
(2) var can = document.getElementById("can")
var cxt = can.getContext("2d")
cxt.beginPath()
cxt.moveTo(100,200)
cxt.lineTo(200,400)
cxt.strokeStyle = '#f00'
cxt.stroke()
cxt.clearRect(0,0,200,300)
context.globalCompositeOperation="destination-out" (了解)
html5只是新增了一些标签，同时去掉了一些不常用或不太科学的标签，此外还增加了本地存储等功能，你多了解一些新添加的东西就可以了，下面列出了一些知识点，你可以了解一下。HTML5标签语法介绍及新增标记
1、语法标签：
（1） 不允许写的结束符的标签：area、basebr、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
（2）可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th
（3）可以完全省略的标签：html、head、body、colgroup、tbody
2、新增标签：
<article> 标记定义一篇文章
<aside> 标记定义页面内容部分的侧边栏
<audio> 标记定义音频内容
<canvas> 标记定义图片
<command> 标记定义一个命令按钮
<datalist> 标记定义一个下拉列表
<details> 标记定义一个元素的详细内容
<dialog> 标记定义一个对话框(会话框)
<embed> 标记定义外部的可交互的内容或插件
<figure> 标记定义一组媒体内容以及它们的标题<footer>标记定义一个页面或一个区域的底部
<header> 标记定义一个页面或一个区域的头部
<hgroup> 标记定义文件中一个区块的相关信息
<keygen> 标记定义表单里一个生成的键值
<mark> 标记定义有标记的文本
<meter> 标记定义 measurementwithin apredefinedrange
<nav> 标记定义导航链接
<output> 标记定义一些输出类型
<progress> 标记定义任务的过程
<rp> 标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
<rt> 标记定义对rubyannotations的解释
<ruby> 标记定义 rubyannotations.
<section> 标记定义一个区域
<source> 标记定义媒体资源
<time> 标记定义一个日期/时间
<video> 标记定义一个视频
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）