Html5新增的功能

从HTML4.01到HTML5并不是一种革命性的升级,而是一种规范向习惯的妥协,因此HTML5并不会带给开发者过多的冲击,过渡到HTML5是非常轻松的。另一方面,也增加了很多实用的新功能。

比如HTML5的语法变化。这些变化的最大特征就是:HTML5更宽容了!HTML5

规范的设计初衷就是最大程度的箭筒互联网上随处可见的不规范页面。

归纳起来,HTML5存在以下几点句法变化:

1、  标签不再区分大小写

例:<p>这是一段文字</P>

结束的P标签是大写的,但是这符合HTML5的书写规范。

2、  元素可以省略结束标签

HTML5十分宽容,允许部分HTML5元素省略结束标签,甚至允许HTML5元素同时省略开始标签和结束标签。具体来说HTML5中的省略标签可以分为以下三种:

(1)       空元素语法标签:area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr。

(2)       可以省略结束标签的元素:colgroup、dt、dd、li、optgroup、option、p、rt、rp、thead、tbody、tfoot、tr、td、th。

例如:<p>这是一段文字

以上代码只有开始标签,没有结束标签,但在HTML5中是符合规范的。

(3)       可以省略全部标签的元素:html、head、body、tbody。

<!DOCTYPE html>

<title>例子</title>

<p>这时一段文字

<ol>

<li>这是一个列表

<li>这是一个列表

</ol>

以上代码标签不仅没有p标签和li的结束标签,连<html><head><body>标签都没有,但这也是符合HTML5的书写规则的。

3、  允许省略属性值的属性

XHTML要求所有元素的所有属性名都为小写,所有属性也都必须要写属性值,不能简写。所有属性值必须用双引号。

HTML5允许部分标志性的属性可以省略属性值。例如

<input checked type=”checkbox”>

<input readonly type=”text”>

<input display type=”text”>

4、  允许属性值不使用双引号

传统的XHTML按XML规范对属性进行要求,奥球所有的属性值都必须用引号引起来,但HTML5允许直接给出属性值,即使不放在引号中也是正确的。

例如:

<select>

<option value=java>这是个下拉菜单</option>

<option selected value=ee>这是个下拉菜单</option>

</select>

需要说明的是,如果某个属性的属性值包含空格等容易引起浏览器混淆的属性值,那么HTML5依然建议使用引号把这种特殊的属性值引起来。假如我们在my images目录下存有一张图片,如果直接使用以下代码来定义图片

<img src=my images/图片1.jpg>

上面这段代码很容易导致浏览器的误解,浏览器会误以为src的属性是my。这样程序将无法解析到真正的图片。此时应该把代码改为

<img src=”my images/图片1.jpg”>

以上就是我对HTML5新增功能的一部分了解。

时间: 2024-10-26 15:15:06

Html5新增的功能的相关文章

关于html5新增的功能(百度)

HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html>   2. 新增了一些结构化标记的元素(<header>,<nav>,<footer>,<section>等)   3. 向后兼容的HTML和XHTML分析规则   4. 新增了用于多媒体内容的<audio>和<vidio>标记元素   5. 更多的输入元素类型值,允许本地的日期选择,时间,颜色和数字   6. 从HTML中删

html5新增的功能。

1.cancas介绍 大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext()获得的一个“绘图环境”对象上. Canvas API 也使用了路径的表示法.但是,路径由一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 方法. 一旦定义了路径,其他的方法,如 fill(),都是对此路径操作.绘图环境的各种属性,比如 fillStyle,说明了这些操作如何使用. 2.veid

HTML5 新增绘图功能

<!DOCTYPE html> <html> <head lang="en"> <title></title> <meta charset="utf-8"> </head> <body> <h2>绘图入门</h2> <canvas id="mc" width="300" height="180

HTML5新增的一些属性和功能

大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的input type HTML4已有的input type: text.password.radio.checkbox.hidden.file.submit.reset.button.image   HTML5新增的input type: email:在表单提交时提供了格式验证功能,要求@左右各有一个

HTML5新增的一些属性和功能之六——拖拽事件

拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragstart:源对象开始被拖动 2).ondrag:源对象被拖动过程中(鼠标可能移动也可能不移动) 3).ondragend:源对象被拖动结束 拖动源对象可以进入到上方的目标对象可以触发的事件: 1).ondragenter:目标对象被源对象拖动着进入 2).ondragover:目标对象被源对象拖动着悬停

HTML5新增Canvas标签及对应属性、API详解(基础一)

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式 邮箱 :<input type="email" name=&quo

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

html5新增及删除标签

一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签,之前都是用div实现的,为了语义化,html5从div派生出很多新的标签.这些新增的结构标签有助于将文档分成几个逻辑部分.如下: a.section标签 表示页面中的一个独立内容区块,里面有自己的大纲结构,比如章节,页眉,页脚或页面的其他部分.就是说section可以包含h1.h2...h6标签,表