十一、HTML5新增的元素、HTML5新增的其他标签、HTML5兼容、HTML5新增的多媒体标签、HTML5新增的表单元素、HTML5新增的表单属性

最新推荐文章于 2022-07-04 00:13:29 发布

小豆很优秀

最新推荐文章于 2022-07-04 00:13:29 发布

阅读量375

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/qq_52426181/article/details/110413530

版权

HTML5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、HTML5新增的元素

1、HTML5新增的结构标签

（1）header标签

网页的头部标签、页眉标签，可以放logo、搜索框等

<header></header>

（2）footer标签

网页的底部标签、页脚标签，可以放版权信息、相关阅读链接等

<footer></footer>

（3）nav标签

导航标签，可以放导航条、侧边导航、页内导航等

<nav></nav>

（4）article标签

文档中独立的内容，例如：一篇文章、一个论文、一段用户评价或者一个独立的插件等

<article></article>

（5）section标签

表示页面中内容的分区、文章中的章节，里面一般由标题和内容构成

<section></section>

（6）aside标签

侧边栏，一般是跟页面主体或者文章相关的附属信息，例如：主要内容相关的引用、侧边栏、广告、链接组等

<aside></aside>

（7）hgroup标签

标签组，给多个标题进行分组，一般会和h1-h6来配合一起使用

<hgroup></hgroup>

2、HTML5新增的其他标签

（1）figure标签

定义独立的流内容（图像、图表、照片或者代码等等）

figure标签自带间距的

一组figure中只能出现一对figcaption

<!-- 一个fugure中包含了一张图片 -->
<figure>
    <img src="./images/pikachen.jpg" alt="皮卡晨的照片">
    <figcaption>这是一张美女图</figcaption>
</figure>
<!-- 一个figure中包含了多张图片 -->
<figure class="img2">
    <img src="./images/xian.jpg" alt="">
    <img src="./images/xian2.jpg" alt="">
    <img src="./images/xian3.jpg" alt="">
    <figcaption>这是一组西安的美景图</figcaption>
</figure>

（2）mark标签

记号标签，默认放置在mark标签中的文字会自带一个黄色的背景

<mark></mark>

（3）time标签

时间标签，默认在页面中没有特殊的效果

<p>今天是<time>星期一</time></p>
<p>现在快<time>10:30</time>了,还有一小时就快吃饭了</p>
<!-- 如果要设置具体的时间点，可以使用datetime属性来进行设置   datetime="YYYY-MM-DD hh:mm:ss" -->
<p>今天是<time datetime="2020-11-30">星期一</time></p>
<p>现在快<time datetime="2020-11-30 10:30">10:30</time>了,还有一小时就快吃饭了</p>

二、HTML5兼容

兼容性： ie9+及标准浏览器最新版是支持的

如果在ie6，7，8下要去使用h5新增标签需要进行兼容处理

HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：

使用javascript新增元素的方法解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            display: block;
            width: 500px;
            height: 100px;
            background-color: cadetblue;
        }
        footer {
            display: block;
            height: 100px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="wrap1" class="wrap">
        <!-- <header>头部标签</header> -->
    </div>
    <!-- js新增元素的方式进行兼容处理 -->
    <!-- script标签用来放js代码 -->
    <script>
        // js创建元素
        var header = document.createElement('header');

        // 将创建好的元素追加到wrap盒子中去
        // 获取wrap这个元素    通过id获取元素   document.getElemntById('id名称')
        var wrap1 = document.getElementById('wrap1');
        // 给header标签中添加点文字内容
        header.innerHTML = '头部标签';
        // 将header添加到wrap1中
        wrap1.appendChild(header);


        // 创建一个footer标签添加到wrap中去
        var footer = document.createElement('footer');
        wrap1.appendChild(footer);

    </script>
</body>
</html>

使用谷歌提供的html5shiv.js解决兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/html5shiv.js"></script>
    <style>
        header {
            width: 500px;
            height: 100px;
            background-color: cadetblue;
        }
        footer {
            height: 100px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="wrap1" class="wrap">
        <header>头部标签</header>
        <nav>导航</nav>
        <footer>底部</footer>
    </div>
    
</body>
</html>

只在ie8及以下的ie版本中引入html5shiv.js插件

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

三、HTML5已经移除的标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UG2kFDGd-1606755627270)(c:/Users/Administrator/AppData/Local/cts/image/201130112138505.png)]

HTML5中以上标签已经被移除了，但是如果在现在的代码中见到以上标签不需要做特殊处理或者修改，因为H5是向前兼容的，以上标签不会报错或者显示异常，但是自己在写的时候不建议使用以上标签了，不符合W3C规范

四、HTML5新增的多媒体标签

1、音频标签

（1）语法

<audio src="" controls></audio>

（2）常见标签属性

属性	描述
src属性	规定要播放的音频/视频的 URL
controls属性	规定浏览器应该为音频/视频提供播放控件
loop属性	规定当音频/视频结束后将重新开始播放
muted属性	规定要播放的音频/视频为静音

<audio src="./media/hanmai.mp3" controls="controls" loop muted></audio>

（3）HTML5支持的音频格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWfogJc0-1606755627273)(c:/Users/Administrator/AppData/Local/cts/image/201130113515189.png)]

ie9+及标准浏览器最新版是支持音频标签的

（4）搭配source标签

<audio controls>
    <!-- source标签可以用来定义媒介资源（音频、视频） -->
    <source src="./media/hanmai.mp3" type="audio/mpeg">
    <source src="./media/biubiubiu.ogg" type="audio/ogg">
    <source src="./media/nada.wav" type="audio/wav">
    您的浏览器不支持audio标签，请升级一下~
</audio>

2、视频标签

（1）语法

<video src="" controls></video>

（2）常见标签属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FIJZh2t0-1606755627275)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130134252677.png)]

<video src="./media/movie.mp4" controls loop muted width="600" poster="./images/pikachen.jpg"></video>

（3）HTML5支持的视频格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDEovvBU-1606755627278)(c:/Users/Administrator/AppData/Local/cts/image/201130134843835.png)]

兼容性： ie9+及标准浏览器最新版下是支持的

（4）搭配source标签

<video controls>
    <source src="./media/PPAP.webm" type="video/webm">
    <source src="./media/movie.mp4" type="video/mp4">
    <source src="./media/butterfly.ogg" type="video/ogg">
    您的浏览器不支持播放此视频，可以升级一下~
</video>

3、source标签

定义媒介资源

<source src="" type="">

src属性定义音频或者视频的地址

type属性定义音频或者视频的MIME类型

五、HTML5新增的表单元素

回顾：html中的表单元素有：input标签（文本框text、密码框password、单选radio多选checkbox、提交按钮submit、重置按钮reset、普通按钮button、图片形式的提交按钮image、文件上传file、隐藏域hidden）、下拉列表、多行文本域（textarea）

1、input类型新增

（1）url

用于包含url地址的输入框，在表单提交的时候，会自动验证url地址

<input type="url">

（2）email

用于包含邮箱地址的输入框，在提交表单时，会自动验证email的值

<input type="email">

（3）search

用于搜索框

<input type="search">

（4）tel

用于包含电话号码的输入框

<input type="tel">

（5）number

用于包含数值的输入框

<input type="number">

（6）range

用于包含一定范围内数值的输入域，range显示为滑动条

<input type="range">

（7）color

用于选取颜色

<input type="color">

（8）datetime

用于手动输入一个日期时间

<input type="datetime">

（9）datetime-local

用于选择一个日期和时间

<input type="datetime-local">

（10）date

用于从一个日期选择器选择一个日期

<input type="date">

（11）week

用于选择周和年

<input type="week">

（12）month

用于选择月和年

<input type="month">

（13）time

用于选择一个时间

<input type="time">

2、选项列表

<datalist>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</datalist>

选项列表需要跟input一起配合使用

<div>
    <input type="text" list="city">
    <datalist id="city">
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
        <option value="北京">北京</option>
    </datalist>
</div>

六、HTML5新增的表单属性

1、max、min、step

max 属性规定输入域所允许的最大值
min 属性规定输入域所允许的最小值
step 属性为输入域规定合法的数字间隔

<input type="number" max="20" min="5" step="3">
<input type="range" max="20" min="5" step="5" value="5">

2、placeholder属性

描述输入域所期待的值

<div>
    <!--value是设置表单元素的初始值-->
    用户名:<input type="text" name="username" value="请输入用户名">
</div>
<div>
    <!--placeholder是设置表单元素的提示信息-->
    密码：  <input type="password" name="userpass" placeholder="请输入密码">
</div>

3、autofocus属性

自动获取焦点

<div>
    用户名:<input type="text" name="username" value="请输入用户名" autofocus>
</div>

input[type="text"] {
    color: aqua;

    /* 去掉描边 */
    /* outline: none; */
    /* outline: 0; */
    /* 修改描边颜色 */
    outline: 1px dotted red;
}

4、autocomplete属性

自动完成

on 打开
off 关闭

<div>
    用户名:<input type="text" name="username" value="请输入用户名" autocomplete="off">
</div>

5、form属性

规定输入域所属的表单

6、required 属性

规定必须在提交之前填写输入域

用户名:<input type="text" name="username" autofocus autocomplete="off" required>

7、pattern属性

规定用于验证 input 域的模式

<input type="text" pattern="[0-9]">

8、multiple属性

规定输入域中可选择多个值

<input type="file" multiple>

9、list属性

实现数据列表的下拉效果

小豆很优秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录