WEB前端之HTML5~HTML5与HTML4的区别
推出的理由及目标！
HTML5的出现，对于WEB来说意义是非常重大的，因为他的意图是想要把目前WEB上存在的各种问题一并解决掉了。
WEB浏览器存在的问题包括以下三点
WEB浏览器之间的兼容性很低
在某个WEB浏览器上可以正常运行的HTML5、CSS、JavaScript等WEB程序，在另一个WEB浏览器上就不一定能正常运行了。导致这种问题的主要原因就是规范不统一，没有被标准化。在HTML5中，这个问题被解决了。HTML5的使命是详细分析各WEB浏览器 所具有的功能，然后以此为基准，要求这些浏览器内部的功能都要符合一个通用标准。
文档结构不够明确
在HTML5之前的HTML版本中，文档结构不够明确、清晰。例如为了要表示标题、正文、之前一般都会使用DIV元素，但是严格来说，DIV元素不是一个能把文档结构表示的很清楚的元素，使用过多会导致阅读时不仔细研究或者很难去看出文档结构，而且对于搜索引擎或者屏幕阅读等等应用程序来说，过多的使用DIV元素，那这些程序从哪到哪算是正文都很难确定。在HTML5中，为了解决这个问题，增加很多和结构相关的元素。
WEB应用程序的功能受到限制
HTML5与WEB应用程序的关系十分薄弱，WEB应用程序的特征是先从网络下载，然后忠实的运行。因此，他会对威胁到用户安全的功能进行限制，目前安全性的保障这方面已经做到了。但是对于WEB应用程序来说，一直以来HTML5真正所做出的贡献是很少的。例如 就连想同时上传多个文件都不允许。为了弥补这方便的不足，HTML5已经开始提供各种各样的WEB应用上的新API。各浏览器也在快速封装这些API。 HTML5已经丰富了WEB应用的实现变成了可能。
世界知名浏览器厂商对HTML5的支持
- 微软的IE<分两个阶段IE9以上支持HTML5>
- Google的Chrome
- 苹果的Safari
- Opera
- Mozilla Firefox
语法的改变！
DOCTYPE的声明
在传统的HTML中DOCTYPE的声明方式比较繁琐，不容易记住，具体看以下代码。
XHTML的DOCTYPE声明方式
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML的DOCTYPE声明</title>
</head>
<body>
</body>
</html>HTML4的DOCTYPE声明方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML4的DOCTYPE声明</title>
</head>
<body>
</body>
</html>HTML5 的DOCTYPE声明方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5的DOCTYPE声明</title>
</head>
<body>
</body>
</html>把以上代码相比较可以看出，HTML5相对于其他版本的HTML的DOCTYPE声明更简单，直观。
内容类型
HTML5的文件扩展符和内容类型保持不变，也就是说，扩展名依然为html或者htm，内容类型也依然是 text/html。
指定字符编码
在HTML4中 编码需要有很多的声明，但在HTML5中，写法变得非常简单，我们来看一下代码
<!--示例代码-->
<meta charset="UTF-8">可以省略标记的元素
在HTML5中，元素的标记是可以省略的，他有很多元素都是可以省略的，后边会讲解到。
具有Boolean值的属性
对于具有boolean类型值的属性，例如：disable，readonly等，当这些属性不指定属性值的时候，代表true，如果想要将属性值设置为false，可以不写该属性。如果想要将属性值设置为true时，也可以将属性名设置为属性值,或者直接设置为空。具体看以下代码
<!--示例代码-->
<input type = "checkbox" checked=""> <!--true-->
<input type = "checkbox" checked="checked"> <!--true-->
<input type = "checkbox" checked> <!--true-->
<input type = "checkbox" > <!--false-->省略引号
我们知道，在设置属性值的时候得写一个双引号，在HTML5中，是可以省略引号的，如果是单引号也是可以省略的。具体看以下代码
<!--示例代码-->
<input type = "checkbox" checked=checked>新增的元素
新增的结构元素（section、article、aside、header、hgroup、footer、nav、figure）
新增的其他元素（video、audio、embed、mark、 progress、 meter、time、ruby、rt、rp、wbr、canvas、command、details、datagrid、keygen、output、source、menu）
新增的input元素的类型（email、url、number、range、Date Pickers）
废除的元素
能使用CSS代替的元素（basefont、big、center、font、s、tt、u）等等
不再使用frame框架
只有部分浏览器支持的元素
其他被废除的元素
新增的属性
表单相关的属性
链接相关的属性
其他属性
废除的属性（比较多，以后发个表）
全局属性（指可以对任何元素都使用的属性）
contentEditable属性
主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获取到鼠标焦点的元素，而且在点击鼠标后向用户插入一个提示符号，提示该元素允许用户编辑，boolean类型，true代表可编辑，false代表不可编辑，未指定true/false时，则由状态制定。
<!-- 示例代码 -->
<h2>可编辑列表</h2>
<ul contenteditable="">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>运行结果图如下：
designMode属性
用来指定整个页面是否可编辑，当 页面可编辑时，页面中任何支持上下文所属的contentEditable属性都是可编辑的。designMode属性只能在js脚本中被修改编辑。属性值有on、off。被指定为on时，页面可编辑，指定为off时，页面不可编辑！
hidden属性
使该元素不可见，可以使用js来修改该元素的属性，当元素属性为true的时候，该元素可见，反之，则不可见。
<!--示例代码-->
<h2>可编辑列表</h2>
<!-- 运行结果可以发现ul元素被隐藏了 -->
<ul hidden="">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>spellcheck属性
HTML5针对input元素与textarea文本输入框提供的新属性，主要功能是对于用户输入的内容进行拼写和语法检查。
<!--示例代码-->
<input type="text" spellcheck="">运行结果如下图：
tabindex属性
开发中的一个基本概念，当不断敲tab键让窗口或页面中的控件获得焦点，对窗口页面中的所有控件进行遍历，每个控件的tabindex表示该控件是第几个被访问到的。一般情况下，只有链接元素和表单元素可以通过摁tab键获取焦点。
<!--示例代码-->
<a tabindex="1">I</a>
<a tabindex="3">need</a>
<a tabindex="2">you</a>
<!-- 运行以上代码,摁下tab键，会依次选中 I you need -->
<ul tabindex = "-1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--上边的代码可以在程序中获取到tabindex，但是运行中不能通过tab键获取焦点-->运行结果图：
WEB前端之HTML5~HTML5与HTML4的区别的更多相关文章
- 8个web前端的精美HTML5 & CSS3效果及源码下载
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- web前端开发和后端开发有什么区别？
web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...
- 超炫酷web前端的jQuery/HTML5应用搜罗
作为前端开发者,我们肯定都使用过非常多的jQuery插件,毋庸置疑,jQuery非常流行,尤其是结合HTML5和CSS3以后,让这些jQuery插件有了更多地动画效果,更为绚丽多彩. 1.HTML5/ ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别
通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...
- 整理六百篇web前端知识混总
9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...
- 2019最新WEB前端开发小白必看的学习路线(附学习视频教程)
2019最新WEB前端开发小白必看的学习路线(附学习视频教程).web前端自学之路:史上最全web学习路线,HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次 ...
- 1+x证书Web前端开发CSS3详细教程
web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...
- Web前端开发的就业前景怎么样，薪资待遇如何
信息技术的迅速发展,使IT技术者们赶上了一个百年难遇的好机会,尤其是国家出台了“互联网+”的政策后,更是催生了IT行业的就业空间,使其呈现爆发性增长. 如今,微信逐渐成为了大家主要的交流工具,随着各种 ...
- Java与Web前端发展前景及薪资对比
Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...
随机推荐
- 【题解】51nod 1203JZPLCM问题
这题好强强啊,貌似是集训队原题?集训队原题当中值域是1e9的范围,这样各种乱搞是妥妥的不能过了,只能写正解的离线+树状数组维护前缀积. 最开始我写了几种乱搞做法,包括莫队和线段树做法.其中表现比较优秀 ...
- Android 解决setRequestedOrientation之后手机屏幕的旋转不触发onConfigurationChanged方法
最近在做播放器的时候遇到一个问题,在屏幕方向改变之后需要切换播放器全屏/非全屏的时候,在重写了onConfigurationChanged方法并在manifest.xml配置文件中添加 android ...
- HDU.2640 Queuing (矩阵快速幂)
HDU.2640 Queuing (矩阵快速幂) 题意分析 不妨令f为1,m为0,那么题目的意思为,求长度为n的01序列,求其中不含111或者101这样串的个数对M取模的值. 用F(n)表示串长为n的 ...
- 从零开始学Linux系统（一）之引导流程解析
Linux系统:分时多用户多任务的操作系统: Linux系统引导流程: inittab配置文件中: 定义了linux系统的运行的7个级别:从0~6 0.6:分别代表关机和重启,不建议设置为默认的运行级 ...
- [辅助软件] 微信小程序开发资源汇总 接入指南
https://github.com/justjavac/awesome-wechat-weapp https://github.com/justjavac/awesome-wechat-weapp ...
- anroid 6.0.1_r77源码编译
一.源码下载(基本类似4.4.4_r1) 二.必须使用openjdk1.7 sudo add-apt-repository ppa:openjdk-r/ppa sudo apt-get update ...
- linux 使用vim文件加密/解密的方法
一. 利用 vim/vi 加密:优点:加密后,如果不知道密码,就看不到明文,包括root用户也看不了:缺点:很明显让别人知道加密了,容易让别人把加密的文件破坏掉,包括内容破坏和删除: vi编辑器相信大 ...
- Unresolved import *** (models) error on Eclipse
Eclipse version: Oxygen.2 Release (4.7.2) Python version: 3.6 问题:系统提示:from django.db import models 语 ...
- bzoj 4402 Claris的剑 组合数学
Claris的剑 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 375 Solved: 213[Submit][Status][Discuss] D ...
- 2017 济南综合班 Day 2
木棍(stick) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有很多木棍,具体的,总共有n根,且每根木棍都有一个长度.为了方便起见,我们可以用一个正 ...