HTML语言与网页设计说明
- 格式：ppt
- 大小：1.38 MB
- 文档页数：9
下载文档原格式
合集下载
网页设计教程01-03网页设计基础-HTML基础-Dreamweaver cs3使用基础础.
2.2.2设置字型
格式：<b>受影响的文字</b> <i>受影响的文字</i> <tt>受影响的文字</tt> …… 说明：各种字型的标记有许多，但是格式都 一样。所不同的是标记名和需要受影响的文 字而已。
2.2.3特殊替换字符
在HTML文件中，有一些特殊字符是用来代表特定 意义的。例如小于（<）和大于（>）符号，是标 记指令专用的，但是当要在浏览器上显示出此类符 号时，就不能直接在代码中书写它们，而是利用以 下的一些特殊符号来替代它们。 <：替代小于符号（<）。 >：替代大于符号（>）。 "：替代双引号（"）。  ：替代不可分的空格。有时因为版面的关系 会将有空格的字符分成两行，此时就可以将两个字 符之间的空格定义为 。
2.1.2 HTML文件的基本结构
1．基本结构 HTML文件是一种纯文本格式的文件，其基本结构为： <html> <head> <title>网页的标题</title> </head> <body> 网页的内容 </body> </html> HTML文件必须以<html>开头，以</html>结尾。 HTML文件包括头部（head）和主体（body）。
2．字符格式标记 用来改变HTML文件文字的外观，增加文件的美观程度。主要有： （1）<font>：改变字体设置。 （2）<b>……</b>：粗体字。 （3）<i>……</i>：斜体字。 （4）<tt>……</tt>：标准打印机字体。 （5）<u>……</u>：文字带下划线。 （6）<strike>……</strike >：文字带删除线。 （7）<sub>……</sub >：下标。 （8）<sup>……</sup >：上标。 （9）<center>……</center>：居中对齐。 （10）<blink>……</blink>：文字闪烁。 （11）<big>……</big>：加大字型。 （12）<small>……</small>：缩小字型。 （13）<cite>……</cite>：参照。
网页设计与开发入门教程
网页设计与开发入门教程第一章：网页设计基础在开始学习网页设计与开发之前，先要了解一些基础概念。
网页是由HTML（Hypertext Markup Language）语言编写的，并使用CSS（Cascading Style Sheets）来装饰和布局。
网页设计的目标是为用户提供一个美观、易于使用且功能强大的网站。
1.1 HTML基础HTML是一种标记语言，用于描述网页的结构和内容。
了解HTML的基本语法和标签是网页设计的第一步。
常用的HTML标签有标题（h1-h6）、段落（p）、链接（a）、图片（img）等。
1.2 CSS基础CSS用于控制网页的样式和布局。
它可以通过选择器选择网页上的元素，并为其应用样式。
了解CSS的基本语法和常用的样式属性（如颜色、字体、边框、背景等）是进行网页设计的关键。
第二章：网页设计工具为了更高效地进行网页设计与开发，可以借助一些专业的工具。
以下是一些常用的网页设计工具：2.1 Adobe PhotoshopPhotoshop是一个功能强大的图像处理软件，网页设计师常用它来创建和编辑用于网页的图像和图标。
掌握基本的Photoshop技巧，如裁剪、调整颜色和大小等，是进行网页设计的基础。
2.2 Adobe IllustratorIllustrator是用于创建矢量图形的软件，特别适用于设计和制作网页上的矢量图标和图形。
熟悉Illustrator的绘图工具和路径编辑功能可以帮助网页设计师实现更精细的设计。
2.3 Sublime TextSublime Text是一款轻量级的代码编辑器，它支持多种编程语言和自定义插件。
在网页开发过程中，使用Sublime Text可以提高代码编写的效率和舒适度。
第三章：网页布局与排版在进行网页布局时，考虑到用户的使用习惯和视觉效果非常重要。
以下是一些常用的网页布局技巧：3.1 响应式设计随着移动设备的普及，响应式设计成为了一种必不可少的技术。
通过使用CSS媒体查询和流式布局，可以使网页在不同设备上自动适应，并提供更好的用户体验。
第2章 网页设计与制作-HTML语言基础
例2.1 简单的HTML文档 <html> <head> <title>珠海欢迎您！</title> </head> <body> 这里是珠海悠游网，我们带您畅游珠海！ </body> </html>
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
网页设计制作知识点
网页设计制作知识点1. 基础知识1.1 HTML（Hypertext Markup Language）HTML是用于构建网页的标记语言，通过使用各种标签和属性，可以定义网页的结构和内容。
常见的HTML标签包括<head>、<body>、<div>、<p>等。
1.2 CSS（Cascading Style Sheets）CSS用于控制网页的样式和布局，通过将样式属性应用于HTML元素，可以改变它们的颜色、字体、大小等外观特性。
常见的CSS属性包括color、font-family、margin、padding等。
1.3 JavaScriptJavaScript是一种用于增加网页交互性的脚本语言，可以通过在网页中嵌入JavaScript代码来实现动态效果、表单验证等功能。
2. 响应式设计响应式设计是指根据设备的屏幕尺寸和分辨率，自动调整网页的布局和内容，以确保在不同设备上都能正常显示和使用。
常见的响应式设计技术包括媒体查询（Media Queries）、流体布局（Fluid Layout）和弹性图片（Flexible Images）等。
3. 网页导航3.1 导航栏导航栏用于展示网站的主要导航链接，通常位于页面的顶部或侧边。
可以使用HTML和CSS创建导航栏，并为每个链接添加交互效果。
3.2 面包屑导航面包屑导航用于显示当前页面在网站结构中的位置，让用户可以方便地进行导航和返回。
可以使用HTML和CSS创建面包屑导航，并为每个链接添加合适的指向。
4. 网页布局4.1 盒子模型盒子模型是用于布局和定位网页元素的基础概念，每个HTML 元素都可以看作是一个矩形的盒子。
通过设置盒子的宽度、高度、内边距（padding）和外边距（margin），可以精确控制元素在网页中的位置和间距。
4.2 栅格系统栅格系统是一种用于创建响应式网页布局的技术，将页面划分为多个均等的列。
HTML语言与网页设计标记符概述
绝大多数标记符都是成对出现的，包
括开始标记符和结束标记符。某些标 记符，例如<BR>，只要求单一标记 符号。 开始标记符与结束标记符的区别在于： 结束标记符多一个斜杠“/”（不是反 斜杠“\”！）
标记符属性
属性是用来描述对象特征的特性。
例如，一个人的身高、体重就是人 这个对象的属性。 在HTML中，所有的属性都放置在开 始标记符的尖括号里，多个属性之 间用空格分开，通常也不区分大小 写。
HEAD标记符
首部标记中的内容也用相应的标记符
括起来。例如，样式表（CSS）定义 位于<STYLE>和</STYLE>之间；脚 本定义位于<SCRIPT></SCRIPT>之 间。
TITLE 标记符
在首部标记符中，最基本、最常用的
标记符是标题标记<TITLE>和 </TITLE>，用于定义网页的标题。 当网页在浏览器中显示时，网页标题 将在浏览器窗口的标题栏中显示。
BODY标记符
正文标记符<BODY>和</BODY>包
含Web 页的内容。文字、图形、链 接以及其他HTML元素都位于该标记 符内。 正文标记符中的文字，如果没有其他 标记符修饰，则将以无格式的形式显 示。
小结
综上所述，一个不包含任何内容的基
本 Web 页文件如下所示：
<HTML> <HEAD><TITLE></TITLE></HEAD> <BODY></BODY> </HTML>
HTML标记符
<HTML>和</HTML>
括开始标记符和结束标记符。某些标 记符，例如<BR>，只要求单一标记 符号。 开始标记符与结束标记符的区别在于： 结束标记符多一个斜杠“/”（不是反 斜杠“\”！）
标记符属性
属性是用来描述对象特征的特性。
例如，一个人的身高、体重就是人 这个对象的属性。 在HTML中，所有的属性都放置在开 始标记符的尖括号里，多个属性之 间用空格分开，通常也不区分大小 写。
HEAD标记符
首部标记中的内容也用相应的标记符
括起来。例如，样式表（CSS）定义 位于<STYLE>和</STYLE>之间；脚 本定义位于<SCRIPT></SCRIPT>之 间。
TITLE 标记符
在首部标记符中，最基本、最常用的
标记符是标题标记<TITLE>和 </TITLE>，用于定义网页的标题。 当网页在浏览器中显示时，网页标题 将在浏览器窗口的标题栏中显示。
BODY标记符
正文标记符<BODY>和</BODY>包
含Web 页的内容。文字、图形、链 接以及其他HTML元素都位于该标记 符内。 正文标记符中的文字，如果没有其他 标记符修饰，则将以无格式的形式显 示。
小结
综上所述，一个不包含任何内容的基
本 Web 页文件如下所示：
<HTML> <HEAD><TITLE></TITLE></HEAD> <BODY></BODY> </HTML>
HTML标记符
<HTML>和</HTML>
第二章 网页设计语言_Html
标题标记用于设置文档中的标题，其中
<H1>...</H1>标记表示字体最大的标题，
<H6>…</H6>标记表示字体最小的标题。
每个标题标记所标记的字句将独占一行且上下留下一空 白行。
演示：Sample2_4.htm
水平线的插入 <hr>标志是在Html文档中加入一条水平线。
COLOR属性
设置水平线的颜色，例如<HR color=red>
2.5.1 在网页中插入图像
演示：Sample2_13.htm、Sample2_14.htm
2.5.2
播放多媒体文件
Img标记不仅用于在网页中插入图像，也可以用
于播放多媒体文件（.avi）。若要在网页中播放多媒
体文件，应在IMG标记中设置以下属性： DYNSRC：指定要播放的多媒体文件的URL。 START：指定何时开始播放多媒体文件，其取值可 以是fileopen或mouseover。
二、创建无序列表 使用UL和LI标记来创建，语法格式如下：
<UL>
<LI>列表项1
…… <LI>列表项n </UL>
UL标记的TYPE属性用于指定列表项前面显示的项目 符号，其取值可以是：
disc：使用实心圆作为项目符号（默认值）。
circle：使用空心圆作为项目符号。 square：使用方块作为项目符号。 演示：Sample2_10.htm
<P align=“center”> 演示：Sample2_7.htm 、Sample2_8.htm
二、换行标记<BR> 大多数情况下，段落标记<P>是分隔文本的最佳
网页设计之HTML标签
target
专门用于控制如何跳转 控制鼠标悬停时显示的 提示文本的。
title
提示文本
举例： 文字连接 图片链接
A标签其他属性
注意点： a标签不仅可以让文字点击，还可以让图片点击。 一个a标签必须有一个href属性，否则a标签不知道要跳转到什么 地方。 如果通过a标签的href属性指定一个URL地址，那么必须在地址 前面加上http：//或者https://。
路径问题
问题：为什么<img src=“图片名称”> 标签中，只使用图 片名称，图片就可以在页面中显示出来呢？
想给src属性赋值有两种方法： 1、通过相对路径赋值 相对路径就是每次都从.html文件所在的文件夹开始查找，我 们称之为相对路径。 2、通过绝对路径赋值 每次都从指定的盘符开始查找
相对路径的三种情况
什么是a标签?
a标签的作用：
就是用于控制页面页面与页面之间跳转的。 a标签的格式： <a href=“指定需要跳转的目标界面”>需要给用户查看的内容</a>。
属性 作用 值 _self 用于在当前选项卡中跳 转，也就是不新建界面 跳转，默认就是_self。 _blank 用于在新的选项卡中 跳转，也就是新建界 面跳转。
p标签 h系列标签 hr标签
img标签
image的缩写
<img src=“ ” > 注意点：img不会独占一行 属性：
属性 width height 关于 width和 height的 注释 title alt 含义 宽度。 高度。 如果img没有指定需要显示的图片的宽高，那么按默认的宽度 和高度。 如果修改了宽度或者高度，图片有可能产生变形。 如果相等比例改变图片大小，可以只指定宽度或者高度 鼠标悬停在图片上的时候，显示的描述图片的字符 当需要显示的图片无法显示时，显示的文字解释
html网页设计教程(推荐)
<P>标签的属性
<P Align= 参数> 其中,Align是<p>标签的属性，参数的取值为：
Left 左对齐
Center 居中对齐 Right 右对齐.
居中对齐标签center
格式： <center>……</center>
水平分隔线标签<hr>
<hr>标签是单独使用的标签，是水平线标签，用于段落与段落之间 的分隔，使文档结构清晰明了，使文字的编排更整齐。
在记事本里输入html文件代码 保存成*.html或*.htm为扩展名的文件。 如果要修改编辑，在菜单里打开“查看—源文件”。修改完后再保存。
Meta标签
Meta:about,关于。关于文档的概要信息。 比如说作者，关键字，内容提要，编码等信息。 比如gb3212是编码信息，简体中文 Big5:繁体中文 Author, password,
建立超链接
本节要点 关于超链接 链接标记 内部链接的建立 书签链接的建立 外部链接的建立
关于超链接
HTML文件中最重要的应用之一就是超链接，超 链接（hyper link)是一个网站的灵魂，web上的 网页是互相链接的，单击被称为超链接的文本或 图形就可以链接到其它页面。
如何创建一个HTML文档
HTML只是一个纯文本文件。 创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个 WEB浏览器。 编辑：HTML编辑器是用于生成和保存HTML文档的应用程序：记事 本、word、Frontpage、Dreamweaver 浏览：WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB 资源的客户端程序。
Web Design_H.T.M.L语言2 网页设计学习教程
• • • • • • • • • • •
做个实验如何？ 第一步：如果您使用 Windows，请启动记事本。 第二步：键入以下文本： <html> <head> <title>华南农业大学珠江学院</title> </head> <body> 网页设计课程 <b>此文本是粗体的</b> </body> </html>
HTML 属性
• 属性为 HTML 元素提供附加信息。 • HTML 标签的属性 • HTML 标签拥有属性。属性为 HTML 元素提供附 加信息。 • 属性总是以名称/值对的形式出现，比如： name="value" • 属性总是在 HTML 元素的开始标签中规定。
提示：
• 使用小写属性 属性和属性值对大小写敏感。不过，万维网联盟在其 HTML 4 推荐 标准中推荐小写的属性/属性值，而 XHTML 要求使用小写属性/属性 值。 • 始终为属性值加引号 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引 号也没有问题。 • 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须 使用单引号，例如： • name='John "ShotGun" Nelson'
换行符
• 当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都 会产生一个强制的换行。
<p>This <br> is a para <br>graph with line breaks </p>
认识HTML和CSS网页设计语言
认识HTML和CSS网页设计语言第一章：HTML的介绍和基本语法HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它包含一系列的标记，这些标记用于描述网页的结构和内容。
HTML的基本语法由标签、元素和属性组成。
1.1 标签HTML中的标签是一对尖括号包围的关键字，它们定义了元素的开始和结束。
例如，<head>和</head>标签用于定义网页的头部部分。
1.2 元素在HTML中，元素是由起始标签、内容和结束标签组成的。
起始标签用于定义元素的开始，结束标签用于定义元素的结束。
元素的内容位于起始标签和结束标签之间，可以包含文本、图片、链接等。
1.3 属性HTML中的属性用于为元素提供额外的信息。
属性通常包含在起始标签中，由属性名和属性值组成。
例如，<imgsrc="image.jpg">中的src属性指定了图片的链接地址。
第二章：HTML常用标签和属性2.1 文本标签HTML中的文本标签用于定义文本的样式和结构。
常用的文本标签包括<p>（段落）、<h1>-<h6>（标题）、<strong>（加粗）、<em>（斜体）等。
2.2 图片标签图片标签用于在网页中插入图片。
<img>标签是HTML中用于插入图片的标签，它需要指定图片的链接地址、宽度、高度等属性。
2.3 链接标签链接标签用于创建网页之间的链接。
<a>标签用于定义链接，它需要指定链接的目标地址，可以是其他网页、文件或者锚点。
2.4 列表标签列表标签用于创建有序或无序的列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表，<li>标签用于定义列表项。
第三章：CSS的介绍和基本语法CSS（Cascading Style Sheets）是用于描述网页样式的语言。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 在 HTML 中，除了使用颜色名称以外， 还可以用格式 #RRGGBB 来表示颜色。
演示——设置网页背景颜 色
• 例如想为网页设置黑色背景,应使用以下 HTML语句: <BODY bgcolor=“black”>
背景图案
• 使用 BODY 标记符的 BACKGROUND 属性可以设置背景图案。HTML语句为：
标记符属性
• 属性是用来描述对象特征的特性。例如， 一个人的身高、体重就是人这个对象的 属性。
• 在HTML中，所有的属性都放置在开始 标记符的尖括号里，多个属性之间用空 格分开，通常也不区分大小写。
标记符属性
• 例如，可以用字体标记符和字号属性指 定文字的大小。<FONT SIZE=1>本行字 将以较小字体显示。</FONT>
HTML语言与网页设计
——HTML基础
学习目标
• 理解网页的基本原理。 • 掌握HTML语言的语法规则，掌握基本的
网页标记符和属性。 • 了解网页制作的常用工具。
Part 1
网页的基本概念
Internet 与 WWW
• 通俗地讲，Internet 就是许多功能不同 的计算机通过线路连接起来组成的一个 世界范围的网络。
HTML的基本工作原理
• 通过在网页中添加标记符，可以告诉浏 览器如何显示网页，即确定内容的格式。 浏览器按顺序阅读网页文件（HTML文 件），然后根据内容周围的HTML标记 符解释和显示各种内容。
HTML的基本工作原理
Part 2
HTML基础
标记符概述
• 在 HTML 中，所有的标记符都用尖括号 括起来。例如，<html>、<a>。
演示——设置字符和超链 接的颜色
• <html> • <head>
• <title> 设置字符和超链接的颜色</title> • </head> • <body bgcolor=“#000000” text=“#FFFFFF”
演示——属性的作用
• <Font size=“1” color=“green”>本行字将 以较小字体显示</font>
演示效果:
Web页的基本结构
• 一个 Web 页实际上对应于一个 HTML 文件，HTML 文件以 .htm 或 .html 为 扩展名。
• 最基本的HTML文档包括：HTML标记 <HTML></HTML>、首部标记<HEAD>和 </HEAD>、以及正文<BODY></BODY>。
HTML标记符
• <HTML>和</HTML> 是Web页的第一个和最 后一个标记符，Web 页的其他所有内容 都位于这两个标记符之间。这两个标记 告诉浏览器或其他阅读该页的程序，此 文件为一个Web页。
HEAD标记符
• 首部标记<HEAD>和</HEAD>位于 Web 页的开头，其中不包括 Web 页的任何 实际内容，而是提供一些与 Web 页有 关的特定信息。
• HTML 标记符是不区分大小写的。 <html>、<Html>和<HTML>没有区别。
标记符概述
• 绝大多数标记符都是成对出现的，包括 开始标记符和结束标记符。某些标记符， 例如<BR>，只要求单一标记符号。
• 开始标记符与结束标记符的区别在于： 结束标记符多一个斜杠“/”（不是反斜 杠“\”！）
– <BODY BACKGROUND = “image.gif”>
演示——设置网页背景图 案
<html> <head> <title> 背景图案示例</title> </head> <body background=“background.jpg.”>背
景图案示例</body> </html>
字符和链接的颜色
• 设置正文和链接颜色时，可以使用 BODY 标 记符的 TEXT、LINK、VLINK 和 ALINK 属 性。
• 其中，TEXT 属性用于设置正文的颜色； LINK 属性用于设置未被访问的链接的颜色； VLINK 用于设置已被访问过的链接的颜色； ALINK 用于设置活动链接（即当前选定的链 接）的颜色。
• 正文标记符中的文字，如果没有其他标 记符修饰，则将以无格式的形式显示。
小节
• 综上所述，一个不包含任何内容的基本 Web 页文件如下所示：
<HTML> <HEAD><TITLE></TITLE></HEAD> <BODY></BODY> </HTML>
ቤተ መጻሕፍቲ ባይዱ 背景颜色
• 在<BODY>标记符中使用BGCOLOR属性 可以为网页设置背景颜色。
HEAD标记符
• 首部标记中的内容也用相应的标记符括 起来。例如，样式表（CSS）定义位于 <STYLE>和</STYLE>之间；脚本定义位 于<SCRIPT></SCRIPT>之间。
TITLE 标记符
• 在首部标记符中，最基本、最常用的标 记符是标题标记<TITLE>和</TITLE>， 用于定义网页的标题。
• 当网页在浏览器中显示时，网页标题将 在浏览器窗口的标题栏中显示。
演示——TITLE的作用
• 示例: <html> <head> <title>这里是网页标题</title> </head> <body> 请看浏览器的标题栏！
</body> </html>
演示效果:
BODY标记符
• 正文标记符<BODY>和</BODY>包含 Web 页的内容。文字、图形、链接以及 其他HTML元素都位于该标记符内。
WWW 与浏览器
网站与主页
• 在逻辑上可视为一个整体的一系列页面 的有机集合称为网站（Web Site或 Site）。
• 作为一个组织或个人在 WWW（或其他 Web）上开始点的页面称为主页 （Homepage）。
HTML 的基本工作原理
• HTML(Hypertext Markup Language) 是一种规范，一种标准，它通过标记符 （tag）来标记要显示的网页的各个部分。
Internet 与 WWW
• Internet 提供的服务：
– WWW服务（网上冲浪） – 电子邮件服务（Email） – 网上传呼（OICQ） – 文件传输（FTP） – 网络游戏（如 MUD、联网对战）
WWW 与浏览器
• WWW是由遍布在 Internet 上的称为 Web 服务器的计算机组成，它将不同的 信息资源有机地组织到一起，通过浏览 器进行浏览。
演示——设置网页背景颜 色
• 例如想为网页设置黑色背景,应使用以下 HTML语句: <BODY bgcolor=“black”>
背景图案
• 使用 BODY 标记符的 BACKGROUND 属性可以设置背景图案。HTML语句为：
标记符属性
• 属性是用来描述对象特征的特性。例如， 一个人的身高、体重就是人这个对象的 属性。
• 在HTML中，所有的属性都放置在开始 标记符的尖括号里，多个属性之间用空 格分开，通常也不区分大小写。
标记符属性
• 例如，可以用字体标记符和字号属性指 定文字的大小。<FONT SIZE=1>本行字 将以较小字体显示。</FONT>
HTML语言与网页设计
——HTML基础
学习目标
• 理解网页的基本原理。 • 掌握HTML语言的语法规则，掌握基本的
网页标记符和属性。 • 了解网页制作的常用工具。
Part 1
网页的基本概念
Internet 与 WWW
• 通俗地讲，Internet 就是许多功能不同 的计算机通过线路连接起来组成的一个 世界范围的网络。
HTML的基本工作原理
• 通过在网页中添加标记符，可以告诉浏 览器如何显示网页，即确定内容的格式。 浏览器按顺序阅读网页文件（HTML文 件），然后根据内容周围的HTML标记 符解释和显示各种内容。
HTML的基本工作原理
Part 2
HTML基础
标记符概述
• 在 HTML 中，所有的标记符都用尖括号 括起来。例如，<html>、<a>。
演示——设置字符和超链 接的颜色
• <html> • <head>
• <title> 设置字符和超链接的颜色</title> • </head> • <body bgcolor=“#000000” text=“#FFFFFF”
演示——属性的作用
• <Font size=“1” color=“green”>本行字将 以较小字体显示</font>
演示效果:
Web页的基本结构
• 一个 Web 页实际上对应于一个 HTML 文件，HTML 文件以 .htm 或 .html 为 扩展名。
• 最基本的HTML文档包括：HTML标记 <HTML></HTML>、首部标记<HEAD>和 </HEAD>、以及正文<BODY></BODY>。
HTML标记符
• <HTML>和</HTML> 是Web页的第一个和最 后一个标记符，Web 页的其他所有内容 都位于这两个标记符之间。这两个标记 告诉浏览器或其他阅读该页的程序，此 文件为一个Web页。
HEAD标记符
• 首部标记<HEAD>和</HEAD>位于 Web 页的开头，其中不包括 Web 页的任何 实际内容，而是提供一些与 Web 页有 关的特定信息。
• HTML 标记符是不区分大小写的。 <html>、<Html>和<HTML>没有区别。
标记符概述
• 绝大多数标记符都是成对出现的，包括 开始标记符和结束标记符。某些标记符， 例如<BR>，只要求单一标记符号。
• 开始标记符与结束标记符的区别在于： 结束标记符多一个斜杠“/”（不是反斜 杠“\”！）
– <BODY BACKGROUND = “image.gif”>
演示——设置网页背景图 案
<html> <head> <title> 背景图案示例</title> </head> <body background=“background.jpg.”>背
景图案示例</body> </html>
字符和链接的颜色
• 设置正文和链接颜色时，可以使用 BODY 标 记符的 TEXT、LINK、VLINK 和 ALINK 属 性。
• 其中，TEXT 属性用于设置正文的颜色； LINK 属性用于设置未被访问的链接的颜色； VLINK 用于设置已被访问过的链接的颜色； ALINK 用于设置活动链接（即当前选定的链 接）的颜色。
• 正文标记符中的文字，如果没有其他标 记符修饰，则将以无格式的形式显示。
小节
• 综上所述，一个不包含任何内容的基本 Web 页文件如下所示：
<HTML> <HEAD><TITLE></TITLE></HEAD> <BODY></BODY> </HTML>
ቤተ መጻሕፍቲ ባይዱ 背景颜色
• 在<BODY>标记符中使用BGCOLOR属性 可以为网页设置背景颜色。
HEAD标记符
• 首部标记中的内容也用相应的标记符括 起来。例如，样式表（CSS）定义位于 <STYLE>和</STYLE>之间；脚本定义位 于<SCRIPT></SCRIPT>之间。
TITLE 标记符
• 在首部标记符中，最基本、最常用的标 记符是标题标记<TITLE>和</TITLE>， 用于定义网页的标题。
• 当网页在浏览器中显示时，网页标题将 在浏览器窗口的标题栏中显示。
演示——TITLE的作用
• 示例: <html> <head> <title>这里是网页标题</title> </head> <body> 请看浏览器的标题栏！
</body> </html>
演示效果:
BODY标记符
• 正文标记符<BODY>和</BODY>包含 Web 页的内容。文字、图形、链接以及 其他HTML元素都位于该标记符内。
WWW 与浏览器
网站与主页
• 在逻辑上可视为一个整体的一系列页面 的有机集合称为网站（Web Site或 Site）。
• 作为一个组织或个人在 WWW（或其他 Web）上开始点的页面称为主页 （Homepage）。
HTML 的基本工作原理
• HTML(Hypertext Markup Language) 是一种规范，一种标准，它通过标记符 （tag）来标记要显示的网页的各个部分。
Internet 与 WWW
• Internet 提供的服务：
– WWW服务（网上冲浪） – 电子邮件服务（Email） – 网上传呼（OICQ） – 文件传输（FTP） – 网络游戏（如 MUD、联网对战）
WWW 与浏览器
• WWW是由遍布在 Internet 上的称为 Web 服务器的计算机组成，它将不同的 信息资源有机地组织到一起，通过浏览 器进行浏览。