一、关于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. 从 RNN 到 LSTM （Short-Term Memory）

    理论上循环神经网络可以支持任意长度的序列,然而在实际中,如果序列过长会导致优化时出现梯度消散(the vanishing gradient problem)的问题,在实际中一把会规定一个最大长度,当序 ...

  2. 机器学习：深入理解 LSTM 网络 (一)

    Recurrent Neural Network Long Short Term Memory Networks (LSTMs) 最近获得越来越多的关注,与传统的前向神经网络 (feedforward ...

  3. python 教程 第十一章、 异常

    第十一章. 异常 1)    try/except/else格式 try: s = raw_input('--> ') except EOFError: print 'Why did you d ...

  4. C# 桌面软件开发-深入学习 [1]- AY-C#人爱学不学-aaronyang技术分享

    原文:C# 桌面软件开发-深入学习 [1]- AY-C#人爱学不学-aaronyang技术分享 曾经我做office,不想依赖别人dll,就使用了 Type.GetTypeFromProgID 可以根 ...

  5. wpf.xaml.behavior

    Install-Package Microsoft.Xaml.Behaviors.Wpf Remove reference to “Microsoft.Expression.Interactions” ...

  6. x名称空间中的内容

    原文:x名称空间中的内容 x名称空间映射的是http://schemas.microsoft.com/winfx/2006/xaml,它包含的类均与XAML的解析有关,下面分三部分介绍 一:x名称空间 ...

  7. python 安装 win 下的exe结尾的文件操作

    1.首先下载相关的模块 2.把下载的相关模块放到python 安装目录下 3.cmd 切换到python的安装目录下 例如:{PIL-1.1.7.win32-py2.7.exe} 4.执行 pip i ...

  8. SQL 修改主键约束

    原文:SQL 修改主键约束 今天在学习数据库的时候遇到一个关于如何修改主键约束的问题,抄录下来以供备用. --修改主键约束用SQL --获取主键约束名字 declare @csname varchar ...

  9. WPF使用WindowChrome实现自定义标题框功能

    代码: <Window x:Class="WpfDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx ...

  10. CopyMemory、FillMemory、MoveMemory、ZeroMemory

    CopyMemory 复制内存,第一个参数为目的地址,第二个参数为源地址,第三个参数为复制数据的大小,单位字节,源内存区域不能重叠,如果重叠,可以使用MoveMemory()函数.函数原型如下: vo ...