Document

Download Report

Transcript Document 

HTML标记语言
HTML超文本标记语言





HTML (HyperText Markup Language)
是Web网页信息的表示语言，用于描述网页的格式设
计及其与Web上其他网页的连接信息。使用HTML语
言描述的文件，需要通过Web浏览器来解析并显示出
效果。
HTML是网页的基础语言,所有的开发工具都以HTML
为基础。
不管是用何种语言编写的网络应用程序，经服务器端
处理后，结果都将以HTML语言的形式发送的客户端。
Html的编辑工具很多，可以任意选择。
标记语言的发展历史经过了：SGML，HTML，
XHTML， XML， CSS 等阶段
HTML超文本标记语言


Html是标记的集合,这些标记由”<>”括在一
起,有些标记还是成对出现的.
<html>//开始标记
• <head>//头部文件
• <title>
•
hello world
•
</title>
• </head>
•
<body>
•

</body>
</html>//结束标记
HTML超文本标记语言

body属性
•
•
•
•
•
bgcolor:表示背景颜色
text:表示文字颜色
link:表示超级链接颜色
alink:表示正在链接时的颜色
vlink:表示已经链接后的颜色
颜色值的设定:
Black
purple
White
navy 深蓝
Red
aqua 水蓝
Green
lime 青绿
Blue
fuchsia 紫红
yellow
<body bgcolor="aqua" text="navy"
link="purple" vlink="red" alink="yellow">
网页内容
</body>
也可以用16进位值的形
式指定颜色
HTML超文本标记语言

段落标记
• <p>
• <p align=center/left/right>
align属性用来指明段落显示时的对齐方式,一般值有left, right, center等
• <p>asp学习基础</p>

换行标记
• <br>
段落标记同换行标记的区别在于,段落标记表示一个段落的结
束,行与行之间空一行,而换行标记不空.

置中对齐标记
• <center>编辑区域</center>
• <center>标记内的所有组件,将以置中对齐的方式显示在
网页中
HTML超文本标记语言
• <HR>可以在屏幕上显示一条水平分隔线





Size:显示水平线的组细
Width:显示水平线的宽度占屏幕长度的多少
Align:显示水平分隔线的对齐方式
Color:显示线条的颜色
Noshade:水平线不显示3D效果
• <hr size=2 width=50% color=“green”>
HTML超文本标记语言

HTML的标题,字体,字号,样式,颜色
• 标题<H1>
 标题1<H1></H1>
 标题2<H2></H2>
• 文字大小<font size>
 <font size=7>abcd</font><p>
 <font size=6>abcd</font><p>
• 字体与样式<font face>
 <font face=“楷体_GB2312”>abcd</font>
• 颜色<font color>
 <font color=“#000000”>abcd</font>
如：<center><font size=20 face="楷体_GB2312"><i>欢迎
光临上海金融学院信息管理学院</i></font></center>
HTML超文本标记语言













特定的文字格式
<b>粗体
<i>斜体
<u>下划线
<s>删除线
<em>强调
<strong>加强强调
<address>地址
<code>代码
<big>放大
<small>缩小
<sup>上标
<sub>小标
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>HTML基本标记</title>
</head>
<body bgcolor="#66FFFF" link="#0000FF" alink="#FFFF00"
vlink="#FF0000" >
<center><H1><font color="#0000FF">信息管理学院
</font></H1></center>
<hr />
<h2><font color="#FF0000"><strong>系别：</strong></font></h2>
<p align="center"><font size=4><i>信息管理系，计算机工程系，电子商务系
</i></font>
<h2><font color="#FF0000">专业课程：</font></h2>
<p align="center"><font size=4><i>数据库，网络原理，软件工程
</i></font></p>
</body>
</html>


应用样式属性Style可以减少繁琐的属性设
置。
Style属性是编写CSS的基础。
应用样式属性
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>HTML基本标记应用样式</title>
</head>
<body style="background-color:#66FFFF; font-size:9px; textalign:left" >
<H1 style="color:#0000FF; text-align:center; font-family:'楷体
_GB2312'" >信息管理学院</H1>
<hr />
<h2 style=" font-size:20px; color:red" >系别：</h2>
<p style="text-align:center; font-style:italic"><font size=4>信息管理
系，计算机工程系，电子商务系</font>
<h2 style=" font-size:20px; color:red" >专业课程：</h2>
<p style="text-align:center; font-style:italic"><font size=4>数据库，
计算机原理，软件工程</font>
</body>
</html>
HTML超文本标记语言

HTML提供了3种列表形式:
• 序号列表
<OL type=序号种类 start= 序号开始编号>
<Li>第一项
</OL>
• Type=1/A/a/I/I
1:表示数字,A/a表示大小写英文字母,I/i表示大小写罗马数字
<ol type=“A” start=“A” ><b><font size=“5”>网站开发与设计
</font></b>
<hr />
<li><font size="4">HTML标记语言</font></li>
<li><font size="4">JavaScript脚本语言</font></li>
<li><font size="4">C#语言</font></li>
</ol>
HTML超文本标记语言
• 无序号列表
<UL type=circle/disc/square>
 <Li>第一项
 </UL>
circle表示空心圆圈,disc表示实心圆圈,square表
示实心方框

• 例如:
<ul type=disc>
<li>项目1</li>
<li>项目2</li>
</ul>
HTML超文本标记语言

定义性列表
•
•
•
•
•
•
•
•
<DL>
<DT>第一项
<DD> 叙述第一项的定义
<DT>第二项
<DD> 叙述第二项的定义
<DT>第三项
<DD> 叙述第三项的定义
</DL>
HTML超文本标记语言


表格标记<Table>
<Table>是一个非常重要的标记
• <TR>用以标识表格列(row)
• <TH>用来定义表格的标题单元格,要架粗显示
• <TD>用以标识单元格(cell)





<table border=1>
<tr><th>书名</th><th>数量</th><th>单价
</th></tr>
<tr><td>电脑自动化标准教程
</td><td>5000</td><td>22</td></tr>
<tr><td>photoshop cs图象处理标准教程
</td><td>3000</td><td>24</td></tr>
</table>
HTML超文本标记语言

Table的基本属性
• border=数值 /用语控制表格框线的厚度
• cellspacing=数值 /用于控制单元格边框到表
格边框的距离
• cellpadding=数值 /用于控制单元内文字的边
缘到单元格边框的距离
border
cellspacing
cellpadding
HTML超文本标记语言
bordercolor /设置边框的颜色
bgcolor /设置背景颜色
width/用于设置整个表格的宽度,可以用n%来设定其
占整个网页宽度的百分数.
height/用于设置整个表格的高度
align /用于表示表格的对齐方式
HTML超文本标记语言
TR中的基本属性
• align
• align=left/right/center
• 表示单元格中文字的水平方向的对齐方式
• valign
• valign=top/middle/bottom(baseline)
• 表示单元格中文字垂直方向的对齐方式
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>表格标记</title>
</head>
<body>
<table bgcolor="#FFFF00" border="1" align="center" width="80%"
>
<tr >
<th>书名</th><th>作者</th><th>出版社</th>
</tr>
<tr align="center" bgcolor="#66FF00"><td>C++语言</td><td>刘红
</td>
<td>机械工业出版社</td></tr>
<tr bgcolor="#FFCCCC"><td align="center">网站开发与设计
</td><td>王强</td>
<td>交通出版社</td>
</tr>
</table>
</body>
HTML超文本标记语言

TH/TD中的属性
• Colspan:设置水平单元跨度//删除自己的多余单元格
• Rowspan:设置垂直单元跨度//删除别人的多余单元格
<table>
<tr><th>书名</th><th>数量</th><th>价格</th></tr>
<tr><td>电脑自动化标准教程</td><td>5000</td><td>22</td></tr>
<tr><td>图象处理标准教程</td><td>3000</td><td>24</td></tr>
</table>
<table >
<tr><th>书名</th><th colspan=2>数量</th></tr>
<tr><td>电脑自动化标准教程</td><td>5000</td><td>22</td></tr>
<tr><td>图象处理标准教程</td><td>3000</td><td>24</td></tr>
</table>
HTML超文本标记语言
<table border=4 cellspacing=2 cellpadding=6 width=60%
align=center>
<tr>
<td>书名</td><td>数量</td><td>单价</td>
</tr>
<tr>
<td>企业资源计划</td><td>40</td><td>1224</td>
</tr>
<tr>
<td>网页编程</td><td>40</td><td>1200</td>
</tr>
</table>
HTML超文本标记语言
<table border=4 cellspacing=2 cellpadding=6 width=60%
align=center>
<tr>
<td>书名</td><td>数量</td><td rowspan=3>单价</td>
</tr>
<tr>
<td>企业资源计划</td><td>40</td>
</tr>
<tr>
<td>网页编程</td><td>40</td>
</tr>
</table>
HTML超文本标记语言


HTML链接标记
本地链接




以引用文件的网页所在位置为参考基础而建立的
目录路径.
<A href=“index.htm”></A>//当前目录
<A href=“./index.htm”></A>//当前目录
<A href=“../zyxz.htm”></A>//上级目录
HTML超文本标记语言

路径引用方式
“.”表示当前目录
“..”表示上一层目录

例如:

http://localhost/

dir1
Ref.htm
subdir2
• 如果要在ref.htm中引用red.gif
• 相对路径引用方式： ./subdir2/red.gif
Red.gif
HTML超文本标记语言

URL链接
• <A HREF=www.shfc.edu.cn> </A>

目录链接
• 目录链接的目的是在一个文件内部。可以指向文件的某一部
分。目录链接首先要加标记，然后跳转
• <A NAME=“链接位置名称”></A>
• <A HREF=“文件名#链接位置名称”>链接文字</A>


<a name=“hello”>hello</a>
<a href=default.htm#hello>返回</a>
动态网页ASP

数据的传递过程
• ASP中最重要的元素<form></form>-表单
• 服务器端和客户端数据的交互

发送端(发送)
• Post/get

服务器端(接收)
• Request(“控件名称”)
• Request.form(“控件名称”)
• Request.querystring(“控件名称”)
动态网页ASP

FORM标记
• 网页需要接受用户的输入并对用户的输入做
出响应，使网页具有交互功能.
• 用户一般输入文本或者选择菜单项等方式来
填写表单，然后执行提交操作。这样表单的
内容就从客户端的浏览器上传到服务器上，
经过服务器上的ASP或CGI等处理程序处理
后，再将用户所需要的信息传回客户端的浏
览器上。
动态网页ASP

FORM标记
• <Form action=目的 name=name1 target= 目标
窗口method=get/post></form>

FORM标记中的主要属性
• Action

Action指定表单数据所在的地址
• Method
• 指定表单中数据传输的方式



Get发送数据 Request.Querystring[]
Post 发送数据Request.Form[]
Get/post发送数据 Request[]
• Target

用来指定目标窗口
• 表单交互是交互式网站制作不可缺少的元素，主要用来
实现网站交互功能.
客户端程序

Mycustomer.html
• <form name="form1"
action="http://localhost/myserver.asp"
method="post">
• <input type="text" name="text1" />
• <input type="submit" name="submit1"
value="提交" />
• </form>
服务器端程序

Myserver.asp
• <script language="javascript"
runat="server">
• mystring=Request.Form("text1");
• Response.Write("您所提交的内容为：")
• Response.Write("<hr>")
• Response.Write(mystring);
• </script>
ASP中的基础控件
• 文本标签(label)
• 普通按钮(button)
• 重置按钮(Reset Button)
• 提交按钮(Submit Button)
• 文本框(Text)
• 文本区(TextArea)
• 密码文本框(Password Field)
• 复选框(Checkbox)
• 单选按钮框(Radio Button)
• 图象(image)
ASP中的基础控件

按钮控件
• <input type=submit/reset name=按钮名
称 value=显示值>

如：
• <input name=submit1 type=submit
value=“送出”>
• <input name=submit1 type=reset
value=“清楚”>
ASP中的基础控件



文本框
<input type=text/password name=文
本框名称 value=传出值>
如：
• <input type=text name=textName value=“please input
your name”>
• <input type=password name=PassName value=“please
input your Password”>
ASP中的基础控件

文字区域
<textarea rows=行数 cols=列数 name=控
件名称>
默认输入值
</textarea>

例如：
•
•
•
•
<textarea rows=2 cols=30 name=txtamsg>
姓名 年龄 学号
张三 18 200701
</textarea>
ASP中的基础控件

下拉列表方块
<select name=控件名称 size=1>
<option value=传出值1 selected>选项1</option>
<option value=传出值2>选项2</option>
…
…
<option value=传出值N>选项N</option>
</select>

例如：
<select name=listforJob size=1>
<option slected>学生</option>
<option>公务员</option>
<option>教师</option>
<option>工人</option>
</select>
ASP中的基础控件

清单方框
<select name=控件名称 size=控件大小 Multiple>
<option value=传出值1 selected>选项1</option>
<option value=传出值2>选项2</option>
<option value=传出值N>选项N</option>
</select>



当size=1时，表示下拉列表框
当size>1时，无Multiple标记时，表示清单方框
当size>1,且有Multipe标记时，表示多选清单方框
ASP中的基础控件
<select name=tbxbook size=1 >
下拉列表框
<option value=“01” selected>工程师</option>
<option value=“02”>学生</option>
<option value=“03”>教师</option>
<option value=“03”>解放军</option>
</select>
<select name=tbxbook size=3 >
单选型清单方框
<option value=“01” selected>计算机</option>
<option value=“02”>数学</option>
<option value=“03”>语文</option>
</select>
多选型清单方框
<select name=tbxbook size=3 Multiple>
<option value=“01” selected>计算机</option>
<option value=“02”>数学</option>
<option value=“03”>语文</option>
</select>
ASP中的基础控件



单选钮
<input type=radio name=单选钮名称
value=传出值 checked>
例如：
<input type=“radio” name=rdoJob
value=“student” checked>踢球
<input type=“radio” name=rdoJob
value=“student” >唱歌
<input type=“radio” name=rdoJob
value=“student” >看书
ASP中的基础控件

复选框
<input type=checkbox Name=复选框名称 checked>

例如：
<input type=“checkbox” name=chkbox1>杭州
<input type=“checkbox” name=chkbox2>苏州
<input type=“checkbox” name=chkbox3>南京
ASP中的基础控件

群组复选框
<input
<input
<input
<input
type=“checkbox”
type=“checkbox”
type=“checkbox”
type=“checkbox”
name=chkbox1
name=chkbox1
name=chkbox1
name=chkbox1
value=“01”
value=“02”
value=“03”
value=“04”
checked>上海
>杭州
>苏州
>南京
练习，由客户端向服务器端传送数据


ASP.NET是
想将页面上
所有的内容
都用控件表
示。
完成以下页
面，在服务
器端显示出
提交结果