任务1.3 编写HTML代码
网络新技术层出不穷，但是不管技术如何变化，编写HTML代码都是网页设计的基础 之一。
对于网页设计者来说，代码知识是必须掌握的。在学习使用Dreamweaver CC制作网页之前，了解相关语言是非常必要的。
任务内容分析
掌握HTML，需要首先掌握以下内容：
① HTML的基本概念；
② HTML的基本结构；
③ Dreamweaver CC的代码视图模式；
④ 常用HTML标签。
任务知识学习
1.3.1 HTML简介
1. HTML基本概念
HTML（hypertext markup language，超文本标记语言）是用来描述网页的一种标记语言。用HTML编写的超文本文档称为HTML文档，可以在其中加入图片、声音、多媒体等内容，它能独立于各种操作系统平台（如UNIX、Windows等）。
HTML超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下。
① 简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
② 可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
③ 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
④ 通用性：HTML是网络的通用语言，它是一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览，无论使用的是什么类型的电脑或浏览器。
2. HTML的编辑方法
用HTML语言编辑的文档的扩展名为.html或.htm。可以使用下列专业的HTML编辑器来编辑HTML：
① Adobe Dreamweaver；
② Microsoft Expression Web；
③ CoffeeCup HTML Editor。
也可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。使用一款简单的文本编辑器就可以学习HTML。
1.3.2 HTML的基本结构
HTML文档主要由三部分组成，如图1-25所示。
图1-25 HTML文档的组成
具体说明如下。
① <html>标签。<html>标签标示该文档为HTML文档，<html>与</html>之间的文本用于描述网页。
② 头部。头部以<head>标签开始，以</head>标签结束。这部分包含显示在网页标题栏中的标题、文档使用的脚本、样式定义和其他文档在网页中不显示的信息。标题包含在<title>标签和</title>标签之间。
③ 主体部分。主体部分包含在网页中显示的文本、图像和链接。主体部分以<body>标签开始，以</body>标签结束。
大多数标签都有一个开始标签和结束标签，与开始标签相对应的结束标签只是在标签名称前面加一个反斜线，没有属性，而标签作用的范围就是开始标签和结束标签之间的内容。
所有标签都有一个标签名称，有些标签后面还有可选的属性列表，这些都放在一对尖括号（<和>）之间。
1.3.3 编写HTML代码
编写HTML代码的方法多种多样，本书介绍两种比较简单、常见的方法。
1. 使用记事本编写HTML代码
使用记事本编写HTML代码的方法如下。
（1）创建一个记事本文件，在其中输入HTML代码，如图1-26所示。
图1-26 使用记事本编写HTML代码
（2）选择“文件”→“另存为”，在“另存为”对话框中设置“文件名”以“.html”或“.htm”为扩展名的名称；“保存类型”为所有文件；“编码”为“ANSI”，如图1-27所示。
图1-27 保存html文件
（3）保存成功后，在存储路径下即可找到保存的网页文件，启动浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击该 HTML 文件，如图1-28所示。
图1-28 浏览HTML网页
2. 使用Dreamweaver编写HTML代码
使用Dreamweaver CC的“代码”视图和快速标签编辑器可以方便地编辑代码。
（1）使用“代码”视图。“代码”视图用于查看、输入和修改网页代码。启动Dreamweaver CC后，单击文档工具栏的“代码”按钮
，即可启动源代码编辑窗口，如图1-29所示。
图1-29 启动源代码编辑窗口
Dreamweaver CC为用户提供了两种源代码编辑窗口显示方式。单击“代码”按钮，则显示整个代码编辑窗口；单击“拆分”按钮，则会分为左右两个窗格，左侧是代码窗格，右侧是设计窗格，这样可以看到当前编辑文档的源代码，用户可以像使用其他文本编辑器那样使用它。
“代码”视图会以不同颜色显示HTML代码，以帮助用户区分各种标签，同时用户也可以自己设置标签和代码颜色。DreamweaverCC 的代码工具栏在编码面一侧排列，其中包含常用编码操作，如图1-30所示。
图1-30 代码工具栏
下面介绍工具栏中按钮的功能。
①“打开文档”按钮
：列出已打开的文档。选择一个文档后，它将显示在文档窗口中。
②“显示代码浏览器”按钮
：显示与页面上特定选定内容相关的代码源列表。
③“折叠整个标签”按钮
：折叠位于一组开始和结束标签之间的内容。例如，位于标签<p>和</p>之间的内容。
④“折叠所选”按钮
：可折叠所选代码。
⑤“扩展全部”按钮
：可将所有折叠内容扩展。
⑥“选择父标签”按钮
：可以选择放置了插入点的那一行的内容，及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的，则Dreamweaver最终将选择最外面的标签<html>和</html>。
⑦“选取当前代码段”按钮
：选择放置插入点的那一行的内容，及其两侧的圆括号、大括弧或方括号。若反复单击该按钮且两侧的符号是对称的，则Dreamweaver最终将选择该文档最外面的大括号、圆括号或方括号。
⑧“行号”按钮
：可以在代码行的行首隐藏或显示编号。
⑨“高亮显示无效代码”按钮
：将以黄色高亮显示无效代码。
⑩“自动换行”按钮
：用于设置超过代码窗口宽度的代码是否自动换行。
“信息栏中的语法错误警告”按钮
：启用或禁用页面顶部提示出现语法错误的信息栏。
“应用注视”按钮
：可以在所选代码两侧添加注释标签或打开新的注释标签。
“删除注释”按钮
：删除所选代码的注释标签。如果所选内容包含嵌套注释，就只删除外部注释标签。
“环绕标签”按钮
：在所选代码两侧添加选自快速标签编辑器的标签。
“最近的代码片段”按钮
：可以从“代码片段”面板中插入最近使用过的代码片段。
“移动或转换CSS”按钮
：可以转换CSS行内样式或移动CSS规则。
“缩进代码”按钮
：将选定内容向右移动。
“凸出代码”按钮
：将选定内容向左移动。
格式化源代码”按钮
：将先前指定的代码格式应用于所选代码，如果选择的是代码块，则应用于整个页面。也可以单击该按钮，在弹出的下拉菜单中选择“代码格式设置”选项，快速设置代码格式首选参数，或选择“编辑标签库”选项来编辑标签库。
（2）使用快速标签编辑器。使用快速标签编辑器，可以在不退出“设计”视图的情况下，快速插入和编辑 HTML 标签。
插入HTML标签的方法如下。
① 在“设计”视图中，在页面上单击，可以将插入点放置于要插入代码的位置。
② 按Ctrl+T (Windows) 或Command+T (Macintosh)。快速标签编辑器以“插入 HTML”模式打开，如图1-31所示。
③ 输入HTML标签并按Enter，该标签被插入到代码中，同时还插入相匹配的结束标签（如果适用）。
④ 按Esc可以在不进行任何更改的情况下退出。
图1-31 快速标签编辑器
1.3.4 常用HTML标签
1. 文本标签
文本是网页中最多使用的元素之一，下面介绍常用的文本标签，以掌握对页面中文本编排和修饰的方法。
（1）标题标签。在浏览器中的正文部分，可以显示标题文字，所谓标题文字就是以某几种固定的字号去显示的文字。
标题标签共有六种，每一种标题在字号上都有明显的区别，一般用标题来强调段落要表现的内容。在HTML中定义了6级标题，从1到6级，每级标题的字体大小与字号成反比。
标题标签的语法描述如表1-1所示。
表1-1 标题标签的语法描述
（2）段落标签<p>。在HTML语言中，有专门划分段落的标签“<p>”，语法如下。
<p>段落文字</p>
使用成对的“<p>”标签来实现段落。段落文字的对齐，可以通过设置段落标签<p>的align（对齐）属性来实现。align有3个属性值：left（默认）、center、right，分别表示居左、居中、居右对齐。
<p align=left>段落文字</p> <p align=center>段落文字</p> <p align=rightt>段落文字</p>
（3）换行标签<br>。段落和段落之间是自动换行的，文字与文字之间的换行使用换行标签<br>来实现，语法如下。
第一行文字<br>第二行文字
一个<br>表示一次换行，多次换行可以连续使用多个<br>标签。
（4）水平线标签<hr>。水平线标签可以在页面中生成一条水平的线，用来分隔页面中内容。<hr>水平线标签是单标签，没有结束标签，语法如下。
<hr size="5" class="width90" color=
"red" align="center" noshade>
<hr>水平线标签可以通过如表1-2所示的属性对齐进行修饰。
表1-2 <hr>标签属性
（5）特殊符号。在HTML文档中，一些有特殊用途的字符无法直接使用，需要通过特殊的代码来实现，常见的特殊符号代码如表1-3所示。
表1-3 特殊符号
2. 列表标签
列表可以将页面中的信息组织起来，起到提纲挈领的作用。列表分为两种：无序列表与有序列表。无序列表使用项目符号来标记列表中的项目，有序列表使用编号来表示列表中的项目。
（1）无序列表<ul>。
无序列表始于<ul>标签。每个列表项始于 <li>，语法如下。
<ul> <li>列表项1</li> <li>列表项2</li> … </ul>
无序列表在默认情况下，使用粗体圆点●（典型的小黑圆圈）来表示列表项，可以通过“type”属性来设置列表符号类型，如表1-4所示。
表1-4 无序列表项目符
（2）有序列表<ol>。有序列表会在列表项前面加上有序的编号，编号会随着列表项的增减自动调整，列表项始于<li>，语法如下。
<ol> <li>列表项1</li> <li>列表项2</li> … </ol>
有序列表在默认情况下使用数字作为编号，可以通过“type”属性设置编号类型，“type”如表1-5所示，语法如下。
表1-5 有序列表类型
<ol type="a"> <li>列表项1</li> <li>列表项2</li> … </ol>
在默认情况下，有序列表的列表项从1开始计数，可以通过“start”属性调整计数的起始值，语法如下。
<ol start="3"> <li>列表项1</li> <li>列表项2</li> … </ol>
3. 图像标签<img>
图像是网页中另一种常用的元素，使用图像可以丰富页面内容的表现形式，HTML中使用<img>标签来引用图像，语法如下。
<img src="image/pic.jpg" width="500" height="350"/>
图像标签需要相关属性的配置来完成，其属性如表1-6所示。
表1-6 <img>图像标签属性
4. 超链接标签<a>
超链接是网页核心元素，是其与其他文件区别的根本特征，超链接是通过<a>标签实现的。超链接效果需要配合相关属性来实现，超链接标签属性如表1-7所示，语法如下。
<a href="http://www.baidu.com" target="_blank" title="baidu" >…</a>
表1-7 <a>超链接标签属性
5. 表格标签
表格是网页中排列内容的最佳工具，也是网页布局中不可缺少的一部分。表格通过三个标签来构成，分别是表格标签、行标签、单元格标签，如表1-8所示。
表1-8 表格标签
表格语法如下。
<table width="800" height="600" border="1" align="center" cellpadding= "0" cellspacing="0">
<caption>表格标题</caption>
<tr>
<th>单元格1</th>
<th>单元格2</th>
…
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
…
</tr>
…
</table>
表格可以通过设置相关的属性来对其进行修饰，表格属性如表1-9所示。
表1-9 表格属性
表格中的行和单元格也可以通过设置属性来对其进行修饰，其属性如表1-10所示。
表1-10 表格中行与单元格的属性
6. 表单标签
表单是网页中一个特殊的组成，它为用户提供了与网站交互的接口，表单在动态网页开发中非常重要。
（1）表单标签<form>。表单标签<form>用来定义一个表单区域，在这个表单区域中，可以添加输入标签、菜单标签、文本域标签等其他表单控件标签来丰富表单内容。表单标签<form>的常用属性如表1-11所示。
表1-11 表单标签属性
（2）输入标签<input>。
输入标签是表单中最常用的标签之一，语法如下。
<form>
<input name="user" type="text" >
</form>
其中“type”属性可以包含多种类型值，每种类型值可以在页面中实现不同的显示效果，具体如表1-12所示。
表1-12 输入标签type属性值
（3）菜单和列表标签<select>。菜单是一种最节省空间的方式，正常状态下看到一个选项，打开菜单就可以看到全部选项。
列表则可以显示一定数量的选项，若超过显示范围，则会出现滚动轴，用户可以通过拖动滚动轴来查看所有选项。语法如下。
<select name="city" size="3" multiple>
<option value="city1" selected>city1</option>
<option value="city2" selected>city2</option>
…
</select>
其中，菜单和列表属性如表1-13所示。
表1-13 菜单和列表属性
（4）文本区域标签<textarea>。
文本区域标签用来设置多行的文本区域，允许输入更多的文本。语法如下。
<textarea name="address" rows="10" cols=
"5" value="value"> </textarea>
其中，各属性含义如表1-14所示。
表1-14 文本区域属性
7. 框架标签
框架主要包括两个部分：一个是框架集；另一个是框架。框架集定义了在一个窗口中显示框架的个数、尺寸、引用的页面等。框架是在网页定义的一个显示区域。
框架文档的结构如下。
<html>
<head>
</head>
<frameset>
<frame>
<frame>
…
</frameset>
</html>
其中<frameset>标签常用的属性如表1-15所示。
表1-15 <frameset>标签常用属性
<frame>常用的属性如表1-16所示。
表1-16 <frame>常用的属性
任务实践训练
1. 记事本编写HTML任务
【具体任务】
在站点study中使用记事本工具编写“poetry.html”文档，实现如图1-32所示的页面效果。其中页面的标题为“静夜思”，诗的标题为1号标题字，作者为2号标题字。
【实施步骤】
（1）在“study”站点目录中新建记事本文件，在其中输入以下HTML代码：
<html>
<head>
<title>静夜思</title>
</head>
<body>
<h1>静夜思</h1>
<h2>作者：李白</h2>
<p>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>
</body>
</html>
图1-32 “poetry.html”页面效果
（2）将记事本文件另存为“poetry.html”，在浏览器中预览。
2. 使用Dreamweaver“代码”视图编写HTML代码
【具体任务】
在站点study中新建一个名为“picture.html”的新文档，通过在Dreamweaver CC的 “代码”视图中编写HTML代码，实现如图1-33所示的页面浏览效果。
图1-33 “picture.html”页面浏览效果
其中页面标题为“Dreamweaver CC”；文字内容标题为1号标题字，居中对齐；正文段落文字居中对齐；水平线高度为5px；图像所在的段落对齐方式为居中对齐。
【实施步骤】
（1）在“文件”面板中选择站点study，右击站点根文件夹，在弹出的快捷菜单中选择“新建文件”命令，新建一个文件并将其重命名为picture.html。
（2）打开“picture.html”文件，切换到“代码”视图，在该视图中编写如图1-34所示的HTML代码。
（3）保存文件，在浏览器中浏览。
图1-34 “picture.html”文件“代码”视图
任务小结
使用记事本编写HTML代码是网页制作人员基本技能，应能熟练掌握。
使用Dreamweaver中的“代码”视图是一种高效、快捷的HTML代码编写途径，可以提高编写代码的效率和准确性。