一、HTML概述
HTML：Hyper Text Markup Language
超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览器程序如何显示Web文档（即网页）的信息，如何链接各种信息。
HTML基本结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html><html>...</html>标签标记着html文档的开始和结束
<head></head>中主要包括网页的基本信息 - 网页标题、元数据标签
<body></body>中主要包括网页内容
网页基本信息
DOCTYPE声明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
</head>
<body>
网页主体
</body>
</html>网页基本信息
<title>标签
......
<title>家用电器排行榜</title>
......<meta>标签
<meat charset="gb2312">
<meta name="description" content="我在学习JavaEE......">二、HTML基本标签
标题标签
<h1>...</h1> <!-- 一级标题 -->
<h2>...</h2> <!-- 二级标题 -->
<h3>...</h3> <!-- 三级标题 -->
<h4>...</h4> <!-- 四级标题 -->
<h5>...</h5> <!-- 五级标题 -->
<h6>...</h6> <!-- 六级标题 -->
上面的<!---->是html里面的注释符，将先要说的话用左两根短线右两根短线包起来，就如上面的一样
网页的基本标签 - 2
段落标签
<p>...</p>
<h1>将进酒</h1>
<p>君不见，黄河之水天上来，奔流到海不复回！</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪！</p>网页的基本标签 - 3
换行标签
<br/>
网页的基本标签 - 4
水平线标签
<hr/>
网页的基本标签 - 5
注释<!-- 注释内容 -->
特殊符号
图像标签
常见的图像格式：JPG、GIF、PNG、BMP
示例：
<img src="image/apple.jpg" width="160" height="160" alt="新疆蛇果" title="新疆蛇果" /><a href="hetao.jpg" target="_blank">无漂白薄皮核桃</a>
<a href="hetao.html" target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃" /></a>链接标签
超链接适用场合
1、页面间链接
从一个页面链接到另一个页面
2、功能性链接
如链接电子邮件、QQ、迅雷等
<a href="xxx@163.com">联系我们</a>HTML列表
分类：
有序列表、无序列表、定义列表
（1）无序列表
<ul><!-- 声明无序列表 -->
<li>篮球</li> <!-- 声明列表项 -->
<li>足球</li>
<li>桌球</li>
</ul>无序列表的类型
ul标签的type属性取值
（2）有序列表
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>有序列表的类型
ol标签的type取值
（3）定义列表
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dd>
<dd>计算机软件工程</dd>
</dl>表格语法
<table>
<tr>
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
...
</tr>
<tr>
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
...
</tr>
</table>对齐方式
表格对齐方式
默认对齐、居中对齐（align=center）、左对齐、右对齐
单元格对齐方式
水平对齐方式、垂直对齐方式
表格的跨行和夸列
表格的跨列
<table>
<tr>
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
......
</tr>
......
</table>表格的跨行
<table>
<tr>
<td rowspan="n"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>制作效果及原码
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>表格的跨行和跨列</title>
</head>
<body>
<table border="1" width="200px">
<tr>
<td colspan="3" align="center">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
</body>
</html>三、表单标签
表单：用来接受用户信息的标签
表单语法
<form method="post" action="请求服务器端路径">
<p>名字：<input name="username" type="text"></p>
<p>密码：<input name="pwd" type="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>method规定如何发送表达数据，常用值有：get | post
action表示向何处发送表单数据
type是input元素类型
name是input元素名称
value是input元素的值
在实际网页开发中通常采用post方式提交表单数据，post方式提交的数据在URL栏不会显示参数，而get方式会显示
表单的元素格式
表单元素
1、文本框
<input type="text" name="userName" value="用户名" maxlength="20">2、密码框
<input type="password" name="pass" size="20">3、单选按钮
<input name="gen" type="radio" value="boy" checked="checked">男
<input name="gen" type="radio" value="girl">女4、复选框
<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" check="checked">聊天
<input type="checkbox" name="interest" value="play">玩游戏5、下拉列表框
<select>
<option value="选项中的值" selected="selected">...</option>
<option value="选项的值">...</option>
</select><input type="reset" name="butReset" value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮">
<input type="image" src="path">reset：重置按钮
submit：提交按钮
button：普通按钮
image：图片按钮 path：图片路径
7、多行文本域
<textarea name="showText" cols="x" rows="y">
文本内容
</textarea>8、文件域
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>file：文件域
enctype：表单编码属性
表单元素的高级属性
只读 readonly="true"
禁用 disabled="true"
实例：注册界面的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form method="post" action="serverURL" enctype="multipart/form-data">
注册用户名：<input type="text" name="username"> <br/> <br/>
注册密码：<input type="password" name="pwd"/> <br/>
性别: <input type="radio" name="sex" value="boy" checked="true" /> 男
<input type="radio" name="sex" value="girl"/> 女
<br/>
兴趣爱好： <input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="dancing" checked="true"> 跳舞
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="jogging"> 跑步
<br/>
籍贯：<select name="home">
<option value="shanxi">陕西</option>
<option value="jiangsu">江苏</option>
<option value="henan">河南</option>
</select>
<br/>
<input type="button" disabled="true" value="普通按钮">
<br/>
<input type="image" src="images/laba.png">
<br/>
自我介绍：<br/>
<textarea name="introduce" cols="30" rows="3" readonly="true"></textarea>
<br/>
上传照片：<input type="file" name="pic"/>
<br/>
<input type="submit" value="注册" /> <input type="reset" value="重置">
</form>
</body>
</html>结果显示：
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
