学习笔记之HTML5基本语法

最新推荐文章于 2024-06-18 21:14:33 发布

天然呆ftt

最新推荐文章于 2024-06-18 21:14:33 发布

阅读量300

点赞数

文章标签： HTML5 HTML4 HTML5语法

1. 内容类型

HTML5的文件扩展符和内容类型与HTML4一样，没有变，扩展符仍然为“htm”或“.html”，内容类型，也就是ContentType为“text/html”。

2.文档声明类型

HTML5对文档类型和字符说明都进行了简化。HTML文件中DOCTYPE是必不可少的，<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

DOCTYPE在HTML4中的声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE在HTML5中的声明：

<!DOCTYPE html>

3. 字符编码

meat元素在HTML4和HTML5中所指定文件中的字符编码方式都不同。

在HTML4中，使用meat元素的形式指定文件中的字符编码：

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

在 HTML5 中，可以使用对 <meta> 标签直接追加 charset 属性的方式来指定字符编码：

<meta charset="UTF-8">

两种方法都有效，可以继续使用前面那种方式（通过 content 属性来指定），但是不能同时混合使用两种方式，在以前的 HTML 代码中可能会存在下面代码所示的标记方式，但在 HTML5 中，这种字符编码方式将被认为是错误的：

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

注意：从 HTML5 开始，对于文件的字符编码推荐使用 UTF-8。

4. 版本兼容性

4.1 可以省略标记的元素

HTML5 中，标签的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个标签清单，其中包括 HTML5 中的新标签。

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

可以省略结束标记的标签有：
li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

可以省略全部标记的标签有：
html、head、body、colgroup、tbody。

“不允许写结束标记的标签”是指，不允许使用开始标记与结束标记将标签括起来的形式，只允许使用“<标签/>”的形式进行书写。例如“ ...”的书写方式是错误的，正确的书写方式为“ ”。当然，HTML5之前的版本中 这种写法可以被沿用。

“可以省略全部标记的标签”是指，该标签可以完全被省略。请注意，即使标记被省略了，该标签还是以隐式的方式存在的。例如将body标签省略不写时，但它在文档结构中还是存在的，可以使用document.body进行访问。

4.2 具有boolean值的属性

对于具有boolean值的属性，例如： disabled 与 readonly 等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设为flase，可以不使用该属性。另外，要想将属性值设为true时，也可以将属性名设定为属值，或将空字符串设定为属性值。属性值的设定方法可以参考下面的示例：

<!--属性值=空字符串，代表属性为true-->

<input type="checkbox" checked=" ">

<!--属性值=属性名，代表属性为true-->

<input type="checkbox" checked="checked">

<!--不写属性，代表属性为false-->

<input type="checkbox">

<!--只写属性，不写属性值代表属性为true-->

<input type="checkbox" checked>

4.3 省略引号

在之前的 HTML 版本中，大家已经知道，指定属性值的时候，属性值两边既可以用双引号，也可以用单引号。HTML5 在此基础上做了一些改进，当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时，属性值两边的引号可以省略。如：

<input type="text">

<input type='text'>

<input type=text>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 基本语法</title>
</head>
<body>
    <p>这是根据HTML5语法，写出来的

   <br/>代码段。
</body>
</html>

① 该代码段用的就是 HTML5 ；

② DOCTYPE申明使用了 HTML5 支持的简洁申明方式；

③ 包含了基本的<html>、<head>、<body>开始标签和结束标签；

④ 用<meta>标签的 charset 属性指定字符编码（UTF-8）；

⑤ 省略了标签的结束标记；

⑥ 使用 的方式来结束<br>标签。