HTML5基础前言

HTML5是新的HTML标准,是对HTML和XHML的继承和发展。学习HTML5首先需要了解HTML5的语法基础。本章将围绕HTML5文档基本格式、HTML5语法来进行讲解。

HTML5文档基本格式

下面是HTML5最基本的代码结构:

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>

html5从入门到精通第二十课(初识HTML5二)(1)

1.<!doctype>标记

<!doctype>标记位于文档的最前面,用于向浏览器说明当前文档使用哪种HTML标准规范。只有在开头使用<!doctype>声明,浏览器才能将该网页作为有效的HTML文档,并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明,会触发浏览器以标准兼容模式来显示页面。

2.<html>标记

<html>标记位于<!doctype>标记之后,也称为根标记,用于告知浏览器其自身是一个HTML文档。<html>标记标志着HTML文档的开始,</html>标记表示HTML文档的结束。他们之间是文档的头部和主体内容。

3.<head>标记

<head>标记用于定义HTML文档的头部信息,也称头部标记,是用来封装其他位于文档头部标记的标记,如:<meta>、<title>、<link>、<style>、<script>标记等。上面的代码中,<meta>标记的属性charset指的是文档的字符编码,“utf-8”表示国际通用字符编码。<title>标记用于告诉用户这个页面是什么,如:百度页面,在浏览器导航栏的最上方百度所属页面,会有一个百度的标题。<link>标记一般用来引入外部的CSS文件。<style>标记用来包裹与html标签对应的CSS样式,通常与选择器结合起来使用。<script>标记用于引入外部的JavaScript(js)文件,如果<script>标记位于<body>标记中,就可以将js代码写在<script>标记中。

注意:一个HTML文档中只能包含一对<head>标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

部分标记会在下一章节进行详细解释

4.<body>标记

<body>标记用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内,<body>标记中的内容才是最终展示给用户看的。

一个HTML文档只能包含一对<body>标记,且必须位于<html>标记内部,<head>标记的后面,与<head>标记是并列关系。

HTML5语法

1.标签不区分大小写

为了兼容各个浏览器,HTML5采用宽松的语法格式,标签可以不区分大小写就是HTML5语法变化的重要体现

<p>开始标记的p标记小写,结束标记的p标记大写</P>

html5从入门到精通第二十课(初识HTML5二)(2)

上面的代码标签的开始和结束标签大小写虽然不同,但它是符合HTML5语法的规范的。

2.允许属性值不使用引号

在HTML5中,属性值不放在引号中也是正确的,如:

<input type=text readonly=readonly/> <input type=checkbox checked=a/>

html5从入门到精通第二十课(初识HTML5二)(3)

这段代码等价于:

<input type="text" readonly="readonly"/> <input type="checkbox" checked="a"/>

html5从入门到精通第二十课(初识HTML5二)(4)

3.允许部分属性值的属性省略

在HTML5中,部分标志性的属性的属性值是可以省略的,如:

<input type="text" readonly="readonly"/> <input type="checkbox" checked="checked"/>

html5从入门到精通第二十课(初识HTML5二)(5)

可以省略为:

<input type="text" readonly/> <input type="checkbox" checked/>

html5从入门到精通第二十课(初识HTML5二)(6)

下面是一张关于HTML5可以省略属性值的属性表:

html5从入门到精通第二十课(初识HTML5二)(7)

提示:虽然HTML5对于语法的规范不是很严格,但是个人建议,标签采用小写,引号加上,这两点是为了让页面看起来美观,也是为了方便后面页面编写出错时找错。

,