Web页面制作基础（一）

最新推荐文章于 2023-01-02 18:30:11 发布

iteye_6481

最新推荐文章于 2023-01-02 18:30:11 发布

阅读量554

点赞数 1

文章标签：数据库

HTML语言概述

HTML是超文本标记语言（Hyper Text Markup Language)的缩写，下面通过一段简单的HTML代码了解一下HTML的结构。

<html>
	<head>
		<title>这是标题部分</title>
	</head>
	<body>
		<p>你好，这是正文部分！</p>
	</body>
</html>

这段程序的功能就是地显示“标题”的地方显示“这是标题部分“。在正文的地方显示”你好，这是正文部分！“，如上图。

HTML文件的开头和结尾分别由<html>和</html>来标记的。所有HTML文件都可以分为两个部分：标题和正文。每一部分特定的标记标出：在HTML语言中规定<head>和</head>标记标题部分，用<body>和</body>标记正文部分。

HTML语言和其他语言存在很大的区别，如它不包含赋值语句和判断、循环等流程控制语句。正如名字所指出的，HTML是一种标记语言，它定义了一系列的特殊标记，以便区分页面的不同部分。

从例子可以看出，HTML描述的是文档内容的结构，而不是文档被查看时屏幕上的实际显示样式。文档的格式化是通过浏览器来完成的：当浏览器读入一个Web页面时，将分析HTML的标记，以决定文本和图像在屏幕中的显示形式，浏览器为标记的名称和它们在屏幕中的实际显示样式之间建立了映射。要注意的是，对某些标记部分，不同的浏览器查看一个Web文档，其看到的结果可能不同。这就是HTMl的特性。

制作表单

表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以进行用户调查或民间测验，也可以用来显示注册或定购信息。

表单一般由两个部分组成：HTML代码和CGI程序。其中HTML代码主要用来生成表单的可视化界面，CGI程序主要用来负责对表单所包含的信息进行解释或处理，CGI程序可以用ASP构成。

在HTML中，form的标记是<form>和</form>,即开始和结束标记，在开始时标记中一般包含两个属性民：action和method

form中常用的标记：

input,select,textarea三个标记，这是在form中最常用的。

1、input

<input type="...." name="..." ...>...

举例：

<html>
	<head>
		<title>这是标题部分</title>
	</head>
	<body>
		<form method="post" action="table.aspx">
			<p>姓名：<input type="text" name="T1" size="20"></p>
			<p>密码：<input type="password" name="T2" size="20"></p>
			
			<p>你什么什么CGI编程语言：</p>
			<p><input type="checkbox" name="C1" value="ON">vb Script</p>
			<p><input type="checkbox" name="C2" value="ON">Java Script</p>
			<p><input type="checkbox" name="C3" value="ON">PHP</p>
			<p><input type="checkbox" name="C4" value="ON">ASP</p>
			
			<p>你最擅长哪种CGI编程语言</p>
			<p><input type="radio" value="V1" name="R1">Vb Script</p>
			<p><input type="radio" value="V2" name="R1">Java Script</p>
			<p><input type="radio" value="V3" name="R1">PHP</p>
			<p><input type="radio" value="V4" checked name="R1">ASP</p>
			<p><input type="submit" value="提交" name="B1">
				<input type="reset" value="全部重写" name="B2"></p>
		</form>
	</body>
</html>

显示的界面：

2.select

在form中使用这个标记可以在浏览器窗口中显示一个下拉列表或带有滚动条的列表框，用户可以在列表中选择一个或多个选项。这一点和input中的单选按钮和多选按钮作用相似，只是形式上有些不同。

举例：

<html>
	<head><title>2-3页面</title></head>
	<body>
		<form method="post" action="table.aspx">
			<p><select size="2" name="D1" multiple>
				<option selected>php</optioin>
				<option>asp</option>
				<option>vb script</option>
				<option>java script</optioin>
				</select><p>
			<p><input type="submit" value="提交" name="B1">
				<input type="reset" value="全部重写" name="B2"></p>
		</form>
     </body>
</html>

显示：

3、textarea

在form中使用这个标记可以在浏览器中出现一个可以输入多行文字的输入框。它有开始和结束标记，类似于text类型的input框，区别于text类型的input框只能输入单行信息，textarea为用户提供了输入多行信息的途径。

举例：

<html>
	<head><title>2-4页面</title></head>
	<form method="post" action="table.aspx">
		<p><textarea rows="4" name="S1" cols="20"></textarea></p>
		<p><input type="submit" value="提交" name="B1">
			<input type="reset" value="全部重置" name="B2"></p>
	</form>
</html>

显示：