HTML & JavaScript
q 有三种类型的链接路径:
q 绝对路径(例如 http://www.sohu.com/index.html)
q 文档相对路径(例如 adver/contents.html)
q 站点根目录相对路径(例如 /support/app/customer.html,其中“/”表示根目录)
常用的事件有:
onClick
onMouseDown
onMouseOut
onMouseOver
onReset
onSelect
onSubmit
onload
常用的动作有:
弹出信息
打开浏览器窗口
转到 URL
验证表单
META 标签是一个特殊的 HTML 标签,提供有关网页的信息,如作者姓名、公司名称和联系信息等
http-equiv 属性可用来代替 META 标签中的 name 属性
<P>…</P> 标签用于标记段落
q 只要在文本中放入 <BR> 标签,就会强制换行
<PRE> 标签用于显示具有预先定义格式的文本
<BODY>
<H1>星期中的每一天</H1>
<UL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</UL>
</BODY>
无序列表也称为“项目列表”
<BODY>
<H1>星期中的每一天</H1>
<OL>
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</OL>
</BODY>
有序列表的属性
|
<LI TYPE = I>
|
<LI TYPE = i>
|
<LI TYPE = A>
|
<LI TYPE = a>
|
<OL START = n>
|
在有序列表中,列表项以自动生成的顺序显示
特殊字符
|
字符实体
|
大于号 (>)
|
>
|
小于号 (<)
|
<
|
引号 (“)
|
"
|
®
|
®
|
©
|
©
|
& 号
|
&
|
q 锚记标签用于使用户“跳”到文档的某个部分
q HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
q 为达到这种跳转效果,请在 HREF 参数中使用该标记
<A HREF= “#marker”>主题名称</A>
Conclude
q HTML 标签一般配对使用,不区分大小写
q 标签都具有属性。属性提供关于网页上 HTML 元素的附加信息
q META 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签
q 标题级标签使用<H1>…<H6>
q 段落标签使用<P align=“对齐方式”>…</P>
q 无序列表使用<UL>标签,有序列表使用<OL>标签
q 字体标签<Font color=“颜色” size=“大小” face=“字体”>
q 超链接标签<A href=“链接地址”>超链接文本</A>
Chapter 5
<CAPTION>表示表格标题
<TH>表示行或列标题,粗体显示
COLSPAN=“n” 属性表示跨多少列
ROWSPAN=“n” 属性表示跨多少行
<html>
<head>
<title>课堂练习1</title>
</head>
<body>
<table border=3 width=50%>
<caption align=top>课堂测试</caption>
<tr>
<td align=center>1</td><td align=center>2</td><td align=center>3</td>
</tr>
<tr>
<td align=center>4</td><td align=center>5</td><td rowspan=2 align=center>6</td>
</tr>
<tr>
<td colspan=2 align=center>7</td>
</tr>
</table>
</body>
</html>
<FORM action=“http://www.sohu.com” method=“post”>
action指定提交后由服务器上哪个处理程序处理
文本框、按钮、单选按钮、复选框等都是输入元素。
<INPUT type=“?” name=“?” size=”?”
value=“?” maxlength=“?” checked=“?”>
Type
|
此属性指定元素的类型。元素类型可以有多种选择:TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。
|
Name
|
此属性指定控件的名称。例如,如果表单中有几个文本框,则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。
|
Value
|
此属性是可选属性,它指定控件的初始值。但是,如果 TYPE 为 RADIO,则必须指定一个值。
|
Size
|
此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD,则控件的大小以字符为单位。对于其他输入类型,宽度以像素为单位。
|
Maxlength
|
此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。
|
Checked
|
此属性是 Boolean 属性,指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时,使用此属性。
|
<INPUT name="button1" type="submit" value="提交">
<INPUT name="button2" type="reset" value="重置">
<INPUT name="button3" type="button" value="普通按钮">
*
身份证号<input type="Text" name="PID" value=""
size="20" maxlength="18">
密 码: <INPUT type=password value=“” name=“pass" size=15>
<TEXTAREA name=“textarea” clos="20" rows="5" >请填写您的工作经历</TEXTAREA>
*
性别:<INPUT TYPE=radio NAME=”sex” VALUE=”male”>男性
<INPUT TYPE=radio NAME=”sex” VALUE=”male”>女性
你喜欢以下哪些明星:
<br>
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子
<input type="Checkbox" name="id2" value="Leon">郑秀文
<input type="Checkbox" name="id3" value="BonJovi"
checked>BonJovi
*
<B>谁是 2002 年世界杯冠军?</B>
<SELECT NAME =“myselect">
<OPTION SELECTED>西班牙</OPTION>
<OPTION>法国</OPTION>
<OPTION>巴西</OPTION>
<OPTION>德国</OPTION>
</SELECT>
*
<HTML>
<HEAD>
<TITLE>求职者</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312"> </HEAD>
<BODY bgcolor="#FFBFFF">
<P align="center"><FONT size="5">申请表</FONT>
<HR color="#FF9F00" >
<FORM ACTION="http://somesite.com/processform" METHOD="POST">
姓名:
<INPUT TYPE="TEXT" ID="firstname">
<P>感兴趣的职位:
<P>
<INPUT TYPE=RADIO NAME="CONTROL1" VALUE="0" CHECKED>Web 设计人员
<INPUT TYPE=RADIO NAME="CONTROL1" VALUE="1" >Web 管理员
<INPUT TYPE=RADIO NAME="CONTROL1" VALUE="2" >Web 开发人员
<P>其他要求<BR>
<TEXTAREA NAME="CONTROL3" COLS="30" ROWS="5">包括薪水待遇、工作地点等。
</TEXTAREA>
<P><INPUT NAME="CONTROL4" TYPE=CHECKBOX CHECKED>发送确认信息
<BR>
经验
<SELECT NAME="CONTROL2">
<OPTION>无经验</OPTION>
<OPTION>1 年</OPTION>
<OPTION>3 年</OPTION>
<OPTION>5 年</OPTION>
</SELECT>
<P>
<INPUT name="提交" TYPE=submit VALUE=" 确 定 ">
<INPUT name="重置" TYPE=reset VALUE=" 重 置 ">
</FORM>
</BODY>
</HTML>
Conclude2
<TABLE width=“?” border=“?” align=“?”>
<CAPTION> 表格标题</ CAPTION >
<TR bgcolor=“?”>
<TH align=“?”>数据1 <TH>
<TH align=“?”>数据2 <TH>
…..
</TR>
<TR bgcolor=“?” >
<TD align=“?”>数据11 </TD>
<TD align=“?”>数据22</TD>
</TR>
</TABLE>
*
<FORM action=“?” method=“?” >
文本框 <INPUT type=“text” name=“?” value=“?”
maxlength=“?">
密码框 <INPUT type=“password” name=“?” value=“” >
文本域 <textarea name=“?” clos=“?” rows=“?”>
</textarea >
单选按钮<INPUT TYPE=radio NAME=”?” VALUE=”?”>
男性
复选框<input type="Checkbox" name="?" value="?">
酒井法子
*
<SELECT NAME ="?">
<OPTION >选项1</OPTION>
<OPTION>选项2</OPTION>
<OPTION>...</OPTION>
</SELECT>
<INPUT type="Submit" value="提交" name="?">
<INPUT type="reset" value="重置" name="?">
</ FORM>