HTML5标签变化

HTML <!DOCTYPE>标签

<!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前,它不是HTML标签,指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

文档定义类型(DTD)(XML为扩展标记语言,HTML的DTD中,使用XML定义html标签规范)

DTD

DTD可定义合法的XML文档构建模块,它使用一系列合法的元素来定义文档的结构。

在HTML中

DTD规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5

HTML5不基于SGML,所以不需要引用DTD。

新增的标签

1.结构标签

2.多媒体标签

3.Web应用标签

4.其他标签

结构标签

多媒体标签

三类多媒体标签(音视频,图片、插件)

<video>    标记定义一个视频

<audio>    标记定义音频内容

<source>  标记定义媒体资源

<canvas>  标记定义图片(功能强大的画布)

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

标签意义:

多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验。

<video>

<video controls="controls" width="1024" height="768">
	<source src="../Source/pal4.mp4" type="video/mp4">
</video>

  

<audio>

<audio controls="controls">
	<source src="../Source/passion.mp3" type="audio/mpeg">
</audio>

<embed>

<embed src="../Source/HappyBirthday.swf" width="1024" height="768"></embed>

  

Web应用标签

状态标签

<meter>       状态标签(实时状态显示:气压、气温)

<progress>  状态标签(任务过程:安装、加载)

<meter>

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

  

<progress>

<progress value="30" max="100"></progress>

  

列表标签

<datalist>     为input标记定义一个下拉列表,配合option

<input placeholder="请选择您喜欢的手机品牌" list="phoneList" />
<datalist id="phoneList">
	<option value="iPhone">iPhone</option>
	<option value="Samsung">Samsung</option>
	<option value="Huawei">Huawei</option>
	<option value="hTC">hTC</option>
	<option value="Meizu">Meizu</option>
</datalist>

  

<details>      标记定义一个元素的详细内容,配合summary

<details open="open">
	<summary>树下的猫</summary>
	<p>我是一只坐在树下的貓,每天我都坐在树下,看花花世界,人海茫茫……
我每天都会做相同的梦,梦里看到一位公子,身患重病,危在旦夕。公子身边有一名女子,她的眼里尽是关切和深深的依恋。梦里,她喂药给他,他流着泪拉着她的手对他说:“谢谢你,下辈子我一定好好待你,来世还要娶你……”
每当这时,一切混沌,出现一位老者对我说着同样的话:“三世情缘,切忌把握!”每次我还想问一些什么,梦就醒了。
后来我终于明白,那个女子就是我,那个梦是我的前世,那位公子是我前世的丈夫。我不知道是不是猫都有记忆,也不知道是不是猫都会做梦。我只知道,那个梦越来越真实,我甚至可以感觉到他的心跳,他的痛苦。梦中醒来,泪流满面,滴在地上,久而久之,地上便出现了一个坑。坑里,我的眼泪像血一般殷红……
这辈子,我是一只猫,坐在树下,因为无家可归。在漆黑的夜里,抬头望天,对着星星说话,对着天空祈祷……
每天都坐在树下等,希望有一天可以见到我的前世今生。我想,如果一切都是真的,我一定可以认出他。
不曾遗忘那盘古洪荒是与你的诺言,千万岁月只在弹指一挥间,等你将我的似水年华烙上爱的印记,然后我们相依相偎,地老天荒……</p>
</details>

  

注:这里如果没有open="open"的话,内容是折叠起来的

其他标签

原文地址:https://www.cnblogs.com/helloCindy/p/11619980.html

时间: 2024-10-25 13:43:37

HTML5标签变化的相关文章

HTML5基础小结(一)——标签变化

随着Android,IOS手机,平板等各种App的不断扩增,加上对过去传统HTML的的各种不完善,例如视频依靠Flash,对手机和桌面的不兼容等等.HTML5来了,来解决这些问题了. Html5是W3C(World Wide Web  Consortium,万维网联盟)与WHATWG( Web Hypertext Application Technology Working Group)合作的结果.WHATWG 致力于web 表单和应用程序,而 W3C 专注于 XHTML 2.0.在 2006

HTML5 - html5标签的变化

html5标签的变化 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>html5标签的变化</title> <style type="text/css"> /* html5中所有结构标签本质上就是div标签,只是其具有意义 */ /* 页面头部header */

HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:HTML5专题视频教程</h1> (2)声明与标签: HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素. HTML5标签语法介绍及新增标记 1.

HTML5标签使用的常见误区

最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入/移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解.由于才疏学浅,很多不明白的地方可能只是做了字面上的

HTML5标签使用的常见误区----转载

最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入/移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解.由于才疏学浅,很多不明白的地方可能只是做了字面上的

盘点 HTML5标签使用的常见误区

最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解.由于才疏学浅,很多不明白的地方可能只是做了字面上的翻

【转】HTML5标签使用的常见误区

最近组内进行 HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶 段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解.由于才疏学浅,很多不明白的地方可能只是做了字面上

html5标签说明

页面结构发生变化 web 1.0 table时代 多层嵌套效率低.seo抓取能力不强 web 2.0 时代 大量的DIV+CSS   典型案例(微博.博客) web3.0时代 html5 减少DIV+CSS 简洁 典型案例(百度) 标签的变化 增加25个标签 结构元素 section元素:表示页面中的一个内容区块:比如章节.页眉.页脚或页面中的其他部分.它可以与h1 h2 h3 h4 h5 h6等元素结合起来 article  元素:表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章

HTML5 移动开发 (HTML5标签和属性)

   第一阶    1.如何使用HTML5中的新标签及属性    2.HTML5中的其它变化    3.HTML5的移动支持    4.使用HTML5开发移动WEB引用的理由 第二阶    HTML5为HTML规范加入了一些新的特性,其中最容易理解的就是新的标签.它们过去从未成为HTML的一部分,但现在却是HTML元素了.    大部分新标签被称为“分节”元素,它们为HTML文档布局分段提供语义.    部分如下:    <article>       文档或站点的一个独立部分    <