1. 随堂测验
1.1 简述Web的工作原理。
1.用户通过客户端浏览器访问Internet上网站或者其他网络资源时，通过在浏览器输入网站或者网页的（统一资源定位符）网址，或者通过超链接方式链接到另外的网页或者资源；
2.通过域名服务器进行全球域名解析，并根据解析结果访问指定IP的网站或网页；
3.获取网站IP地址后，客户端浏览器向指定IP地址的Web服务器发送一个HTTP（hypertext transfer protocol, 超文本传输协议）请求；
4.Web服务器响应客户端请求，将用户所需的HTMML文本，图片和构成该网页的其他一切文件发送给用户；
5.如需访问数据库系统数据，Web服务器将控制权转给音乐宫服务器，根据web服务器的数据请求读写数据库，并进行相应的数据库访问操作，应用服务器将数据查询响应发送给Web服务器；
6.Web服务器将查询结果发给客户端浏览器；
7.浏览器将客户端请求网页页面内容组成一个页面展示给用户。
1.2 分别说明HTML、CSS、JavaScript在Web网页设计中的作用。
HTML是Web网页信息结构基础；
CSS是Web网页表现技术，对网页布局、字体、颜色、背景和其它效果实施更加精确的控制；
JavaScript是网页的行为，实现网页的动态、交互的功能。
1.3 写出HTML文件命名规则。
1.文件的扩展名为html或者htm，建议统一用html作为文件名的后缀。
2.文件名中只可由英文字母、数字或下划线组成，建议以字母或下划线开始。
3.文件名中不能包含特殊符号，如空格、$、&等。
4.文件名区分大小写，特别在Unix、Linux系统中大小写表示的文件是不同。
5.网站首页文件名一般是index.html或default.html。
1.4 简述有哪些段落相关标记及其作用。
1.段落<p>标记用来起始一个段落，它是一个块级元素 。段落p标记会自动在其前后创建一些空白。
基本语法
<p align=“left|center|right">段落正文内容</p>
2.换行标记<br>
基本语法
<br> 换行
<nobr> 不换行
<wbr> 强制换行
在HTML<p>段落正文内容<br>另起一行</p>
文档中，<br>元素属于单标志，表示插入换行符。
如果想强制浏览器不显示换行，可以使用nobr标记。
强制换行，使用<wbr>
3.水平分割线标记<hr>
<hr> 元素可以浏览器上显示一条细线以分隔两个区域。
基本语法
<hr size="" color="" width="" align="" >
属性值说明
width像素px或百分比设置水平线宽度。
size整数，单位px设置水平线高度
noshadenoshade设置水平线无阴影
colorrgb函数、十六进制数，颜色英文名称设置水平线颜色
alignLeft、center、right设置水平线对齐方式
4.内容居中标记<center>
基本语法
<body>
<center>居中显示的内容</center>
</body>
center标记可以实现所包含的内容一次性居中显示。
没有别的属性。
center标记也是淘汰标记。
5.段落缩进标记<blockquote>
在设计网页时，利用段落缩进来增加段落的层次效果。
基本语法
<body>
<blockquote>需要缩进的内容</blockquote>
</body>
说明
一对blockquote标记能够向右缩进5个西方字符的位置。
案例演示段落缩进标记<blockquote>使用。
6.预格式化标记<pre>
<pre></pre>标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。
基本语法
<pre>预格式化文本</pre>
1.5 说明制作页面书签的步骤，并举例说明。
书签是指到文章内部的链接，可是实现段落间的任意跳转。实现这样的链接要先定义书签名称和书签链接。
书签定义步骤：
1.定义书签名
基本语法
<a name="name">书签标题</a>
name属性:指定书签的名称
2.定义书签链接-基本语法
<a href="#name">书签标题</a><!-- 同一页面内 -->
<a href="URL#name">书签标题</a> <!-- 不同页面间 -->
URL：是放置标记的HTML文件的URL
name：标记名，对于同一文件，可以直接写成<a href="#name">text</a>
书签案例：
<!DOCTYPE html>
<html>
<head> </head>
<body>
<a name="top"><h2>课程介绍</h2></a>
<!-- 制作4个书签的链接 -->
<a href="#T1">数据结构</a><br />
<a href="#T2">计算机组成原理</a><br />
<a href="#T3">计算机网络</a><br />
<a href="#T4">人工智能</a>
<h3><a name="T1">数据结构</a></h3>
<p> 《数据结构》是计算机应用技术、计算机控制技术以及计算机基础。</p>
<!-- 定义一个返回总目录书签的链接 -->
<a href="#top">返回页首</a> <br />
<h3><a name="T4">人工智能</a></h3>
<p> 人工智能是计算机科学的。</p>
<p><a href="edu_3-3_bookmark.html#zhineng">人工智能发展现状介绍</a></p>
</body>
</html>
案例图示：
1.6 使用标记可以在页面中插入图像，如何设置图像的高度和宽度？如何设置替换文本？
<img src="url" width="" height="" hspace="" vspace="" align="" border="" alt="">
属性说明：
src(source)：图像的 URL路径(相对路径、绝对路径)。
alt：添加图片的替代文字
width/height：设置图片的宽度和高度(px,%)
border：设置图片边框(px)
align：设置图片对齐方式（水平/垂直两个方向）
hspase/vspase：设置图片的间距设置(单位不加px)
1.7 表格行对齐方式有几类，他们的属性取值有什么不同？
行内容水平对齐align:left(默认值)、center、right
行内容垂直对齐valign:top、middle (默认值) 、bottom
1.8 简要说明表格与框架在网页布局时的区别。
表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上；
框架技术可以将浏览器分割成多个小窗口，在每个小窗口中可以显示不同的网页。
1.9 如何让框架或者浮动框架能够动态地加载其他HTML文档？
使用超链接实现动态加载HTML文档
<frame name="framename" src="*.html" >
<iframe name="iframename" src="*.html" ></iframe>
<a href="targethtml" target="framename | iframename " >链接标题</a>
1.10 一个表单有哪几部分组成？
一个表单由三部分组成：
表单标记：包含了处理表单数据所用CGI程序的URL，以及将数据提交到服务器所采取的方法。
表单域：包含了单行文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉列表框和文件选择框等。
表单按钮：包括提交按钮、重置按钮和普通按钮。
1.11 使用列表标记编写HTML代码，实现如下网页效果。
源代码：
<!DOCTYPE html>
<html>
<head>
<title>windows不同版本</title>
</head>
<body>
<ol>
<li>Windows 95</li>
<li>Windows 98</li>
<li>Windows NT</li>
<ul type="disc">
<li>Windows NT Workstation</li>
<li>Windows NT Server</li>
</ul>
<li>Windows 2000</li>
<ul type="disc">
<li>Windows 2000 Professional</li>
<li>Windows 2000 Server</li>
<li>Windows 2000 Advance Server</li>
</ul>
<li>Windows XP</li>
<li>Windows Vista</li>
<li>Windows 7</li>
<li>Windows 8</li>
</ol>
</body>
</html>
图示：
1.12 使用表格跨行跨列标记编写HTML代码，实现如下网页效果。
其中，A、B、C、D加粗显示，且都位于各自单元格的正中间，A单元格的高度为200像素，B单元格的高度为100像素，C单元格的宽度为100像素，高度为200像素。
表格的表框、线型及其颜色自己可以随意设置。
源代码：
<!DOCTYPE html>
<html>
<head>
<title>表格实验</title>
</head>
<body>
<table border="5" align="center" width="600px" height="600px">
<tr align="center">
<td rowspan="2">A</td>
<td colspan="2">B</td>
</tr>
<tr align="center">
<td>E</td>
<td rowspan="2">C</td>
</tr>
<tr align="center">
<td colspan="2">D</td>
</tr>
</table>
</body>
</html>
图示：
1.13 编写HTML代码，创建如下框架网页。
注意：共包含4个文件，名称分别为main.html、frame_a.html、frame_b.html、frame_c.html。
源代码：
main.html
<!DOCTYPE html>
<html>
<head>
<title>框架页面</title>
</head>
<frameset rows="50%,50%">
<frame src="frame_a.html">
<frameset cols="30%,70%">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</frameset>
</html>
frame_a.html
<!DOCTYPE html>
<html lang="en">
<body>
<h1>内容a</h1>
</body>
</html>
frame_b.html
<!DOCTYPE html>
<html lang="en">
<body>
<h1>内容b</h1>
</body>
</html>
frame_c.html
<!DOCTYPE html>
<html lang="en">
<body>
<h1>内容c</h1>
</body>
</html>
图示：
1.14 编写HTML代码，实现如下表单。
源代码：
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
</head>
<body>
<form action="" target="_self">
<fieldset>
<legend>注册</legend>
<table border="1" width="950px" height="950px" align="center">
<!-- 用户名 -->
<tr>
<td width="300px" bgcolor="#008001">用户名</td>
<td bgcolor="#ffff00">
<input type="text" placeholder="用户名为中文" />
</td>
</tr>
<!-- 密码 -->
<tr>
<td width="300px" bgcolor="#008001">密码</td>
<td bgcolor="#ffff00">
<input type="password" />
</td>
</tr>
<!-- 确认密码 -->
<tr>
<td width="300px" bgcolor="#008001">确认密码</td>
<td bgcolor="#ffff00">
<input type="password" />
</td>
</tr>
<!-- 年龄 -->
<tr>
<td width="300px" bgcolor="#008001">年龄</td>
<td bgcolor="#ffff00">
<input type="text" />
</td>
</tr>
<!-- 性别 -->
<tr>
<td width="300px" bgcolor="#008001">性别</td>
<td bgcolor="#ffff00">
<fieldset>
<legend>请选择性别</legend>
<input
id="man"
type="radio"
checked="checked"
name="1"
/>男
<input id="woman" type="radio" name="1" />女
</fieldset>
</td>
</tr>
<!-- 城市 -->
<tr>
<td width="300px" bgcolor="#008001">城市</td>
<td bgcolor="#ffff00">
<select name="" id="">
<option value="北京">北京</option>
</select>
</td>
</tr>
<!-- 城市中的地区 -->
<tr>
<td width="300px" bgcolor="#008001">城市中的地区</td>
<td bgcolor="#ffff00">
<select name="" id="">
<option value="武进区">武进区</option>
</select>
</td>
</tr>
<!-- 交友目的 -->
<tr>
<td width="300px" bgcolor="#008001">交友目的</td>
<td bgcolor="#ffff00">
<select name="" id="" multiple>
<option value="普通朋友">普通朋友</option>
<option value="对象">对象</option>
<option value="一般朋友">一般朋友</option>
</select>
</td>
</tr>
<!-- 爱好 -->
<tr>
<td width="300px" bgcolor="#008001">爱好</td>
<td bgcolor="#ffff00">
<input type="checkbox" value="艺术" />艺术
<input type="checkbox" value="音乐" />音乐
<input type="checkbox" value="嫦娥" />唱歌
</td>
</tr>
<!-- 图片上传 -->
<tr>
<td width="300px" bgcolor="#008001">图片上传</td>
<td bgcolor="#ffff00">
<input type="file" value="选择文件" />
</td>
</tr>
<!-- 自我介绍 -->
<tr>
<td width="300px" bgcolor="#008001">自我介绍</td>
<td bgcolor="#ffff00">
<textarea
name=""
id=""
cols="30"
rows="10"
></textarea>
</td>
</tr>
</table>
<table border="1" width="950px" height="50px" align="center">
<!-- 按钮 -->
<tr>
<td>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<input type="button" value="普通按钮" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
图示：
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
