1.H5中新增的语义标签

        <section> 表示区块
        <article> 表示文章。如文章、评论、帖子、博客
        <header> 表示页眉
        <footer> 表示页脚
        <nav> 表示导航
        <aside> 表示侧边栏。如文章的侧栏
        <figure> 表示媒介内容分组。
        <mark> 表示标记 (用得少)
        <progress> 表示进度 (用得少)
        <time> 表示日期
本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于<nav>。

 2.H5中新增的表单类型

        email 只能输入email格式。自动带有验证功能。
        tel 手机号码。
        url 只能输入url格式。
        number 只能输入数字。
        search 搜索框
        range 滑动条
        color 拾色器
        time 时间
        date 日期
        datetime 时间日期
        month 月份
        week 星期
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

3.原生js如何获取class 常用3个方式

优势与应用场景

灵活性：querySelector 和 querySelectorAll 支持复杂的CSS选择器，使得选择元素更加灵活。

兼容性：getElementsByClassName 在旧版浏览器中也有很好的支持，适合需要兼容多种浏览器的项目。

实时性：getElementsByClassName 返回的是一个实时集合，当文档变化时，集合会自动更新，这在某些动态交互场景中非常有用。

3.1 getElementsByClassName

这个方法返回一个实时的HTMLCollection，包含所有具有指定类名的元素。

// 获取所有具有 'myClass' 类的元素
var elements = document.getElementsByClassName('myClass');
// 遍历这些元素
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

3.2 querySelector

这个方法返回文档中匹配指定CSS选择器的第一个元素。

// 获取第一个具有 'myClass' 类的元素（唯一时使用）
var element = document.querySelector('.myClass');
console.log(element);

3.3 querySelectorAll

这个方法返回文档中匹配指定CSS选择器的所有元素，返回的是一个静态的NodeList。

// 获取所有具有 'myClass' 类的元素
var elements = document.querySelectorAll('.myClass');
// 遍历这些元素
elements.forEach(function(element) {
    console.log(element);
});

4.获取元素后添加点击事件

获取元素后，使用addEventListener方法绑定点击事件，或使用onclick属性直接赋值一个函数。

/* addEventListener */
var elements = document.querySelectorAll('.box');
// 遍历所有元素并绑定点击事件
elements.forEach(function(element) {
    element.addEventListener('click', function() {
        alert('Element clicked: ' + this.innerHTML);
    });
});

/* onclick */
var elements = document.getElementsByClassName('box');
// 遍历所有元素并设置onclick属性
for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        alert('Element clicked: ' + this.innerHTML);
    };
}