看了HTML孙鑫视频后，对HTML有了基本明确的掌握，梳理知识点对其进行一下总结。
首先我们要了解我们为什么要学习HTML，我们搞Web开发，不可避免要接触HTML。JSP也是要学习到的知识，先来简单认识一下，它是一种动态网页开发的技术。我们经常要在HTML中嵌入Java代码，作为JSP开发人员，必须掌握一些常用的HTML标记。
认识一下HTML，全称：Hypertext Markup Language,超文本标记语言。Web页面，或者说是网页，HTML就是来编写此文档的一种标记语言。
HTML速成的一些必要知识点来说一下。
一、基本
1、 标签：有图有真相，还附赠礼物。
标签不只是这么简单。它在段落和文本中还不一样。
段落控制：
<p align ="#">
表示paragraph，创建一个段，属性align表示段的对齐方式，#可以是left、center、right、justify。
<br>
表示link break，作用：换行
<hr color ="clr">
表示horizontal rule,作用：插入一条水平线。
文本显示：
<center>...</center>
使文本居中显示
<hn align="#">...</hn>
用于指出文档的标题，n是从1到6的整数，1表示最大标题，6表示最小标题。属性align用户设置标题对齐的格式，#可以是left、center、right。
<font size=n color="clr">...</font>
用于设置字体。
<b>...</b>
使文本成为粗体
<i>...<li>
使文本成为斜体
2、四种形式：大道至简，总结得太好了。
（1）空元素 <br>
（2）带有属性的空元素 <hr color="blue">
（3）带有内容的元素 <title>http://www.baidu.com</title>
（4）带有内容和属性的元素 <font color="red">http://www.baidu.com</font>
这里需要注意的是，不同形式，这里标签是不一样的。
3、框架：看完这个框架，你对HTML算是有了一个大概的认识了。图来得直接些。
4、注释
HTML文档一定要有注释啊，维护修改起来方便。注释展现：<!--你的注释或说明信息-->,例如<!--This is an apple-->
拓展：特殊字符，先上图，随后用到再回来查找。常用的字符实体：
二、运用
1、列表
（1）建立数字编号的列表
使用<ol>和<li>标签，在<ol>标签中使用start属性，设置起始的序号，在<li>标签中使用value属性改变列表内的编号顺序。
在<ol>和<li>标签中，使用type属性指定编号系统的类型。具体看表。
（2）建立带有项目符号的列表
使用<ul>和<li>，type属性指定符号的样式，取值如下：
（3）建立无符号的列表
使用<dl>与<dt>，使用<dd>标签替换<dt>,创建缩进的列表。
知识点总结得再好看得也是醉了，真枪实弹地来个实例。
<span style="font-size:18px;">
<ol type="i">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ol>
<ol type="I">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ol>
<ol type="A">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ol>
<ol type="a">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ol>
<ol type="1">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ol>
<ul type="disc">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ul>
<ul type="square">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ul>
<ul type="circle">
<li>《红楼梦》</li>
<li>《西游记》</li>
<li>《三国演义》</li>
<li>《水浒传》</li>
</ul>
<dl>
<dt>《红楼梦》</li>
<dt>《西游记》</li>
<dt>《三国演义》</li>
<dt>《水浒传》</li>
</dl>
<dl>
<dd>《红楼梦》</li>
<dd>《西游记》</li>
<dd>《三国演义》</li>
<dd>《水浒传》</li>
</dl>
</span>网页效果：
2、表格
<caption>...</caption>
用于定义表格的标题
<tr align="alignment" valign="alignment">...</tr>
在表格中添加一个新行，属性align用于指定这一行在水平方向上的对齐方式，alignment可以是left、center、right。属性valign用于指定这一行在垂直方向上的对齐方式，alignment可以是top、middle、bottom
<th>...</th>
用于定义表头
<td>...</td>
用于定义单元格
来吧，理论实践相结合，上实例吧。
html文档：
<span style="font-size:18px;"><html>
<head><title>表格的例子</title></head>
<body>
<table border="1" align="center" bgcolor="red">
<caption>2015年度上半年期末考试成绩单</caption>
<tr align="center" valign="middle">
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr align="center" valign="middle">
<td>张三</td>
<td>100</td>
<td>98</td>
<td>80</td>
</tr>
<tr align="center" valign="middle">
<td>李四</td>
<td>100</td>
<td>98</td>
<td>80</td>
</tr>
<tr align="center" valign="middle">
<td>王五</td>
<td>100</td>
<td>98</td>
<td>80</td>
</tr>
</table>
</body>
</html></span>网页展示效果：
3、表单
表单创建<form method="get or post" action ="URL">...</form>
method用于指向服务器发送表单数据时所使用的HTTP方法。get是缺省的方法，当采用get方法提交表单时，提交的数据被附加到URL（在属性aciton中指定）的末端，作为URL的一部分发送到 服务器端。post方法是将表单中的信息作为一个数据块发送到服务器端。属性action指定对表单进行处理的脚本的地址。
其中我们要用到<input>元素。
<input type="type" name="name" size="size" value="value">
属性type用来指定要创建的控件的类型。name属性在表单中并不显示。属性size用来指定表单中控件的初始宽度。属性value指定控件的初始值。
收藏一下<input>元素。
用户填写注册信息的时候，输入个人简历，单行的文本输入控件不适合，怎么接受多行输入信息，我们可以使用多行文本输入控件。
<textarea name="name" rows="number of rows" cols="number of columns">...</textarea>
属性rows用于指定文本输入控件可视区域显示的宽度。在开始标签和结束标签之间出现的文本，将作为文本输入控件中的初始文本而显示。
赶紧来实例验证一下。
html文档：
<span style="font-size:18px;"><html>
<head><title>表单的例子</title></head>
<body>
<form method="get" action="reg.jsp">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="user" size="30" value="我">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="0">女
</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="interest" value="basketball">篮球
<input type="checkbox" name="interest" value="football">足球
<input type="checkbox" name="interest" value="volleyball">排球
<input type="checkbox" name="interest" value="badminton ">羽毛球
</td>
</tr>
<tr>
<td>最高学历：</td>
<td>
<select size="1" name="education">
<option value="" selected>...</option>
<option value="" >博士</option>
<option value="" >硕士</option>
<option value="" >学士</option>
<option value="" >高中</option>
</select>
</td>
</tr>
<tr>
<td valign="top">个人简介：</td>
<td>
<textarea name="personal" rows="5" cols="30">个人简介</textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重写">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html></span>网页效果：
福利： 超链接
HTML文本之所以被称为超文本，就是因为它具有普通文本不具有的超链接功能。能够通过点击关键字来实现页面的跳转。
建立链接：<a href="URL">...</a>
属性href用于指定链接的目标，目标地址由URL定位，在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本。
网页可以嵌入图像，基本语法为：
<img src="URL" width=n height=n>
属性src指定图像资源的位置，属性width和height用于指定图片的尺寸。
要想理解透彻，还得看一下例子。
<span style="font-size:18px;"><html>
<head><title>链接的例子</title></head>
<body>
<a href="form.html">表单的例子</a><br>
<a href="../form.html">表单的例子</a><br>
<a href="E:\提高班\进行中\form.html">表单的例子</a><br>
<a href="http://www.baidu.com">百度</a><p>
<img src="1.jpg" width="20" height="40">晓晓</a>
</body>
</html></span>网页效果：
效果可不是这么简单，点击任何一个关键字，它都能跳转到相应的页面。
HTML也就这么些东西，不过细节的东西还有很多，无足大碍，以上内容有兴趣可以尝试编写一下，真正感受一下 html的魅力之所在。要想编写出更好的网页结构，还需要对html进一步的学习。
659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
