作为一个web开发人员，html是必须要掌握的。而自己以前也看过一点相关的资料，但从来没有好好总结过。所以，总是觉得没掌握好(当然事实也是如此)老感觉有点不踏实，其实有些东西一直觉得难或者麻烦，而逃避去彻底或深入的学习它，导致一直有这种感觉，其实是很愚蠢的。一句话：“有些东西会了，一辈子都会了。逃避，一辈子都要逃避，一辈子都不会”。希望通过这次的总结，让自己能彻底掌握html，也希望对大家有些帮助。
定义：
超文本标记语言。何谓超文本？首先它是一种文本，但功能上比普通文本(如.txt)要强大的多，它有许多标签，并且每种标签又有很多属性可以用来调配其显示效果。是为网页数据的显示创建的一种标记语言。
组成：
一个标准的html可以分为两大部分组成：1.文档声明及命名空间 2.html体。其中html体又可以分为两大部分<head>部分及<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=utf-8" /> <title>html总结</title> </head> <body> I am body. </body> </html>
常用标签：
作为一个标记语言，我觉得我们只要把常用的标签掌握好了，基本上就可以说学好了它。
1.字体标签
color属性可用颜色单词，也可用“#FFFFFF”：#号加十六进制数据表示，红绿蓝
<font color="#CC9966" size="+4" face="Times New Roman, Times, serif">I am a font tag</font>
2.标题标签
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<!--标题标签一共有6级字体大小依次减小 -->
<h6>h6标题标签</h6>
3.水平线标签
size属性指定水平线粗细
<hr color="#0033CC" size="2"/>
4.列表标签
a.默认数字样式 可用type修改：a A I i 1
Start属性指定起始号码
b.默认样式空心圆circle
disc实心圆 square黑方块
可用CSS自定义符号
a.无序列表：
<ul>
<li> dog </li>
<li> cat </li>
<li> pig </li>
</ul>
b.有序列表：
<ol type="A" start="2">
<li> dog </li>
<li> cat </li>
<li> pig </li>
</ol>
c.自定义列表：
<dl>
<dt>name</dt>
<dd>zhangsan</dd>
<dt>score</dt>
<dd>100</dd>
</dl>
5.注释标签
<!-- 注释内容 -->
6.图片标签
alt属性中的说明文字在鼠标悬停和图片加载失败时显示
<img src="111.png" alt="I am an img tag" />
7.表格标签
<table border=”边框粗细” bordercolor cellpadding=”单元格中数据与单元格边框间距” cellspacing=”单元格与单元格间距 0两线并为一线” width=’固定像素值或相对页面百分比’>cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线
<table>标签内<caption></caption>给表格加标题，是表格的一部分
a.table1<br/>
<table width="40%" bordercolor="#993333" border="1" cellpadding="5" cellspacing="0">
<caption>
I am a table
</caption>
<tbody>
<tr>
<th>name </th>
<th>sex </th>
<th>age </th>
</tr>
</tbody>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
b.table2<br/>
<table bordercolor="#000000" width="50%" border="2" cellspacing="0">
<caption>
I am table too
</caption>
<tr>
<td rowspan="2" width="40%">统计</td>
<td align="center"><font color="#0000FF">男</font></td>
</tr>
<tr>
<td align="center"><b>女</b></td>
</tr>
</table>
8.超链接标签
点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。
href属性，可以指定协议，mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”
mailto，thunder…… 不指定协议默认启动文件协议解析
href=www.baidu.com默认使用file协议打开的是一个本地文件 并不是主机地址
超链接实现页面内跳转：定位标记、锚
<a name=”top”>顶部位置</a> 用a标签的name属性为当前位置指定一个名字，不使用href属性,在适当位置用a标签链接到指定名字的位置 用#标示当前页面<a href=”#top”>回到顶部位置</a>
target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开
title属性：当鼠标悬停在文字上时显示的文字内容
a.http超链接<br/>
<a href="http://byirain.cnblogs.com" target="_blank">http超链接</a><br/>
b.迅雷超链接<br/>
<a href="thunder://www.owfjajofa.com/jowjf/afjoa/music.mp3">thunder下载链接</a><br/>
c.邮件超链接<br/>
<a href="mailto://xxx@qq.com">mail超链接</a><br/>
d.锚点超链接<br/>
<a href="#top">go to the top</a><br/>
9.表单标签
用于与服务端交互,action指定表单提交地址，method表示提交方式，默认为get方式
<form action="http://www.xxx.com/jjf/fowj/jj.jsp" method="post">
<input type="text" name="name" value="value" />
<br/>
<input type="button" name="name" value="btn" />
<br/>
<input type="checkbox" name="name" value="value" />
<br/>
<input type="file" name="file" value="upload" />
<br/>
<input type="submit" name="submit" value="submit" />
<br/>
<input type="reset" name="reset" value="reset" />
<br/>
</form>
10.文本域标签
<textarea cols="60" rows="10">I am textarea</textarea>
11.Label标签
用于定义快捷键
<label accesskey="i" for="input">(I)</label>
<input type="text" value="测试Label标签作用,请按Alt+i" id="input"/>
12.特殊字符
有些字符，在 HTML 中有特殊的含义，因此不能在文本中使用，需要用到字
符实体，比如说“< ”字符。
一个字符实体拥有三个部分：一个 and 符号（& ），一个实体名或者一个实体
号，最后是一个分号（; ），如小于号，我们可以这样写：<或者<
13.头标签
<!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=utf-8" /> <title>无标题文档</title> <base target="_blank"> <!--给所有连接添加一个目标 --> <bgsound src="http://zhangmenshiting.baidu.com/data2/music/64547304/4381224293600128.mp3?xcode=cb320edda5d79acb6048fd65ddd02a32eda7e042ac78aa4f" loop="-1"><!--背景音乐 --> </head> <body> <p> <a href="http://www.w3schools.com" target="_blank">This link</a> will load in a new window because the target attribute is set to "_blank". </p> <p> <a href="http://www.w3schools.com"> This link</a> will also load in a new window even without a target attribute. </p> </body> </html>
14.html脚本
html中可以嵌入javascript脚本
<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>
检测浏览器是否支持脚本
<noscript>标签用来给不能执行的脚本来定义说明文字. 这个标签是为那些不能支持<script>标签的浏览器而准备的,不执行脚本而是显示<noscript> 里的文字
<html> <body> <script type="text/javascript"> <!-- document.write("If this is displaye d, your browser supports scripting!") //--> </script> <noscript>No JavaScript support!</noscript> <p> A browser that does not support JavaScript will show the text in the noscript element. </p> </body> </html>
补充：
1.段落标签
<p> This is a paragraph.</p>
2.换行标签
<br/>
3.strong标签
4.big，small标签
<strong> strong</strong><br/> <big> big</big><br/> <small> small</small><br/>
5.sub，sup标签
<sub> sub </sub> <sup> sup</sup>
6.del标签
7.ins标签
<del>twenty</del> <ins>twelve</ins>
8.pre标签
<pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> <hr/>
PS:本文经自己收集整理加上自己的总结而成，不妥之处请多指教。