HTML5语义化标签总结

Posted 2020-09-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5语义化标签总结相关的知识，希望对你有一定的参考价值。

1.语义化标签总结

基础布局标签

 <header></header>
     <nav></nav>
 <main></main>
     <aside></aside>
     <article></article>
 <footer></footer>

注意：IE8以后不兼容H5标签，如果需要兼容IE8一下的浏览器，则需要如下操作：

如果在sublime,或者WebStrom使用可是使用快捷点: cc:ie6+tab

生成内容：

或者

<!--[if lte IE 6]>        
    <script type="text/javascript">
        alert("我执行了");
        window.onload = function(){
            var createHeader = document.createElement("header");
            document.body.appendChild(createHeader);
        }
    </script>
<![endif]-->

H5解决方案：可以引入上面的html5shiv.min.js，百度搜索进行下载即可。

2.H5表单

input标签新增属性

<form action="#">
        <fieldset>
            <legend>新输入类型</legend>
            <label>type=color
                <input type="color">
            </label>
            <label>type=date
                <input type="date">
            </label>
            <label>type=datetime
                <input type="datetime">
            </label>
            <label>type=datetime-local
                <input type="datetime-local">
            </label>
            <label>type=date
                <input type="date">
            </label>
            <label>type=email
                <input type="email">
            </label>
            <label>type=month
                <input type="month">
            </label>
            <label>type=week
                <input type="week">
            </label>
            <label>type=day
                <input type="week">
            </label>
            <label>type=number
                <input type="number">
            </label>
            <label>type=range
                <input type="range">
            </label>
            <label>type=search
                <input type="search">
            </label>
            <label>type=url
                <input type="url">
            </label>
        </fieldset>
    </form>

注意:有些效果显示在浏览器显示不明显（没有变化），在移动端会有变化。（移动端的支持比桌面端要好）

新表单元素

<datalist></datalist>//定义下拉列表
<keygen></keygen>  //（生成秘钥）
<output></output> //定义输出的一些类型。

使用方法：

<input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>

剩余的两个理解就好。

3.新表单属性

操作对象:

<input type="text" name="">

在表单可添加属性，如下：

placeholder：占位符提示
autofocus：获取焦点
autocomplete: 规定是否使用输入字段的自动完成功能。
multiple：支持多文件选择
form：此属性不推荐使用

演示代码:

<form action="#" id=‘form‘>
<fieldset>
<legend>新表单属性</legend>
<!--  input标签 默认的 提醒信息  -->
<input type="text" name="" placeholder="请输入用户名">
<input type="email" name="" placeholder="请输入电子邮箱" autofocus>
<input type="file" multiple>
<!-- 必须 为 该标签 添加name属性  还需要改表单 曾经提交过-->
<input type="tel" name="telPhone" autocomplete placeholder="请输入电话号码">
<input type="submit" >
</fieldset>
</form>

<input type="text" name="userHabbit" placeholder="请输入你的爱好" form=‘form‘>

表单验证:
添加属性：

required:必须填写，不能为空

pattern：可是使用正则来验证

<form action="#">
        <fieldset>
            <legend>表单验证</legend>
            <!-- email这个标签 自带了 表单的格式验证 不能验证 空的值 -->
            <input type="email" name="userEmail" required>
            <!-- 对 字符串 格式的验证 使用的是 正则 
                pattern 中可以写正则 进行验证
            -->
            <input type="tel" placeholder="请输入电话号码"  name=‘userTel‘ required pattern="\d{3}"
                   oninvalid="    this.setCustomValidity(‘亲爱的用户你输入的格式不正确,请重新输入‘)">
            <input type="submit">
        </fieldset>
    </form>

4.音频（audio ）

音频属性： controls autoplay loop

controls:控制器
autoplay：是否自动播放
loop:是否循环播放
muted：是否静音

演示源码：

<audio  controls autoplay loop>
    <source src="music/music.ogg" >
    <source src="music/郝云 - 活着.mp3" >
    亲爱的用户,你的浏览器版本太低,无法享受这个页面的所有功能,建议进行更新 ^_^ <a href="#">戳我下载</a>
</audio>

5.视频(video):

视屏播放器：

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels 设置视频播放器的高度。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

muted muted 规定视频的音频输出应该被静音。

poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src url 要播放的视频的 URL。

width pixels 设置视频播放器的宽度。

演示代码：

<!--<video src="movie/[报告老板][第二季]第11集_bd.mp4" controls  loop height="100px" width="300px"
    poster="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"></video>-->
<!--浏览器会从上往下 找到可以播放的 进行播放-->
<video  controls>
    <source src="movie/movie04.ogg">
    <source src="movie/[报告老板][第二季]第11集_bd.mp4">
    亲爱的用户,你的浏览器版本太久了,建议升级 <a href="#"> 点我下载 最新的浏览器(⊙o⊙)</a>
</video>

6.获取元素新方法

document.querySelector(‘li‘)

document.querySelectorAll(‘‘)

注意：这个选着器的使用方式和jQuery选着器使用方式是一样的。

7.类名操作（classList）

这是一个对象，对象有如下方法：

add() (添加一个类名)

remove() （删除一个类）

contains() （是否包含类）

toggle() （切换类）

示例代码：

// 获取要操纵的div 方便后续的操作
var div = document.querySelector(‘.showBox‘);
// querySelector
// 新增class
document.querySelector(‘input[value=add]‘).onclick = function(){
// alert(‘ADD‘);
div.classList.add(‘orange‘);
}

    // 移除class
    document.querySelector(‘input[value=remove]‘).onclick = function () {
        div.classList.remove(‘orange‘);
    }
    // 判断是否存在class
    document.querySelector(‘input[value=contains]‘).onclick = function () {
        alert(div.classList.contains(‘orange‘));
    }
    // 切换class
    document.querySelector(‘input[value=toggle]‘).onclick = function () {
        div.classList.toggle(‘skyBlue‘);
    }

8.自定义属性（dataset）

代码演示：

<body>
<!-- html5为了规范自定义属性的写法,新增了一个 data-的属性 -->
    <div data-age=‘18‘ data-skill=‘eatFood‘ data-habbit = ‘tableTannis‘
         data-food-vegetable=‘西兰花‘ data-foodMeat=‘牛肉‘></div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        // 所有 通过 data-的方式 添加的属性 都会保存在dom元素的 dataset属性中 他是一个对象
        // 设置属性时 能够使用大写字母 但是会自动帮我们转化为 小写的字母
        // 作用是 为了规范 自定义属性的写法
        console.log(document.querySelector(‘div‘).dataset);
        console.log(document.querySelector(‘div‘).dataset.age);
        console.log(document.querySelector(‘div‘).dataset.foodVegetable);
        console.log(document.querySelector(‘div‘).dataset.foodmeat);
    }
</script>

HTML5

以上是关于HTML5语义化标签总结的主要内容，如果未能解决你的问题，请参考以下文章

好程序员web前端分享常见html5语义化标签