博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5标签变化
阅读量:5163 次
发布时间:2019-06-13

本文共 2161 字,大约阅读时间需要 7 分钟。

一、HTML5新增的标签

1.结构标签

2.多媒体标签

<video>视频

<audio>音频

<source>资源,单个使用

<canvas>标记定义图片

<embed>引用flash等资源

2.1<video>视频

 

2.2<audio>音频

 

2.3<embed>标记定义外部可交互的内容或插件,如flash

<embed src="../Source/HappyDay.swf" weight="1024" height="768"></embed>

 

3.web应用标签

3.1状态标签

<meter>状态标签(实时状态显示:气压、气温),兼容浏览器:Chrome、Opera

<progress>状态标签(任务过程:安装、加载),兼容浏览器:Chrome、Firefox、Opera

eg3.1-1.<meter>

<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>

<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="300" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>

eg3.1-2.<progress>

<progress max="100">

3.2列表标签

<datalist> 为input标记定义一个下拉列表,配合option,兼容浏览器:Chrome、Firefox、Opera

<details>标记定义一个元素的详细内容,配合summary,兼容浏览器:Chrome

eg3.2-1.<datalist>也可输入下拉框中没有的内容

<input placeholder="请选择城市" list="cityList">

    <datalist id="cityList">
        <option value="Nanjing">Nanjing</option>
        <option value="Beijing">Beijing</option>
        <option value="Shanghai">Shanghai</option>
        <option value="Lianyungang">Lianyungang</option>
        <option value="Yangzhou">Yangzhou</option>
    </datalist>
</input>

 

eg3.2-2. <details>

 <details open="open">

    <summary>details介绍</summary>
    <p>此处展示的是details详细信息,details配合summary使用的,默认不展示详细信息,但是设置为open状态时候,默认是展示的,点击小三角图标,可收缩或者展示详细信息部分内容;summary起到控制标题的作用。</p>
</details>

 3.3.Menu

<menu>命令列表,但是所有主流浏览器都不支持

<menuitem>命令列表标签

<command>命令列表按钮

 

4.注释标签

 <ruby>标记定义注释或者音标

<rt>标记定义对ruby的注释内容文本

<rp>告诉那些不支持ruby元素的浏览器如何去显示

 eg1:<p>我们来举个<ruby>例<rt>li</rt></ruby>子</p>

eg2:<p>我们来举个<ruby>例<rt><rp>(</rp>li<rp>)</rp></rt></ruby>子</p>

 5.其他标签

eg5-1.<mark>标记黄色

<p>妈妈让我去买<mark>新鲜的</mark>牛奶</p>

eg5-2.<output>

 

<form οninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)-parseInt(number2.value)">

    <input type="text" id="price" value="5000">
    *<input type="number" id="number" value="1">
    -<input type="number" id="number2" value="200">
    =<output name="totalPrice" for="price number number2"></output>
</form>

 

 6删除标签

 7.重定义标签

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/lilijun/p/6307402.html

你可能感兴趣的文章
JavaScript
查看>>
[转]getHibernateTemplate出现的所有find方法的总结
查看>>
【转】HTTP中的长连接和短连接分析
查看>>
scala 基本语法
查看>>
2019.08.02 学习整理
查看>>
JavaScript面向对象基础语法总结
查看>>
页面输入模糊数据---异步后台查询
查看>>
Java基础入门(二)
查看>>
Numpy数组
查看>>
数据库设计(1)
查看>>
Cocos2d-x 脚本语言Lua基本数据结构-表(table)
查看>>
BZOJ.4695.最假女选手(线段树 Segment tree Beats!)
查看>>
迭代器&&生成器
查看>>
js中的事件委托或是事件代理详解
查看>>
如何显示超大图像
查看>>
spring@Resource注解
查看>>
实践语法----文件创建删除读写
查看>>
Linux学习笔记(第六章)
查看>>
Java 泛型编程
查看>>
STL简介
查看>>