一、 Html的基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html的基本结构</title>
</head>
<body>
网页的文本、图片等信息；
</body>
</html>
1、<head></head>:网页的头部，存放网页的摘要信息，有利于浏览器的解析以及搜索引擎的搜索。Head中常见的标签有两种，title和meta；
2、<title> </title> : 网页标题；
3、 <meta></meta>: 用于给浏览器和搜索引擎看。常见的写法有两种：
·<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
--http-equiv，用于写给浏览器看，用来描述文档类型和字符编码；
--中文编码采用的两种编码格式：gb2312，简体中文的编码格式；
-- utf-8，万国码的编码格式；
·<meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" />
·<meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台……" />
--name,用于写给搜索引擎看，用来描述搜索关键字和描述；
--关键字：name=“keywords”，有多个关键字，在congtent中用逗号分隔；
--网页描述：name=“description”，用于搜索引擎搜索时显示网页摘要。
【注】：所有的Html标签必须是闭合标签。可以是成对的，比如<title> </title>；也可以是自闭合标签，比如：<img />; 也就是说/表示这一个或者一对标签的闭合。
1、标题标签：<h1></h1>...<h6></h6>自动加粗,h1最大，h6最小:
2、水平线标签:<hr/>
3、段落标签：<p><p/>
4、换行标签 :<br/>
5、引用标签:<blockquote></blockquote>
cite属性：表明引用来源，一般表明引用网址，浏览器默认首行缩进
6、预格式标签:<pre></pre>
浏览器默认显示样式：·显示等宽字体 ；
·代码中的换行，空格可在浏览器直接显示
<body> <h1>标题标签</h1> <h2>标题标签</h2> <h3>标题标签</h3> <h4>标题标签</h4> <h5>标题标签</h5> <h6>标题标签</h6> <hr/> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br/>文字文字文字文字文字文字文字文字文字文字</p> <!--<blockquote></blockquote>:引用标签 cite属性，表明引用来源，一般表明引用网址，浏览器默认首行缩进 --> <blockquote cite="http://jredu100.com"> 横眉冷对千夫指，俯首甘为孺子牛。 </blockquote> <pre>文字 文字文字</pre> </body>
1、有序列表:<ol></ol>
列表项：<li>可以有N多个</li>
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
2、无序列表：<ul></ul>
列表项：<li>可以有N多个</li>
【注】：嵌套时HTML标签一定不能交叉
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
3、定义描述列表：<dl></dl>
列表标题：<dt>一般只有一项</dt>
列表描述项<dd>可以有N多项</dd>描述项相对标题进行缩进显示
<dl> <dt>定义列表的标题</dt> <dd>描述第一项</dd> <dd>描述第二项</dd> <dd>描述第三项</dd> </dl>
4、组合标签：
<figure></figure> 用于显示图片及图片标题
两个子标签：<img/>图片
<figcaption></figcaption>图片的标题
显示效果：图片下面一个标题，同时图片和标题前带缩进
<figure> <img src="img\HBuilder.png"/> <figcaption>图片标题</figcaption> </figure>
5、分区标签：<div></div>
1、span（文本）:无实际意义,用于包裹某部分文字,修改特定样式
2、em（强调）；strong（强调）；i（倾斜）；b（加粗）
【注】：strong、em、b、i、标签的区别：
·strong、em都表示强调，strong显示为粗体，em显示为倾斜。strong的强调程度比em更高；
·strong和b都能加粗；em和i都能倾斜，但是strong和em多了一层强调的语义。HTML语言要求标签尽可能实现语义化。
3、q（短引用）：显示为文字用""引起来。
4、small（缩小字体）；big（增大字体）
·small和big标签可以多层嵌套，直到字号达到上限或下限为止
<i>这是i标签中的文字</i><br /><br /> <em>这是em中的文字</em><br /><br /> <b>这是b标签中的文字</b><br /><br /> <strong>这是strong中的文字</strong><br/><br /> <q cite="http://www.jredu100.com">这是短引用标签q中的文字</q><br/><br /> <small>我被small缩小了一号</small><br/><br /> <big><big>我被big放大了一号</big></big><br/><br />
5、img（图片）：
(1).src：表示引用图片地址。
路径地址的写法：
①相对路径：以当前文件为准去寻找图片地址。
与文件处于同一层：图片直接写图片名；
图片在当前文件下一层：文件夹名/图片名；
图片在当前文件上一层：../图片名。
②绝对路径：file:///盘符：/文件夹/图片.后缀名。但是严禁使用。
③网络地址：网络上的图片链接。但是，一般不使用。
(2).height="" width="" 图片的高度宽度。可以用css样式（style="width:; height:;"）代替。
(3).title：图片标题。当鼠标指上后显示的文字。
(4).alt：当图片无法加载的时候，显示的文字。
(5).align:设置图片周围文字相对于图片的位置:top/center/bottom。
<img src="file:///C:\Users\Y\Documents\WeChat Files\All Users\46763556cabb7d27616b329607fd420e.jpg" alt="当图片无法加载的时候，显示的文字。 /> <br/><br /> 文字 <img src="img/HBuilder.png" title="当鼠标指上后显示的文字" align="center" /> 文字 <br/><br /> <img src="http://h.hiphotos.baidu.com/news/pic/item/b90e7bec54e736d112b3829092504fc2d4626981.jpg" />
6、a（超链接）：
(1).href：超链接的路径，可以是网络链接也可以是本地文件（路径确定同img）
(2).target：超链接打开的位置。_self 自身页面（默认） _blank 新页面
(3).title：鼠标指上后显示的文字
<a href="http://baidu.com" target="_blank">这是一个超链接</a>
<a href="http://baidu.com" title="当鼠标指上后显示的文字">这是一个超链接</a> <a href="#mailto://249614365@qq.com">超链接</a>
rel （了解）：用于表明被链接文档与当前文档的关系：
(1).rel="prev"(被连接文档是)前一篇文档；
(2).rel="next"后一篇文档
(3).rel="icon"被连接图片是当前文档的图标
(4).rel="stylesheet"被链接文档是当前文档的样式表
(5).rel="prefetch"预加载，在当前文档加载完成后，利用空余时间预加载即将连接的文档
锚链接：
(1).本页面锚链接：设置锚点-<a name="top"></a>
在超链接上使用#name 跳转到锚点-<a href="#top">超链接</a>
(2).页面间锚链接：在即将跳转页面的指定位置设置锚点
在超链接的href属性中使用"页面地址.html#name"
功能性链接：mailto：用于给指定邮箱发送邮件
tecent://message/?uin=249614365 给指定QQ发消息
file:///e. 打开本地文件
7、其他
·有误文本：<s></s>删除线
·cite标签：浏览器显示为倾斜，常用于书、画作等
·code标签：表示计算机代码，但是不会保留代码格式，需配合pre标签使用
·kbd标签：表示用户需要用键盘输入的内容，浏览器显示为等宽字体
·©:版权符号
· ：空格
·mark：高亮或标记文本，浏览器显示为黄色背景
表格：table
行：<tr> </tr> ；列：<td> </td>；表头：<th></th>
1、常用属性
(1).border：边框，当border增大时，只有外围框线增加，单元格边框始终为1px
(2).cellspacing：单元格间隙，当值为零时只会使单元格间隙为零但不会合并边框线。
表格边框合并：style="border-collapse:collapse ;"无需再写cellspacing="0"
(3).cellpadding:单元格内容与边框的距离
(4).width，height：表格的宽高
(5).align：表格在屏幕的左中右位置：left，center，right
【注】：给表格加align属性相当于让表格浮动，会直接影响表格后面元素的原有排列方式
(6).bgcolor：背景色，等同于style="background-color:;"
(7).background:背景图片，等同于style="background-image:;"，且背景图会覆盖背景色
(8).bordercolor:边框颜色
<table border="2" width="600" height="400"> <tr> <td colspan="2" height="100"></td> </tr> <tr> <td rowspan="4" width="300" > <img src="img/pic/IMG_0002.JPG" width="300" height="300"/> </td> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table>
2、tr和td相关属性：
(1).width，height：单元格宽高
(2).bgcolor：单元格背景颜色
(3).align：left center right单元格中的文字水平对齐方式
(4).valign：top center bottom单元格中文字垂直对齐方式
(5).nowrap="nowrap"单元格中文字不换行
·当表格属性与行列属性冲突时，以行列属性为准（近者优先）
· 表格的align属性是控制表格自身在浏览器的显示位置。行和列的align属性是控制单元格中文字的对齐方式
· 表格的align属性并不影响表格内文字的水平对齐方式，tr的align属性可以控制一行中所有单元格的水平对其方式
3、表格的跨行和跨列：
(1).colspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除
(2).rowspan 跨行，当某个格跨N行时，其下边N-1个单元格需删除
4、表格的结构化
·完整表格结构：caption thead tbody tfoot
·无论各部分在表格什么位置，显示时caption均在表格外最上方，thead在表格内最上方，tfoot在最下方
1.表单form两个重要属性:
(1).action-表单提交的服务器地址
(2).method-表单提交数据的方法，（get/post）
2.get/post的区别：
(1).get使用url传参：http://服务器地址?name1=value1&name2=value2（"?"表示传递参数，"?"后面采用name=value的形式传递，多个参数之间用&链接）
· url传参不安全，所有信息可在地址栏看到，并且可以通过地址栏随意传递其他数据；
· url传参数据量有限，只能传递少量数据
(2).post使用http请求传递数据。url地址栏不可见，比较安全，且传递数据量没有限制
· 综上，常用post传递数据
3.input标签及属性：
(1).type：表示input输入框的类型。可选值：
(2).name：input输入框的别名，一般情况下必填，因为传递数据时，使用name=value的形式
(3).value：input输入框的默认值。
(4).placeholder：input的提示内容，当输入框有value时，提示内容消失。
(5).tabindex="1"（了解）：控制点击tab键时的跳转顺序
input特殊属性值：
·checked="checked"默认选中
·disabled="disabled"设置控件不能使用。用在按钮上不能点击，用在输入框上不能修改，而且如果输入框disabled，则输入框信息不能往后台传递。
·hidden="hidden"隐藏。常用于配合disabled或根据其他需要，使用隐藏域传递数据
4.input-type属性：
(1).text：文本输入框
(2).password：密码输入框，输入内容时显示小黑点
(3).radio：单选按钮。
·name和value属性需同时存在，提交的是value中的属性值
·radio凭借name属性区分是否为同一组。name相同为同组，同组中只能选一个。
·checked="checked"默认选中（radio只能选一个，checkbox可以选多个）
(4).checkbox：复选按钮
(5). reset：重置按钮，将表单数据重置为初始状态。
(6). file：文件上传按钮
(7).submit：提交按钮。提交表单数据
(8).image：图形提交按钮 。功能同submit，可以提交数据
(9).button：普通按钮，没有任何功能
5.下拉选择控件 select
(1).<select>
<option></option>//可以有N多个
</select>
(2).name属性：应该写在<select>上，所有选项只有一个name
(3).multiple="multiple"设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选，一般不用
(4).option常用属性：
·value=""：当option没有value属性时，往后台传递的是option标签中的文字，当option有value属性时，往后台传递的是value属性的值
· title：鼠标指上后显示的文字。
·selected="selected":默认选中。
(5).optgroup：常用于将option标签进行分组，lable属性表示分组名。
6.文本域：textarea
(1).写法：<textarea></textarea>
(2).设置宽高style="width:;height:;"自身有cols="" row=""两个属性，但不常用
(3).readonly="readonly",设置为只读格式，不允许编辑
(4).style="resize:none"设置为宽高不允许修改
(5).style="overflow：hidden"设置当文字超出区域时如何处理；
·常用属性值：hidden（超出区域的文字隐藏）
scroll（无论文字多少均会显示滚动条）
auto（根据文字多少自动决定是否显示滚动条，为默认样式）
·也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式
<form action="table-3.html" method="post" > <table> <tr> <td>用户名</td> <td> <input type="text" name="username" placeholder="请输入用户名"/> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password" placeholder="请输入密码"/> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>兴趣</td> <td> <input type="checkbox" name="hobby" value="吃" checked="checked"/>吃 <input type="checkbox" name="hobby" value="喝" checked="checked"/>喝 <input type="checkbox" name="hobby" value="玩" checked="checked"/>玩 <input type="checkbox" name="hobby" value="乐" checked="checked"/>乐 </td> </tr> <tr> <td>头像</td> <td> <input type="file" name="头像"/> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <optgroup label="山东省"> <option value="烟台" title="烟台烟台烟台烟台烟台烟台烟台烟台烟台烟台" >烟台</option> <option value="青岛" selected="selected">青岛</option> </optgroup> <optgroup label="北京市"> <option value="海淀区">海淀区</option> <option value="朝阳区">朝阳区</option> </optgroup> </select> </td> </tr> <tr > <td> <input type="image" src="img/HBuilder.png"/> </td> </tr> <tr> <td> <input type="submit" value="注册" /> </td> <td> <input type="button" value="普通按钮" /> </td> </tr> <tr> <td colspan="2"> 服务协议<br /><br /> <textarea style="width:250px;">服务协议服务协议服务协议服务协议服务协议服务协议服务协议服务协议服务协议</textarea> </td> </tr> </table> </form>
7.表单的边框与标题
· 如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面
·一个表单可以有多组边框+标题的组合
<fieldset> <legend>联系方式</legend> </fieldset>
8.HTML5智能表单：
(1).H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交、
<form id=foo> ... </form> <input ...form="foo">
(2).type新增属性：
(3). input元素的新增属性：
·Autocomplete：自动完成功能（记录用户之前输入的内容，并在下次输入是自动提示输入完成）
-属性值：on/off
-可以在form表单上使用，对整张表单的所有控件进行自动完成的开关；也可以在input上使用，对特定输入框进行修改
·Autofocus：自动获得焦点
-autofocus="autofocus"，只能设置一个input元素自动获得焦点
·Form：所属表单
·Required：必填（设置input必填，否则阻止提交）
·Pattern：验证input的模式（使用正则表达式验证input的模式）
·Placeholder：提示（当有value时，取消提示）
原文：http://www.cnblogs.com/-ZJ-/p/6445491.html