HTML学习笔记

No.1 HTML页面的基本结构

  每个完整的网页都包含DOCTYPE、html、head和body元素。

No.2 元素

  HTML元素HTML标签（开始标签、结束标签）、元素名称、属性、值及其他组成。

HTML标签

  HTML标签使用“<”和“>”（即尖括号）来标识标签。
  HTML标签成组使用，包括开始标签（标记元素的开始）和结束标签（标记元素的结束）。

•   开始标签：放在一对尖括号中的元素的名称及可能包含的属性。
•   结束标签：放在一对尖括号中的斜杠加元素的名称。

      内容
开始标签│  结束标签
 ┌┴┐ ┌─┴─┐　┌┴┐
amazed

空元素

  HTML标签由元素、属性、值及其他组成。即开始标签与结束标签之间没有内容，此时可以表达为以下格式:

  即由左尖括号开头，然后是元素的名称和可能包含的属性，最后以一个可选的空格和一个可选的斜杠结束。

没有结束标签的元素：

  有的元素没有结束标签，如meta标签。

属性与值

test@sina.com

  此示例中，for即为属性，for=后面的"email"为属性的值。

•   属性总是位于元素的开始标签内。
•   一个元素可以有多个属性。
•   属性的顺序不重要。
•   不同的属性之间用空格分隔。
•   有的属性只接受特定的值，如link元素里的media属性只能设为all、screen、print等值中的一个。
•   有的属性的值为布尔值，布尔值的属性如果要表示为真时，直接写上属性的名称即可，不需要等于号及后面的值。如果一定要加上属性值也可以使用属性名称="属性名称"的格式，例如下面两种写法都对。

这两种写法都可以

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

1. 引用同一目录下的文件
    直接写文件名即可。
2. 引用当前目录子目录下的文件
    直接写下目录名称/文件名称即可。
3. 引用上层目录的文件
    使用../文件名或是../目录名/文件名，也可以使用../../的格式表达更上一层，以此类推，但尽量避免使用../../这样的形式。

根相对URL

  直接从根目录指明路径，如以下示例：

/img/family/vacation.jpg

  之所以说是相对URL是因为该URL中不包括模式名称及主机名称等内容。

No.4

  开始标签以上的内容都是为浏览器和搜索引擎准备的。

NO.5

  浏览器会把HTML代码中的文本内容里面的多个空格、制表符、回车符、换行符转换成单个空格，或是将它们一起忽略。

NO.6

  称为DOCTYPE，向浏览器声明这是一个HTML5页面，根据HTML版本的不同，该声明小写字母部分内容不同。
  DOCTYPE应该始终位于页面的第一行。

以下是HTML4版本的几种声明方法，供参考：

包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）


包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。


包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），允许框架集。

以下是几种XTML1.0的版本声明方法，供参考：

包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。


 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。


包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。


 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）,但允许添加模型（例如提供对东亚语系的 ruby 支持）。必须以格式正确的 XML 来编写标记。

NO.7 标签

  标记HTML页面的标题。
  这个标题不会显示在页面上。
  这个标题会显示在浏览器的标签页中或是浏览器窗口标题栏中。
  如果用户收藏这个页面，则收藏夹中显示的网页名称也是这个标题。
  标题会被搜索引擎采用，并将标题做为搜索结果中的链接显示。
  浏览器的历史记录中也会用该标题来标记访问过的网页。
  标签应该放在中，即标签应该是标签的子标签。
  一般认为是必需的，但实际测试中发现如果没有，网页也可以被浏览器识别，但标题会被个别浏览器显示为网页文件的文件名（本地）或是只显示主机名（远端）。

NO.8

  标记段落的开始与结束。

NO.9

  标签指定HTML代码的字符编码，如下面示例指定HTML代码使用utf-8字符编码：

  标签跟一样，应该作为标签的子标签放在中。

NO.10

  通常指明页面标题，提供为搜索引擎准备的关于页面本身的信息、加载样式表等，该元素中除了指定的内容，其他的内容均是在网页上不展示的。
  是的子元素。

NO.11

  中包含需要在网页上显示的内容，包括文本、图像、表单、视频、音频以及其他交互式内容，也就是网页访问者可以看见的内容。
  是的子元素。

NO.12

、

……

  标题。
  

为一级标题，

为二级标题，以此类推。
  默认情况下，浏览器会将所有的标题都以粗体显示，从

到

逐级减小标题的字号。但可以使用CSS来修改。所以标题最主要的作用是用来标记内容的层次，而非通过标题来实现显示格式。

lang属性

  标明标题中的文字是什么语言。例：

abcd

NO.13

  区别于元素。
  定义文档的页眉或是页头，通常包括网站标志、主导航、甚至搜索框等。除此外也适合对页面中某一个部分的介绍性或导航性内容进行标记。例如：一个区域的目录。
  此标签为HTML5中的新标签。

role属性

  

role="banner"显式指出该页眉为页面级页眉。例如：

……

  不能在

中嵌套

元素或另一个

,也不能在

或

元素里嵌套

NO.14

  

标签定义导航链接的部分。
  应该仅对文档中重要的链接群使用

.
  HTML5不允许将

嵌套在

元素中。
  

标签是 HTML 5 中的新标签。

参考资料

• 《HTML5与CSS3基础教程》（第8版）　人民邮电出版社出版发行
•  http://www.w3school.com.cn/index.html
  `