站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

html5新增了哪些元素标签

时间:2021-12-27 [网络编程]作者:fabuyuan 浏览:8 次

html5新增的元素标签有:“<article>”、“<aside>”、“<audio>”、“<bdi>”、“<canvas>”、“<dialog>”、“<mark>”、“<meter>”、“<nav>”、“<time>”、“<rt>”等。

html5新增了哪些元素标签  2

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

html5新增的元素标签

标签描述
<article>定义一个文章区域
<aside>定义页面的侧边栏内容
<audio>定义音频内容
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<canvas>定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形
<command>定义命令按钮,比如单选按钮、复选框或按钮
<datalist>定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<embed>定义嵌入的内容,比如插件。
<figcaption>定义<figure> 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域
<keygen>规定用于表单的密钥对生成器字段。
<mark>定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分
<output>定义不同类型的输出,比如脚本的输出。
<progress>定义运行中的进度(进程)。
<rp><rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
<rt><rt> 标签定义字符(中文注音或字符)的解释或发音。
<ruby><ruby> 标签定义 ruby 注释(中文注音或字符)。
<section><section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<source><source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
<summary><summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。
<time>定义日期或时间,或者两者。
<template>定义日期或时间,或者两者。
<track><track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<video><video> 标签定义视频,比如电影片段或其他视频流。
<wbr>规定在文本中的何处适合添加换行符。

(1)定义导航链接<nav></nav>

它也是有意义的标签,并不是在某处加上这个标签就有了导航的样式了,这都是有意义的p而已,在头部header中加入菜单标签<nav>,nav标签可以和<ul><li>标签合用

html代码:

<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

css代码:

/*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}

这样就可以实现之前只用p进行的菜单布局了

html5新增了哪些元素标签  2

(2)定义文章标签<article></article>

可以使用文章块标签进行写文章,这就使用这个标签进行写文章在section部分,可以和<h1><p>合用

html代码:

<article><!--文章块p-->
  <h2>文章标题</h2><!--标题-->
  <p>文章内容文章内容文章内容文章内容文章内容文章内容
  <br>
  文章内容文章内容文章内容文章内容文章内容文章内容<br>
  文章内容文章内容文章内容</p>
</article> 

css样式:

article{
	background-color:#F33;
	width:500px;
	text-align:center;  /*水平居中*/  
	margin:0px auto;
}

这样就可以写一篇文章了

html5新增了哪些元素标签  2

(3)定义媒介内容的分组,以及它们的标题<figure>

A。这个标签可以和它的配套标签联合使用<figcaption>,不过<figcaption></figcaption>中间写标题

<figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>

html5新增了哪些元素标签  2

B。还可以和<dt><dd>联合使用,其中<dt></dt>是写标题,而<dd>写内容,显示的效果和配套使用的效果也有差异

<figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>

(4)定义对话框或窗口<dialog>

在这个标签中也是可以使用dd和dt标签,对话框中的标题和内容,对话框有个属性是open,这个标签的兼容性不是很好

<dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>

 html5新增了哪些元素标签  2

(5)定义命令的列表或菜单<menu>

A。这个标签可以和li合用

<menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>

html5新增了哪些元素标签  2

B。可以给右键单击中添加自己的内容(只有火狐浏览器可以兼容)

联合(定义用户可以从弹出菜单调用的命令/菜单项目)<menuitem>标签使用

<menu type="context" id="cai">
            <!--label是右键后显示的菜单项,onclick是选中菜单后执行的代码--> 
            <menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
                   
</menu>
<span contextmenu="cai">单击我试试</span>

右键单击后出现想要的菜单项

html5新增了哪些元素标签  2

单击菜单项,弹出内容

html5新增了哪些元素标签  2

(6)标题组<hgroup>

里面可以写一些标题的结合<h3>合用

<hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>

html5新增了哪些元素标签  2

(7)定义小号文本<small>

这个标签和其他的加粗什么的标签其实是差不多的

<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>

html5新增了哪些元素标签  2

(8)定义元素的细节<details>

里面的内容可以配合标题和内容标签来使用

<details>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
        <dt>问题</dt>
        <dd>解答</dd>
</details>  

点击详细信息就可以看到标题和内容了

html5新增了哪些元素标签  2

(9)定义 ruby 注释<ruby>

碰到不认识的字了可以使用这个进行注释拼音,但是有的兼容性不是很好,到时候可以进行修改

<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见,不能兼容的时候让括号可见,rt是进行这是的内容-->

(10)定义预定义范围内的度量<meter>

有几个属性值,min="" max="" value="" low="" high="",其中low和high是范围,当value范围超了话就会显示不同的效果

<meter min="0" max="10" value="4" low="2" high="7">

html5新增了哪些元素标签  2

value值超出了范围后

<meter min="0" max="10" value="8" low="2" high="7">

html5新增了哪些元素标签  2

(11)进度条的标签<progress>

<progress id="jindu" max="100" value="0"></progress>进度条

最大值就是进度条的长度就行,value值就是显示的进度,用它可以进行动态的进度条

<progress id="jindu" max="100" value="0"></progress>进度条
<script>
    var pro = document.getElementById("jindu");
    setInterval(function(){ pro.value+=1;},1000);    //间隔1秒它的值加1
</script>

这样进度条就可以完成了,是不是比只用js写的好多了,不同的浏览器表现形式还不一样

html5新增了哪些元素标签  2

相关推荐:《html视频教程

以上就是html5新增了哪些元素标签的详细内容,更多请关注站长家园其它相关文章!

本文标签:  html5新增元素标签

转载请注明来源:html5新增了哪些元素标签

本文永久链接地址:https://www.adminjie.com/post/6847.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    • php5.6.31如何编译安装

      php5.6.31如何编译安装

      php5.6.31编译安装的方法:1、添加epel源;2、安装依赖;3、下载并解压php5.6.31;4、修改php-fpm.conf;5、启动php-fpm即...

    • oracle怎样进行空值替换

      oracle怎样进行空值替换

      在oracle中,可利用nvl()函数进行空值替换,该函数用于从两个表达式中返回一个非null值,语法为“nvl(字段值,替换值)”;当字段值的结果为null值...

    • oracle数据库有什么用

      oracle数据库有什么用

      oracle数据库的作用:1、oracle可以按照数据结构来组织、存储和管理数据;2、oracle能够适用于大型、中型和微型计算机的关系数据库管理。本教程操作环...

    热门文章