文章目录
- 1、什么是`HTML5`?
- 2、HTML4和HTML5有什么区别?
- 3、HTML5 代码规范
- 4、新特性
1、什么是HTML5?
HTML5
是HTML
的最新版本,HTML
文档的最新标准,它是W3C
与WHATWG
合作的结果。HTML5
继承了原先HTML
的部分特征,添加了许多新的语法特征,⽐如语义特性、本地存储特性、设备兼容特性、连接特性、⽹⻚多媒体特性等。修改或删除了一些旧的属性元素。
2、HTML4和HTML5有什么区别?
(1)HTML4
中元素不能把⽂档结构表示清楚,在HTML5
中增加了与结构相关的元素,使得⽂档结构更加清晰,结构更加语义化。
(2)HTML4
在Web
应⽤程序的功能受到限制,⽐如:不允许同时上传多个⽂件,HTML5
提供了web应⽤程序使⽤的API
。
(3)DOCTYPE
声明变化:HTML4
中需要指明是HTML
的哪个版本,HTML5
不需要,只需要< !DOCTYPE html>
即可。
HTML4 Strict
严格定义类型:该 DTD
不允许使⽤展示性的和弃⽤的元素(⽐如 font
)和框架集(Framesets
)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML4 Transitional
过渡定义类型:该 DTD
允许使⽤展示性的和弃⽤的元素(⽐如 font
)。不允许框架集(Framesets
)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
-
HTML4 Frameset
框架定义类型:该DTD
等同于HTML Transitional
,但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
(4)指定字符编码变化
HTML4:< meta http-equiv="content-type" content="text/html;charset=UTF-8">
HMLT5: < meta charset="UTF-8">
(5)新增的元素和废除的元素
- 新增结构元素:
section
、header
、footer
等 - 新增其他元素:
video
、audio
、canvas
等 - 新增
input
元素的类型:email
、url
、number
、range
等 - 废除的元素:
basefont
、font
、center
、big
等 - 不再使⽤
frame
框架:如frameset
、frame
等 - 新增⼀些元素的属性,如
contentEditable
、designMode
、hideen
、tabindex
等。
3、HTML5 代码规范
使用正确的文档类型
文档类型声明位于 HTML 文档的第一行:
可以省略 html 和 body 标签但不推荐
在标准 HTML5 中, <html>
和 <body>
标签是可以省略的,比如下面的写法也是正确的:
<!DOCTYPE html>
<head>
<title>页面标题</title>
</head>
<h1>我是标题</h1>
<p>我是段落。</p>
但是不推荐省略掉,建议还是写成下面这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落。</p>
</body>
</html>
使用小写元素名HTML5
元素名可以使用大写和小写字母,建议使用小写字母,会显得更加好看一点,千万不要使用大小写混写,那样会显得很不专业。建议的写法如下:
<section>
<p>我是段落。</p>
</section>
关闭所有 HTML 元素
在 HTML5
中, 你不一定要关闭所有元素 (例如 <p>
元素),但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错:
<section>
<p>我是段落甲。
<p>我是段落乙。
</section>
建议写成下面这样:
<section>
<p>我是段落甲。</p>
<p>我是段落乙。</p>
</section>
关闭空的 HTML 元素
在 HTML5
中, 空的 HTML
元素也不一定要关闭,我们可以这样写:
<meta charset="utf-8">
建议的写法是还是关闭:
<meta charset="utf-8" />
使用小写属性名
同样的 HTML5
属性名允许使用大写和小写字母。但是我们依然建议使用小写字母:
<div class="test"></div>
属性值HTML5
属性值可以不用引号。但是属性值我们推荐使用引号,尤其是属性值有空格的话,一定要使用引号,不然不会起作用,属性的命名如果很长我们建议使用驼峰命名法:
<div class="test changeColor"></div>
图片属性
图片通常使用 alt
属性。 在图片不能显示时,它能替代图片显示。建议定义好图片的尺寸,在加载时可以预留指定空间,减少闪烁。比如:
<img src="test.png" alt="HTML5" style="width:520px;height:1314px" />
空格前后的等号
等号的前后可以使用空格,也可以不使用,推荐少用空格。
<link rel="stylesheet" href="styles.css" />
避免一行代码过长
使用 HTML 编辑器,一行代码过长时左右滚动代码来查看是不方便的。如果实在太长,建议分为几行来写。
空格和缩近
不要无缘无故的添加空行,一般一个模块或一个功能添加一个空行便于区分,缩进使用两个空格,不建议使用 Tab
。
注释
<!-- 这是注释 -->
快捷键为 Ctrl + /。当然我们首先要选中要注释的代码再使用快捷键。
注:编码风格建议统一,不要乱而杂,另外建议大家养成多写注释的习惯,因为时间久了,如果没有注释,可能你自己都不知道自己当初写的是啥。
4、新特性
- 语义特性:HTML5 新标准中添加了拥有具体含义的 HTML标签比如:
<article>
、<footer>
、<header>
、<nav>
、<section>
。 - 连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线缓存:对本地离线存储的更好的支持。
- 视频和音频支持:用于媒介回放的 video 和 audio 元素。
- 用于绘画的 canvas 元素。
- 性能与集成特性:提供了非常显著的性能优化和更有效的计算机硬件使用。
- 跨平台:设备兼容特性:能够处理各种输入和输出设备。
- CSS3 特性。