HTML其实还是蛮容易学习的，无非就是一些标签、格式的填写，大学的时候也做过网站设计，所以这里主要记录一些常用的HTML标签、属性以及书写方法等。
一、常见HTML格式
主要包含文件type，html标签、head标签、body标签三个主题标签，其中Head主要包含字符集、描述、关键字等信息，而Body标签里是HTML的主要内容
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body></body></html>
二、head标签
1、自闭合标签
（1）<meta>标签
<meta charset="UTF-8"> ##设置html内容字符集
<meta http-equiv="refresh" content="3"> ##每隔3秒刷新一次
<meta http-equiv="refresh" content="3;Url=http://www.hao123.com"> ##隔3秒刷新并跳转值url指定网页
<meta name="keywords" content="测试网页,网页头部"> ##指定网页关键字，利于SEO，网页搜索排序
<meta name="description" content="描述信息"> ##指定网页描述信息
（2）link
<link rel="shortcut icon" href="image/fac.ico"> ##头部图标
（3）stype
（4）script
2、主动闭合标签
（1）title
<title>网页头部标题内容</title> ##网页头部显示内容
三、body标签
1、a标签：
定义超链接，最重要的属性为href,超链接和锚使用
##普通超链接<a href="http://www.hao123.com" target="_blank"> ?中国人</a>##通过a标签做锚点<a href="#id1" > 第一章 </a><a href="#id2"> 第二章 </a><a href="#id3"> 第三章 </a><div id="id1" style="height:100px"> 第一章内容 </div><p id="id2"style="height:300px"> 第二章内容 </p><div id="id3"style="height:500px"> 第三章内容 </div>
2、p标签：
定义段落，不换行,段落段落之间有间距
<p> ?段落标签，不换行</p>
3、br标签：
换行标签
<p>段落标签，不<br>换行</p>
4、h标签：
标题标签，从h1-h6表示字体从大到小，加粗显示
<h1>中国人</h1><h2>中国人</h2><h3>中国人</h3><h4>中国人</h4><h5>中国人</h5><h6>中国人</h6>
5、span标签
白板，行内标签，段与段之间只有空格，不换行
<span>中国人</span><span>中国人</span><span>中国人</span>
6、div标签
白板，块级标签
<div>中国人</div><div>中国人</div><div>中国人</div>
7、input标签
标准输入框
<input type="text" ?name="username" value="Tom" ><br><input type="password" name="pwd" value="123456" ><input type="button" value="注册" ?><input type="submit" value="提交" ?><input type="reset" value="重置" ?><input type="checkbox" name="双选" value="1" checked="checkted" ><input type="radio" name="单选" value="1" checked="checkted" ><input type="file" name="fname" enctype="multipart/form-data" >
8、form标签
表单使用,get方式提交数据拼接显示在url，post方式提交数据不拼接显示在url上（更安全）
<form action="http://www.hao123.com" method="get"> ???<input type="text" ?name="username" value="Tom" ><br> ???<input type="password" name="pwd" value="123456" > ???<input type="button" value="注册" ?> ???<input type="submit" value="提交" ?> ???<input type="checkbox" name="双选" ?value="1" > ???<input type="radio" name="单选" ?value="1" ></form>
9、textarea标签
接受多行文本输入，其中可以输入多行数据
<textarea ?name="username" >默认值</textarea>
10、select标签
下拉框标签，通过option指定下拉框内容
<select name="city" ?> ???<option value="1" selected="selected">北京</option> ???<option value="2">上海</option> ???<option value="3">南京</option></select><select name="city" size=10 mutiple="mutiple"> ???<option value="1" selected="selected">北京</option> ???<option value="2">上海</option> ???<option value="3">南京</option></select><select name="city"> ???<optgroup label="省分"> ???????<option value="1">北京</option> ???????<option value="2">上海</option> ???????<option value="3">南京</option> ????</optgroup></select>
11、img标签
图片标签
<img src="C:\Users\Desktop\001.jpg" style="height: 200px;width: 200px" ><img src="file:///C:/Users/Desktop/001.jpg"><a href="http://www.hao123.com"> ???<img src="001.jpg" style="height: 200px;width: 200px" title="名称" alt="描述"></a>
12、ul标签
无序列表，对应的li标签标记列表行
<ul> ???<li>第一行</li> ???<li>第二行</li> ???<li>第三行</li></ul>
13、ol标签
有序列表，对应的li标签标记列表
<ol> ???<li>第一行</li> ???<li>第二行</li> ???<li>第三行</li></ol>
14、dl标签
分层列表，用dt标签表示标题，用dd标签表示列表内容
<dl> ???<dt>第一层</dt> ???<dd>1.第一层列表</dd> ???<dd>2.第一层列表</dd> ???<dd>3.第一层列表</dd> ???<dt>第二层</dt> ???<dd>1.第二层列表</dd> ???<dd>2.第二层列表</dd> ???<dd>3.第二层列表</dd></dl>
15、table标签
表格标签，通过tr表示行，td表示单表格
（1）第一种table写法
<table border="1.5"> ???<tr> ???????<td>第一个行第一个表格</td> ???????<td>第一个行第二个表格</td> ???????<td>第一个行第三个表格</td> ???????<td>第一个行第四个表格</td> ???</tr> ????<tr> ???????<td>第二个行第一个表格</td> ???????<td>第二个行第二个表格</td> ???????<td>第二个行第三个表格</td> ???????<td>第二个行第四个表格</td> ???</tr></table>
（2）第二种table写法
<table border="1.2"> ???<thead> ???????<tr> ???????????<th>表头1</th> ???????????<th>表头2</th> ???????????<th>表头3</th> ???????????<th>表头4</th> ???????</tr> ???</thead> ???<tbody> ???????<tr> ???????????<td>第一列数据</td> ???????????<td>第二列数据</td> ???????????<td>第三列数据</td> ???????????<td>第四列数据</td> ???????</tr> ???????<tr> ???????????<td>第一列数据</td> ???????????<td>第二列数据</td> ???????????<td>第三列数据</td> ???????????<td>第四列数据</td> ???????</tr> ???</tbody></table>
<td colspan="2">第一个行第二个表格</td> ##横向合并合并单元格
<td rowspan="2">第一个行第四个表格</td> ##纵向合并单元格
16、lable标签
用于标记文本输入
<label for="username"> 用户名: </label><input id="username"type="text" ?>
17、fieldset标签
用于文本框
<fieldset> ???<legend> ???????登陆 ???</legend> ???<label for="username"> 用户名: </label> ???<input id="username"type="text" ?><br> ???<label for="password"> 密 码: </label> ???<input id="password"type="password" ?></fieldset>
Web前端学习——HTML
原文地址：http://www.cnblogs.com/rangle/p/7978135.html