本文介绍的HTML标签：列表标签（dl,dt,dd,ol,ul,li），图像标签（img），表格标签（table,tr,td,th,caption），超链接标签（a），框架标签（framset,frame），画中画标签（iframe），表单标签（from，input），几个区域标签（div换行，span不换行，p缩进）
1、HTML概述
Html就是超文本标记语言的简写，是最基础的网页语言。Html语言的特点如下：
1、 Html是通过标签来定义的语言，代码都是由标签所组成；
2、Html代码不用区分大小写；
3、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成；
4、头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载；
5、体部分是真正存放页面数据的地方。
演示，如下代码（注意，HTML不需要编译，只要有能解析它的程序即可打开），我们创建一个demo.html文件，如下：
<html>
<head>
<title>这是标题</title>
</head>
<body>
这是我的内容，<font size='7' color='red'>啊哈哈</font>
</body>
</html>
2、HTML标签操作思想
HTML将功能封装到标签中，这样我们只需要使用标签就可以使用相应的代码。
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容，可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号，或公司规定书写规范。属性与属性之间用空格分开。
格式：
<标签名 属性名='属性值'>数据内容</标签名>
<标签名 属性名='属性值' />
操作思想：为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。
下面介绍一些标签
因为HTML的所有标签都要闭合，那么“/”就是闭合结束的符号下面的内容是同样的原理。
<br />：换行
<hr />：水平线
3、HTML常用工具
我们可以使用Dreamweaver的设计视图，直接进行开发即可。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<p>这是设计视图的文字</p>
<p><font color="#FF0066">这是演示 的文字</font>
</p>
<hr /> <!-- 表示画一条水平线并换行 -->
<h1>这是一级标题</h1> <!-- HTML中从h1到h6都可以表示各级标题 -->
c<dz>a
2<35>7
<br />
<!--
结果是：ca 2<35>7
因为HTML中<>表示标签的封装，把<dz>认为是标签，虽然其不知道<dz>是什么意思
另一方面，HTML中数字无法表示标签，因此下面可以显示。
-->
<!--
因此，我们对HTML中的一些特殊符号需要使用转义字符来表示，HTML用“&;”将转义字符包围起来
而大于号用“gt”（great than），小于号使用“lt”（loser than）表示。
-->
c<d z>a
</body>
</html>
当然我们一般都使用eclipse进行开发，如（35-29-03-14.00解析）。切换到javaee下后，我们选择创建javaEE项目——Create a Dynamic Web proiect。然后在创建的项目下的WebContent文件夹下面可以创建新的HTML项目。项目中各部分存放的内容如下：
JAVA存放目录：SRC
WEB文件目录：WebContent
WEB配置文件：web.xml
视频中所说的Aptana现在eclipse已经找不到相应版本的插件，反正只是一个编译工具而已，没必要纠结。而使用eclipse进行编程也较为麻烦，而且目前我不是很了解步骤，那么就直接使用Dreamweaver进行编程即可。
4、列表标签
关于列表标签及其相应演示如下代码，效果如下图：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project</h1>
<!--HTML注释
演示列表标签
列表标签：dl (Define List)
上层项目：dt
下层项目：dd : 封装的内容是会被缩进的，有自动缩进效果。
-->
<dl>
<dt> 上层项目内容 </dt>
<dd> 下层项目内容 </dd>
<dd> 下层项目内容 </dd>
<dd> 下层项目内容 </dd>
</dl>
<hr />
<!--
有序和无序的项目列表
有序：<ol> (order list)
无序：<ul> (unorder list)
无论有序和无序，条目的封装用的都是<li>
而且它们都有缩进效果。
-->
<ol type="a"> <!--可以使用type属性设置有序列表前面的标记-->
<li> 有序的项目列表 </li>
<li> 有序的项目列表 </li>
<li> 有序的项目列表 </li>
<li> 有序的项目列表 </li>
</ol>
<ul type="square"> <!--可以使用type属性设置无序列表前面的标记-->
<li> 无序列表标签</li>
<li> 无序列表标签</li>
<li> 无序列表标签</li>
<li> 无序列表标签</li>
</ul>
<hr/>
<!--下面结合列表标签和有序标签-->
<dl>
<dt> <!--首先是顶层项目，设置为有序列表-->
<ol>
<li> <font size="5">这是标题一 </font> </li>
</ol>
</dt>
<dd><!--其次是底层项目，添加普通内容-->
<font size="3">这是标题一下面的小标题</font>
</dd>
</dl>
<font size="3">这是标题一下面的小标题里面的内容，哈哈哈哈哈哈哈</font><br/>
<font size="3">这是标题一下面的小标题里面的内容，哈哈哈哈哈哈哈</font><br/>
</body>
</html>
5、图像标签
相应的代码与效果如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
</head>
<body>
<h1>图像标签</h1>
<!--
演示图片标签
<img /> ：图像标签是一个内部闭合标签
我们在开发的时候，当然要将使用到的图片放到项目中，这里我们只是单单引用
height：高 width=宽 border=边框 alt=图片说明文字，鼠标光标移到图片上显示
-->
<img src="G:\HTML\1.jpg" height="350" width="500" border="10" alt="啊，美女！" />
<!--
如果将上面的代码图像挂到服务端，我们作为客户端想要请求上面的数据，必须请求2次
第一次请求界面：G:\HTML演示\demo1.html
第二次请求想要的1.jpg图片
-->
</body>
</html>
6、表格标签
表格标签示例1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
</head>
<body>
<h1>表格标签</h1>
<!--
表格体：<table></table>；表格行：<tr></tr>；
单元格：<td></td>；单元格加粗并居中：<th></th>
表格标题：<caption></caption>；
cellpadding：单元格内边距；cellspacing：单元格之间的距离
-->
<table border="1" bordercolor="#CC3300" cellpadding="10" cellspacing="0" width="500">
<caption>表格标题</caption>
<tr> <!--第一行-->
<th>姓名</th> <th>年龄</th>
</tr>
<tr> <!--第二行-->
<td>张三</td> <td>39</td>
</tr>
</table>
</body>
</html>
表格标签示例——不规则的表格：先数一下表格有几行，再算每一行有几个单元格。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
</head>
<body>
<h1>表格标签</h1>
<!--
colspan="num"：合并同一行的单元格，num是要合并的单元格的数目
rowspan="num"：合并同一列的单元格，注意这个表格的信息应该放在要合并的所有列的第一行
-->
<table border="1" bordercolor="#CC3300" cellpadding="10" cellspacing="0" width="500">
<tr>
<th colspan="2">个人信息</th>
</tr>
<tr>
<td>张三</td> <td>30</td>
</tr>
</table>
<hr />
<table border="1" bordercolor="#CC3300" cellpadding="10" cellspacing="0" width="500">
<tbody><!--表格的下一级标签是tbody，不定义也存在-->
<tr> <!--注意此处rowspan在代码中的位置，第一行有2个单元格，第二行只有一个单元格-->
<th rowspan="2">个人信息</th> <td>张三</td>
</tr>
<tr>
<td>30</td>
</tr>
</tbody>
</table>
<!--（见视频35-29-7-5.40）
后期表格为了加载方便，便又分为
表格头：<thead></thead>；表格体：<tbody></tbody>；表格尾：<tfoot></tfoot>
-->
</body>
</html>
7、超链接标签
超链接标签示例1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
</head>
<body>
<h1>超链接</h1>
<!--
超链接：<a></a>
作用：连接资源。
当有了href属性才有了点击效果，href属性的值的不同，解析的方式也不一样。
如果href没有值，默认的效果是打开我们的html文件所在的本地文件夹
如果在该值中没有指定过任何协议解析时，是按照默认的协议来解析该值的。
默认协议是file协议，既会默认打开相应的本地文件
比如我们设定href="www.baidu.com"，查找的是“G:\HTML演示\www.baidu.com”
如果设定href="http://www.baidu.com"，查找的是“http://www.baidu.com/”
下面这部分在Chrome浏览器是可以直接访问的，而垃圾IE可能被我设定了网络而无法访问
这里启动了应用层的http协议引擎来解析我们后面的值
-->
<a href="http://www.baidu.com"> 百度</a>
<hr />
<!--在一个新窗口打开链接-->
<a href="http://www.baidu.com" target="_blank"> 新百度</a>
<hr />
<!--链接图片-->
<a href="G:\HTML\1.jpg">美女图片</a> <!--结果会显示图片-->
<hr />
<!--邮件协议：mailto-->
<a href="mailto:[email protected]">联系我们</a>
<!--结果会打开能解析邮件协议的软件，用于发送邮件-->
<hr />
<!--
通过链接可以直接下载相应的资源
在http协议之下，大家都可以解析，那么迅雷的这个资源大家都可以访问下载
-->
<a href="http://www.xunlei.com/movies/fczlm.rmvb">复仇者联盟</a><br/>
<!--
如果迅雷想强制别人必须通过它的下载工具下载，把协议改为迅雷下载器的协议即可
-->
<a href="thunder://wertyuioasdfghjklwertyuio==">复仇者联盟</a>
<!--迅雷会打开，因为浏览器无法解析thunder协议，会在本地寻找可以解析该协议的软件-->
<hr />
<!--
做一个超链接，但是我们不想让超链接有任何的点击效果，包括没有默认效果
既我们想要自定义超链接效果.
下面：JavaScript是一个协议，运行的时候会启动JavaScript的解析引擎，"javascript=void(0)"取消默认效果
想添加自己的效果就要添加监听器，如οnclick="alert('弹出')"
-->
<a href="javascript=void(0)" onclick="alert('弹出')">这是一个超链接</a>
<!--结果是点击会有一个小窗口，显示“弹出”-->
</body>
</html>
超链接标签示例2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
</head>
<body>
<h1>超链接</h1>
<!--
超链接另外一个功能：定位标记。专业术语：锚
如果我们在一个界面浏览，突然想直接回到某个位置，如直接回到顶部功能。
先为各个位置取名，使用超链接的方式
-->
<a name="top">顶部位置</a> <br />
<img src="111.jpg" height="900" width="500" border="10" />
<hr />
<a name="center">中间位置</a> <br />
<img src="111.jpg" height="900" width="500" border="10" />
<hr />
<!--在超链接前面加一个#标识我们要打开的不是文件夹，而是我们在代码中用name标识的位置-->
<br />
<a href="#top">回到顶部位置</a>
<br />
<a href="#center">回到中间位置</a>
</body>
</html>
8、HTML框架标签
框架使得一个窗体可以显示多个资源，这样可以实现资源的复用。我们在使用Dreamweaver练习框架的时候，应该先创建一个我们想要样式的框架，然后这个框架的“设计界面可以选择你想要编辑的子框架，再装换到“代码”框就可以看到每一个子框架的代码。如果想回到父框架，可以在设计界面使用“alt”+“向上”键回到父框架的代码。
demo.html文件
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<!--
定义框架。使用标签frameset，使用rows="30%,*"定义框架为2行，上面一行占30%，剩下的70%是下面一行
使用<frame />定义框架内容
我们在框架中添加其他资源的时候还可以给这些资源起名，
这样便可以在添加链接的时候使用target指定该资源要在哪一个小框架打开
-->
<frameset rows="30%,*">
<frame src="top.html" name="top" />
<!--
我们再将下面分为2部分，使用cols="30%,*"将下面一行分为左边30%，右边70%
当然这样要重新在第二行创建一个新的框架
-->
<frameset cols="30%,*">
<frame src="left.html" name="left" /> <frame src="right.html" name="right" />
</frameset>
</frameset>
<body>
</body>
</html>
---------------------------
top.html文件
<html>
<head>
<meta http-
最低0.47元/天 解锁文章
1978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
