第2章 HTML基础应用
第2章 HTML设置与编写
学会设置编码平台
学会设置编码平台
3.设置“代码格式”参数
说明：除了“大小写自动转换”之外的所有首选参数只影响新文档和新添加 到现 有文档的部分。 “自动缩进”方法：查看/代码视图选项/自动缩进
学会设置编码平台
4.设置“代码提示”参数
此对话框允许用户指定首选参数，以确定Dreamweaver在“代码”视图和快 速标 签编辑器中显示代码的方式和时间。
学会设置编码平台
“内容”：指如何插入标签的内容，即是否将换行符、格式设置和缩进规则
应用于内容。Fra bibliotek“大小写”：指定特定标签的大小写。选项为：默认、小写、大写、混合
大
小写 “+”：添加标签 “－”：删除标签
编 写 代 码
1.编码环境
Dreamweaver 8编码环境支持的语言类型： HTML、XHTML、CSS、JavaScript、VBScript、ColdFusion、ASP、、 JSP、PHP 2.代码提示功能 示例：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>代码提示功能</title> <script language="javascript"></script> </head> <body> </body> </html>
第2章 html基础语法
第2章目录
第2章 HTML语言基础 HTML语言基础
六、超链接标记
链接－当前页面与其他相关页面间的联结关系；链 接的目标可以是任何图像和文件。若浏览器能识别就显 示，不能识别就下载 格式：<A>…</A> 功能：在当前页面和其他页面间建立链接。 主要属性见附表。 【举例2 【举例2－7】超级链接
第2章目录
第2章目录
功能：分区显示文档(布局)
第2章 HTML语言基础 HTML语言基础
说明：在一个文本块或许多段落中设置布局(对齐) 方式，经常使用DIV，它可以将文档内容分成区块一次 性地布局
注意：★若单个align属性出现在DIV内的标题或段 注意：★若单个align属性出现在DIV内的标题或段 落中,这些值将使全局变量DIV的设置无效 落中,这些值将使全局变量DIV的设置无效 ★DIV不是段落类型，故DIV应与其它标记配 DIV不是段落类型，故DIV应与其它标记配 合使用( 合使用(如P、Hn、UL、BLOCKQUOTE等) Hn、UL、BLOCKQUOTE等 ★也可以用CENTER代替DIV 也可以用CENTER代替DIV
第2章目录
【举例2 【举例2－4】文本标记综合示例
第2章 HTML语言基础 HTML语言基础
四、列表格式标记
1、有序列表 格式：<OL type=“符号类型”> <LI type=“符号类型”>……</LI> <LI type=“符号类型”>……</LI> …… </OL> 功能：建立有序列表
第2章目录
第2章目录
【举例】<Br>标记 【举例】<Br>标记
第2章 HTML语言基础 HTML语言基础
第二章HTML语言基础
第二章HTML编程基础HTML是超文本标记语言（Hypertext Markup Language）的缩写，是Web环境的语言基础。
浏览器的主要功能就是识别和解释HTML语言，从而决定网页内容的显示方式。
HTML只是一种描述性的标记语言，不是编程语言，没有复杂的语法和结构，因而非常简单易学。
2．1 构建HTML网页HTML文件是纯ASCII码文件，可以用任何纯文本编辑工具（如记事本）编写，一般使用Dreamweaver或FrontPage这些所见即所得的可视化工具更为方便。
2.1.1HTML页面的基本组成启动 Dreamweaver 时自动建立一个新的空白HTML文档。
切换到“代码”视图窗口，就可以看到以下代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head><body></body></html>从中可见，一个基本的HTML文档总是以标记<html>开始，以</html>结束。
其中用<head></head>和<body></body>把文档分为两个部分。
<head>与</head>之间的是文件头，文件头内包含关于文件的说明信息，这些信息并不在浏览器窗口中显示。
在<body>和</body>之间的内容是文档的体，包括文本、图形、窗体和框架等，都是窗口中要显示的内容。
HTML 文件结构如图2-1所示。
图2-1 HTML文件结构2.1.2HTML标记的特点(1)HTML标记均是用尖括号<>阔起来的，大多数标记是成对出现和使用的，有开始标记和对应的结束标记，结束标记在尖括号中使用反斜杠“/”，其用法格式为：<标记名>文本</标记>比如：<title>无标题文档</title>，这条语句的作用是在浏览器的标题栏显示“无标题文档”几个字。
网络程序设计课后答案
网络程序设计课后答案【篇一：网络程序设计—asp(第3版尚俊杰编著)课后习题答案】txt>1. 选择题（可多选）（1）静态网页的扩展名一般是：a.htm b .phpc.aspd.jsp答案：a（2）asp文件的扩展名是：a.htmb. txtc. docd. asp答案：d（3）当前的web程序开发中通常采用什么模式？a. c/sb. b/sc. b/bd. c/c答案：b解释：c/s是客户机(client)/服务器（server），b/s是浏览器（browser)/服务器。
c/s一般要求用户有特定的客户端。
比如qq就是c/s模式，你的桌面上的qq就是腾讯公司的特定的客户端，而服务器就是腾讯的服务器。
而b/s模式则不需要特定的客户端，只要有普通浏览器，就可以访问到服务器了，web页就是b/s 模式。
（4）小王正在家里通过拨号上网访问搜狐主页，此时，他自己的计算机是：a. 客户端b. 既是服务器端又是客户端c. 服务器端d. 既不是服务器端也不是客户端答案：a（5）小王正在访问自己计算机上的网页，此时，他自己的计算机是： a. 客户端b. 既是服务器端又是客户端c. 服务器端d. 既不是服务器端也不是客户端答案：b（6）asp脚本代码是在哪里执行的？a. 客户端b. 第一次在客户端，以后在服务器端c. 服务器端d. 第一次在服务器端，以后在客户端答案：c解释：asp脚本代码是在服务器端运行的，服务器将其解释执行为标准的html代码，然后发送到客户端。
（7）在以下url中，从形式上看正确的是：a. .cn/history/1998/intro.aspb. .cn/news/1.jpg答案：a b c d解释：从形式上看，都是正确的。
（8）如果在chapter1下建立了一个子文件夹images，并且在其中放置了一个图片文件1.jpg，那么以下url正确的是：a. http://localhost/asptemp/chapter1/images/1.jpgb. http://127.0.0.1/asptemp/chapter1/images/1.jpg答案：a b（9）对于1.5.5节建立的1-2.asp，以下浏览方式正确的是：a. http://localhost/temp/1-2.aspb. http://127.0.0.1/temp/1-2.aspc. http://localhost/asptemp/chapter1/temp/1-2.aspd. http://127.0.0.1/asptemp/chapter1/temp/1-2.asp答案：a b c d解释：ab两种方式利用了建立的虚拟目录，cd实际上没有用到这个虚拟目录，此时和1-1.asp没有什么区别。
第2章 HTML、XHTML、HTML5
第2章 HTML、XHTML、HTML5
第14页
2.2.5 命名空间
在XHTML文档中，还有一句常见的代码： <html xmlns="/1999/xhtml" > xmlns，即XHTML Namespace的缩写，即命名空间。 该属性声明了html顶级元素的命名空间，用来定义该顶级元 素以及其包含的各级子元素的唯一性。由于XML语言允许用 户自定义标签，使用命名空间，可以避免自己定义的标签和 别人定义的标签发生冲突。比如，如果两个人定义了一个一 模一样的文档，若文件头部没有xmlns命名空间的区分，就 会发生冲突，如果在文档头部加上了不同的命名空间，则文 档不会冲突。通俗地讲，命名空间就是给文档做一个标签， 标明该文档是属于哪个网站的。对于HTML文档来说，由于 它的元素是固定的，不允许用户进行定义，所以指定的命名 空间永远是/1999/xhtml。
第20页
2.4 新增和废除的属性
2.4.1 新增的属性 2.4.2 废除的属性
第2章 HTML、XHTML、HTML5
第21页
2.4.1 新增的属性
HTML5中新增的属性主要体现在表单属性、链接 属性以及其他属性。
第2章 HTML、XHTML、HTML5
第22页
2.4.1 新增的属性
第2章 HTML、XHTML、HTML5
第2页
本章的学习目标
了解H TML语言的作用、结构和语法 了解XHTML和XML的关系，及XHTML的 语法特点 掌握HTML5的语法和元素 掌握HTML5中新增的以及废除的元素 掌握HTML5中新增的和废除的属性 掌握HTML5新增的全局属性 掌握HTML5新增的事件
第2章 HTML入门
图2-2 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
2.3.1 HTML文档的基本架构 • HTML文档的基本结构如下：
<html> <head> 文件头信息 </head> <body> 文件体信息 </body> </html> ——文件开始标记 文件头标记
2.4.1 文本格式
2．文字修饰标记
• HTML文档允许在要显示的文字两端添加各种文字修
饰标记，这些标记及其功能描述如下表 ：
2.4.1 文本格式
[例2]文字修饰标记——制作如图2-5所示的多格式网页 文本效果 。
图2-5字体修饰标记的应用
2.4.1 文本格式
代码如下：
<html> <head> <title>文字修饰标记</title> </head> <body> <B>粗体字</B><p> <I>斜体字</I><p> <U>加下划线</U><p> <sub>下标字效果</sub><p> <strike>带删除线字体</strike><p> <Strong>字体强调效果</strong><p> </body> </html>
2.4.2 段落格式
第2章 HTML语言基础
<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部 文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页 外观以及创建特殊效果。 在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式 使用内嵌样式以应用层叠样式表属性到网页元素上。 例如段落标记符的内嵌样式属性如下： <p style="border-style: solid">
2.2.3 HTML中样式表的书写
2．嵌入式样式表 若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>
第2章 HTML语言基础
2.1.2 HTML文件
【例2-1】简单的HTML文件。 <HTML> <HEAD> <TITLE> 简单的HTML文件 </TITLE> </HEAD> <BODY> 最简单的网页 </BODY> </HTML>
17
2.2 HTML语言的段落、超链接、图片标记
2.2.1 简单标记的认识与使用
表2-2 16种标准颜色
23
2.2.1 简单标记的认识与使用
例2-2 使用网页的背景色（bgcolor）属性，可以设定整个 网页的背景颜色；使用网页的文本色（text）属性，可以设 定整个网页文字的颜色。 <HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue>
就其本质而言，是一个基于文本的编码标准，用于指示浏
览器以什么方式显示信息。 HTML是一种用于网页制作的排版语言，是Web最基本的构 成元素。HTML并非一种编程语言。 组成HTML的“命令”就是标记，它用符号“<”和“>”括起
来。
3
2.1.1 HTML概述
2. HTML的作用
① 格式化文本。 ② 建立超链接。
注意： ①并不是所有的标记都有属性，如换行标记<BR>。 ②根据需要可以用该标记的所有属性，也可以只用 需要的几个属性，在使用时，属性之间没有顺序。多 个属性之间用空格隔开。 属性和标记一样，都不区分大小写。但为了阅读方 便，本书用大写字母表示标记，小写字母表示属性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2
Байду номын сангаас
2.2 基本标志
• 2.2.1 文档标志 <HTML></HTML> 文档标志:
• <HTML>标志用于HTML文档的最前边，用来标识HTML文档的开始， </HTML>标志放在HTML文档的最后边，用来标识文档的结束。
3
• 2.2.2 文件头标志 <head></head>
• 文件头标志为<head></head>标志对。
• <head>和</head>构成HTML文档的开头部分，在此 标志对之间可以使用<title></title>、<script></script> 等标志对。这些标志对都是描述HTML文档相关信息的 标志对，<head></head>标志对之间的内容是不会在 浏览器的框内显示出来的。
4
• 2.2.3 文件主体标志 <body></body>
• 文件主体标志为<body></body>标志对。 • <body></body>是HTML文档的主体部分，在此标志对之间可包含 <p></p>、<h1></h1>、<br>、<hr>等众多的标志。在此标志对之 间所定义的文本、图像等将会在浏览器的框内显示出来。<body>标 志中还有如表2-1所示的属性。
图2-2
10
• • • • • • • • • • • • • • • • • • •
<html> <head> <title>实现有数字或圆点的列表标签和普通列表的综合实例</title> <!文件标题标志--> </head> <body text=“green”> <ol> <p>侦探小说</p> <li>荷兰鞋之谜</li> <li>罗马帽子之谜</li> <li>案例舒城</li> </ol> <ul> <p>中国四大名著</p> <li>红楼梦</li> <li>西游记</li> <li>三国演义</li> <li>水浒传</li> </ul>
17
• 2.4.4 文本标志的综合应用
• 下面是一个文本标志综合应用的例子，其在浏览器中的显示结果 如图2-4所示。
图2-4
18
• • • • • • • • • • • • • • • •
文本标志综合应用的例子 <html> <head> <title>文本标志综合应用实例</title> </head> <body> <p><b>黑体字标记效果</b></p> <p><i>斜体字标记效果</i></p> <p><u>下加下划线标记效果</u></p> <p><tt>标准打字机字体</tt></p> <p><cite>引用方式效果</cite></p> <p><em>斜体强调标记效果</em></p> <p><strong>粗体强调标记效果</ strong ></p> <p><font size=“+1” color=“blue”>size取值“+1”，color取值“blue”时的 文本</font></p> </body> </html>
16
• 2.4.3 文字大小、字体、颜色标志 文字大小、字体、
• <font></font>标志对用来定义输出文本的字体大小、颜色。它主 要是通过对它的两个属性size和color来实现的。 • size属性用来标识字体的大小，它的可取-N、N和+N； • color属性则用来标识文本的颜色。颜色的取值可以是十六进制 RGB颜色码或HTML语言的颜色常量名。
22
• • • •
2.5.3 图像标志综合应用 下面是介绍一个有关图像标志应用的例子。 代码如下(见课本) 在浏览器中显示的结果如图2-5所示。
图2-5
23
2.6 表格标志
• 2.6.1 创建表格标志
• <table></table>标志对用来创建一个表格，有如表2-2所示的属性。 表2-2 <table></table>标志属性 标志属性 属性 <table bgcolor=""> <table border=""> <table bordercolor=""> <table bordercolorlight=""> <table bordercolordark=""> <table cellspacing=""> <table cellpadding=""> <table width=""> 设置表格的背景色 设置边框的宽度，若不设置此属性，则边框宽度默认为0 设置边框的颜色 设置边框明亮部分的颜色（当border的值大于等于1时才有用） 设置边框昏暗部分的颜色（当border的值大于等于1时才有用） 设置表格的单元格之间的空间大小 设置表格的单元格边框与其内部内容之间的空间大小 设置表格的宽度，单位用绝对像素值或总宽度的百分比
20
• 须强调的是，在<img>标志中必须对src属性赋值。除此之外， <img>标志还有alt、align、border、width和height属性： • ① align是图像的对齐方式。 • ② border属性是图像的边框，可以取大于或者等于0的整数，默 认单位是像素。 • ③ width和height属性是图像的宽和高，默认单位也是像素。 • ④ alt属性是当鼠标移动到图像上时显示的文本。 • ⑤ hspace属性是图像与左边对象的水平间距，vspace属性是图 像与上边对象的垂直间距。
表2-1 <body>标志属性 标志属性 属性 <body bgcolor="#rrggbb"> <body text="#rrggbb"> <body link="#rrggbb"> <body vlink="#rrggbb"> 用途 设置背景颜色 设置文本颜色 设置链接颜色 设置已使用的链接的颜色
19
2.5 图像标志
• 2.5.1 图像属性赋值标志
• 通常有以下3种情况： • （1）若HTML文件与图形文件logo.gif在同一个目录下，则可写成 <img src="logo.gif">。 • （2）若图形文件放在当前的HTML文档所在目录的一个子目录 images下，则代码应为<img src="images/logo.gif">。 • （3）若图形文件放在当前的HTML文档所在目录的上层目录 home下，则相对路径就必须是准网址，即用“../”表示网站，然 后在后边紧跟文件在网站中的路径。 • 若home是网站下的一个目录，则代码应为<img src="../home/logo.gif">，若home是网站下的目录king下面的一个 子目录，则代码应该变为<img src="../king/home/logo.gif">了。
11
• • • • • • • •
<dl> <dt>其他名著</dt> <dd>警世恒言</dd> <dd>醒世恒言</dd> <dd>喻世明言</dd> </dl> </body> </html>
12
• 2.3.4 标题格式标志
• HTML语言提供了6对对文本标题进行操作的标志对： <h1></h1>…<h6></h6>。其中，<h1></h1>是最大的标题， <h6></h6>则是最小的标题。当HTML的文档中需要输出标题文 本时，可使用这6对标题标志对中的任何一对。 • 下面是各种标题在浏览器中的效果的一个例子。 • 在浏览器中的显示效果如图2-3所示。
第2章 HTML基础应用 章 基础应用
本章主要介绍HTML基础应用，包括基本标志、页面格式标志、文本标志、 图像标志、表格标志、链接标志、帧标志、表单标志、多媒体标志等。
1
2.1 HTML基础知识 基础知识
• HTML是用来建立网页文件的语言。所谓超文本，就是它可以加 入图片、声音、动画、影视等内容，可以从一个文件跳转到另一 个文件，与世界各地网站主机的文件相链接。用HTML编写的超 文本文档称为HTML文档，扩展名为.HTM或.HTML，它能独立运 用于各种操作系统平台。编写HTML超文本文档的软件有文件编 辑器或FrontPage等编辑软件。使用HTML语言描述的超文本文档， 需要通过WWW浏览器显示出效果。