HTML标记与文档结构-EW帮帮网

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>

类似于家族树结构图表示

section是h1和p的父元素，也是直接祖先元素。
h1和p是section的子元素，也是直接后代元素。
h1和p是同胞元素，也有共同的父元素。
section、h1 和p 是body 的后代元素，或者下面的元素（嵌套在后者的内部）。
section 和body 是h1 和p 的祖先元素，或者上面的元素（在某一层次上包含后者）。

通过HTML标记来构建DOM,页面初次加载和用户与页面交互时，使用CSS修改DOM。

HTML标记与文档结构