网页制作案例教程-清华大学

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<hi>设置网页内容标题标签，通过<hi>…..</hi>标签配对使用设置HTML网页内容标题，标题标签共分6种，分别表示不同字号的标题，i可以取值为1-6。在<hi>中可以在使用属性<align>来设置标题对齐方式，如果没有设置<align>属性，默认对齐方式是left （左对齐）。
<h1 align=“对齐方式”>…..</h1> <h2>…..<h2> <h3>…..<h3> <h4>…..<h4> <h5>…..<h5> <h6>…..<h6>
案例3-14 <hr>标签属性应用
3.3 列表
在HTML中列表有三种形式，分别为：有序列表(Ordered List)，无序列表(Unordered List) 和定义列表(Definition List)。
3.3.1有序列表标签<ol>

1、语法格式为：

<ol type=编号类型 start=value> <li>第1项 <li>第2项 <li>第3项 </ol>

2、<ol>标签属性

<ol>标签有两个属性，分别是start和type。start用来设置标签首项的开始值，如果省略该属性值则从第一个字符开始，也可以在<li>中设置value值来改变表行项目的特定编号。而type用来设置项目编号的类型。
案例3-15 有序列表标签应用
3.3.2 无序列表标签<ul>
表示一级标题表示二级标题表示三级标题表示四级标题表示五级标题表示六级标题
案例3-2 文字标题

2、段落标签

1）分段标签<p> <p>用来标记段落的开始，用</p>可以标记一个段落的结束，也可以省略，则到下一个<p>开始新的段落。案例3-3 <p>标签应用

2）换行标签<br> <br>可以将文字强制换行，段落标签<p>是隔行换行，而<br>则使得换行更紧凑。

6）hspace属性语法格式为： <img src=”图像地址” hspace=”水平间距”> 7）vspace属性语法格式为： <img src=”图像地址” vspace=”水平间距”>
案例3-21 图像标签<img>应用
3.5.3 图像超链接

1、设置图像的超链接语法格式为：
案例3-4 换行标签应用

3）取消换行标签nobr
案例3-5 取消换行标签应用

4）原样显示文字标签pre
案例3-6原样显示文字标签pre应用

5）右缩进标签blockquote 案例3-7 右缩进标签应用
6）居中对齐标签center 案例3-8 居中对齐标签应用

7）文字的分区显示标签div 案例3-9 文字的分区显示标签应用
案例3-19书签链接应用
在同一页面上链接的语法如下： <a href=”#书签名称”>链接的文字</a>，这里的书签名称就是上面所定义的书签名字，链接的文字是需要点击的文字。

3、外部链接

外部链接是指跳转到当前页以外的某个页面上，例如其他网站的页面或网页元素等。这种链接的URL地址一般要用绝对路径，也就是包括了协议，主机名，文件所在的地址及文件名。

菜单列表主要设计单列的菜单列表，显示方式及格式都和无序列表<ul>是一样的。而目录列表标签<dir>是用来创建多列的目录列表的，两者都可用无序列表替代。

案例3-18 自定义列表标签应用
3.4 超级链接
3.4.1超级链接标签<a>

1、超级链接基本格式基本格式为：

<A href=”链接地址” target=”超链接窗口打开方式 ”>超链接名称</A>

3、格式标签

1）常用格式标签在HTML文档中，通常我们要通过格式标签来设定文本显示格式，常用的一些格式标签如表3-2-2所示

2）特殊字符为了避免那些和HTML的关键字或保留字冲突，有些字符需要用特殊方法表示才能够正确的在浏览器中显示。
案例3-11特殊字符应用

3）闪烁标签<blink> <blink> 使得被标记的文字闪烁，使用的格式为 <blink>文字内容</blink>

2、超级链接属性标签<a>的属性href指定了链接到的目标地址，该地址可以是文件所在位置也可以是一个URL，只有正确指定目标地址，才能正确访问需要的资源。

属性target用于指定打开链接的目标窗口，其默认方式是原窗口。
3.4.2 超级链接路径

在超链接中，文件的存放位置和路径以及URL必须指定清楚才可以正确链接，超级链接的路径分为两种：绝对路径、相对路径。
案例3-1：创建基本的HTML页面其中 <html>和</html>表示该文档是HTML文档。 <head>和</head>标明文档的头部信息，一般包括标题和主题信息，该部分信息不会出现在页面正文中，也可以在其中嵌入其它标签，表示诸如文件标题，编码方式等属性。

<title>和</title>表示该文档的标题，标签间的文本显示在浏览器的标题栏中。 <body>和</body>是网页的主体信息，可以包括各种字符、表格、图像及各种嵌入对象等信息。

2、HTML书写规范

在HTML中按照格式来看标签有两类，大部分标签是成对出现的，需要开始标签和结束标签。也有一些标签不需要成对出现，单独出现一次就可以，这类标签通常不控制显示形态标签是不区分大小写的。
3.2 文本
3.2.1 常用文本标签

常用的文本标签分为标题标签、段落标签、格式化标签三类： 1、标题标签<hi>

<a href=”链接地址” ><img src=”图像文件的地址 ”></a>

2、热点图像超链接
热点地图（Image Map）标签的使用格式： <img src="图形文件名" usemap="影像地图名称">
然后需要定义热区图像以及热区的链接属性如下： <map name="影像地图名称"> <area shape=”热区形状” coords=”热区坐标” href="链接地址"> <area shape=”热区形状” coords=”热区坐标” href="链接地址"> …… </map> 这里的两个属性shape和coords的取值说明如下： Shape属性有三个取值，分别是：rect(矩形)、circle（圆形区域）、poly（多边形区域）。

1）alt属性 alt属性是用来设置提示文字语法格式为： <img src=”图像文件地址” alt=”提示文字内容 ”> 2）width属性语法格式为： <img src=”图像文件地址” width=”图像宽度”>

3）height属性语法格式为： <img src=”图像文件地址” width=”图像宽高”> 4）border属性语法格式为： <img src=”图像文件地址” width=”图像宽高”> 5）align属性用来调整图像与文字之间的排列方式，这里的对齐方式是相对的

8）注释标签在HTML文档中用来表示注释的标签为

案例3-10 注释标签应用 9）水平分割线标签hr <hr>标签是水平线标签，用于段落和段落之间的分割，使文档结构清晰明了，使文字的编排更整齐。加入一个<hr>标签，就加入了一条默认的水平线。

案例3-11水平分割线标签应用
3.3.4 自定义列表标签<dl>
自定义列表分为两个层次，第一层为列表项标签<dt> ，比如一些名词。第二层为注释项标签<dd>，通常是用来解释第一层的名词的。
通常的格式为： <dl> <dt>第一项<dd>注释1 <dt>第二项<dd>注释2 </dl>
案例3-18 自定义列表标签应用
3.3.5 菜单列表标签<menu>和目录列表标签 <dir>
3.2.2 文本属性设置

1、文本对齐方式属性（align）该属性用来设置文字的对齐方式，可以是标题也可以是一般文字，对齐方式共三种：左对齐、居中对齐和右对齐，默认情况下为左对齐。三种对齐方式的属性值分别为left、center和right。
案例3-12文本字体属性应用

2、文本字体、大小、颜色属性（face、size、 color）

表格标签、属性、单元格以及表格嵌套应用框架基本结构、分割方式、属性及链接、浮动窗口
本章学习导航

HTML标签的学习，是初学者掌握网页制作的入门技术，也是后续学习创建静态、动态网站必备基础知识，了解JavaScript的基本标签、属性运用及作用，并使用它们制作精美的网页，是初学者掌握本章内容的基本要求。本章内容在全书知识结构中所处位置如图所示
案例3-20 外部超级链接应用
3.5 图像
3.5.1图像格式

目前浏览器可以显示的图像格式主要有JPEG、 GIF和BMP
3.5.2 图像标签<img>

1、<img>语法格式
语法格式为： <img src=”图像文件的地址”>，这里的地址可以是相对地址也可以是绝对地址。

2、<img>标签属性

使用<ul>标签建立无序列表，每个列表项前使用<li>，无序列表的type属性有三个可选值，这三个可选值必须用小写，分别是disc表示实心圆，circle表示空心圆，square表示小方块。如果不选择type属性默认为空心圆。
案例3-16无序列表标签应用
3.3.3 嵌套列表
案例3-17 嵌套列表标签应用
网页制作案例教程
毋建军郑宝昆郭锐编著
清华大学出版社
第3章 HTML基础
本章学习目标（知识要点）

HTML基本概念和基本结构常用文本标签、属性设置及应用有序列表、无序列表、嵌套列表等标签及属性超链接标签、链接路径及应用图像格式、标签及超链接表单创建、表单控件、菜单下来列表类控件、多行文本框滚动字幕标签及插入多媒体文件
3.1.2 HTML基本结构及书写规范

1、HTML基本结构

在HTML中，由<>和</>括起来的文本叫做“标签”，<> 表示开始标签；</>表示结束标签，开始标签和结束标签配对使用，它们之间的部分是该标签的作用域，比如 <html></html>等。HTML就是以这些标签来控制内容的显示方式。
3.4.3超链接的应用

1、内部链接

内部链接是指链接的对象是在同一个网站内部不同页面之间的链接关系，内部链接一般使用相对路径进行链接比较好。

2、书签链接
建立书签的语法格式为： <a name=”书签名称”>文字</a> 这里的书签名称就是为了跳转建立的书签代号，文字是指跳转过来的位置指定。

文本字体、大小、颜色属性,主要是通过在<font>标签中设置face、size、color的值，设置文本的字体、大小和颜色。
案例3-13文本字体属性应用

3、<hr>标签的属性

在<hr>标签中，通过设置width和size属性，用来控制水平线的长度和宽度，默认情况下，水平线的宽度是 100%，1像素的高度，在设置宽度和高度时可以是确定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色，颜色表示和字体颜色的表示相同.

Coords属性是用来定义区域的坐标的，它的取值和 shape的形状有关系。
Shape= rect，则coords包含4个参数，分别为left、 top、right和bottom。前两个数字为左上角座标，后两个数字为右下角座标。案例3-22 图像超链接应用

网站发布、测试和维护提高篇 Web服务器创建网页中常见Flash制作 JavaScript网页应用 JavaScript篇 Javascript概述使用CSS布局规划网页 CSS篇 CSS样式表
利用模板和库创建网页
交互式网页表单的设计与使用网页布局规划设计 HTML篇网页基本元素设计 HTML基础网页设计与开发流程（AscentSys医药商务系统）基础篇网页制作基础
3.1 HTML入门
3.1.1 HTML简介

Βιβλιοθήκη Baidu
HTML( Hypertext Markup Language )即超文本链接标示语言，目前HTML编辑器有很多，可以是任何文本编辑器或者网页编辑制作工具，如 FrontPage、Dreamweave。生成的HTML文件最常用的扩展名是.html，也有.htm。