H5 之新增标签

106 阅读 0 评论 70 点赞

我是靠谱客的博主清爽世界，这篇文章主要介绍H5 之新增标签，现在分享给大家，希望可以做个参考。

前言

H5的雏形形成于2004年，在2008年发布正式版，并于2014年定稿。目前支持IE9+及绝大多数市场浏览器。同时，它是唯一一个支持PC、Mac、iPhone、Android等主流平台的跨平台语言。用H5开发的移动软件对比于原生APP应用得名“WebAPP”。各自优缺参半。对比一下

<!DOCTYPE>改变

<!DOCTYPE>必须是在HTML文档的第一行，它不是html标签，而是指示web浏览器对页面使用哪个HTML版本进行指令的编写

复制代码

1
2
3
// html4.01框架版doctype
<!DOCTYPE HTML  PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

复制代码

1
2
3
// html4.01 严格版doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">

复制代码

1
2
3
// HTML 5 版本不需要DTD
<!DOCTYPE html>

新增功能

新增离线存储，更丰富的表单，Js线程，socket，标准扩展embed，CSS3，流媒体多媒体引擎（Audio、Video、Canvas、webgl等）

新增标签

一. 结构标签

H5之前，有意义的结构标签就是div，H5扩展了以下标签。
在这里插入图片描述
【注意事项】

不要滥用结构标签
<header> <section> <aside> <article> <footer>这些标签不要嵌套自身
标签使用级别：<header> <section> <footer> 优于 <aside> <article> <figure> <hgroup> <anv> 优于 <div> <figcaption>

二. 多媒体标签

在这里插入图片描述

(1) 音频标签

复制代码

1
2
3
4
5
             //autoplay="autoplay"代表自动播放  下面有图片讲解
<audio src="./audio/demo.mp3" autoplay="autoplay" loop="-1" contrils="controls="controls">
  当前浏览器暂不支持，建议您更换浏览器
</audio>

在这里插入图片描述
【说明】

支持3中音频格式： ogg、MP3、WAV
浏览器不支持audio时显示标签内部文字
可以使用<source>标签解决浏览器格式兼容问题

复制代码

1
2
3
4
5
6
7
<audio autoplay="autoplay" loop="loop" controls="controls">
  <source src="./audio/demo.mp3" type="audio/mpeg">
  <source src="./audio/demo.ogg" type="audio/ogg">
  <source src="./audio/demo.wav" type="audio/wav">
  建议您更换浏览器
</audio>

（2）视频标签

复制代码

1
2
3
4
5
//下面有代码讲解图
<video src="./video/demo1.mp4" autoplay="autoplay" controls="control">
  当前浏览器不支持HTML5标签
</video>

在这里插入图片描述
【说明】

支持格式 MP4，WebM，Ogg
可以使用<source>标签解决浏览器格式兼容问题，用法同

3. 标签

用于在网页上插入flash动画

复制代码

1
2
<embed src="./falsh/demo1/swf" width="400" height="300"></embed>

三. web应用标签

1. 状态标

下面的progress是进度条的意思
在这里插入图片描述
（1）标签

复制代码

1
2
<meter value="70" min="0" max="100" low="60" high="80" optimum="75">

meter标签的max、min属性定义在最两边，low和high定义在中间。隔开三个区域(如下图所示)。最终表现为三种色彩。optimum所在的区域显示绿色，相邻区域显示换色，相隔区域显示红色。

讲解：如下图所示，当optimum<low时，那么min到low区域就是绿色，当low<optimum<high时，low到high之间的区域就是绿色，当optimum>high时，high到max之间的区域就是绿色

在这里插入图片描述
（2）<progress>标签
可以使用在图片文件上传下载时，表现出一种loading进度条的状态效果

如果没有设置max，则value值应该在0-1之间。如果没有value值，进度是不确定的，表示任务正在进行中，滚动条会来回滑动（chrome），可以用作loading效果

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 只写max属性，会有加载的效果
<progress value="0"  max="100">您的浏览器不支持progress元素</progress>
<input type="button" value="开始" onclick="goprogress()"/>

<script>
    function goprogress(){
        var pro=document.getElementsByTagName("progress")[0];
        gotoend(pro,0);
    }
    function gotoend(pro,value){
        var value=value+1;
        pro.value=value;
        if(value<100) { //setTimeout()是一个定时函数
            setTimeout(function(){gotoend(pro, value);},20)
        }else{
            setTimeout(function(){alert("任务完成")},20);
        }
    }
</script>
// 修改默认样式
<style>
progress {
  background:orange;
  border:1px solid red;
  border:2px solid #000;
  width:300px;
  height:50px;
  -webkit-appearance: none;
}
::-webkit-progress-bar{
    background:orange;
 }
</style>

2.列表标签

在这里插入图片描述
(1) 标签
原生的样式已经比较好看，可以替代select使用，且拥有select没有的效果

复制代码

1
2
3
4
5
6
7
8
<input placeholder="请选择学习的语言" list="langage"/>
<datalist id="langage">
    <option value="c++">c++</option>
    <option value="c#">c#</option>
    <option value="java">java</option>
    <option value="javascript">javascript</option>
</datalist>

（2）标签

复制代码

1
2
3
4
5
<details open="open">
    <summary>标题描述区域</summary>
    <p>细节描述区域，可以对内容进行介绍。作为标题的一个可开关内容</p>
</details>

四. 其他标签

1. 注释标签

<ruby> 定义注释或音标 ,<rt> 定义对ruby的注释内容文本,<rp> 不支持ruby元素的浏览器替换策略

效果如下图所示：

复制代码

1
2
3
4
5
6
7
<p>
    <ruby>魑<rt>chi</rt></ruby>
    <ruby>魅<rt>mei</rt></ruby>
    <ruby>魍<rt>wang</rt></ruby>
    <ruby>魉<rt>liang</rt></ruby>
</p>

在这里插入图片描述
2. 文本标记标签

复制代码

1
2
<p>你是猴子派来的<mark>救兵</mark>吗？</p>

在这里插入图片描述
3. 输出标签

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 

<form oninput="totalPrice.value = parseInt(price.value) * parseInt(number.value)">
    <input type="text" id="price" value="5000">*
    <input type="text" id="number" value="1"> = 
    <output name="totalPrice" for="price number"></output>
</form>

在这里插入图片描述

重新定义的标签

在这里插入图片描述

本文转载自：https://www.jianshu.com/p/36dddfad4606

最后

以上就是清爽世界最近收集整理的关于H5 之新增标签的全部内容，更多相关H5内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：106 次浏览
发布日期：2023-09-10 04:45:39
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_6_fx_12__23_cy.html

H5 之新增标签

前言

<!DOCTYPE>改变

新增功能

新增标签

一. 结构标签

二. 多媒体标签

(1) 音频标签

（2）视频标签

3. 标签

三. web应用标签

1. 状态标

2.列表标签

四. 其他标签

1. 注释标签

重新定义的标签

最后

评论列表共有 0 条评论

发表评论取消回复

H5 之 新增标签

前言

<!DOCTYPE>改变

新增功能

新增标签

一. 结构标签

二. 多媒体标签

(1) 音频标签

（2）视频标签

3. 标签

三. web应用标签

1. 状态标

2.列表标签

四. 其他标签

1. 注释标签

重新定义的标签

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

H5 之新增标签

发表评论取消回复