html(hypertext markup language:超文本标记语言):
是一种用来设计网页的标记语言,以.html或者.htm为后缀的文件,幵且由浏览器解释执行,生成相应的界面。
1 html文件的基本结构
<!--根标记叫html -->
<html>
<head>
<!--head描述页面的数据-->
<title>标题</title>
<!--http-equiv属性 :设置消息头 content属性:设置消息头的值。-->
<meta http-equiv="content-type" content="text/html ; charset=utf-8">
<!--refresh :刷新,content :刷新的频率每间隔一段时间重新加载页面-->
<meta http-equiv="refresh" content="3">
<!--引入css样式文件-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--引入js脚本-->
<script type="text/javascript" src="../demo.js"></script>
<!--自定义页面样式-->
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!--body存放页面显示的内容-->
</body>
</html>
2 html重要的标记
2.1 链接
<a href= "#" target="# " title="#" >链接</a>
<!--
href属性:指定链接的地址
target属性:指定在哪个窗口打开链接,值可以指定为:
_slef:在当前窗口中打开(缺省)
_blank:新窗口中打开
title:提示信息
-->
2.1.1 使用图片作为链接
<a href="">
<img src="#" width="" height="#" border="0"/>
</a>
<!--
src:对于img标签,src指定图片的地址
wdith:宽度
height:高度
border:边框(0表示没有边框)
-->
2.1.2 锚点(实现在同一个页面内部跳转)
<a name="top">首页</a> <a href="#top">跳转到首页</a>
2.1.3 热点(将图片的某区域作为链接)
step1:先使用 map 标记划分图片区域 <map name="Map"> <area shape="rect" coords="407,20,560,77" href="a.html"> <area shape="rect" coords="580,22,734,76" href="b.html"> </map> <!-- shape="rect"表示矩形 coords="407,20,560,77"表示矩形在图片的相对位置 407: 表示矩形左上角距离图片左上角的横坐标 20: 表示矩形左上角距离图片左上角的纵坐标 560: 表示矩形右下角距离图片左上角的横坐标 77: 表示矩形右下角距离图片左上角的纵坐标 --> step2:使用 map <img src="index04.jpg" width="772" height="357" border="0" usemap="#Map"> <!-- usemap="#Map"表示使用名字为"Map"的图片 -->
2.2 规则表格
<table border="" width="" cellpadding="" cellspacing="">
<tr align="">
<td align=""></td>
<td></td>
</tr>
</table>
<!--
border:边框的宽度,单位是像素(缺省值是 0)
idth:表格的宽度,可以用百比分(表示该表格占父标记的宽度),也可以是绝对值
cellpadding:单元格内容不单元格乊间的空隙
cellspacing:单元格不单元格乊间的空隙
align:水平对齐,值有"center","right","left"
-->
2.2.1 不规则表格
1) colspan:跨列合幵单元格
2) rowspan:跨行合幵单元格
3) valign:垂直对齐,值有"top"、"middle"、"bottom"
<table border="1" width="60%" cellpadding="0" cellspacing="0"> <tr> <td>1</td> <td colspan="2">2</td> </tr> <tr> <td rowspan="2" align="center" valign="top">4</td> <td>5</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> </table>
2.2.2 表格的完整的结构
<table>
<caption>表格的标题</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
<!--
thead、tfoot:这两个标记可以不出现,如果出现,只能出现一次
tbody:可以出现多次,至少也要出现一次
caption:只能出现一次或者不出现
-->
<table border="1" width="40%" cellpadding="0" cellspacing="0"> <caption>员工信息</caption> <thead> <tr> <td>员工姓名</td> <td>工资</td> </tr> </thead> <tbody> <tr> <td>sdd</td> <td>20000</td> </tr> <tr> <td>zbs</td> <td>80000</td> </tr> </tbody> <tbody> <tr> <td>lg</td> <td>20000</td> </tr> <tr> <td>csb</td> <td>80000</td> </tr> </tbody> <tfoot> <tr> <td>工资合计</td> <td>200000</td> </tr> </tfoot> </table>
注:表格可以嵌套。
2.3 表单
<form action="" method="" enctype="">
</form>
<!--
action:属性:表单提交后由哪一个程序来处理
method:属性:表单提交方式
enctype:属性:设置表单的MIME编码
-->
2.3.1 表单标记
1) 文本输入框
<input type="text" name="" value=""/>
<!--
type 属性:input标记的具体类型,type内容可以不写,默认是文本框
name 属性:标记的名称,用于生成请求参数,如果没有命名,则浏览器不会该数据发送给服务器
value 属性:缺省值
-->
2) 密码输入框
<input type="password" name="" />
3) 单选
<input type="radio" name="" value="" checked="checked" />
<!--
单选按钮应是互斥的,只能选择其中一个
同一组单选按钮,name 必须相同
value 属性:发送给服务器端的值
checked 属性:就一个值"checked",表示缺省被选上
-->
4) 多选
<input type="checkbox" name="" value="" checked="" />
5) 文件上传
<input type="file" name=""/>
注: 此时form需要设置属性enctype='multipart/form-data';
6) 提交按钮
<input type="submit" value="Confirm" />
<!--
value 属性:按钮上面的文字
当点击提交按钮时,浏览器默认情况下,会将表单中的数据发送给服务器
-->
7) 重置按钮
<input type="reset" value="reset"/>
<!--
当点击提交按钮时,浏览器会将输入的数据清空
-->
8) 隐藏域
<input type="hidden" name="" value=""/>
<!--
不会在界面上显示出来,一般用于向服务器传送数据。
name属性:设置参数名
value属性:设置参数值
-->
9) 普通按钮
<input type="button" value=""/>
<!--
value 属性:按钮上面的文字,点击该按钮,浏览器什么都不做,需要编程实现功能
-->
10)下拉列表
<select name="" multiple="">
<option value=""></option>
</select>
<!--
value 属性:是提交给服务器的值
multiple 属性:就一个值"multipart"设置该属性值以后,下拉列表变成了一个多选框
-->
11)多行文本输入框
<textarea name="" cols="" rows=""></textarea>
2.4 无序列表
<ul> <li></li> </ul
2.4.1 有序列表
<ol> <li></li> </ol>
2.5 窗口 (frameset & frame)
<frameset rows="20%,*">
<frame name="topFrame" src="top.html"/>
<frameset cols="30%,*">
<frame name="leftFrame" src="left.html"/>
<frame name="mainFrame" src="main.html"/>
</frameset>
</frameset>
<!--
frameset: 标记不能够与body标记同时出现
rows属性: 将窗口划分成几行
cols属性: 将窗口划分成几列
frame: 标记定义子窗口,其中,src指定加载的页面
-->
<html> <head></head> <frameset rows="20%,*"> <frame name="topFrame" src="top.html"/> <frameset cols="30%,*"> <frame name="leftFrame" src="left.html"/> <frame name="mainFrame" src="main.html"/> </frameset> </frameset> </html>
2.6 Iframe 在当前窗口当中嵌入一个子窗口
<iframe src="" width="" height=""></iframe>
<!--
src属性:指定加载的页面
iframe:标记可以用在body标记里
-->
<html> <head></head> <body style="font-size :30px ;font-style :italic;"> hi,this is a iframe demo.<br/> <iframe src="html01.html" width="300" height="300"></iframe> </body> </html>