从0开始学习HTML5CSS3(一)

作者: xinhongwu | 来源:发表于2019-02-21 14:55 被阅读0次

什么是h5c3

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

h5中新增的内容

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

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

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

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

<!--[if lte IE 8]>
        <script src="html5shiv.js"></script>
    <![endif]-->

2.h5的自定义属性写法

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

<body>
    <!-- 对于div而言，name也是自定义属性,name在表单元素里才是自带属性 -->
    <!-- <div id="box" shengao="175cm" tizhong="70kg" name="andy"></div> -->
    <div id="box" data-shengao="175cm" data-tizhong="70kg" data-name="andy" data-nick-user-name="小安"></div>
    <input type="text" name="">
</body>
</html>

<script>

    var box = document.getElementById('box');

    //以前获取自定义属性
    // console.log(box.getAttribute('shengao'));
    //以前设置自定义属性
    // box.setAttribute('shengao','186cm');

    // 我要获取所有的自定义属性并遍历
    
    // console.log(box.dataset);

    console.log( box.dataset.nickUserName );
    // console.log(box.dataset.shengao);
    // console.log(box.dataset.tizhong);
    // console.log(box.dataset['name']);

    //赋值
    // box.dataset.shengao = "185cm";

    // for(var key in box.dataset){

    //     console.log(box.dataset[key]);
        
    // }    
  
</script>

3.新增的表单元素

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

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

<form action="">

     <!-- 既能显示日期又能显示时间的元素：格式：YYYY-MM-DDThh:mm -->
     <input type="datetime-local">
     <!-- 跟上面的区别在于：它只有日期，没有时间 -->
     <input type="date">
     <!-- 会出现一个弹出颜色选择的框 -->
     <input type="color">
     <!-- 专门用来输入邮箱的，外观跟文本框是一样的，区别在于：点击提交时会自动帮你验证内容格式是否为邮箱的格式 -->
     <!-- <input type="email" required> -->

     <!-- 专门用来输入网址的 -->
     <!-- <input type="url"> -->

     <!-- 滑块 -->
     <input type="range">

     <!-- 专门用来输入数字的 -->
     <input type="number">
    
     <!-- 搜索：在PC端跟普通文本框是一样的，区别只在移动端 -->
     <input type="search">
     
     <!-- 输入电话号码的，在PC端跟普通文本框是一样的，在移动端有效果：弹出键盘的时候弹出的数字键盘 -->
     <input type="tel">

     <input type="submit">

   </form>

4.classList

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
        classList：h5里面新增的一个api，可以获得一个元素的所有的类名，以及很方便的添加一个类，删除一个类等


        classList：是一个伪数组，可以获得所有的类，每个类就是数组中的一个元素，通过下标很方便的取出某个类
            方法：
                add： 添加一个类
                remove： 删除一个类
                toggle：切换一个类
                replace：替换一个类 参数1：被替换的类， 参数2：要替换的新的类
     -->

    <style>
        .box {
            width: 100px;
            height: 100px;
        }

        .red {
            background-color: #f00;
        }

        .border{
            border: 10px solid #000;
        }

        .blue{

            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box red"></div>

    <input type="button" value="获得所有类" id="btn1">
    <input type="button" value="添加边框" id="btn2">
    <input type="button" value="删除边框" id="btn3">

    <input type="button" value="切换边框" id="btn4">
    <input type="button" value="变成蓝色" id="btn5">


    <input type="button" value="添加多个类" id="btn6">
    <input type="button" value="判断是否有border这个类" id="btn7">




</body>

</html>

<script>
    // 找到div
    var box = document.querySelector('div');

    // 获得所有类的点击事件
    document.getElementById('btn1').onclick = function () {

        // console.log(box.className);
        console.log(box.classList[0]);
        console.log(box.classList[1]);
    }

    // 添加边框的点击事件
    document.getElementById('btn2').onclick = function () {

        // box.className = "box red border";

        // 以前加一个类，可以用+=，但是要记得加空格，不方便
        // box.className += " border";  // box.className = "box red" + " border"

        box.classList.add('border');
    }

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

        //不能这样删掉一个类，这样会得到NaN
        //box.className -= " border"; // box.className = box.className - " border";

        //因为它现在有多少个类，就要写多少个类，不能单独去删掉border
        // box.className = "box red";

        box.classList.remove('border');
    }

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

        //如果以前没有border这个类就加上，有这个类就移出掉
        box.classList.toggle('border');
    }


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

        //参数1：被替换的类
        //参数2：要替换的新的类
        box.classList.replace('red', 'blue');
    }


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

        // 下面这个是错的！这种链式编程的写法在jQuery里有，JS原生没有
        // box.classList.add('border').add('big');

        //下面这两句话可以
        // box.classList.add('border');
        // box.classList.add('big');

        // 下面这个也不可以，会报错！一个都加不上
        // box.classList.add('border big');

        // 下面这个也不可以！
        // box.classList.add('border,big');

        // 如果想一次性加好几个类，那么要加几个类就要有几个参数
        // 比如下面三个参数，就会加三个类
        box.classList.add('border', 'big', 'test');
    }

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

        console.log(box.classList.contains('border'));

    }
</script>

5 地理定位

<script>
//可以获取到当前的经纬度
    //会去服务器请求当前经纬度,如果获取到了,会自动调用你这个函数,并且把位置信息发送到这个形参里
    //谷歌服务器被墙了
    //电脑默认没有开定位，你要先把定位开了
    navigator.geolocation.getCurrentPosition(function(loc){

        console.log(loc);

        // 纬度
        console.log(loc.coords.latitude);
        // 经度
        console.log(loc.coords.longitude);
        
    });

</script>

6 localstorage

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

特点

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 

        localStorage:可以把数据存储在浏览器，可以做一些数据的缓存，只要自己不删，数据一直存在
            如果要长久缓存数据，用localStorage，只要自己不写代码给服务器，那么都不会自动把数据发给服务器

            每个网站都有自己的本地存储，不同网站之间不能互相访问（网站是按域名区分的）

        cookie也可以把数据存在浏览器
            cookie特点：
                    1.有失效时间
                    2.每次访问网站都会自动把cookie发送给服务器

        方法：
            setItem：保存一个数据，参数1：键，参数2：值
            getItem：获取一个数据，根据键来获取
            removeItem：删除一个数据，根据键来删除
            clear：清空本网站的所有本地存储

        localStorage特点：
                1.没有有效期
                2.不会自动发给服务器
                3.它也只能存基本类型，如果直接存复杂类型，会调用复杂类型的toString方法，再来存储
                4.如果要存复杂类型，可以先把复杂类型转成JSON字符串，再来存储
    -->
</head>

<body>

    <input type="button" value="保存基本类型" id="btn1">
    <input type="button" value="获取基本类型" id="btn2">
    <input type="button" value="删除一个本地存储" id="btn3">
    <input type="button" value="清空本地存储" id="btn4">

    <input type="button" value="保存数组" id="btn5">
    <input type="button" value="保存对象" id="btn6">

    <input type="button" value="获取数组" id="btn7">
    <input type="button" value="获取对象" id="btn8">



</body>

</html>

<script>


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

        //保存一段数据到localStorage里
        //参数1：键
        //参数2：真正要保存的值
        localStorage.setItem('name', 'jack');
        localStorage.setItem('age', 321);
        localStorage.setItem('gender', true);
    }

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

        //只有一个参数：键
        var res = localStorage.getItem('name');
        console.log(res);
    }

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

        //删除一个数据，根据键来删
        localStorage.removeItem('age');
    }

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

        //清除（删掉本网站里所有的本地存储）
        localStorage.clear();
    }

    //保存数组
    document.getElementById('btn5').onclick = function () {

        var arr = [10, 20, 30, 40];
        // localStorage.setItem('arr', arr);
        //转成字符串
        // console.log(arr.toString());

        var json = JSON.stringify(arr);
        localStorage.setItem('arr', json);
    }

    //保存对象
    document.getElementById('btn6').onclick = function () {

        var obj = { name:"jack", age:16};

        // localStorage.setItem('obj', obj);
        // console.log(obj.toString());

        var json = JSON.stringify(obj);
        localStorage.setItem('obj',json);
        
    }

    //获取数组
    document.getElementById('btn7').onclick = function(){

        var res = localStorage.getItem('arr');
        // console.log(res);

        console.log(JSON.parse(res));
        
        
    }

    //获取对象
    document.getElementById('btn8').onclick = function(){

        var res = localStorage.getItem('obj');
        // console.log(res);
        console.log(JSON.parse(res));
    }
</script>

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();
    }
</script>

8 拖拽事件

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

把元素拖拽到另一个容器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <!-- 

      之前学的事件是跟被拖拽元素有关的

      现在要学的事件跟容器元素（目标元素）有关的事件
          ondragenter：有元素拖进来
          ondragleave：有元素拖出去

          ondrop： 有元素在容器范围内松手触发
          ondragover：主要是为了让drop能够被触发，这个事件里只要做一件事：阻止事件默认行为


      在JS里所有的事件名都是小写，不遵从驼峰
  -->

  <style>
      .box{
          width: 100px;
          height: 100px;
          background-color: #f00;
      }

      .container{

          width: 350px;
          height: 500px;
          border: 1px solid #000;
          position: absolute;
          right:20px;
          top:20px;
      }
  </style>
</head>
<body>
  <div class="box" draggable="true"></div>
  <div class="container"></div>
</body>
</html>


<script>
  var box = document.querySelector('.box');
  var container = document.querySelector('.container');

  //给被拖拽元素加拖拽结束事件
  // box.ondragend = function(){
  //     //加到容器里
  //     container.appendChild(box);
  // }

  //有元素进入时触发
  container.ondragenter = function(){

      console.log('进来了');
      // container.appendChild(box);   
  }

  //有元素离开时触发
  container.ondragleave = function(){

      console.log('出去了');
      
  }


  // 当有元素在容器内松手时触发的事件
  // 如果你想ondrop事件能够被触发，还需要再写一个事件叫ondragover事件，并且在over事件里阻止事件的默认行为
  container.ondrop = function(){

      // console.log('drop');
      container.appendChild(box);
  }


  //下面这个事件主要是为了让drop能够被触发
  container.ondragover = function(e){

      //这个事件在检测是否有元素在我的范围内
      //只要有元素拖拽到我的范围内不断触发
      //这个事件默认有个行为：当检测到右元素在我范围内时，不断的阻止它放进来

      //默认情况下，任何元素都不允许有东西放置进来
      console.log('over');
      
      e = e || window.event;
      e.preventDefault();
  }
</script>

从0开始学习HTML5CSS3(一)

什么是h5c3

h5中新增的内容

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

2.h5的自定义属性写法

3.新增的表单元素

4.classList

5 地理定位

6 localstorage

7 sessionStorage

8 拖拽事件

把元素拖拽到另一个容器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读