html5与传统html一样吗区别是什么_随笔

一. HTML5语法的改变

该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下：

1.HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变。

2.HTML5中，刻意不使用版本声明，一份文档将会适用于所有版本的HTML。

3.从HTML5开始，对于文件的字符编码推荐使用UTF-8。

4.HTML5确保了与之前HTML版本的最大程度的兼容性。

为了保证兼容性，需从元素说起，在HTML5.中，元素的标记可以省略。其体来说，元素的标记分为“不允许写结束标记”、“可以省略结束标记”和‘“开始标记和结束标记全部可以省略”三种类型。

• 不允许写结束标记元素有：area、base、br、col.....

• 可以省略结束标记：li、dt、dd、p、rt......

• 开始标记和结束标记全部可以省略：html、head、body.....

二.新增的结构元素

•section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分；

•article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章；

•aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息；

•header元素表示页面中一个内容区块或整个页面的标题；

•hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合；

•footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息；

•nav元素表示页面中导航链接的部分；

•figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure元素组添加标题

2、新增的其他元素

•audio元素定义音频，比如音乐或其他音频流；

•embed元素用来插入各种多媒体，格式可以是Midi、Wav、AU、MP3等；

•mark元素上要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用就是在搜索结果中向用户高亮显示搜素关键词；

•progress元素表示运行中的进程

•ruby元素表示ruby注释(中文注音或字符)

•rt元素表示字符(中文注音或字符)的解释或发音

•rp元素在ruby注释中使用，以定义不支持ruby素的浏览器所显示的内容。

•wbr元素表示软换行，而当宽度不够时，主动在此处进行换行

•canvas元素表示图形，比如图表和其他图像

•cammand元素表示命令按钮，比如单选按钮、复选框或按钮

•details元素表示用户要求得到并且可以得到的细节信息

•datagrid元素表示可选数据的列表，它以树形列表的形式来显示

•keygen元素表示生成密钥

•output元素表示不同类型的输出，比如脚本的输出

•source元素为媒介元素(比如<video>和<audio>)定义媒介资源

•menu元素表示菜单列表

3、新增的input元素

•email 类型表示必须输入E-main地址的文本输入框

•url 类型表示必须输入URL地址的文本输入框

•number类型表示必须输人数值的文本输入框

•range 类型表示必须输入一定范围内数字值的文本输人框

HTML5拥有多个可供选取日期和时间的新型输入文本框:

•date ——选取日、月、年

•month ——选取月、年

•week ——选取周和年

•time ——选取时间(小时和分钟)

•datetime ——一选取时间、日、月、年(UTC 时间)

•datetime.local ——选取时间、日、月、年(本地时间)

三.废除元素

1、能使用CSS替代的元素

•对干basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹去画面展示服务的，而HTML5中提倡把画面展示性功能放在CSS样式表中统一编辑，所以这些元素废除了

2、不再使用frame框架

•对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML5中已不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上这三个元素废除。

3、只有部分浏览器支持的元素

• 对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被废除。其中applet元素可由ernedd元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript编程的方式所替代

4、其他被废除的元素：

•废除rb元素，使用ruby元素替代

•废除acronym元素，使用abbr元素替代

•废除dir元素，使用ul元素替代

•废除isindex元素，使用form元素与input元素相结合的方式替代

•废除listing元素，使用pre元素替代

•废除xmp元素，使用code元素替代

•废除nextid元素，使用GUIDS替代

•废除plaintext元素，使用“ text/plian” MIME类型替代

四.新增属性和废除属性

一、新增属性

1、与表单相关属性

•新增autofocus属性，它以指定属性的方式让元素在画面打开时自动获得焦点；

•新增placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容；

•新增form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内；

•新增required属性，该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容；

2、与链接相关属性

•增加media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用；

•增加hreflang属性与rel属性，以保持与a元素、link元素的一致；

3、其他属性

•属性reverend，它指定列表倒序显示；

•为script元素增加async属性，它定义脚本是否异步执行；

二、废除属性

•能被CSS样式表替代的属性全部废除掉；

•多余属性，例如：target、profile、version等被废除掉；

五.全局属性

在HTML5中，新增了一个’‘全局属性“的概念。所谓全局属性，是指可以对任何元素都使用的属性。

1、contentEditable 属性

•该属性允许用户编辑元素中的内容，可以获得鼠标焦点，属性为布尔值，可被指定为true或false。另外，该属性还有个隐藏inherit状态，为true时，允许编辑，为false时，不允许编辑，未指定时，由inherit决定。

2、designMode 属性

•该属性用来决定整个页面是否可编辑。有两个属性“on”与"off"。属性为"on"时，可编辑，为“off”时，不可编辑。

3、hidden属性

•所有元素都允许使用一个hidden属性，该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。该属性值为布尔值，为true时，不可见，为false时，可见。

4、spellcheck属性

•该属性是HTML 5针对input元素(type=text) 与textarea这两个文本输入框提供的一个新属性，主要对用户输入内容进行拼写与语法检查。属性值为布尔值，书写时必须明确声明属性值为true或false书写方式如下：

<!—以下两种书写方法正确—><textarea spellcheck="true" ><input type=text spellcheck=false><!—以下两种书写方法为错误—><textarea spellcheck >

详解form属性

在HTML4中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把他们书写在页面上任何地方，然后给元素制定一个form属性，属性值为该表单单位的id，这样就可以声明该元素从属于指定表单了。

<!DOCTYPE HTML>

<head>

<title>form属性</title>

</head>

<body>

</form>

</body>

</html>

input元素从属于表单，它呗书写在表单内部，用不着再对它制定form属性。textarea元素呗书写在表单之外，但它从属于表单，所以表单的id制定给textareea元素的form属性。

这样做的好处是当需要给页面中的元素添加样式时可以更方便地添加，因为它们不是被分散在各表单之内的了。

<frame src="Head.jsp?AdminName=<%=AdminName%>" name="top" noresize="noresize" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"/>

</frameset>

</frameset>

<body>此浏览器不支持集合框架</body>

</noframes>

框架概念：

所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只要 <FRAMESET><FRAME>即可，而所有框架标记要放在一个总起的 html 档，这个档案只记录了该框架如何划分，不会显示任何资料，所以不必放入 <BODY>标记，浏览这框架必须读取这档案而不是其它框窗的档案。<FRAMESET>是用以划分框窗，每一框窗由一个 <FRAME>标记所标示，<FRAME>必须在 <FRAMESET>范围中使用。如下例：

</frameset>

此例中 <FRAMESET>把画面分成左右两相等部分，左便是显示 up2u.html，右边则会显示 me2.html 这档案，<FRAME>标记所标示的框窗永远是按由上而下、由左至右的次序。

<FRAMESET><FRAME>：

<FRAMESET>称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。

<FRAME>则只是设定某一个框窗内的参数属性。

<FRAMESET>参数设定：

例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">

COLS="90,*"

垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗后剩下的空间，第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。

ROWS="120,*"

就是横向切割，将画面上下分开，数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET>标记中，因 Netacape 偶然不能显示这类形的框架，尽采用多重分割。

frameborder="0"

设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ）

border="0"

设定框架的边框厚度，以 pixels 为单位。

bordercolor="#008000"

设定框架的边框颜色。

framespacing="5"

表示框架与框架间的保留空白的距离。

<FRAME>参数设定：

例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

SRC="a.html"

设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可使用绝对路径或相对路径，有关此两者详见於【连结进阶】。

NAME="top"

设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。

frameborder=0

设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ）

framespacing="6"

表示框架与框架间的保留空白的距离。

bordercolor="#008000"

设定框架的边框颜色。颜色值请参考【HTML 剖析】。

scrolling="Auto"

设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。

noresize

设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。

marginhight=5

表示框架高度部份边缘所保留的空间。

marginwidth=5

表示框架宽度部份边缘所保留的空间。

<NOFRAMES>：

当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES>这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES>与 </NOFRAMES>之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。

应用方法：

在<frameset>标记范围加入 </NOFRAMES>标记，以下是一个例子：

<body>

很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。

</body>

</noframes>

</frameset>

若浏览器支援框架，那堋它不会理会 <noframes>中的东西，但若浏览器不支援框架，由於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在 <noframes>范围内的文字会被显示。

<IFRAME>：

这标记只适用於 IE。它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记，但围著的字句只有在浏览器不支援 iframe 标记时才会显示，如<noframes>一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好，若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。

例子： <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">

src="iframe.html"

欲显示於此框窗的文件来源除档案名称，必要加上相对或绝对路径。

name="test"

此框窗名称，这是连结标记的 target 参数所要的，

align="MIDDLE"

可选值为 left, right, top, middle, bottom，作用不大

width="300" height="100"

框窗的宽及长，以 pixels 为单位。

marginwidth="1" marginheight="1"

该插入的文件与框边所保留的空间。

frameborder="1"

使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）

scrolling="Yes"

使用 Yes 表示容许卷动（内定）， No 则不容许卷动。

例子：原始码

很抱歉，馈下使用的浏览器并不支援 IFrame，不能正常浏览我的网页。</iframe>

</center>

frameset参数传递问题

左边的条件参数如何传,右边才能接收

--------------------------------------------------------------------------------

对三个帧分别命名为：left.asp(显示查询条件的页面,其中帧名为：left）,top.asp,main.asp(显示查询结果的页面,其中帧名为：main）

如：

<html>

<head>

<title>search</title>

</head>

</frameset>

</body></noframes>

</html>

在left的表单中写成：

......//你自己设计吧。

</form>

这样就可以你的查询条件传给main.asp中了！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6122118.html

html5与传统html一样吗区别是什么

发表评论

评论列表（0条）

html5与传统html一样吗 区别是什么

发表评论

评论列表（0条）

html5与传统html一样吗区别是什么