对于HTML5 的一些总结与实践



title: 对于HTML5特性的一些总结与实践
toc: true
categories: Front-end web
tags:

  • Html5
    description: >-
该文章总结了 HTML5 发生的变化,并结合实践介绍了:代码规范、表单、Canvas API、视频音频与拖放、Web Storage 和 文件上传等 HTML5 的特性。 date: 2021-8-5 abbrlink: '11e0'

简介

引言

HTML5 是 HTML 文档的最新标准,由万维网联盟(W3C)于 2014 年 10 月完成标准制定。它添加了一些新的语法特征,修改或删除了一些旧的属性元素。在本节中,我们将总览 HTML5 的新变化,HTML5 文档、HTML5 新特性等。

知识点

  • HTML5 代码规范
  • HTML5 的改变

在接下来我们将深入 HTML5 的各个新特性,了解它们的用途,掌握它们的语法,最终达到熟练使用 HTML5 的目标

代码规范

正确的文档类型

文档类型声明位于 HTML 文档的第一行:


可省略部分标签,但不推荐

在标准 HTML5 中,  和  标签是可以省略的,比如下面的写法也是正确的:



  页面标题


我是标题

我是段落。

但是不推荐省略掉,建议还是写成下面这样:



  
    
    
  
  
    

我是标题

我是段落。

使用小写元素名

HTML5 元素名可以使用大写和小写字母,建议使用小写字母,会显得更加好看一点,千万不要使用大小写混写,那样会显得很不专业。建议的写法如下:

我是段落。

关闭所有HTML元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 

 元素),但是建议每个元素都要添加关闭标签。比如下面这样写也不会报错:

我是段落甲。

我是段落乙。

建议写成下面这样:

我是段落甲。

我是段落乙。

关闭空HTML元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭,我们可以这样写:


建议的写法是还是关闭:


使用小写属性名

同样的 HTML5 属性名允许使用大写和小写字母。但是我们依然建议使用小写字母:

属性值

HTML5 属性值可以不用引号。但是属性值我们推荐使用引号,尤其是属性值有空格的话,一定要使用引号,不然不会起作用,属性的命名如果很长我们建议使用驼峰命名法:

图片属性

图片通常使用 alt 属性。 在图片不能显示时,它能替代图片显示。建议定义好图片的尺寸,在加载时可以预留指定空间,减少闪烁。比如:

HTML5

空格前后的等号

等号的前后可以使用空格,也可以不使用,推荐少用空格。


避免一行代码过长

使用 HTML 编辑器,一行代码过长时左右滚动代码来查看是不方便的。如果实在太长,建议分为几行来写。

空格和缩近

不要无缘无故的添加空行,一般一个模块或一个功能添加一个空行便于区分,缩进使用两个空格,不建议使用 Tab。

注释


快捷键为 Ctrl + /。当然我们首先要选中要注释的代码再使用快捷键。

注:编码风格建议统一,不要乱而杂,另外建议大家养成多写注释的习惯,因为时间久了,如果没有注释,可能你自己都不知道自己当初写的是啥。

HTML5 的改变

HTML5 是 HTML 最新的修订版本,由万维网联盟(W3C)于 2014 年 10 月完成标准制定。目标是取代 1999 年 所制定的 HTML 4.01 和 XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到匹配当代的网络需求。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

HTML5 添加了许多新的语法特征,其中包括  和  元素,同时集成了 SVG 内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如 

 和