H5C3-上

前言

什么是H5C3

H5指的就是HTML5 HTML5是第五个正式发布的版本 5是版本号 HTML5相比于之前有较大的变动classlist.remove input email time phone类型
HTML5 是 HTML 标记语言的一个最新版本，它制定了 web 应用开发的一系列标准，成为第一个将 web 作为应用开发平台的 HTML 语言。它设计目的是为了在移动设备上支持多媒体。。是专门为承载丰富的 web 内容而设计的，并且无需额外插件。它新增了一些元素，如新元素，新语义标签，智能表单，多媒体标签，图形以及多媒体元素。它提供的新元素和新的 API ：地理位置，重力感应，硬件访问，结合 CSS3 做动画。它是跨平台的，被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。它默认的字符编码是 UTF-8。

C3 CSS3就是css的第三个版本主要是新增一些选择器 样式 动画

H5新增的布局标签

        头部 header
            导航区域  nav
        主体部分    main
            小模块 section
                边栏框  aside
                正文框  article
        尾部区域    footer

优势： 比div语义更明确
元素性质和div差不多 都属于块级元素

h5里面新增的input的标签

<!-- 颜色的输入框 -->
<input type="color" name="" id="">

<!-- 输入email  必须是email格式的数据  如果把整输入设置为必填  那么可以设置 required 
    这个email格式的输入框  表面看起来和text是一样的 但是在提交的时候 会自动验证 是不是email
    设置了required属性 就是必填项 提交的时候 如果为空就会自动验证
-->
<input type='email' required>

<!-- 网址 -->
<input type="url"  id="required">

<!-- 电话号码 pc端看起来和text一样 但是在移动端  type设置为tel时 会弹出九宫格数字键 -->
<input type="tel">

<!-- pc端看起来比text多一个x 但是在移动端  type设置为tel时 会弹出九宫格数字键输入内容后 键盘右下角的换行会变成一个放大镜-->
<input type="search">

<!-- 用于输入日期 -->
<input type="date">

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

<!-- onfocus 成为焦点-->
<input type="submit" value="提交">

本地存储

介绍: localStorage 本地存储 就是把数据存储在浏览器端

 本地存储的方法 
    
        保存数据 localStorage . setItem(属性名字符串，属性值)

        获取数据  localStorage . getItem(属性名字符串)

        删除数据localStorage . removeItem(属性名字符串)

        清空数据localStorage . clear(属性名字符串)



        localStorage存储特点：
            1.如果我们把数据存储在localStorage里面  除非我们手动删除    否则他就一直存在
            2.数据存储是按照不同网址的域名来存储分类的，不同域名之间的数据不能共享  同一网站可以共享
            3.本地存储数据  只能存储字符串，对于复杂数据类型的存储 会调用相应数据的 toString 方法  变成字符串后 再进行存储
                解决办法：对于复杂数据类型  我们先使用JSON.stringify方法转换成字符串 获取的时候  使用JSON.parse将其转换回来 进行还原

案例 百度搜索历史记录

实现结果

上面的可能不太清除 来张局部的

主要代码

 3.点击按钮 把当前搜索的记录添加到搜索历史
 sub.onclick = function () {
     //如果没有输入 就不执行
     if (s_ipt.value) {
         //把输入框的内容 加到localStorage里面
         localStorage.setItem(count, s_ipt.value);
         var li = document.createElement('li');
         li.innerText = localStorage.getItem(count);
         notes.appendChild(li);
         for (i = 0; i < count; i++) {
             // 遍历 查找 如果有 则删除
             if (localStorage.getItem(i) == s_ipt.value) {
                 notes.removeChild(notes.lastElementChild);
                 localStorage.removeItem(count)
             } else {

             }
         }
 }

临时存储

特点： 临时存储 当前页面一贯 数据就自动删除

sessionStorage  临时存储
        用法跟localStorage完全一样  区别：生命周期不一样(比localStorage短一点)
        
        保存数据 sessionStorage . setItem(属性名字符串，属性值)

        获取数据  sessionStorage . getItem(属性名字符串)

        删除数据  sessionStorage . removeItem(属性名字符串)

        清空数据  sessionStorage . clear(属性名字符串)

操作类

classList就是用来操作类的 获取到的 classList 属性其实就是一个伪数组 可以通过下标获取

add 添加一个类
remove  删除一个类
toggle  切换类
contains  判断是否包含有这个类
replace 替换类

add可以添加多个类 传多个参数 每个参数之间用 , 隔开

案例

//添加类
document.getElementById('btn1').onclick = function(){
   // box.className +=' red border';
   box.classList.add("border");
   box.classList.add("green");
}

//删除类
document.getElementById('btn2').onclick = function(){
   //要把删除的类名一味的加进去 很麻烦
   // box.className ='box red';
   box.classList.remove("green");
   box.classList.remove("border");
}

//判断是否存在一个类 有就删除 没有就加上
document.getElementById('btn3').onclick = function(){
   //切换类
   // if(box.className.indexOf("red") != -1){
   //     box.className ='box bgc border';
   // }else{
   //     box.className +='red';
   // }

   //判断元素有没有这个类 有就去掉 没有就加上
   box.classList.toggle("border")
}

//替换类
document.getElementById('btn5').onclick = function(){
   box.classList.replace('green','red')
}

//一次添加多个类
document.getElementById('btn6').onclick = function(){
   box.classList.add('red','yellow','aaa');
}

伪类选择器

:link 当时没有访问过的链接
:visited 点击过后的
:hover 悬停
:active 当我们鼠标点击时

这四种味蕾选择器都是以 ： 开头的  而且都是用于 a 标签的
hover 时适用于所有的元素

伪类选择器可以单独使用 但是一般不会这样

nth-child

伪类选择器可以单独使用
nth 不只是单纯的找到第一个子元素 而且还必须满足在父元素中也是第几个子元素

/* 找第一个元素为li ，并且是第一个子元素 */
li:first-child {
    color: red;
}

/* 找第一个元素为li ，并且是最后一个子元素 */
li:last-child {
    color: green;
}

/* 找第几个子元素 写的数字就是几 就代表第一个子元素 */
li:nth-child(3) {
    color: gold;
}

/* 找到所有的的li元素 */
li:nth-child(n) {
    font-size: 36px;
}

/* 表示从第八个开始设置样式 */
li:nth-child(n + 8) {
    background-color: gold;
}

/* 找到所有4的倍数的li元素 */
li:nth-child(4n) {
    background-color: gold;
}

/* 找到所有偶数行的li元素 */
li:nth-child(even) {
    background-color: pink;
}

/* 找到所有偶数行的li元素 */
li:nth-child(odd) {
    background-color: hotpink;
}
li:hover{
    background-color: skyblue;
}

伪元素选择器

为元素选择器 使用两个冒号开头
伪元素默认是行内元素 而且要使用伪元素 必须要有 content 属性

.box::before{
   /* 使用伪元素选择器  必须要有 content属性 */
   content: "我是个伪元素";
   display: block;
   /* 宽高加不上 说明是个行内元素 */
   width: 50px;
   height: 50px;
   background-color: aqua;
}

.box::after{
   content: "我是后面的";
}

.clearFix::after{
   content: " ";
   display: block;
   visibility: hidden;
   clear: both;
   height: 0;
}
/* 找到所有的占位符 */
/* placeholder 选择到的本质是文本 所以只有针对文本的样式 对于元素的样式是不适用的 */
#userName::placeholder{
  color: red;
  font-size: 24px;
  background-color: green;
}

/* 找到首字母   是使用 span把第一个字母包起来 */
p::first-letter{
  font-size: 36px;
}

/* 找到第一行 无论屏幕大小怎么变 都是选中第一行 */
P::first-line{
  background-color: gold;
}

/* 设置行的样式 */
p::selection{
  background-color: yellow;
  color: pink;
}

案例

隔行变色