任务1.3 编写HTML代码_网页设计与制作项目化教程-QQ阅读男生玄幻网

书名：网页设计与制作项目化教程
作者名：何芳谭冬平姜东洋主编
本章字数：5007字
更新时间：2021-03-26 05:33:28

任务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>