HTML5与HTML4的比较

HHTML5封装一些标签和属性,方便了开发。

1     <form>
2         <p>
3             <label>Username:<input name="search" type="text" id="search" autofocus></label>
4         </p>
5     </form>

HTML5的方式获取输入焦点

1     <form>
2         <p>
3             <label>Username:<input name="search" type="text" id="search"></label>
4         </p>
5         <script type="text/javascript">
6             document.getElementById("search").focus();
7         </script>
8     </form>

HTML4的方式获取输入焦点

对于页面结构,HTML5将不同结构使用不同的标记进行区分,这点在HTML4的时候,基本上都用div标签,然后使用class属性进行区分

  • HTML5的出现是为了解决以下问题

浏览器之间的兼容性问题

文档结构不明确

Web应用程序功能受限

  • HTML5与HTML4在语法上的一些区别

1、DOCTYPE声明

2、指定字符集编码

HTML4:

<meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8">

HTML5:

<meta charset="UTF-8">

两种方式都能用,但不能混用

  • 可以省略标记的元素

不允许写结束标记:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略结束标记:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

可以完全省略标记:html、head、body、colgroup、tbody

  • 具有boolean值得属性

这些属性,只要写上了就比表示true,如:

<input checked type="checkbox">

还有readonly、disabled等

  • 新增结构元素

section:表示页面中的一个内容区块,如:章节、页眉、页脚等,可以与h1~h6元素结合使用,标示文档结构

article:标示页面中的一块与上下文不相关的独立内容,如博客中的一篇文章或报纸上的一篇文章

aside:标示article元素之外,但是相关的,辅助信息

header:页面中的一个内容区块或整个页面的标题

hgroup:对整个页面或页面中的一个内容区块的标题进行整合

footer:整个页面或页面中内容区块的脚注,一般包含作者的姓名、创作日期以及作者的联系方式的等

nav:页面中的导航链接

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

  • 其他新增元素

video:视频

audio:音频

embed:插入各种多媒体格式

mark:在视觉上需要高亮的文字

progress:表示运行中的进程,一般用于显示js耗时的时间函数

time:日期或时间

ruby:ruby注释,中文注音或字符

rt:字符的解释或发音

rp:在ruby注释中石油

wbr:软换行,当父级元素宽度不够的时候才换行

canvas:绘图的画布

command:命令按钮,如单选按钮、复选框、复选按钮

details:表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用

datalist:下拉列表,与input配合使用

datagrid:可选数据列表,树形列表的形式显示

keygen:生成密匙

output:表示不同类型的输出

source:为媒介元素定义媒介资源

menu:菜单列表

  • 新增的input类型,也就是input元素中,type的属性

email、url、number、range、date、month、week、time、datetime、datetime-local

对于新增的元素或属性,在使用前最好查阅一下浏览器的支持情况

  • 废除的元素

能够用CSS代替的一般都废除了,如 basefont、big、center、font、s、strike、tt、u等

不再使用frame框架:frameset、frame、noframes元素。因为frame框架对网页的可用性存在负面影响。HTML5中只支持iframe框架

  • 新增的表单属性

autofocus:自动获取焦点

placeholder:提示用户输入

form:声明属于哪个表单,然后可以放在页面的任何位置,不一定非要在表单内

required:表示是否必填

list:与datelist元素配合使用,生成下拉框

multiple:允许一次上传多个文件

其他属性详见HTML5

  • 全局属性

contentEditable:是否允许编辑元素内的内容

designMode:指定整个页面是否可编辑

hidden:隐藏

speelcheck:拼写检查

tabindex:tab获取焦点

<input tabindex="1"><input tabindex="2"><input tabindex="3">
时间: 2024-07-28 23:05:38

HTML5与HTML4的比较的相关文章

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 可以赋值为 aut

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 的区别(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的10个关键区别

HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站.如果你同时使用HTML4和HTML5的话,你会发现用HTML5从头构建,比从HTML4迁移到HTML5要方便很多.虽然HTML5没有完全颠覆HTML4,它们还是有很多相似之处,但是它们也有一些关键的不同.本文就列出了它们之间10个关键的不同之处. 1.HTML5标准还在制定中 首先要注意的是,HTML5虽然现在很火,但是HTML5标准还在制定中,标准仍在改变.HTML4已经10多年了,不会有任何改变了. 2.简化的语

HTML5和HTML4之间的区别

1.HTML头部 (1)HTML5: <!doctype html> (2)HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2.HTML编码 (1)HTML5: <meta charset="utf-8"> (2)HTML4: <meta http-equiv

轻量级 web 文件上传组件,纯js,html5、html4智能适配,支持上传进度显示(IE10+、标准浏览器)

老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能

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

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