学html的重点

html-css012

学html的重点,第1张

教程网址：

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"  (了解)