实验五 HTML入门Word文档下载推荐.docx
《实验五 HTML入门Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《实验五 HTML入门Word文档下载推荐.docx(12页珍藏版)》请在冰豆网上搜索。
8.这是HTML最基本的格式,都是不可缺少的。
9.<
/body>
10.<
/html>
3)基本标记是用来定义页面属性的一些标记语言。
通常一份HTML网页文件包含3个部分:
标头区<
HEAD>
……<
/HEAD>
、内容区<
BODY>
/BODY>
和网页区<
HTML>
/HTML>
。
i.<
<
标志用于HTML文档的最前边,用来标识HTML文档的开始。
而<
标志恰恰相反,它放在HTML文档的最后边,用来标识HTML文档的结束,两个标志必须一块使用。
ii.<
和<
构成HTML文档的开头部分,在此标志对之间可以使用<
、<
script>
/script>
等标志对。
这些标志对都是用来描述HTML文档相关信息的,<
标志对之间的内容是不会在浏览器的框内显示出来的,两个标志必须一块使用。
iii.<
是HTML文档的主体部分,在此标志对之间可包含<
p>
/p>
h1>
/h1>
hr>
等众多的标志。
它们所定义的文本、图像等将会在浏览器的框内显示出来。
标志主要属性如表3-2-2所示。
HTML标记是由“<
”和“>
”所括住的指令标记,用于向浏览器发送标记指令。
主要分为:
单标记指令、双标记指令(由“<
起始标记>
”+内容+“<
/结束标记>
”构成)。
常用的单标记是<
和<
双标记:
标记>
/标记>
,前者为头标记,后者多一斜杠“/”为尾标记,即结束标记。
4)标记属性
许多单标记和双标记的开始标记内可以包含一些属性,通过这些属性可以对这些标记进行更进一步的设置。
其语法是:
标签名字属性1="
属性值"
属性2="
属性3="
…>
在这段语法中,各个属性之间没有先后次序,属性的值一般使用引号("
"
)括起来。
当属性值为数字的时候,例如设置字号级别时,一般则不使用引号。
另外,属性也可省略,当某一属性省略的时候,将取其默认值。
5)操作:
在上例中的第8行之后,插入一回车,并输入如下内容:
HRALIGN="
center"
WIDTH="
70%"
>
6)学习在帮助文件中查找ALIGN和WIDTH的用法。
(如在“2HTML、CSS、JavaScript标签参考.pdf”)。
并在运行。
7)将第5句的<
修改为<
bodybgcolor=”#66FFFF”text=”blue”>
8)在编写HTML文件时,特别要注意的是:
标记内的空格或字符串中的空格是不被HTML所承认的,必须使用专门的空格标记来表示(&
nbsp;
),以后将要学习这种空格标记。
在HTML中,标记命令是不区分大小写的,也就是说<
….<
是完全合法的。
还要说明的是HTML可不像Java一样那么智能,当标记命令出现错误时,HTML不会显示错误信息,这时候就需要自己去寻找错误。
9)完成后检查进行记录
参考:
三、格式标记(用于<
标志对之间的)
1)在上文的第9句之后,按回车输入以下内容:
dl>
dt>
静态网页格式<
/dt>
dd>
HTLM<
/dd>
HTM<
XML<
动态网页格式<
ASP<
PHP<
JSP<
/dl>
2)关于<
(目标是会看出这是外列表)
用来创建一个普通的列表;
用来创建列表中的上层项目;
用来创建列表中最下层项目,<
都必须放在<
标志对之间。
3)关于<
div>
/div>
标志对用来排版大块HTML段落,也用于格式化表,此标志对的用法与<
标志对非常相似,同样有align对齐方式属性。
操作:
在上文的<
之外加入<
divalign=’”center”>
四、图像标记
1)关于<
img>
标志并不是真正地把图像加入到HTML文档中,而是将标志对的src属性赋值。
这个值是图像文件的文件名,其中包括路径,这个路径可以是相对路径,也可以是网址。
所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。
假如网站的HTML文件与图像文件(文件名假设是logo.gif)在同一个目录下,则可以将代码写成<
imgsrc="
logo.jpg"
假如网站的图像文件放在当前的HTML文档所在目录的一个子目录(子目录名假设是images)下,则代码应为<
images/logo.jpg"
通常图像文件都会放在网站中一个独立的目录里。
必须注意一点,src属性在<
标志中
是必须赋值的,是标志中不可缺少的一部分。
除此之外,<
标志还有alt、align、border、width和height属性。
align是图像的对齐方式;
border属性是图像的边框;
width和height属性是图像的宽和高,默认单位也是像素;
alt属性是当光标移动到图像上时显示的文本。
2)操作:
在第22句之前,回车并输入。
(以第二句为准)
/upfiles/200907/200972083917458.jpg"
>
(这是绝对路径起点是/表示从根目录开始)
../upfiles/200907/200972083917458.jpg"
width="
400"
height="
300"
(这是相对目录,相对于当前文档的位置:
表示上级目录)
五、链接标记
ahref="
……"
/a>
href的值可以是URL形式,即网址或相对路径,也可以是mailto:
形式,即发送E-mail
形式。
例如,在22行图片标记的两端加上:
http:
//192.168.1.108"
点击进入XX网站<
(其中IP为你站点的IP地址)
再回车换行后再输入以下
mailto:
users@"
点击发邮件给我<
2)<
aname="
aname=””>
标志对要结合<
标志对使用才有效果。
用来创建一个标签(即做一个记号),属性name是不可缺少的,它的值即是标签名。
(以前的锚链接)
例如:
标签名"
此处创建了一个标签<
创建标签是为了在HTML文档中创建一些链接,以便能够找到同一文档中有标签的地方。
要找到标签所在地,就必须使用<
标志对。
例如要找到“标签名”这个标签,就要编写如下代码:
#标签名"
单击此处将使浏览器跳到“标签名”处<
href属性赋的值若是标签的名字,必须在标签名前边加一个“#”号。
在第5句之后回车输入:
one"
这是页首<
在第26句之后回车输入:
#one"
返回首页<
最终代码如下图:
六、表格标记
1)在ASP文件中新建静态网页5-2.html。
2)用鼠标操作建立三行三列的表格,要求表格和单元格内容都水平居中对齐,表格宽200像素。
切换到拆分视图,如下图所示:
表格标记对于制作网页是很重要的,现在很多网页都是使用多重表格,主要是因为表格不但可以固定文本或图像的输出,而且还可以任意地进行背景和前景颜色的设置。
table>
/table>
<
标志对用来创建一个表格。
它的属性较多,诸如bgcolor、bordercolor、
cellpadding等。
4)<
tr>
/tr>
标志对用来创建表格中的每一行。
此标志对只能放在<
标志对之间使用,而在此标志对之间加入文本将是无效的。
5)<
td>
/td>
标志对用来创建表格中一行中的每一个表格,此标志对只有放在<
标志对之间才是有效的。
6)<
th>
/th>
标志对用来设置表格头,通常是黑体居中文字。
手工将第一行合并为一个单格并写上“合并单元格”
1将<
tdcolspan="
2"
中的改为3。
——得到第一个单元格跨了___列。
并向右突出___个单元格。
2将第一行的第二个单元格删除。
用鼠标点击拆分窗口的下半部分可观察到结果。
七、表单标记
表单在Web网页中用来给访问者填写信息,从而获得用户信息,使网页具有交互的功能。
1)<
form>
/form>
(表单区域)
标志对用来创建一个表单,即定义表单的开始和结束位置,在标志对之间的一切都属于表单的内容。
标志具有action、method和target属性。
action的值是处理程序的程序名(包括网络路径:
网址或相对路径)。
method属性用来定义处理程序从表单中获得信息的方法,可取值为GET和POST。
GET方法是从服务器上请求数据。
POST方法是发送数据到服务器。
两者的区别在于GET方法所有参数会出现在URL地址中,而POST方法的参数不会出现在URL中。
通常GET方法限制字符的大小,POST则允许传输大量数据。
target属性用来指定目标窗口或目标帧。
inputtype="
inputtype=””>
标志用来定义一个用户输入区,用户可在其中输入信息。
此标志必须放在<
标志对之间。
标志中共提供了8种类型的输入区域,具体是哪一种类型由type属性来决定。
3)“text”是单行文本框;
属性主要是name。
用于指定文本框名称,相当于变量名可以对他赋值
4)“submin”表示提交按钮,value表示按钮上方的文字。
新建5-3.html,并输入以下代码
在<
标签之间输入
●<
formaction="
5-3.asp"
method="
get"
target="
_blank"
label>
●你的名字<
text"
name="
name"
/>
/label>
●你的学号<
id"
submit"
Submit"
value="
提交"
6)将已写好的5-3.asp和5-3B.asp存在ASP文件夹中。
打开上述两文件比较用GET方式对应使用Request.QueryString("
)
用POST方式对应使用Request.form("
7)运行5-3.html
8)修改将method=”GET”改为”POST”,另存为5-3B.asp。
再运行,不成功。
9)再将active=”5-3.asp”改为”5-3B.asp”。
再运行,即可。
10)再如“radio”表示单选。
新建静态网页文件5-4B.html。
输入如下代码
radio"
xb"
男"
11)将5-3B.asp修改为如下,并另存为5-4B.asp
12)如“checkbox”复选,如上网<
checkbox"
like"
上网"
13)新建静态网页文件5-4.html。
14)输入动态网页5-4.asp的内容如下:
你喜欢的活动有
%=Request.Form("
).Count%>
种,分别是:
%
ForEachjInRequest.Form("
)
Response.Write("
&
j)
Next
%>
15)运行5-4.asp,检查结果
16)实现5-5.html网页如下:
17)实现动态网页5-5.asp
八、检查记录成绩