1、什么是HTML
HTML是超文本标记语言。HTML5是W3C制定的一套开发静态页面的规范。
2、HTML的基本组成
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
3、HTML常用的标记
用一个简单的例子，来简单说明HTML常用的标记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="html学习,Keywords的作用是在搜索引擎中搜素中搜索一个东西时，我们的网站能够显示出来">
<meta name="Description" content="Description的作用是对这个页面的内容用一段话描述">
<title>无标题文档</title>
</head>
<body>
<h1>html学习</h1>
<ol>
<li>
<a href="#duanluo">段落</a>
</li>
<li>
<a href="#img">图片</a>
</li>
<li>
<a href="#liebiao">列表</a>
</li>
<li>
<a href="#xian">线</a>
</li>
<li>
<a href="#geshi">格式</a>
</li>
<li>
<a href="#chaolianjie">超链接</a>
</li>
<li>
<a href="#gundong">滚动文字或图片</a>
</li>
</ol>
<h2>基本标记</h2>
<a id="duanluo"/>
<h3>段落是p换行是br空格是@nbsp</h3>
<p>
这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。这里是html学习，欢迎大家一起来探讨。
</p>
<a id="img"/>
<h3>图片是img</h3>
<img src="aa.gif" width="200px" height="100px" alt="当在src的路径中找不到图片时，这句话才会显示"/>
<a id="liebiao"/>
<h3>列表分为无序列表和有序列表</h3>
<ol type="1">
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ol>
<ul>
<li>示例1</li>
<li>示例2</li>
<li>示例3</li>
</ul>
<a id="xian"/>
<h3>线用hr表示</h3>
<hr color="#CC9933" width="80%" size="2" align="center"/>
<a id="geshi"/>
<h3>按原格式输出用pre</h3>
<pre>
public class Test{
private int id;
private String name;
private String address;
}
</pre>
<a id="chaolianjie"/>
<h3>超链接</h3>
<ol>
<li>文字链接</li>
<li>图片链接</li>
<li>锚点链接</li>
<li>邮件链接</li>
<li>热点链接</li>
</ol>
<a href="http://baidu.com">百度</a>
<a href="http://baidu.com"><img src="aa.gif" alt="图片"/></a>
<a id="gundong">
<h3>滚动图片或文字用marquee来表示</h3>
<marquee direction="left" scrollamount="30" οnmοuseοver="this.scrollAmount=0"
οnmοuseοut="this.scrollAmount=20">
滚动
</marquee>
</body>
</html>
4、表格
作用：格式化显示数据、定位网页元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<table align="center" border="1" width="80%">
<caption>table</caption>
<tr align="center">
<th>姓名</th>
<th>籍贯</th>
<th>手机号码</th>
</tr>
<tr align="center">
<td>张三</td>
<td colspan="2">咸阳111111</td>
</tr>
<tr align="center">
<td>张三</td>
<td rowspan="2">西安</td>
<td>222222</td>
</tr>
<tr align="center">
<td>李四</td>
<td>111111</td>
</tr>
</table>
</body>
</html>
5 表单
表单是用来接收用户输入数据的。表单（html4）中主要学习十二个标签：单行多行和密码，单选复选与下拉，三个按钮，三个域（隐藏表单域，文件提交）
所有的控件都是在form标记内。form的属性
Name：当前表单的名称。也就是给表单起个名字，来说明表单的作用
Action：处理表单数据的服务器目标地址
Method：有两个数值。get和post，默认的是get。get请求会在地址栏显示请求参数名称与数值，而post请求不会显示
下面来用一个简单的例子来说明这十二个标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<h1>Form</h1>
作用：接受用户输入的数据
<ol>
<li>name</li>
<li>action:服务器处理请求的资源路径</li>
<li>method:get和post默认值是get，get会在地址栏显示请求参数的名称和参数值，而post请求则不会</li>
</ol>
<form name="student" action="D:\myProgram\html\testTable" method="get">
<input type="hidden" name="id" value="1"/> 隐藏表单域<br/>
单行 姓名：<input type="text" name="stuName1" value="haha" size="30" maxlength="20" readonly/>size是显示的长度，maxlength是输入的最大值<br/>
单行 姓名：<input type="text" name="stuName2" value="haha" size="30" maxlength="20" disabled/>readonly可以获得焦点，而disable则不能获得焦点。readonly会向服务器提交数据，而disable则不会向服务器提交<br/>
密码 密码：<input type="password" name="stuPwd"/><br/>
多行：描述 <textarea name="discribe" rows="4" cols="30"></textarea><br/>
单选 性别：<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex"value="0"/>女<br/>
复选 爱好 <input type="checkbox" name="like" value="1"/>篮球
<input type="checkbox" name="like" value="2"/>足球
<input type="checkbox" name="like" value="3"/>乒乓球<br/>
下拉 城市<select name="city" size="2" multiple>
<option value="1">西安</option>
<option value="2" selected>咸阳</option>
<option value="3">铜川</option>
</select><br/>
文件上传 <input type="file" name="myFile"/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>重置不是清空，而是回到默认值
<input type="button" value="确认" onClick="alert('你好')"/>
<input type="image" src="aa.gif"/>
</form>
</body>
</html>
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
