html5新增加的标签有哪些


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来html5新增加的标签有哪些,使用html5新增加标签的注意事项有哪些,下面就是实战案例,一起来看一下。

今天新学习了9个标签、

<audio> 简单的说就是一个音频标签,他的主要常用属性有src=""音频的路径 controls="controls" 控制参数,他就是可以让其在页面显示一个播放器的效果autoplay="autoplay"自动播放属性 loop="loop"循环次数

<video>同audio标签一样。是一个视频标签。主要常用的属性同上面一样

<datalist>定义选项列表。这个其实是一个比较大的改进,不过也有不足,这个标签其实组合了《input标签中的text》和select标签、生产的一个可以输入和下拉选项的输入组合框》。不足之处在于如果不通过JS控制,只有当输入框中为空,定义的下拉选项中才会生效

<details>定义文档细节。这个标签其实用的地方也比较多,常和summary标签用。summary标签里面写文档的标题。p标签写文档的细节

<mark>一个高亮的显示标签,再也不用标记某一段文字要用font属性了。

<menu>快速创建一个list列表。用法是menu li结合

<address>存放地址的标签

<progress>这个是一个进度条标签。他的主要属性有value和max。value表示当前进度条位置,max表示进度条的总共长度。

<time>标签放时间的标签。

初步接触html5的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。

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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Html5学习之路</title>

</head>

<body>

<header style="text-align: center; color: blue;">欢迎来到Html5的学习之路,我是header标签。</header>

这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来

<input type="text" list="phone">

<datalist id="phone">

    <option></option>

    <option>IPhone</option>

    <option>华为    </option>

    <option>小米    </option>

    <option>三星</option>

</datalist>

<br/>

<br/>

<font color="red">这里我发现了两者一个不同之处在于,datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>

<br/>

而这个select选项框是不管什么内容它都会存在的

<select>

    <option>IPhone</option>

    <option>华为    </option>

    <option>小米    </option>

    <option>三星</option>

</select>

<br>

<br>

<br>

------------------------

<br><br><br>

这是一个定义文档细节的标签。detail标签。它的主要作用很简单。

<details>

    <summary>这是一个detail标签,下面就是他的使用方法</summary>

        <p>detail标签是什么?</p>

        <p>detail标签有什么作用?</p>

        <p>detail标签能干什么?</p>

        <p>detail标签我改怎么用它?</p>

</details>

<br>

detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签<mark>mark</mark>比重不一样。

<br><br>

接下来这个标签是定义列表标签。menu。

<menu>

    <li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>

</menu>

<br><br>

进度条标签我们用的比较多。比如这个。<mark>progress</mark>

<progress value="5" max="10">value=5 max=10</progress>

<br>

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

<footer>我是底部footer标签</footer>

</body>

</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样使用phonegap查找联系人

phonegap播放音频详解

以上就是html5新增加的标签有哪些的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

使用HTML5给按钮背景设计不同的动画的简单示例(图文)

HTML5移动框架有哪些

h5如何做出碎片式的图片切换

HTML5与flash比较的详细介绍

HTML5 progress进度条详解

使用HTML5实现树叶飘落的效果

HTML5中在可拖动的元素或选取的文本移出放置目标时执触发的事件ondragleave

HTML5绘制折线图的实例代码

有关HTML5服务器推送事件的讲解

h5的28个新特性的详细介绍

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...