HTML5

柔情只为你懂 2023-03-01 05:47 10阅读 0赞

# HTML5入门（一） #

## HTML5中的新特性 ##

*  用于绘画的 canvas 元素
 *  用于媒介回放的 video 和 audio 元素
 *  新的特殊内容元素，比如 article、footer、header、nav、section
 *  •新的表单控件，比如 calendar、date、time、email、url、search

## DOM初步了解 ##

DOM：Document Object Model 文档 对象 模型  
**1：一个页面就是一个文档，就是一个对象**  
**2：页面中所有的标签都叫元素，都叫元素，也叫节点，对象**  
**3：形成一个树形结构图，简称DOM树**

## HTML5的基本语义元素 ##

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Header</td> 
   <td>定义了文档的头部区域</td> 
  </tr> 
  <tr> 
   <td>footer</td> 
   <td>定义 section 或 document 的页脚</td> 
  </tr> 
  <tr> 
   <td>nav</td> 
   <td>定义导航链接的部分</td> 
  </tr> 
  <tr> 
   <td>article</td> 
   <td>定义页面独立的内容区域</td> 
  </tr> 
  <tr> 
   <td>aside</td> 
   <td>定义页面的侧边栏内容</td> 
  </tr> 
  <tr> 
   <td>section</td> 
   <td>定义文档中的节（section、区段</td> 
  </tr> 
  <tr> 
   <td>hgroup</td> 
   <td>群组标题</td> 
  </tr> 
 </tbody> 
</table>

## HTML5的新增DOM操作的方法 ##

DOM中提供了一些方法（API）

需要注意标签和name属性相同的获取方式是不同的

## HTML5中新增的API ##

//H5中新增的
        var divObj=document.querySelector("#dv");//获取选择器
        console.log(divObj);
        var pObjs=document.querySelectorAll("p");//获取多个选择器的数组
        console.log(pObjs);
        console.log(divObj.classList);//获取div中所有的类样式
        divObj.classList.add("five");//新增一个类样式
        divObj.classList.remove("two");//移除一个类样式
        console.log(divObj.classList.contains("three"));//判断是否包含样式
        document.querySelector("#btn").onclick=function(){ 
            divObj.classList.toggle("five");
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]

## HTML5自定义属性的操作 ##

data开头  
data-属性名字

#### 获取自定义属性 ####

console.log(获取div.name)是获取不到  
对象.dataset.属性名

document.querySelector("#btn").onclick=function(){ 
            divObj.classList.toggle("five");
        }
        console.log(divObj.dataset);
        for(var key in divObj.dataset){ 
            console.log(key+"======"+divObj.dataset[key]);
        }
        console.log(divObj.dataset.age);

**设置自定义属性**  
*获取div.setAttribute(“属性名”，“属性值”)*  
还有更简便的方式  
对象.dataset\[“属性名字”\]=“值”  
对象.dataset.属性名字=“值”;

divObj.dataset.bb="sjdh";
        divObj.dataset.myFace="好帅";//驼峰式命名换-表示

![在这里插入图片描述][20200722161322426.png]

## HTML5中的可编辑属性 ##

页面中的div可以直接进行编辑

## HTML5提出的本地存储机制——sessionStorage和localStroage ##

**相同点**

1.  都是浏览器Document的对象
2.  都特定于页面的协议
3.  方法
4.  使用方法一样

<table> 
 <thead> 
  <tr> 
   <th>属性方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>对象.setItem(key,value);</td> 
   <td>保存数据到本地，将value保存到key</td> 
  </tr> 
  <tr> 
   <td>对象.getItem(key)</td> 
   <td>从本地获取数据，找到key对应的value值</td> 
  </tr> 
  <tr> 
   <td>对象.removeItem(key)</td> 
   <td>删除本地的一个对应的key的值对</td> 
  </tr> 
  <tr> 
   <td>对象.clear()</td> 
   <td>清楚所有保存的数据</td> 
  </tr> 
  <tr> 
   <td>对象.length()</td> 
   <td>返回key/value列表的长度</td> 
  </tr> 
 </tbody> 
</table>

**不同点**

1.  存储在 localStorage 的数据可以长期保留
2.  存储在sessionStorage的当页面被关闭或者结束时，数据会被清除
3.  localStorage 中的键值对总是以字符串的形式存储。(需要JSON进行转化)

<table> 
 <thead> 
  <tr> 
   <th>操作</th> 
   <th>属性方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JSON对象-&gt;JSON字符串</td> 
   <td>JSON.stringify(对象)</td> 
  </tr> 
  <tr> 
   <td>JSON字符串-&gt;JSON对象</td> 
   <td>JSON.parse(JSON字符串)</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230209/267b8213b2244425a0fbc3ab1b8af1ec.png
[20200722161322426.png]: /images/20230209/0897aecc525f4d968833b45fb3425ef7.png