html是一种网页制作语言，。其实html跟java和其他语言差不多，都有自己的语言表达形式，就是通过标签形成的。标签又有单标签和双标签两种，理解起来还是比较容易的，纯属记忆，主要要在于什么时候用，用在哪里，这样才会显示出更美观的页面。
1、html基本模式
<html> <head> <title>网页标题</title> </head> <body> <p>我的第一个网页文档</p> </body> </html>
大纲级别标题标签<h1>文本</h1>到<h6>文本</h6>
段落标签<p></p>
字符标签：粗体<b></b> 斜体<i></i> 下划线<u></u> 上标签<sup></sup> 下标签<sub></sub> 删除线<del></del>
图像标签<img src="image/1.jpg" alt="图像标签"> （src是图片的位置，alt是鼠标放在图片上显示的文字，里面还有其他的属性，如：宽高等 详细可查 ----->网页制作完全手册）
超链接标签<a href="*.html"></a>,href可以直接输入网址。当要链接到本网页中的具体的某一位置是，想将那个位置写成例：<a name="c8"></a> 然后在设置链接处：<a href="#c8"></a>即可（书签）（重点）
<html> <head> <title>书签</title> </head> <body> <a name="top"></a> <a href="#a1"><h1>第1章</h1></a> <a href="#a2"><h1>第2章</h1></a> <a href="#a3"><h1>第3章</h1></a> <a href=""><h1>第4章</h1></a> <a href=""><h1>第5章</h1></a> <a href=""><h1>第6章</h1></a> <a href=""><h1>第7章</h1></a> <a href=""><h1>第8章</h1></a> <a href=""><h1>第9章</h1></a> <a href=""><h1>第10章</h1></a> <a href=""><h1>第11章</h1></a> <a href=""><h1>第12章</h1></a> <a href=""><h1>第13章</h1></a> <a href=""><h1>第14章</h1></a> <a href=""><h1>第15章</h1></a> <a name="a1"><h3>第1章内容</h3></a> <a name="a2"><h3>第2章内容</h3></a> <a name="a3"><h3>第3章内容</h3></a> <a name="a4"><h3>第4章内容</h3></a> <a name="a5"><h3>第5章内容</h3></a> <a name="a6"><h3>第6章内容</h3></a> <a name="a7"><h3>第7章内容</h3></a> <a name="a8"><h3>第8章内容</h3></a> <a name="a9"><h3>第9章内容</h3></a> <a name="a10"><h3>第10章内容</h3></a> <a name="a11"><h3>第11章内容</h3></a> <a name="a12"><h3>第12章内容</h3></a> <a name="a13"><h3>第13章内容</h3></a> <a name="a14"><h3>第14章内容</h3></a> <a name="a15"><h3>第15章内容</h3></a> <a href="#top">回到顶部</a> </body> </html>
<head> <title>CSDN - 开发者的网上家园</title> <meta name="keywords" content="CSDN,开发者,程序员,技术社区,.NET技术,软件开发,编程,博客,Developer,Programmer" /> <meta name="description" content="CSDN是面向软件开发者的高品质网络媒体和社区，CSDN……" /> </head>
水平分隔线标签<hr/>
<p>这里是文档的上半部分</p> <hr align="left" width="80%" size="2px" noshade="noshade" /> <p>这里是文档的下半部分</p>
2、段落标签<p></p>会使段落之间产生一行空行，而换行标签<br/>不会
1、表格标签
<html>
<head>
<title>表格</title>
<style>//设置表格的样式
table{
table-layout:fixed ; }
</style>
</head>
<body>
<table border="20" cellspacing="20" cellpadding="30" >//cellspacing是每格之间的间距空隙大小(相邻单元格之间的距离)，cellpadding是格中文字与边框的空隙大小
<tr>//行
<th>排名123213213121</th>//列
<th>歌曲</th>
<th>歌手</th>
</tr>
<tr>
<td>1</td>
<td>aaaaaa</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>2</td>
<td>bbbbbb</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>3</td>
<td>cccccc</td>
<td>xxxxxx</td>
</tr>
</table>
</body>
</html>
还可以加一个表格标题标签<caption></caption>
2、单元格合并<tr></tr>、<td></td>中colspan、rowspan属性就是控制合并行列以及合并的数量，而且还有align(水平位置)和valign(垂直位置)来控制表格中内容的位置（放在标签<td></td>中）
<table border="1" width="250px"> <tr> <td rowspan="2" valign="top">单元格</td> <td align="center">单元格</td> <td align="right">单元格</td> </tr> <tr> <td colspan="2" >单元格</td> </tr> </table>
3、列表
有序列表<ol></ol>，然后通过<li></li>创建列表项目；无序列表<ul></ul>。通俗理解为有序就是可以自动在每列前面生成一个序列号1234......而无序则是点
4、特殊字符和注释
空格
大于号 >
小于号 <
双引号 "
与符号 &
版权符号 ©
注册商标 ®
HTML注释 <!--注释内容-->
5、在html文档中插入多媒体
插入背景音乐：<bgsound src="music/xxx.mp3" loop="1"/>
插入FLASH：<embed align="center" height="400" width="500" src="flash/fish.swf" />
插入视频：<embed align="center" height="400" width="500" src="video/xxx.asx" />
1、表单<form></form>：用于创建表单，用于一组表单数据的容器，在网页中并不可见。个人理解：主要看你需不需要对某段数据进行提交和重置(现在也许不懂，继续往下就知道了)，需要则要用到表单，也就是对将某网页中某一部分数据看成一个整体，需要对这段数据进行重置和传递信息。（注意：form不要写成from哦）
2、表单元素
文本框、密码框、单选按钮、复选框、文件域、隐藏域、提交按钮、重置按钮、自定义命令按钮、图像按钮、多行文本域、列表框 （下拉框）
每个元素都有自己的属性，这个可以查手册
<html>
<head>
<title>表单与表单元素</title>
</head>
<body>
<center>
<form action="练习/练习.html" method="post">
文本框:<input id="" type="text" name="" value="lifan" size="50" maxlength="10" readonly/><br/>
密码框:<input id="" type="password" name="" value="123456" /><br/>
单选按钮:
男<input type="radio" name="sex" value="1" checked/>
女<input type="radio" name="sex" value="0" /><br/>
多选按钮:
吃<input type="checkbox" name="" value=""/>
喝<input type="checkbox" name="" value="" />
玩<input type="checkbox" name="" value="" checked/>
乐<input type="checkbox" name="" value="" /><br/>
文件域:<input type="file" name="" /><br/>
隐藏域:<input type="hidden" name="" /><br/>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
<input type="button" value="普通按钮" onclick="alert('哈哈哈哈')"/>
<input type="image" src="练习/img/help.jpg" alt="显示文字"/><br/>
<fieldset>
<legend>其他标签</legend>
多行文本框:
<textarea wrap="physical" rows="10" cols="40" name="" id=""></textarea><br/>
下拉列表:
<select name="" id="">
<option>请选择</option>
<option value="bc">奔驰</option>
<option value="bm" selected>宝马</option>
<option value="ad">奥迪</option>
</select>
<select name="" size="4" multiple="multiple">
<option value=".NET">.NET软件工程师</option>
<option value="C++">C++工程师</option>
<option value="JAVA">JAVA工程师</option>
<option value="WebUI" selected="selected">Web前端工程师</option>
<option value="DB">数据库工程师</option>
<option value="JAVA Web">JAVA Web程序员</option>
<option value="ASP.NET" selected="selected">ASP.NET程序员</option>
<option value="TEST">软件测试工程师</option>
</select><br/>
按钮标签:
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
</fieldset>
</form>
</center>
</body>
</html>
<html> <head> <title>框架集与框架示例</title> </head> <frameset cols="50%,50%">//将一个网页分成两个部分（两列），比例对半分配（也可以用*表示剩下的全部大小）如：（frameset cols=“50%，*”） <frame src="nav.html" /> <frame src="content.html" /> </frameset> </html>1、框架集的嵌套
<frameset rows="*,50"> <frameset cols="150,*"> <frame src="left.html" /> <frameset rows="80px,*"> <frame src="top.html" /> <frame src="middle.html" /> </frameset> </frameset> <frame src="bottom.html" /> </frameset>结果：
<style type="text/css">
h1{text-align:center;font-size:18pt;}
input{border:1px solid gray;background-color:#fedcba;color:blue;}
a{text-decoration:none;}
</style><style type="text/css">
.txt{
border:1px dashed gray;
background-color:#fedcba;
color:blue;
height:20px;
}
.btn{
border:1px solid blue;
background-color:#cccccc;
color:red;
font-weight:bold;
}
</style><style type="text/css">
td{
border:1px solid blue;
}
#mytable{
width:260px;
border-width:5px;
border-style:double;
border-color:gray;
border-collapse:collapse;
}
#mytd{
background-color:#fedcba;
text-align:center;
font-size:16px;
font-style:italic;
}
</style> 版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/u011479875/article/details/47165703
