Html5新增标签有哪些

互联网   04-13 15:07:40   作者:佚名   我要评论

这篇文章给大家整理了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的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。

<%@ 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>

以上所述是小编给大家介绍的Html5新增标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • HTML中img标签只显示图片中心位置的方法(三种方法)

    html中 img标签显示图片中心的方法目前知道三种,下面小编把他分享到脚本之家平台,需要的朋友参考下
    2017-04-13
  • Html Mate 标签 使用详解 中文WORD版

    本文档主要讲述的是Html Mate 标签使用详解;meta是html语言head区的一个辅助性标签。meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参
    2017-03-19
  • HTML5各种头部meta标签的功能(推荐)

    本文给大家介绍了html5中各种头部meta标签功能小结,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-03-13
  • 处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器。下面给大家介绍处理HTML5新标签的浏览器兼容版问题,
    2017-03-13
  • HTML中的base标签 中文WORD版

    本文档主要讲述的是HTML中的base标签;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看
    2017-02-17
  • 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时,行内元素之间的空白有时候显示在屏幕上那是相当的讨厌
    2013-08-28
  • html内联元素和块级元素的基本概念及使用示例

    html标签分为两种,内联元素和块级元素,块级元素:一般是其它元素的容器;内联元素:只能容纳文本或者其他内联元素;首先我们先了解一下内联元素和块级元素的概念
    2013-11-18
  • HTML5在a标签内放置块级元素示例代码

    你没看错:用一个A标签包裹块级元素,在HTML5以前,a标签属于行内元素,而div,h1,p 等为块级元素,如果强行包裹,可能会被强行截断为多个a标签,感兴趣的朋友可以了解些
    2013-08-23
  • html 内联元素和html 块级元素概述及区别

    块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感
    2013-03-25
  • HTML5的结构和语义(3):语义性的块级元素

      HTML5还增加了一些纯语义性的块级元素:   aside  figure  dialog   我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本。 aside
    2008-10-17

最新评论