第 1章 HTML 基础

第1章 HTML基础 • 了解网页设计的基本概念及HTML的基本知识 • 掌握HTML文档的基本结构 • 熟悉常用HTML元素标记功能及使用方法 • 掌握格式化网页文本的常用方法 • 熟悉在网页中链接的使用方法

教学内容 • 1 HTML概述 • 2 HTML的标记 • 3 文字修饰 • 4 图像 • 5 列表 • 6 表格 • 7 色彩 • 8 超文本链接 • 9 表单 • 10 事件 • 11 脚本 • 小结

1.1 HTML概述 • HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。

HTML文档的基本结构 一个网页就是一个HTML文档，其基本结构如下：构成HTML文档基本结构的标记有： <HTML>,<HEAD>,<BODY>。

1.2 如何编写一个HTML文件 • HTML文件是一个扩展名为.htm或.html的ASCII格式的文件 • 任何一种可以编辑ASCII文件的编辑器 • 记事本、写字板、Word等软件。 • 扩展名应为 htm 或 html。

1.3 HTML文件的调试 可以用网页浏览器对HTML文件进行调试，如例1： <html> <head> <title>第一章 HTML基础</title> </head> <body> HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”。它实际上是专门用来编写网页的一种编成语言。大多数网页的构成基础就是HTML的语句。 </body> </html>

2.1 标记的一般特性 • 标记的记述形式：<字符串> • 开始标记：<标记名称> • 结束标记：</标记名称> • 属性：属性名=“属性值”，包含在开始标记里，可以有多个 • 元素： • <标记名称属性名=“属性值” >内容数据</标记名称> • 元素包含多个属性时： • <标记名称属性名1=“属性值1” 属性名2=“属性值2” 属性名3=“属性值3” >内容数据</标记名称> • 空元素： <标记名称属性名=“属性值” ></标记名称> • 也可记为：<标记名称属性名=“属性值” />

2.2 几个最常用的标记 • 1. <html>和</html> • 在文档的最初和最后，定义一个HTML文档。 • 2. <head>和</head> • 定义文档的头部，描述了文档的各种属性和信息，包括文档的标题<title>和</title> 、在 Web 中的位置以及和其他文档的关系等。 • 3. <title>和</title> • 定义文档的标题，在浏览器窗口的标题栏上显示。 • 4. <body>和</body> • 定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

5. <hn>和</hn> • 定义子标题。其中n=1,2,…,6。<h1> 定义最大的子标题，<h6> 定义最小的子标题。如例2。 • 6. <br/> • 插入一个简单的换行符。 • 7.<p></p> • 定义段落，前后有空行。 • 8. <hr/> • 在页面中创建一条水平线。如例3。

3 文字修饰 • 一个网页大多由以下要素构成： • 文字、图片、表格、动画及声音等。 • 文字是十分重要的要素。可以对文字的字号、字体的样式及颜色等进行修饰。

3.1 字号 • 可以采用多种方式设置文字的大小。 • 不过设置文字的大小后，其效果会受到网页浏览器中选项的影响。

3.1 字号 • 1. <small>和</small> • 显示小一号的字体。 • 2. <big>和</big> • 显示大一号的字体。 • 3. <font size=n> • 规定 font 元素中文本的尺寸大小。n是从 1 到 7 的数字。n=1时最小，n=7时最大。浏览器默认值是 3。 • n也可以是带+号或-号数字，表示相对扩大或缩小字号。 • 4. <basefont size=n> • 为文档中的所有文本定义默认字体的大小。

例4设置文字大小的例子 <html> <head> <title>设置文字的默认大小</title> </head> <body> 显示效果正常字号 <small>小号字</small> <big>大号字</big><br> <font size=1>1号字</font><br/> <font size=2>2号字</font><br/> <font size=3>3号字</font><br/> <font size=4>4号字</font><br/> <font size=5>5号字</font><br/> <font size=6>6号字</font><br/> <font size=7>7号字</font><br/> <font size=-5>相对小5号字 </font><font size=1>1号字</font><br> <font size=+2>相对大2号字 </font><font size=5>5号字</font> </body> </html>

3.2 字体式样 • 4. <strike>和</strike> • 显示带删除线的字 • 5. <sub>和</sub> • 显示下脚标 • 6. <sup>和</sup> • 显示上脚标 • 1. <b>和</b> • 显示粗体字 • 2. <I>和</I> • 显示斜体字 • 3. <u>和</u> • 显示带下划线的字

3.3 特殊标记 • 由于<、>、& 和 “ 号是HTML的关键字符，要把这些字符当作数据使用时，就必须使用与之对应的特殊标记，也叫”实体”。 • < 用 <表示 • > 用 >表示 • & 用 &表示 • “ 用 "表示 • 也可用“&#字符编码;”的形式显示任一字符。其中字符编码可以是10进制也可以是16进制。16进制要在编码前加“x”字符。 • 如“§”的编码是A7，则可在HTML中用§来表示。

例5字体式样和特殊标记的例子 <html> <head> <title>使用字体样式和特殊标识</title> </head> <body> <b>要粗体显示的文字</b> <I>要斜体显示的文字</I> <u>要下划线显示的文字</u> <strike>要加上删除线显示的文字</strike><br/> 正常文字<sub>下标形式显示的文字</sub><br/> 正常文字<sup>上标形式显示的文字</sup><br/> 小于号< 大于号><br/> 其他符号：§ µ ¥ </body> </html>

4.图像 • 在 HTML 中，图像由 <img> 标记定义。 • 格式：<img src=“文件名” alt=“文件说明” width=“数值” height=“数值” /> • <img> 是空标签，它只包含属性。 • src属性为必须项，其值是图像文件的路径名或网络地址。 • alt属性为图像定义一串预备的可替换的文本。 • width和height属性规定图像的宽度和高度（单位为像素）

使用图像的例子 <html> <head><title>使用图像的例子</title></head> <body> <p> 一幅图像： <img src="eg_mouse.jpg" width="128" height="128“/> </p> <p> 一幅动画图像： <img src="eg_cute.gif" width="50" height="50“/> </p> <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p> </body> </html>

5 列表 • 列表是一种条理化地排列信息的方法 • 它把内容一条条地水平排列显示，直观、清晰 • 不同于表格，一般列表没有表格复杂。

<列表标记> <li>条目内容1 <li>条目内容2 <li>条目内容3 …… </列表标记> 列表标记的通用格式

列表标记 • 1. <ul>和</ul>：条目前加符号 • <ul type=f> ，f: disk, circle, square • 2. <ol>和</ol>：条目前加序号 • <ol type=f> ，f: A, a, I, i, 1 • <ol start=n> ，n: 数字,为起始序号

例6列表标记的使用例子 <ol start=10> <li>李白----赠孟浩然 <li>杜甫----望岳 <li>杜牧----泊秦淮 </ol> <ol type=i> <li>李白----赠孟浩然 <li>杜甫----望岳 <li>杜牧----泊秦淮 </ol> </body> </html> <html> <head> <title>列表标识</title> </head> <body> <ul type=circle> <li>李白----赠孟浩然 <li>杜甫----望岳 <li>杜牧----泊秦淮 </ul>

例7列表的嵌套 <LI>杜甫 <UL> <LI>望月 <LI>佳人 <LI>梦李白 </UL> <LI>杜牧 <UL> <LI>赤壁 <LI>泊秦淮 <LI>秋夕 </UL> </OL> </body> </html> <html> <head> <title>列表嵌套</title> </head> <body> <h3>唐诗选读</h3> <OL> <LI>李白 <UL> <LI>春思 <LI>月下独酌 <LI>赠孟浩然 </UL>

6 表格 • 使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。 • 表格一般由以下几部分组成：表格名称、表格栏及表中数据。这与其他软件（如WORD）中所说的表格十分相同。

6.1 表格的定义 • 表格由<table></table>标记来定义。 • 这是一对用来指明表格范围的标记。通常使用的格式如下： <table> 表格全部内容 </table>

表格的border属性 使用表格的这一属性可以给表格加上框线。如<table border>表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用<table border=n>来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框

例8设置表格边框的例子 <tr> <td>数据1-1</td> <td>数据2-1</td> <td>数据3-1</td> </tr> <tr> <td>数据1-2</td> <td>数据2-2</td> <td>数据3-2</td> </tr> </table> </body> </html> <html> <head> <title>这是有线表格和表格边框的例子</title> </head> <body> <table border="2"> <caption>表格标题</caption> <tr> <th>栏目名称1</th> <th>栏目名称2</th> <th>栏目名称3</th> </tr>

表格的width属性 • 这一属性可以用来设置表格占整个页面的相对宽度，写法为： • <table width=n>。 • 这里的n是一个具体的数字，可以是一个具体的数值，单位是像素，也可以是一个百分数（如100%）。如： • 80表示表格占80个像素单位的宽度； • 80%表示表格宽度占页面宽度的80%。

表格的height属性 • 这一属性可以用来设置表格的高度。其用法与<table width=n>相似。 • 使用相对方式来设置表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。表格宽度、高度设置要合理，在视觉上要有美感。

例9表格占页面大小的例子 <table border="5" width=70%, height=40%> <caption>表格占页面的70%</caption> <tr> <th>栏目名称1</th> <th>栏目名称2</th> <th>栏目名称3</th> </tr> <tr> <td>数据1-1</td> <td>数据2-1</td> <td>数据3-1</td> </tr> <tr> <td>数据1-2</td> <td>数据2-2</td> <td>数据3-2</td> </tr></table> </body> </html> <html> <head> <title>这是表格占页面相对大小的例子</title> </head> <body> <table border="5" width=80%, height=50%> <caption>表格占页面的80%</caption> <tr> <th>栏目名称1</th> <th>栏目名称2</th> <th>栏目名称3</th> </tr> <tr> <td>数据1-1</td> <td>数据2-1</td> <td>数据3-1</td> </tr> <tr> <td>数据1-2</td> <td>数据2-2</td> <td>数据3-2</td></tr></table>

6.2 表格的标题 • 用<caption>和</caption>标记来定义表格的标题 • 通常使用的格式如下： <caption> 表格标题内容 </caption>

6.3 定义表格的一行 • 用<tr>和</tr>标记来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。 <table border=“1”> <caption>表格标题</caption> <tr><td>数据</td>…<td>数据</td></tr> … … <tr><td>数据</td>…<td>数据</td></tr> </table>

6.4 表格的数据项 • 用<td>和</td>标记来指明表格数据行中的一项 • 一行可以由多项组成，它也必须嵌套在<tr>与</tr>之中使用 • <td>的属性： • 水平对齐方式align=x, x:left, center, right • 垂直对齐方式valign=y,y:top, middle, bottom • nowrap:超长文本不自动换行 • 单元格宽度width=数值 • 列合并colspan=向右合并单元格的数目 • 行合并rowspan=向下合并单元格的数目

例10单元格合并的例子 <html> <head> <title>这是表格栏目合并的例子</title> </head> <body> <table border="2"> <caption>表格标题</caption> <tr> <td>栏目名称1</td> <td colspan=2>栏目名称2和3</td></tr> <tr> <td rowspan=2>数据1-1</td> <td>数据2-1</td> <td>数据3-1</td></tr> <tr> <td>数据2-2</td> <td>数据3-2</td></tr> </table> </body> </html>

7.1 色彩的表示方法一 • 三原色浓度混合表示法(RGB)。 • 把三原色的浓度(R、G、B)分别以两位的16进制数表示，即:00～FF。 • 再把三种颜色的浓度数值按RGB顺序组合起来，前面再加个“#”号，即:#rrggbb的形式表示色彩。 • 如：黑色为#000000、白色为#ffffff、墨绿色为#008040、深灰色为#808080等

7.1 色彩的表示方法二 用颜色的名称(英文)表示法：表1 常见颜色列表

7.2 文本的色彩 • 1. 在body的属性中，我们可以使用以下几种属性改变文本的颜色。 • (1) text属性：设置文本的颜色 • <body text=“#rrggbb”> • (2) link属性：设置超连接文字的颜色 • <body link=“#rrggbb”> • (3) vlink属性：设置鼠标指向超链接文字时的颜色 • <body vlink=“#rrggbb”> • 2. <font>标记的color属性:局部设置文本的颜色 • <font color=“#rrggbb”>着色的文本</font>

7.3 表格的颜色 • 1. 设置表格的背景色 • <table bgcolor=“#rrggbb” > • 2.设置表格数据项的背景色 • <td bgcolor=“#rrggbb” > • 3. 设置水平线的颜色 • <hr color=“#rrggbb”/>

例11颜色设置的例子 <html> <head> <title>这是颜色设置的例子</title> </head> <body> 颜色显示效果<br/> <font color=red> <hl>问题与答案(红色)</hl> <hr color=#808080/> <font color=blue> 1、如何改变表格的背景颜色？(蓝色)<br/> <font color=olive> 这还不简单(橄榄色)。 </body> </html>

8 超文本链接 • 超文本链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。 • 通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。 • 链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。

8.1 超文本链接的概念 • 所谓的超文本链接是指从一个网页指向一个目标的连接关系。 • 这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。 • 而在一个网页中用来表示超文本链接的对象，可以是一段文本或者是一个图片。 • 当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

8.2 页面链接 • 在HTML中创建超文本链接需要使用<a>标记符（结束标记符</a>不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。 • 在HTML文件中用链接指针指向一个目标。其基本格式为： • <a href = “url”>标记超文本链接信息</a> • <a href = “url”> <img src = “图像文件名” /> </a>

超文本链接可以指向自己的计算机中的某一个文件的某处，这种链接方式叫做本地链接。超文本链接可以指向自己的计算机中的某一个文件的某处，这种链接方式叫做本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<a>标记符的name属性创建标签： <a name="标签名">此处创建了一个标签</a> 建立本网页内部链接： <a href=“#标签名”>本地链接信息</a> 建立外部网页内部的链接： <a href=“网页地址#标签名”>链接信息</a> 8.3 页内链接

例12超链接的例子 <HTML> <HEAD><TITLE>使用本地链接</TITLE></HEAD> <BODY> <A HREF = #Internet>互联网</A><BR><BR> <A HREF = #HTML>HTML简介</A><BR><BR> <A HREF = #Consistency>多样化和统一性</A><BR><BR> <A name = Internet>互联网</A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输协议绑定在一起。</P> <A name = HTML>HTML简介</A><BR> <P>超文本标记语言是Web用来创建和识别文档的标准语言。虽然它不是标准通用标记语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。</P> <A name = Consistency>多样性和统一性</A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P> <A HREF ="http://ccst.jlu.edu.cn">关于我们</A> <A href="mailto:xxx@jlu.edu.cn">联系我们</A> <BR> </BODY> </HTML>

8.4 电子邮件链接 • 如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如 • <a href = mailto:webmaster@jlu.edu.cn > 管理员信箱 </a>

9 表单<form> • 表单是一个包含表单元素的区域。 • 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 • 表单用于搜集不同类型的用户输入数据，并将其传送给目标文件（程序）。 • 表单使用表单标签（<form>）定义。 <form action=“目标文件名” method=“传输方式”> ... input 元素 ... </form>

9.1 表单的输入:文本域 • 多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： • 文本域（Text ）：当用户要在表单中键入字母、数字等内容时，就会用到文本域。 <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>

9.1 表单的输入:单选按钮 • 单选按钮（Radio ）：当用户从若干给定的的选择中选取其一时，就会用到单选框。 <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>

9.1 表单的输入:复选框 • 复选框（Checkboxes）：当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。 <form> <input type="checkbox" name=“vehicle” value="bike" /> I have a bike <br /> <input type="checkbox" name=“vehicle” value="car" /> I have a car </form>

9.2 表单的确认按钮 • 当用户单击确认按钮(submit)时，表单的内容会被传送到另一个文件： <input type=“submit” value=“确认按钮名称” />。 <form> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>

第 1章 HTML 基础