从0开始学习HTML5CSS3(一)

什么是h5c3

数字是版本号，指的是第几套标准。H5就是指HTML的第五套正式发布的标准，CSS3就是CSS标准的第三套

h5中新增的内容

1.新增的标签(布局标签)

• header:头部区域
  • nav：导航区域
• main：主体区域
  • section：小区域
    • aside：边栏
    • article：正文
• footer：页尾区域

新标签其实也是一个块级元素，不给样式是看不到的。所以可以理解为新标签也是一个div，它比div更有语义

新标签存在兼容问题,解决办法导入html5shiv.js就可以所有浏览器都支持,使用css hack按条件导入

2.h5的自定义属性写法

以前写自定义属性存在的问题：
1.一眼看过去，不太好区分什么是自带属性，什么是自定义属性
2.取值和赋值不方便，也无法一下子拿到所有自定义属性来遍历在H5里面又新增了关于自定义属性的一部分功能
在H5里建议，所有的自定义属性前面都要加一个data-
如果你加了data-，那么在JS里就可以通过元素.dataset来取到这些自定义属性
JS取值时是没必要加data-的它会自动去掉data-
注意：自定义属性后还可以加-，但是JS取值时不用加-，并把-后面的首字母大写,有几个-就去掉几个-，并把每个-后面的首字母大写

3.新增的表单元素

• email ：输入邮箱，当点击提交时会自动判断是否为邮箱格式，但是它不会判断是否为空，所以最好加一个required
• url : 输入网址的
• number ：输入数字的，只能输入数字
• range ： 滑块
• Date pickers (date, month, week, time, datetime, datetime-local) ：日期或时间
• search ：pc端跟text没区别，移动端弹出的键盘为搜索键盘
• color ：输入颜色的，会弹出颜色选择框
• tel： pc端跟text没区别，移动端弹出的是数字键盘

行内属性：required必填项,加上表示不能为空

4.classList

方便的获取所有的类， 以及操作类,classList是一个伪数组，里面有所有的类

• add： 添加类，要添加几个，就写几个参数
• remove:删除一个类
• toggle：切换一个类
• replace：替换一个类
• contains：判断是否包含某个类，返回的是true或者false

5 地理定位

6 localstorage

概念:本地存储，用来把数据存储在浏览器
应用场景: 需要长久保存一些数据时可以用localStorage，例：换网站皮肤、保存搜索历史记录

• 特点

长久保存，只要自己不删就一直存在
按网站域名保存数据，不同网站之间不能访问彼此数据
只能存基本类型，如果要存复杂类型，需要先转成JSON再存

• 方法
  1 保存数据 setItem
  2 获取数据getItem
  3 删除数据 removeItem
  4 清空数据clear

7 sessionStorage

也是把数据存储在浏览器，几乎跟localStorage都是一样的（包括用法），你可以把sessionStorage理解为是一个短命版的localStorage
关闭浏览器，数据就删除了。除了这个意外，其他都是跟localStorage是一样的
应用场景:在一些需要临时保存数据的地方就用sessionStorage,多个页面传值

    document.getElementById('btn1').onclick = function(){

        sessionStorage.setItem('name','jack');
        sessionStorage.setItem('age',16);
        sessionStorage.setItem('gender',true);
    }

    document.getElementById('btn2').onclick = function(){

        var res = sessionStorage.getItem('name');
        console.log(res);
        
    }

    document.getElementById('btn3').onclick = function(){

        sessionStorage.removeItem('name');
    }

    document.getElementById('btn4').onclick = function(){

        sessionStorage.clear();
    }

8 拖拽事件

网页里面的元素可以被拖拽
但是元素不是你想拖，想拖就能拖
强行拖：给元素加一个行内属性：draggable="true"
跟被拖拽元素有关的事件
ondragstart 拖拽开始事件
ondrag 拖拽中
ondragend 拖拽结束的事件

把元素拖拽到另一个容器