一、关于DTD

HTML5 不基于 SGML，所以不需要引用 DTD（HTML 4.01 基于 SGML）

二、HTML5结构标签

  • <header> 标记定义一个页面或一个区域的头部
  • <nav> 标记定义导航链接
  • <section> 标记定义一个区域
  • <aside> 标记定义页面内容部分的侧边栏
  • <article> 标记定义一篇文章
  • <hgroup> 标记定义文件中一个区块的相关信息
  • <figure> 标记定义一组媒体内容以及它们的标题
  • <figcaption>标记定义 figure 元素的标题。
  • <dialog> 标记定义一个对话框(会话框)类似微信
  • <footer> 标记定义一个页面或一个区域的底部

三、HTML5多媒体标签

 

video（视频）

兼容性：

  • safari支持mp4、不支持webm和ogv
  • ie8（包含）以下都不支持 video 标签
  • ie9 支持 video 标签（但只支持 mp4 ）
<video src="..."

       autoplay="autoplay"

       controls="controls"

       loop="loop"

       width="500"

       height="500"

       poster="..."

       muted>
<!-- 其中loop设置循环 poster设置封面 muted静音 -->

audio（音频）

兼容性：

  • safari支持mp3和wav、不支持ogg
  • JS中new Audia() 等同于 html 上加一个 <audio></audio>标签
  • chrome和opera不能自动播放，需要一个页面元素上的交互才可以
  • width / height 属性没有作用，必须使用 style 标签里面的样式去控制它
  • 为了提升客户的体验度，可以在audio的开始和结束标签之间添加文字
  • <source> 标是为媒介元素定义媒介资源，不可以在<source>开始标签里添加，而且<source> 标签是单标签，没有结束标签。
<audio src="..."

       autoplay="autoplay"

       controls="controls"

       loop="loop"

       width="500"

       height="500">
 
source：媒介元素（音视频）

<video autoplay="autoplay"

       controls="controls"

       loop="loop"

       width="500"

       height="500">

    <source src="..." type="video/mp4"

</video>
 

embed：嵌入插件（音视频）

<embed src="..."

       type="audio/mp3"

       width="300"

       height="300" />
 

四、HTML5的Web应用标签

  • Menu
    <menu> 命令列表（目前所有主流浏览器都不支持）
    <menuitem> menu命令列表标签（只有FireFox8.0+支持）
    <command> menu标记定义一个命令按钮（只有IE9支持）

  • 状态标签
    <meter> 状态标签(实时状态显示：气压、气温)C、O
    <progress> 状态标签 (任务过程：安装、加载) C、F、O

  • 列表标签
    <datalist> 为input标记定义一个下拉列表,配合option F、O
    <details> 标记定义一个元素的详细内容 ，配合summary C

五、HTML5其他标签

  • <ruby> 标记定义注释或音标
  • <rp> 告诉那些不支持 ruby元素的浏览器如何去显示
  • <rt> 标记定义对ruby的注释内容文本
  • <mark> 标记定义有标记的文本 (黄色选中状态)
  • <output> 标记定义一些输出类型，计算表单结果配合oninput事件
  • <keygen> 标记定义表单里一个生成的键值(加密信息传送)
  • <time> 标记定义一个日期/时间，目前所有主流浏览器都不支持

六、HTML5重定义标签

（显示不变，只是表达的含义进行了重新定义的标签）

  • <b> 代表内联文本，通常是粗体，没有传递表示重要的意思
  • <i> 代表内联文本，通常是斜体，没有传递表示重要的意思
  • <dd> 可以同details与figure一同使用，定义包含文本，dialog也可用
  • <dt> 可以同details与figure一同使用，汇总细节，dialog也可用
  •  

    表示主题结束，而不是水平线，虽然显示相同

  • <menu> 重新定义用户界面的菜单，配合command或者menuitem使用
  • <small> 表示小字体，例如打印注释或者法律条款
  • <strong>表示重要性而不是强调符号

七、HTML5中Input新增的type

  • email
  • url
  • number
  • range
  • Date picker：
    Date —— 选取日、月、年
    Month —— 选取月、年
    Week —— 选取周和年
    Time —— 选取时间（小时和分钟）
    Datetime —— 选取时间、日、月、年（UTC 时间）
    Datetime-local —— 选取时间、日、月、年（本地时间）
  • search
  • color
  • tel

八、HTML5表单属性

  • autocomplete：自动完成，适用于 <form> 标签，以及以下类型的 <input> 标签：
    text, search, url, telephone, email, password, datepickers, range, color。
    用法：<form autocomplete="on“></form>或者单独在input中用off

  • autofocus：自动地获得焦点，适用于所有 <input> 标签的类型
    用法：<input autofocus="autofocus" />

  • multiple：可选择多个值，适用于<input>中type为email和file
    用法：<input type="file" multiple="multiple" />

  • placeholder：适用于<input>中type为：text, search, url, telephone, email, password

  • required：规定不能为空，适用于以下类型的 <input> 标签：
    text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file
    用法：<input type="text" required="required" />

九、HTML5链接属性

  • size
    <link rel=“icon” href=“icon.gif” type=“image/gif” size=“16x16”>
  • target
    <base href=“http://localhost/” target=“_blank”>
  • 超链接
    a：media=""（表示对设备进行优化，handhelp对“手持“设备进行支持，tv对”电视）；
    a：hreflang="zh"（设置语言，这里设置语言是中文）；
    a：ref=“external”（设置超链接的引用，这里超链接为外部链接）

十、HTML5其他属性

  • defer：加载完脚本后并不执行，而是等整个页面加载完之后再执行
    <script defer src=“URL”></script>
  • async：加载完脚本后立刻执行，不用等整个页面都加载完，属于异步执行。
    <script async src=“URL”></script>
  • Start —— 起始值
  • Reversed —— 倒叙排列 
    <ol start=“10” reversed>
    
    <li>Html</li>
    
    <li>Css</li>
    
    <li>JavaScript</li>
    
</ol>
  • manifest=“cache.manifest”（定义页面离线应用文件）
    <html manifest=“cache.manifest”>

HTML5新增的标签与属性的更多相关文章

  1. HTML5新增的标签和属性归纳

    收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...

  2. h5废弃的标签和属性及新增的标签和属性

    一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...

  3. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  4. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  5. HTML5探索一（那些新增的标签和属性）

    tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...

  6. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  7. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  8. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  9. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

随机推荐

  1. nyoj116士兵杀死（两）段树单点更新

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描写叙述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军常常 ...

  2. asp .net mvc 获得用户IP

    string strHostName = System.Net.Dns.GetHostName(); //clientIPAddress是一个数组,可能有多个数据 var clientIPAddres ...

  3. Vmware 占用宿主机硬盘空间只增不减

    问题: vmware 占用硬盘空间只增大不减少.即使你删除虚拟机系统里面的文件,占用宿主机的硬盘空间也不释放.用了一段时间后空间不够了. 解决办法: 方法一: 把一部分*sxxx.vmdk文件剪切到其 ...

  4. 获取bing图片并自动设置为电脑桌面背景（使用 URLDownloadToFile API函数）

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  5. 天气预报API接口

    原文:天气预报API接口 一.中央气象台API接口: 1. XML接口 http://flash.weather.com.cn/wmaps/xml/china.xml 这个是全国天气的根节点,列出所有 ...

  6. WPF 在一个dll创建一个Window（包含xaml），在另一个dll中再次继承 会出错

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/e92390eb-bbfa-42fb-baa9-2286444c0dca/the-comp ...

  7. C# DataGridView合计行

    在网上搜了很多关于DataGridView合计行的设计及源码,都不是很合我心意.于是自己写了一个关于合计行的DLL.以后每次要用到合计行的时候只要引用这个DLL就可以了. 效果图如下: 引用Dll: ...

  8. 蚂蚁金服招聘-JAVA资深开发工程师/专家-蚂蚁金服保险

    岗位描述: 1.协助业务方梳理业务需求,提供业务规划方案.架构设计方案: 2.负责业务系统的规划设计,制定产品的技术发展路线,完成重要业务模块及核心框架的搭建及编码实现: 3.发现和解决业务系统的技术 ...

  9. C++ GUID和string转化函数【转载】

    原文地址:https://blog.csdn.net/zgl7903/article/details/5488294 因为这两个函数太好用,解决了大问题,我必须转载一下了.转自csdn牛人 zgl79 ...

  10. SignalR---DOTNET客户端

    原文:SignalR---DOTNET客户端 这里面有用到异步的相关知识,本人前几篇文章也简单的提到. SignalR客户端要寄宿在.NET的客户端,必须安装Microsoft.AspNet.Sign ...