HTML快速上手
1.1 基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<head>
<body>
content
</body>
</html>
1.2 排版标签
内容排版
1.标题标签h1-6 <h1>title</h1>
2.段落标签p <p>paragraph</P>
3.换行标签br <br/>
4.水平线hr <hr>
盒子
4.行块div <div>division</div> 一行只能放一个
5.行内块span <span>span</span> 一行可以放多个
文本修饰：少用，我们一般用css控制样式
6.b/strong 粗体
7.i/em 斜体
8.s/del 删除线
9.u/ins 下划线
10.sup 上标
11.sub 下标
12.big 大字号
13.small 小字号
特殊字符：见下图，了解即可，无需记忆
1.div和span标签是我们网页布局最主要的2个盒子。
1.3 图像标签
图像标签 <img src="bk.png" alt="背景" title="背景" width="10px" border="2px"/>
src：url，图像的路径
alt：图像不能显示时的替换文本
title：鼠标悬停时显示的内容
width：设置图像的宽度
height：设置图像的高度
border:设置图像边框的宽度
1.宽度和高度一般只设置一个，另外一个自动。
1.4 超链接
超链接 <a href="www.baidu.com" target="_blank">文本或图像</a>
href：用于指定链接目标的url地址，（`必须属性`）当为标签应用href属性时，它就具有了超链接的功能
target：用于指定链接页面的打开方式，其取值有_self和_blank两种
_self为默认值，表示在当前窗口打开
_blank为在新窗口中打开方式。
1.外部链接
2.内部链接
3.空链接：<a herf="#">首页</a>
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.锚点链接：<a href="#id">go to id</a>
6.函数链接：<a href="javascript:func()">这是一个函数</a>
1.5 表格
table：表格
th：table head 表头
tr：table row 表行
td：table data 单元格
caption：表格标题
<table align="center" border="1" cellpadding="1px" cellspacing="2px">
<caption>test</caption>
<th>
<td>1</td>
<td colspan="2">1</td>
</th>
<tr>
<td rowspan="2">2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
表属性：
1.align：left、center、right，规定表格相对周围元素的对齐方式
2.border："1"或""，规定表格单元是否拥有边框，默认为""，表示没有边框
3.cellpadding：规定单元边沿与其内容之间的空白，默认1像素
4.cellspacing：规定单元格之间的空白，默认2像素
5.width：像素值或百分比，规定表格的宽度
6.height：像素值或百分比，规定表格的高度
合并单元格：先确定跨行还是跨列合并,再找到目标单元格，写上合并方式=合并的单元格数量。比如：`<td colspan="2"></td>`，最后删除多余的单元格
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
拓展
1、<thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead>内部必须拥有<tr> 标签！
2、<tbody></tbody>：用于定义表格的主体。放数据本体 。
3、<tfoot></tfoot>放表格的脚注之类。
4、 以上标签都是放到table标签中。
1.6 列表
无序列表ul(unordered list)
有序列表ol(ordered list)
列表元素li
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
定义列表dl(definition list)
dt：definition term（定义名词）
dd：definition description（定义描述）
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
1.`<ul></ul>`中只能嵌套`<li></li>`，直接在`<ul></ul>`标签中输入其他标签或者文字的做法是不被允许的。但可以在li元素中插入其他元素。
1.7 表单
1.表单form：搜集数据传输到服务器处理
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
action：url地址，用于指定接收并处理表单数据的服务器程序的url地址。
method：get/post，用于设置表单数据的提交方式，其取值为get或post。
name：名称，用于指定表单的名称，以区分同一个页面中的多个表单。
2.输入input
<label><input type="" name="" value="" size="" checked maxlength=""/>text</label>
type 类型
输入控件
text 单行文本输入框
password 密码输入框
选择控件
ratio 单选按框
checkbox 复选框
按钮控件
button 按钮
image 图形形式的按钮
submit 提交按钮
reset 重置表单按钮，还原表单初始默认状态
选择文件控件
file 文件域
name 控件名称,用于区别不同的表单
value 控件中的默认文本值
size 控件宽度
checked 定义`选择控件`中默认被选择的项
maxlength `输入控件`最多输入的字符数
2.1 标签label
label 标签为 input 元素定义标注（标签）。
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
例1：<label>用户名：<input type="radio" name="usename" value="请输入用户名"></label>
例2：<label for="sex">男</label><input type="radio" name="sex" id="sex">
3.下拉列表select(用的较少)
option 选项
<select>
<option>选项1</option>
<option selected>选项2</option>
<option>选项3</option>
</select>
4.文本域textarea（用的较少）
rows：行数
cols：每行中最多字符数
<textarea rows="5" cols="50"></textarea>
1.radio、checkbox按钮name值要一样。
2.点击了提交按钮，可以把 表单域form 里面的表单元素 里面的值 提交到后台服务器
3.label常常和input配合使用，一行中可以有多个label。
1.8 iframe
iframe内嵌框架，在当前页面再嵌入另外一个网页。
<iframe src="url" width="100px" height="100px"></iframe>
