本章目标
理解服务器与浏览器的操作原理;
掌握HTML核心标签的使用。
服务器与浏览器
当用户通过网页的地址访问服务器的时候,服务器会根据用户的请求将用户需要的内容传到客户端,在客户端用户通过浏览器就可以进行信息的访问。
HTTP协议
HTTP协议(Hypertext Transfer Protocol,超文本传输协议),HTTP协议是一个客户端请求和回应的标准协议,用户输入地址和端口号之后就可以从服务器上取得所需要的网页信息。
HTML简介
HTML(超文本标记语言)是网络上的通用语言,也是网络Web语言的基础。它是一种标记语言,通过嵌入代码或标记来表明文本格式。
一个基本的 HTML 页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
</head><!--完结标记-->
<body><!--网页主体-->
<center><!--让内容居中显示-->
<h2><!--二号标题-->
<font color="blue">百度一下,你就知道</font><!--黑色字体-->
</h2><!--完结标记-->
<h3><!--三号标题-->
<a href="http://www.baidu.com">www.baidu.com</a><!--超链接-->
</h3><!--完结标记-->
</center><!--完结标记-->
</body><!--完结标记-->
</html><!--完结标记-->
效果图:
其他的显示元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
</head><!--完结标记-->
<body><!--网页主体-->
<center><!--让内容居中显示-->
<table border="1" width="80%"><!--定义表格-->
<tr><!--表格行-->
<td colspan="6"><!--跨6列-->
<font size="15">字体显示</font><!--设置显示字体-->
</td>
<td rowspan="2"><!--跨2行-->
<img src="images/chaoyi.jpg" /><!--显示图片-->
</td>
</tr>
<tr><!--表格行-->
<td><b>粗体</b></td><!--表格列-->
<td><i>斜体</i></td><!--表格列-->
<td><u>下划线</u></td><!--表格列-->
<td><s>中划线</s></td><!--表格列-->
<td>90<sup>o</sup></td><!--表格列-->
<td>H<sub>2</sub>O</td><!--表格列-->
</tr>
</table>
</center><!--完结标记-->
</body><!--完结标记-->
</html><!--完结标记-->
效果图:
创建表单WEB页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
</head><!--完结标记-->
<body><!--网页主体-->
<form action="" method="post"><!--表单开始-->
<!--输入文本框,size表示显示长度,maxlength表示最多输入长度-->
编 号:<input type="text" name="userid" value="NO." size="2" maxlength="2" /><br />
<!--输入文本框,通过value指定其显示的默认值-->
用户名:<input type="text" name="username" value="请输入用户名" /><br />
<!--密码框,其中所有输入的内容都以密文的形式显示-->
密 码:<input type="password" name="userpass" value="请输入密码"><br />
<!--单选按钮,通过checked指定默认选中,名称必须一样,其中value为真正需要的内容-->
性 别:<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女<br />
<!--下拉列表框,通过<option>元素指定下拉的选项-->
部 门:<select name="dept">
<option value="技术部">技术部</option>
<option value="销售部" selected="selected">销售部</option>
<option value="账务部">账务部</option>
</select><br />
<!--复选框,可以同时选择多个选项,名称必须一样,其中value为真正需要的内容-->
兴 趣:
<input type="checkbox" name="inst" value="唱歌" />唱歌
<input type="checkbox" name="inst" value="游泳" />游泳
<input type="checkbox" name="inst" value="跳舞" />跳舞
<input type="checkbox" name="inst" value="编程" checked="checked" />编程
<input type="checkbox" name="inst" value="上网" />上网 <br />
<!--大文本输入框,宽度为30列,高度为3行-->
说 明:<br />
<textarea name="note" cols="30" rows="3">大文本输入框</textarea><br />
<!--提交表单和重置表单,当选择重置后,所有表单恢复原始显示内容-->
<input type="submit" value="注册" /><input type="reset" value="重置" />
</form><!--完结标记-->
</body><!--完结标记-->
</html><!--完结标记-->
效果图:
小结
HTML 是 WEB 开发的主体语言,其显示元素、表格元素为重点;
必须熟练的掌握 HTML 表单元素的使用。