1.HTML基本结构
众所周知，HTML（Hyper Text Markup Language）称为超文本标记语言，是一种标记语言。那么快速入门HTML也是很非常容易，如下：
<html> 大标签 <head> 头标签 <title></title> 标题 </head> <body> 内容标签 </body> </html>
2.大量标签
1.段落标签
<p> </p>
2.换行标签(自闭和)
<br/>
3.标题标签
从大到小变化：
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
4.表格
无序列表ul+列表项li
有序列表ol+列表项li
5.定义列表
dl 定义列表
dt 定义的标题
dd 定义的解释项
6.文字排版(括号里面为英文解释)
文本加粗b( bold)/ strong（强调）
文本斜体i(incline)/em(强调)(emphasize)
下划线u(underline)
删除线del (delete)
横线hr
上标sup
下标sub
big 大（文字）
small小
7.行与块元素
块元素
1.总是新起一行
2.可以包括块，行，文本
3.包括div p h1-h6 dl dt dd ol ul li 等
行内元素
1.和其他行内元素在一起
2.可以包含其他行内元素和文本
3.span i em b strong u del sub sup big small img a input button textarea等
8.规则
1.行内元素只能嵌套行内元素和文本
2.块元素可以嵌套 文本 块 行内
3.p,h元素通常只嵌套文本和行内
4.ol,ul最好直接子集是li
5.以上规则皆可以打破
9.特殊符号
空格 <左尖括号 < >右尖括号 > ©版权 © & &
10.img：图片
<img src="./1.jpg">
代表图片1.jpg的地址
./代表当前html所在的目录
图片标签的属性 ：
align:对齐
alt:替换图片文字
width:宽
height:高
11.a标签：链接
>href ：链接地址
包括相对路径：
1相对于当前html文件的位置
2 ./开头 当前目录 （可以省略）
3 …/开头(两个点) 上一级目录
4 文件夹或者文件名/开头 （省略一个./）
和绝对路径：HTTP开头；/开头 网站的根域名
当链接的地址不是网页的时候，就是下载该文件
>target目标：
有两个属性： _self当前标签 _blank新标签打开
12.表格：table
属性有以下：
border ：边框
width：宽度
height ：高度
align对齐：left right center
valign 垂直对齐：top center bottom
cellspacing：单元格间距
cellpadding：文字到单元格（边框）的距离
bgcolor：背景颜色
rowspan：行合并
colspan：列合并
在表格标签里面添加下面属性会更美观：
（合并边框模型）
<style="border-collapse: collapse;">
子元素：tr行，td列和th标题列，其中：
rowspan行合并
colspan列合并
一个完整的表格：
<table> <thead> <th> <td></td> </th> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> <tr> <td></td> </tr> </tfoot> </table>
13.iframe标签
定义：在网页中引入其他网页
src 引入地址
width宽
height高
scrolling 是否滚动 yes/no
frameborder=“0” 框架边框为0
14.不可见标签
<meta charset="utf-8"/> 让网页不乱码(指定元素信息,字符集=“万国编码”) <meta name="description" content="网页的描述"/> <meta name="keywords" content="网页关键字"/> style样式 .red{color:red;font-size:48px;}
15.表单：form
<form action="" method="post"></form>
method：post(更安全)，get(提交页面时会看到提交的信息)
<input type="text" value="小明" maxlength="5" />
代表输入类型为文本，提示名为小明，文本最大长度为5
<input type="password" />
代表输入类型为密码（文本不可见）
<label> <input type="checkbox" name="favorite" /> 唱歌</label><label> <input type="checkbox" name="favorite" /> 跳舞</label> <input type="checkbox" name="favorite" /> 游泳 <input type="checkbox" name="favorite" /> 看书 <input type="checkbox" checked="checked" name="favorite" /> 玩手机
代表复选框类型，其中唱歌和跳舞不管点击图片还是复选框，都会框选中，游泳和看书需点击复选框才能选中，玩手机默认被框选
性别:
性别: <label> <input type="radio" checked="checked" name="sex" /> 男</label><label> <input type="radio" name="sex" /> 女</label>
代表单选框，只能选其一，默认选择男
<input type="file" name="file" />
代表点击上传文件
<select size="2" > <option selected >博士</option> <option >硕士</option> <option >本科</option> <option >大专</option> <option >高中</option> <option >中专</option> <option >初中</option> <option >小学</option> </select>
代表下拉框，其中size设置一次显示两个，如果加上multiple，则会以滚动条形式选择
<textarea rows="10" cols="30" >提示文本</textarea>
代表一个多行文本，rows设置行高，cols设置列宽
<input type="submit" value="提交" />
提交表单按钮
<input type="reset" name="" id="" value="重置" />
重置所有已填的表单为默认属性
<button type="button">同意</button>
代表一个普通按钮
<input type="image" src="images/提交注册.jpg" />
代表图片按钮
3.各种属性
1.定义:修饰html标签(元素)
2.组成:属性名=“属性值”
<hr width="200" />
3.title属性:鼠标的提示
<p title="鼠标的提示">
4.style属性:元素的外观
<p style="color:red;font-size:48px;">
5.class属性:元素的类名
规则：可以有多个，用空格隔开，可以重复
<p class="red big">
6.id属性：类似身份证
规则元素的唯一识别，有且只有一个
<p id="gzy">
7.锚点：实现页面内容切换
定义
<a id="ch1">
链接锚点
<a href="#ch1"> <a href="demo.html#ch1"> <a href="./demo.html#ch1">
8.frameset：框架集（一般很少用）
frame框架
name 框架的名称
src 文件地址
属性：
cols 列：% 百分比 数字 像素 *代表剩余的宽 rows 行：% 百分比 数字 像素 *代表剩余的高 noresize=“true”不允许拖动框架 frameborder=“0”框架的宽度
9.图片热点区域
作用:形成不规则的链接区域，在图片里边画形状，创建区域链接
小建议：使用dreamweaver绘制热点区域更方便
<img usemap="#Map"><area shape="poly" coords="xxx" href="" target="">
写在最后
总结此文花费大量时间，建议收藏本文，以便后事之需，此外博主这里还有xmind形式的总结，更方便查看了解，有需要可以私聊，如果本文有差错，欢迎一起讨论，谢谢。
