HTML5与HTML4的区别(2)

HTML5学习笔记之二——HTML5与HTML4的区别(2) _人人IT网

三、新增/废除的属性 1.新增的属性 1).表单相关的属性 对input(type=text),select ,textarea与button元素新增自动获取焦点的autofocus属性。auto

三、新增/废除的属性

1.新增的属性

1).表单相关的属性

  • 对input(type=text),select ,textarea与button元素新增自动获取焦点的autofocus属性。autofocus 可以赋值为 autofocus,也就是在页面加载完成的时候自动聚焦到这个input标签,自然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果,至今为止的实现方法是用js。在页面加载完时执行聚焦操作,现在也被一个属性搞定了。可以想象,一个页面至多只有一个input标签会设置 autofocus,否则必然不会达到预期效果。因为不可能同事聚焦在两个input上。
  • 对input,textarea元素指定placeholder属性,对用户给以可输入的内容提示。 这个新增属性也是非常实用,用在type= text email等等类型的时候,提示用户输入信息的格式或者内容等等。这个效果在之前也是需要js来实现的。
  • 对input,output,select,textarea,button,fieldset指定form属性,声明其属于哪个表单,该元素可放置在表单外,也可以放到表单内。
  • 对input与textarea元素指定required属性。即必填项声明。

input的有一个强力新增属性,免去验证的麻烦。可以赋值为 required。
比如用户注册页面的用户名和密码都是必填的,只要设置一个required就可以了。而在以前是需要js来验证或者后台验证的。
注意:这里required属性是需要用户来填写的,所以TYPE是button、submit、reset、image等等不需要用户填写选择的类型是不可以使用这个属性的。

  • 为input元素添加了新的属性:autocomplete,min,max,multiple,patten与step。

autoconmplete可以赋值为 on 或者 off。当为 on的时候,浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里。
现在很多网站都实现了这个功能,不过基本都是用php来实现的。用了这个属性,无疑可以减少很多前端和后台的交流量和工作量。

min、max属性来限制数值范围,minheight、maxheight属性来限制字符串长度。

multiple属性允许在上传文件时异常上传多个文件。

pattern属性用于验证输入字段的模式,其实就是正则表达式。step 属性规定输入字段的合法数字间隔(假如 step="3",则合法数字应该是 -3、0、3、6,以此类推),step 属性可以与 max 以及 min 属性配合使用,以创建合法值的范围。

另外,新增list属性---联想框效果
这个属性显示类似于百度搜索框那种联想框效果,也是非常实用的一个属性。
注意从这个属性使用的特点:需要有对应的datalist标签;datalist子标签option支持 value和lable两个属性;list的属性值要和datalist的id一致。同时,datalist还可以与autocomplete属性配合使用。

例子:

<input name="ex" type="url" list="exurls">
<datalist id="exurls">
<option value="http://www.google.com/" label="Google">
<option value="http://www.reddit.com/" label="Reddit">
</datalist>

  • 为 input、button元素增加formaction、formenctype、formmethod、formnovalidate与 formtarget属性。用户重载form元素的action、enctype、method、novalidate与target属性。为 fieldset元素增加disabled属性,可以把它的子元素设为disabled状态。
  • 为input,button,form元素增加了novalidate属性,该属性可以取消提交时进行 的有关检查,表单可以被无条件的提交。

2).链接相关属性

  • 为a、area增加media属性。规定目标 URL 是为什么类型的媒介/设备进行优化的。该属性用于规定目标 URL 是为特殊设备(比如 iPhone)、语音或打印媒介设计的。该属性可接受多个值。只能在 href 属性存在时使用。
  • 为area增加herflang和rel属性。hreflang 属性规定在被链接文档中的文本的语言。只有当设置了 href 属性时,才能使用该属性。注释:该属性是纯咨询性的。rel 属性规定当前文档与被链接文档/资源之间的关系。只有当使用 href 属性时,才能使用 rel 属性。
  • 为link增加size属性。sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel="icon"),才能使用该属性。该属性可接受多个值。值由空格分隔。
  • 为base元素增加target属性,主要是保持与a元素的一致性。

3)、其他属性

  • 为ol增加reversed属性,它指定列表倒序显示。
  • 为meta增加charset属性
  • 为menu增加type和label属性。label为菜单定义一个课件的标注,type属性让才当可以以上下文菜单、工具条与列表cande但三种形式出现。
  • 为style增加scoped属性。它允许我们为文档的指定部分定义样式,而不是整个文档。如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。
  • 为script增减属性,它定义脚本是否异步执行。async 属性仅适用于外部脚本(只有在使用 src 属性时)有多种执行外部脚本的方法:

如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
        如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
        如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

  • 为html元素增加manifest,开发离线web应用程序时他与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息。
  • 为iframe增加撒个属性,sandbox、seamless、srcdoc。用来提高页面安全性,防止不信任的web页面执行某些操作。

2.废除的属性

HTML4中一些属性在HTML5中不再被使用,而是采用其他属性或其他方式进行替代。


在HTML 4中使用的属性


使用该属性的元素


在HTML 5中的替代方案


rev


link、a


rel


charset


link、a


在被链接的资源的中使用HTTP Content-type头元素


shape、coords


a


使用area元素代替a元素


longdesc


img、iframe


使用a元素链接到校长描述


target


link


多余属性,被省略


nohref


area


多余属性,被省略


profile


head


多余属性,被省略


version


html


多余属性,被省略


name


img


id


scheme


meta


只为某个表单域使用scheme


archive、chlassid、codebose、codetype、declare、standby


object


使用data与typc属性类调用插件。需要使用这些属性来设置参数时,使用param属性


valuetype、type


param


使用name与value属性,不声明之的MIME类型


axis、abbr


td、th


使用以明确简洁的文字开头、后跟详述文字的形式。可以对更详细内容使用title属性,来使单元格的内容变得简短


scope


td


在被链接的资源的中使用HTTP Content-type头元素


align


caption、input、legend、div、h1、h2、h3、h4、h5、h6、p


使用CSS样式表替代


alink、link、text、vlink、background、bgcolor


body


使用CSS样式表替代


align、bgcolor、border、cellpadding、cellspacing、frame、rules、width


table


使用CSS样式表替代


align、char、charoff、height、nowrap、valign


tbody、thead、tfoot


使用CSS样式表替代


align、bgcolor、char、charoff、height、nowrap、valign、width


td、th


使用CSS样式表替代


align、bgcolor、char、charoff、valign


tr


使用CSS样式表替代


align、char、charoff、valign、width


col、colgroup


使用CSS样式表替代


align、border、hspace、vspace


object


使用CSS样式表替代


clear


br


使用CSS样式表替代


compace、type


ol、ul、li


使用CSS样式表替代


compace


dl


使用CSS样式表替代


compace


menu


使用CSS样式表替代


width


pre


使用CSS样式表替代


align、hspace、vspace


img


使用CSS样式表替代


align、noshade、size、width


hr


使用CSS样式表替代


align、frameborder、scrolling、marginheight、marginwidth


iframe


使用CSS样式表替代


autosubmit


menu

 
 

时间: 2024-10-11 18:19:54

HTML5与HTML4的区别(2)的相关文章

HTML5和HTML4的区别技术博文

HTML5和HTML4的区别:HTML5新标签的用法解释(部分) 1.<audio>标签 <audio>标签定义声音,比如音乐或其他音频流. HTML5: <audio src="someaudio.wav">您的浏览器不支持audio标签.</audio> HTML4: <object type="application/ogg" data="someaudio.wav"><pa

HTML5在HTML4的区别

多人会发现,由于HTML4与HTML5之间的区别,新建一个HTML5的网站远比从HTML4往HTML5上迁移来的容易. 事实上,HTML5并没有对HTML4做非常重大的调整,而且两者之间有很多相似的地方. 虽然如此,两者之间的主要区别仍然需要注意.下面是HTML4与HTML5之间的主要区别(并不是全部,全部列出来是不可能的): 1.HTML5仍然是一个制定中的标准 这第一个区别显而易见,但是也是非常重要的一个,我们从它开始.你也许已经看到了到处都有很多关于HTML5很酷的言论,但是这些都无法改变

HTML5与HTML4的区别-----文档结构

HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句     HTML5仅规定了一种:       <!DOCTYPE html> 2.简化了设置字符编码   <meta charset="UTF-8"> charset 属性是 HTML5 中的新属性,且替换了:<meta http-equiv="Content-Type" content="text/html; chars

HTML5 与 HTML4 的区别(3) - 新增的属性和废除的属性

表单相关的属性 新增与表单相关的属性如下: 可以对 input(type=text).select.textarea 与 button 标签指定 autofocus 属性.它以指定属性的方式让标签在画面打开时自动获得焦点. 可以对 input(type=text) 与 textarea 标签指定 placeholder 属性,它会对用户的输入进行提示,提示用户可以输入的内容. 可以对 input.output.select.textarea.button 与 fieldset 指定 form 属

HTML5与HTML4的区别

1.    HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在一个浏览器中可以运行的HTML.Css.Javascript,在另一个浏览器中不能运行. 原因:各浏览器规范不统一,没有被标准化. 解决方案:使各浏览器的功能符合通用标准. 文档结构不够明确:HTML4中元素不能把文档结构表示清楚. 解决方案:增加与结构相关的元素. Web应用程序的功能受到限制:HTMLL4对Web应用程序的贡献很小,比如:不允许同时上传多个文件. 解决方案:提供供Web应用程序使用的API

HTML5 与 HTML4 的区别(2) - 新增的元素和废除的元素

新增的结构元素 在 HTML5 中,新增了以下与结构相关的元素: section元素 section 元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.        它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标识文档结构. HTML5 中代码示例:        <section>....</section> HTML4 中代码示例:        <div>...</div> article元素 article 元

HTML5系列:HTML5与HTML4的区别

1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5中声明方法: <!DOCTYPE html> 1.2 字符编

HTML5 与 HTML4 的区别

1.DOCTYPE声明 <!DOCTYPE html> 刻意不使用版本声明,一份文档将会适用所有版本的HTML. 2.指定字符编码 <meta charset=UTF-8> 3.不允许写结束标记的元素 area base br col command embed hr img input keygen link meta param source track wbr 只允许使用 <元素/> 的形式进行书写 4.省略结束标记的元素 li dt dd p rt rp opt

HTML5新标签含义,用法及其与HTML4的区别

1.<article>: 定义独立的内容,如论坛帖子,博客条目,用户评论等内容. HTML5:<article></article> HTML4:<div></div> 浏览器支持: IE9+,Firefox,Chorme,Safari,Opera. 2.<aside>: 定义两栏或多栏的侧边栏内容,如联系我们,客服,网站公告,广告等内容. HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关.&l