HTML标记与文档结构

1.1 HTML标记基础

内容标记包括闭合标签和非闭合标签。

1.1.1 文本用闭合标签

闭合标签基本格式和属性：

<标签名 属性1="属性值" >文本内容</标签名>

闭标签比开标签多一个斜杠。

1.1.2 引用内容够用自闭和标签

<标签名 属性1="属性值" />
<img src="images/cisco.jpg" />

1.1.3 属性

src: source，来源， cisco.jpg

alt: (alternative，替代内容)

块级标签
<h1>-<h6>:6级标签，h1表示最重要
<p>:段落
<ol>:有序列表
<li>:列表项
<blockquote>:独立引用
行内标签
<a>:链接(anchor,锚)
<img>:图片
<em>:斜体
<strong>:重要
<abbr>:简写
<cite>:引证
<q>:文本内引用

1.1.4 标题与段落

<h1>不仅是最大最突出的标题，搜索引擎也将其视为仅次于title的另一个关键词来源。
<p>是所有文本元素出场率最高的一个。

1.1.5 复合元素

创建列表，表格，表单等复杂用户界面组件就是复合元素。

多标签组成，例如<li>:

1.1.6 嵌套标签

父子关系形成

<p>That car is <em>fast</p>.</em>

1.2 HTML文档剖析

1.2.1 HTML模板

HTML5语法编写最简单的页面模板：

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

第一行DOCTYPE表示以下是一个HTML文档。
<html>所谓的根级标签，只有两个子标签：<head><body>
<head>中包含<meta>和<title>两个标签
<meta>的charset属性表示页面使用UTF-8编码
<title>表示浏览器窗口的标题
<body>中包含标题，段落，链接，图片等标签

1.2.2 块级元素和行内元素

几乎所有HTML元素的display属性值要么是block,要么是inline.

table元素例外。

块级元素会相互堆叠在一起沿页面向下排列，每一个元素分别占一行。

行内元素则会相互并列，只有在空间不足时才会折到下一行。

很熟悉了，不演示了。

1.3 文档对象模型

通过例子理解DOM:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><section><h1>文本对象模型</h1><p>页面的HTML标记结构定义了DOM。</p></section>
</body></html>