10HTML5标签变化
[目录]
一、HTML5简介
HTML5 ≈ HTML + CSS + JavaScript + API
二、DOCTYPE声明
- HTML<!DOCTYPE>标签
定义和用法：<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前 - 不是HTML标签：指示web浏览器关于页面使用哪个HTML版本进行编写的指令
- 文档类型定义(DTD)
- DTD：DTD可定义合法的XML文档构件模块，它使用一系列合法的元素来定义文档的结构
- 在HTML中：DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容
- HTML5：HTML5不基于SGML，所以不需要引用DTD
- HTML元素和文档类型：点击查看HTML元素和有效的DTD
三、HTML5新增标签
-
结构标签（块状元素）——有意义的div
<article>标记定义一篇文章 <header>标记定义一个页面或一个区域的头部 <nav>标记定义导航链接 <section>标记定义一个区域 <aside>标记定义页面内容部分的侧边栏 <hground>标记定义文件中一个区块的相关信息 <figure>标记定义一组媒体内容以及它们的标题 <figccaption>标签定义figure元素的标题 <footer>标记定义一个页面或一个区域的底部 <dialog>标记定义一个对话框，类似微信的对话 -
多媒体标签
- <video>标记定义一个视频，例如：
<video src="..." autoplay="autopay" loop="-1" aontrols="controls">（autoplay：自动播放 loop：循环次数 -1代表无限循环 controls：控制器） - <audio>，例如：
<audio src="..." autoplay="autopay" loop="-1" aontrols="controls"> - <source>标记定义媒体资源
<video autoplay="autoplay"> <source src="..." type="video/mp4". </video> <audio autoplay="autoplay"> <source src="..." type="audio/mpeg". </audio>- <canvas>标记定义图片
- <embed&>标记定义外部的可交互的内容或插件，比如flash
标签的意义：多媒体标签的出现意味着富媒体的发展以及支持环境不使用插件的情况下即可操作媒体文件极大的提升了用户体验
- <video>标记定义一个视频，例如：
-
web应用标签
- <meter>试试状态显示：气压、气温、电量
- <progress>任务过程：安装、加载
- <datalist>为input标记定义一个下拉列表，配合option使用
- <details>标记定义一个元素的详细内容、配合summary使用
- 注释标签：
1、<ruby>标记定义注释或音标 2、<rt>标记定义对ruby的注释内容文本 例子：<p>我们来<ruby>夼<rt>kuang</rt></ruby>一个话题</p> 3、<rp>告诉那些不支持ruby元素的浏览器如何去显示 例子：<p>我们来<ruby>夼<rp>(</rp><rt>kuang</rt><rp>(</rp></ruby>一个话题</p> 注意：<rp>不要放在</rt>标签内
4、HTML5删除标签
- 纯表现的元素：basefont、big、center、font、s、strike、tt、u
- 对可用性产生页面影响的元素：frame、frameset、noframes
- 产生混淆的元素：acronym、applet、isindex、dir
- 重定义标签：显示不变，知识表达的含义进行了重新定义的标签
- <b>代表内联文本，通常是粗体，没有传递表示重要的意思
- <i>代表内联文本，通常是斜体，没有传递表示重要的意思
- <dd>可以同details与figure一同使用，定义包含文本，dialog也可用
- <dt>可以同details与figure一同使用，汇总细节，dialog也可用
- <hrgt;不仅表示水平线，还表示主题结束，显示效果相同
- <menu>重新定义用户界面的菜单，配合command或者menuitem使用
- <small>表示小字体，例如打印注释或者法律条款
- <strong>表示重要性而不是强调符号
