01HTML5 与HTML4的区别、代码规范和新特性

最新推荐文章于 2023-05-16 10:30:22 发布

远近2021

最新推荐文章于 2023-05-16 10:30:22 发布

阅读量370

点赞数 1

分类专栏： # html5学习 htmlcss学习园地文章标签： html5

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119549851

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 6 订阅

订阅专栏

html5学习

16 篇文章 2 订阅

订阅专栏

文章目录

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 特性。

远近2021

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
01HTML5 与HTML4的区别、代码规范和新特性

文章目录1、HTML5 代码规范HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。1、HTML5 代码规范使用正确的文档类型文档类型声明位于 HTML 文档的第一行：可以省略 html 和 body 标签但不推荐在标准 HTML5 中， <html> 和 <body> 标签是可以省略的，比如下面的写法也是正确的：<!DOCTYPE html>&l
复制链接

扫一扫