No.1 HTML页面的基本结构
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8"/>
<title>Your page title</title>
</head>
<body>
</body>
</html>
每个完整的网页都包含DOCTYPE、html、head和body元素。
No.2 元素
HTML元素HTML标签（开始标签、结束标签）、元素名称、属性、值及其他组成。
HTML标签
HTML标签使用“<”和“>”（即尖括号）来标识标签。
HTML标签成组使用，包括开始标签（标记元素的开始）和结束标签（标记元素的结束）。
- 开始标签：放在一对尖括号中的元素的名称及可能包含的属性。
- 结束标签：放在一对尖括号中的斜杠加元素的名称。
内容
开始标签│ 结束标签
┌┴┐ ┌─┴─┐ ┌┴┐
<em>amazed</em>
空元素
HTML标签由元素、属性、值及其他组成。即开始标签与结束标签之间没有内容，此时可以表达为以下格式:
<img src="abc.jpg" width="300" height="200" alt="Blue flax" />
即由左尖括号开头，然后是元素的名称和可能包含的属性，最后以一个可选的空格和一个可选的斜杠结束。
没有结束标签的元素：
有的元素没有结束标签，如meta标签。
属性与值
<label for="email">test@sina.com</label>
此示例中，for即为属性，for=后面的"email"为属性的值。
- 属性总是位于元素的开始标签内。
- 一个元素可以有多个属性。
- 属性的顺序不重要。
- 不同的属性之间用空格分隔。
- 有的属性只接受特定的值，如
link元素里的media属性只能设为all、screen、print等值中的一个。 - 有的属性的值为布尔值，布尔值的属性如果要表示为真时，直接写上属性的名称即可，不需要等于号及后面的值。如果一定要加上属性值也可以使用
属性名称="属性名称"的格式，例如下面两种写法都对。
<input type="email" name="emailaddr" required />
<input typ=="email" name="emailaddr" required="required" />
这两种写法都可以
NO.3 URL引用
URL格式
http://www.site.com/tofu/index.html
-
http模式，除了http还有HTTPS、FTP和mailto.
注意，使用mailto模式时，格式与其他的略有不同，不需要//分隔符。示例如下：
mailto:test@sina.com
-
://模式与主机名称之间的分隔符。 -
www.site.com主机名称。 -
/主机名称与路径、路径目录文件之间的分隔符。 -
tofu/index.html路径
绝对URL
引用其他Web服务器上的文件时，应该总使用绝对路径。
相对URL
- 引用同一目录下的文件
直接写文件名即可。 - 引用当前目录子目录下的文件
直接写下目录名称/文件名称即可。 - 引用上层目录的文件
使用../文件名或是../目录名/文件名，也可以使用../../的格式表达更上一层，以此类推，但尽量避免使用../../这样的形式。
根相对URL
直接从根目录指明路径，如以下示例：
/img/family/vacation.jpg
之所以说是相对URL是因为该URL中不包括模式名称及主机名称等内容。
No.4
<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。
NO.5
浏览器会把HTML代码中的文本内容里面的多个空格、制表符、回车符、换行符转换成单个空格，或是将它们一起忽略。
NO.6 <!DOCTYPE html>
<!DOCTYPE html>称为DOCTYPE，向浏览器声明这是一个HTML5页面，根据HTML版本的不同，该声明小写字母部分内容不同。
DOCTYPE应该始终位于页面的第一行。
以下是HTML4版本的几种声明方法，供参考：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd">
包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），允许框架集。
以下是几种XTML1.0的版本声明方法，供参考：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）,但允许添加模型（例如提供对东亚语系的 ruby 支持）。必须以格式正确的 XML 来编写标记。
NO.7 <titile></title>标签
标记HTML页面的标题。
这个标题不会显示在页面上。
这个标题会显示在浏览器的标签页中或是浏览器窗口标题栏中。
如果用户收藏这个页面，则收藏夹中显示的网页名称也是这个标题。
标题会被搜索引擎采用，并将标题做为搜索结果中的链接显示。
浏览器的历史记录中也会用该标题来标记访问过的网页。
<title></title>标签应该放在<head></head>中，即<title></title>标签应该是<head></head>标签的子标签。
一般认为<title></title>是必需的，但实际测试中发现如果没有<title></title>，网页也可以被浏览器识别，但标题会被个别浏览器显示为网页文件的文件名（本地）或是只显示主机名（远端）。
NO.8 <p></p>
标记段落的开始与结束。
NO.9 <meta>
<meta>标签指定HTML代码的字符编码，如下面示例指定HTML代码使用utf-8字符编码：
<meta charset="utf-8" />
<meta>标签跟<title></title>一样，应该作为<head></head>标签的子标签放在<head></head>中。
NO.10 <head></head>
通常指明页面标题，提供为搜索引擎准备的关于页面本身的信息、加载样式表等，该元素中除了<title></title>指定的内容，其他的内容均是在网页上不展示的。
<head></head>是<html></html>的子元素。
NO.11 <body></body>
<body></body>中包含需要在网页上显示的内容，包括文本、图像、表单、视频、音频以及其他交互式内容，也就是网页访问者可以看见的内容。
<body></body>是<html></html>的子元素。
NO.12 <h1></h1>、<h2></h2>……<h6></h6>
标题。
<h1></h1>为一级标题，<h2></h2>为二级标题，以此类推。
默认情况下，浏览器会将所有的标题都以粗体显示，从<h1>到<h6>逐级减小标题的字号。但可以使用CSS来修改。所以标题最主要的作用是用来标记内容的层次，而非通过标题来实现显示格式。
lang属性
标明标题中的文字是什么语言。例：
<h2 lang="lang="zh-cmn-Hans">abcd</h2>
NO.13 <header></header>
区别于<head></head>元素。
定义文档的页眉或是页头，通常包括网站标志、主导航、甚至搜索框等。除此外也适合对页面中某一个部分的介绍性或导航性内容进行标记。例如：一个区域的目录。
此标签为HTML5中的新标签。
role属性
<header></header><header></header>role="banner"显式指出该页眉为页面级页眉。例如：
<header role="banner">
……
</header>
不能在<header>中嵌套<footer>元素或另一个<header>,也不能在<footer>或<address>元素里嵌套<header>
NO.14 <nav></nav>
<nav> 标签定义导航链接的部分。
应该仅对文档中重要的链接群使用<nav>.
HTML5不允许将<nav>嵌套在<address>元素中。
<nav> 标签是 HTML 5 中的新标签。
参考资料
- 《HTML5与CSS3基础教程》（第8版） 人民邮电出版社出版发行
-
http://www.w3school.com.cn/index.html
`
网友评论