第2章 HTML基础

第2章 HTML基础

本章要内容包括：

通过本章的学习，掌握HTML文档结构、常用HTML元素，学会使用HTML元素制作简单网页。

HTML文档的结构

HTML中的基本元素

HTML中的容器元素

Dreamweaver对网页编辑的辅助作用

1、HTML的概念

HTML(Hypertext Markup Language) 超文本标记语言

HTML 不是一种编程语言，而是一种页面描述型的标记语言

HTML以标记(tag)的形式描述网页中的内容和结构

HTML文件的扩展名为.html或.htm

HTML文件在Web浏览器中的表现形式称为Web页面(网页)。

了解html语言的发展史

2、HTML编辑方式

HTML文档是普通的文本文件，它可以用任意文本编辑器，如：windows中的记事本notepad、notepad++,Sublime Text、UltraEdit或Editplus等来完成。

网页制作的过程可以通过直接书写HTML代码来完成，也可以使用可视化工具，如：Dreamweaver, SharePoint Designer等。

3、HTML文档的基本结构

HTML文档的基本结构包括头部（head）、主体（body）两大部分。其中，头部描述浏览器、搜索引擎等所需的信息，而主体则包含HTML文档的具体内容。

HTML 文档是由 HTML 元素定义的

HTML文档由三大元素构成:html、head、body元素。每个元素包含各自相应的属性。

head元素包含用来说明文档的整体信息,如网页标题、关键词、编码。这些信息的次序是无关紧要的。

body元素包含网页的正文，会被显示在浏览器的文档区域中。其中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出。

head元素中title、mea元素的使用。其中title元素是文档的标题，显示在浏览器的标题栏中，meta元素中包含网页编码、网页关键词等信息。

4、HTML元素

body元素中的内容显示在浏览器的文档窗口中。

其中需要掌握的元素包括：

标题h1-h6元素

段落p元素

无序列表：ul、li

有序列表：ol、li

定义列表：dl、dt、dd

预格式化文本pre元素

块引用blockquote元素

强调em、加强strong

上标sup、下标sub元素

表格的基本结构：table->tr->td

网页中的特殊字符，如空格 、版权符号©、小于号<、大于号>等

HTML5中新增的结构元素：header、article、section、nav、aside、footer

元素的语法格式：

HTML 元素一般拥有1个或多个属性，从而可以对HTML 元素进行更多的设置。HTML 元素的属性语法格式为：

请注意区别title标题与h1~h6标题的区别：title标题是整个网页的标题，显示在浏览器的标题栏中；h1~h6标题是网页内容中的标题，在文档区域显示，用于一级标题、二级标题等。

由于网页中的基本元素较多，所以涉及到对这些元素名称的记忆。如果能够从“英文首字母->缩写”的角度来记忆，会使得问题变得简单，如heading->h，paragraph->p，unordered list->ul。

对于网页元素标签的开始标签和结束标签，需要注意正确的嵌套关系，<p><strong>xxxx</p></strong>是错误的嵌套关系，标签的使用形成了交叉，正确的做法是</strong>应该在</p>的前面。

5.HTML中的容器元素

简单的情况下,整个网页只需要一个容器元素

复杂的情况下，一个网页是由许多容器元素以及装在容器元素中的对象元素组成的

最常使用的容器元素——div

6、Dreamweaver对网页编辑的辅助作用

以磁盘中指定的文件夹为站点的根文件夹建立站点

如何把Word或网页中的素材文字粘贴到设计视图，并形成自然段落（计算机需要取消“清理Word段落间距”的选择）

通过文档工具栏或代码视图设置网页标题

通过属性面板或代码视图设置普通段落为h1,h2,h3等标题级别的元素

通过属性面板设置普通段落为无序列表、有序列表

通过插入工具栏插入版权、注册商标等特殊字符

通过标签选择器选择网页中的元素

首选参数的设置

文本的一些常用编辑