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>
图示: