本文详细介绍了HTML的基本使用方法，包括超链接、图片、列表、表格、表单等元素的使用技巧及注意事项。
HTML
超链接：{
<a href=”http://www.baidu.com”>百度一下，你就知道</a>
Frameset属性：1、cols=”30%,200,*”：以列方式分割，左半部占30%，中间部分200pixel，剩下为第三部分；
2、rows=”30%,200,*”：以行方式分割，上半部占30%，中间部分200pixel，剩下为第三部分；
3、border=”1”：框线宽度pixel；
4、frameborder=”yes”：是否显示框线，no不显示框线。
Frame定义子网页：1、scrolling=”No”：不会有scrolling bar，默认为yes；
2、Noresize：使用者无法调整分割网页的大小。
<a>标签中的target属性：1、指定名称：名称为frame名称；
2、打开一个新窗口（_blank）；
3、链接会开启在原本窗口中，并占满整个浏览器窗口（_top）；
4、占满目前子网页的frameset所指定区域（_parent）。
例如：<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.google.com" target="_blank">谷歌</a>
<a href="http://www.163.com" target="_blank">网易</a>
<a href="http://www.sina.com" target="_blank">新浪</a>
<a href="http://www.sohu.com" target="_blank">搜狐</a>
例如：邮箱页面
父页面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<frameset cols="30%,*">
<frame src="media.html" scrolling="no" Noresize>
<frame src="welcome.html" name="main" Noresize>
</frameset>
</html>
菜单栏（30%）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>media.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body class="first">
<p> </p>
<p> </p>
<p> </p>
<a href="writer.html" target="main" >写信</a>
<br/>
<a href="receive.html" target="main">收件箱</a>
<br/>
<a href="caogao.html" target="main">草稿箱</a>
<br/>
<a href="yifasong.html" target="main">已发送</a>
<br/>
<a href="lajixiang.html" target="main">垃圾箱</a>
<br/>
<a href="denglu.html" target="_top">退出</a>
</body>
</html>
可变网页（70%）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>welcome.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body id="second">
<p> </p>
<p> </p>
<p> </p>
<h3 align="center">欢迎进入邮箱,你有2封<a href="receive.html">未读邮件</a>,请阅读<h3>
</body>
</html>
}
图片作为超链接：{
<a href=”http://www.baudu.com”><img src=”../images/23.jpg”></a>
例如：<a href="http://www.baidu.com"><img src="23.jpg" width="100px" height="100px"/></a>
}
创建邮件链接：{
<a href=”mailto:test@163.com?subject=AboutHTML”>发邮件给我</a>
例如：<a href="mailto:zhangsan@163.com?subject=good">张三</a>
<a href="mailto:lisi@163.com?subject=bad">李四</a>
}
<img>标签的属性：{
src：图像文件地址；
width：图像宽度；height：图像高度；
border：图像边框；
alt：给图像显示一个“交互文本”，图像找不到时显示；
title：鼠标放到图片上面即显示。
例如：<img alt="图片已经失效" title="这是孙俪" src="233.jpg" width="200px" height="200px"/>
}
<hr>标签：{
例如：<hr size="1" color="red" width="80%" align="left"/>
}
5秒钟后页面自动跳转到百度：{
<meta http-equiv="refresh" content="5;URL=http://www.163.com">
}
列表：{
有序列表：
<ol>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ol>
无序列表：
<ul>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ul>
例如：<ol>
<li>踢足球</li>
<li>打篮球</li>
<li>打拳皇</li>
<li>学习</li>
<li>写代码</li>
</ol>
<ul>
<li>踢足球</li>
<li>打篮球</li>
<li>打拳皇</li>
<li>学习</li>
<li>写代码</li>
</ul>
}
表格：{-
<table>
<th>表格头
<tr>行
<td>列：1、colspan=”2”跨两列；
2、rowspan=”2”跨两行；
3、align=left，right，center对齐方式。
例如：
<body>
<table border="1" align="center" bordercolor="red">
<tr>
<th>
姓名
</th>
<th>
性别
</th>
<th>
职业
</th>
<th>
备注
</th>
</tr>
<tr>
<td>
李小龙
</td>
<td>
男
</td>
<td>
影视巨星
</td>
<td>
曾经
</td>
</tr>
<tr>
<td>
李连杰
</td>
<td>
男
</td>
<td>
影视巨星
</td>
<td>
现役
</td>
</tr>
<tr>
<td>
李冰冰
</td>
<td>
女
</td>
<td colspan="2">
影后
</td>
</tr>
</table>
</body>
}
表单：{
<form name=”formTest” action=”” method=”post”>
name：表单的名称；
action：form表单的提交路径；
method属性指的是提交的方式 有两个值 get或者是post
1.get提交方式：
1).表单中提交的表单域的值(该次请求的参数列表)会显示在地址栏中的问号后面 所有安全性较低
凡是涉及到数据安全问题 那么不能采用get的提交方式
2).不能传递数据量过大的数据
2.post提交方式：
1).表单中提交的数据并不会显示在地址栏中 而是保存到了一个HttpServletRequest对象中 安全性较高
凡是涉及到数据传递安全问题 都采用post提交方式 比如 登录 注册的密码问题
2).传递大数据量数据时一定要采用post的提交方式 比如 上传文件
注意：真正开发中get提交方式应用更为广泛 所有的超链接 以及在地址栏中直接输入地址的请求方式都是get提交方式
表单域：可以写或者可以选择的文本框。表单域的name属性值作用：将该表单域的value值在表单提交时提交给服务器，有name值该表单域的value属性值可以提交，没有则不能提交，所以表单中 所有需要提交给服务器的表单域都应该加上name属性，但是像提交按钮这种表单域，服务器对于它的value没有兴趣(没用)。
文本框：
<input type=”test” name=”firstname” value=”” maxlength=”10”>
密码框：
<input type=”password” name=”password” value=”” maxlength=”6”>
文本域：
<textarea rows=”10” cols=”30” name=”despcriprion”>
单选按钮：
<input type=”radio” name=”sex” value=”male” checked>男
<input type=”radio” name=”sex” value=”female” >女
例如：
<!-- 注意：实现同一功能的单选按钮的name属性值必须要保持一致 -->
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" value="2" checked/>保密
<br>
复选按钮：
<!-- 注意：实现同一功能的复选按钮的name属性值建议保持一致 -->
<input type="checkbox" name="hobby" value="0" checked/>打篮球
<input type="checkbox" name="hobby" value="1" checked/>踢足球
<input type="checkbox" name="hobby" value="2"/>游泳
<input type="checkbox" name="hobby" value="3"/>学习
<input type="checkbox" name="hobby" value="4" checked/>睡觉
下拉列表：
<select name="province" id="province">
<option selected=”true” value="000">请选择省</option>
<option value="001">河北</option>
<option value="002">河南</option>
<option value="003">山东</option>
<option value="004">山西</option>
<option value="005">湖南</option>
复选下拉列表：
<select name="province" id="province" multiple>
<option selected=”true” value="000">请选择省</option>
<option value="001">河北</option>
<option value="002">河南</option>
<option value="003">山东</option>
<option value="004">山西</option>
<option value="005">湖南</option>
隐藏域：用来保存一些不需要显示给用户看但是要提交给服务器的内容。
<input type=”hidden” name=”hidden1” value=”abc”>
以上name属性值必须写，需要向服务器提交value，下面几个按钮则可以不写。
<input type=”reset” value=”重置按钮”>
<input type=”button” value=”普通按钮”>
<input type=”submit” value=”提交按钮”>
readonly将文本框变为只读，disabled将按钮置成灰色不可操作（disabled=”true”），两者的区别是用（disabled时）提交时地址栏不显示该项信息。
}
<!--EndFragment-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
