HTML的构架
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8">
<title>HTML构架</title>
</head>
<body>
<h>标题</h>
<p>段落</p>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
对于中文网页需要使用 charset="UTF-8"声明编码，有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为
<meta charset="gbk">
超文本链接
- 标签
<a>
设置超文本链接 - 属性
一， href="url"描述了链接的地址怎么正确填写有效链接呢？
1）外部链接
" http://+网址"
2）内部链接
"文件名"
3）空链接
" #"
4）网页元素链接
文本，图像，表格，音频，视频等都可以添加链接。
eg：图像链接
```
<a href=""><img src=""></a>
``` 5）锚点链接
创建一个链接到指定部分
eg:
<a href="#指定内容">xxxxx</a>
...
...
<a id="指定内容">xxxxxx</a>`
二，target=""链接页面的打开方式
_self为默认值（当前窗口打开），_blank☞在新窗口打开
图像
标签img
属性
一, src=“图片路径” (source)源属性
1)相对路径
以引用文件所在位置为参考基础，图片相对于HTML页面的位置。
- 同一级路径 直接写文件名
- 上一级路径
../（表示上一级）+文件名 - 下一级路径 文件夹
/文件名
2)绝对路径
即在电脑中的位置
二，alt 为图像定义一串预备的可替换的文本
语法 alt="描述图像"
在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像,告诉读者她们失去的信息。
三，title 鼠标放在图像上显示的文字
四，width宽度
五，height高度
六，border 边框
表格
一，标签
1）<table>定义表格
2） <caption> 定义表格标题
3)<colgroup> 对表格中的列进行组合（只能位于1-2下；4-8上）
4）<thead> 页眉
5）<tr> 定义行
6）th定义表头
7）<td>定义单元格
8）<tbody> 主体
二，属性
1)cell padding单元格边距
2）cell spacing单元格间距
3）border边框（以像素为单位）
4）rowspan跨行合并单元格（值为跨行的个数）
5）colspan跨列合并单元格 （值为跨列的个数）
三，语法
<table>
<caption>xxxx</caption>
<colgroup>
<col span="" style="">
</colgroup>
<thead>
<tr>
<td></td>
</tr>
<tbody>
<tr>
<td></td>
</tr>
</table>列表
一，标签
1） <ol>有序列表
2）<ul>无序列表
3) <li>列表项
4）<dl>自定义列表
5）<dt>自定义列表项
6）<dd>自定义列表项的描述
7）<select>定义下拉列表
8）<option>定义下拉列表项
可以在不带有任何属性的情况下使用，但通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
三，语法
<--!有序列表-->
<ol>
<li></li>
</ol>
<--!无序列表-->
<ul>
<li><></li>
</ul>
<--!自定义列表-->
<dl>
<dt>
<dd></dd>
</dt>
</dl>
<select>
<option value=""></option>
</select>表单
一，标签
1）<form>定义表单标签
2）<input>输入域
3)<textarea>文本域
4）<label>自动聚焦
在 label 元素内点击文本，浏览器会自动将焦点转到和标签相关的表单控件上。for属性与相关元素的 id 属性相同.
eg:
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
</form> 5）<fieldset>定义围绕表单中元素的边框
6)<legeng>为 <fieldset> 元素定义标题
6）<password>密码字段
二，属性
1)type
值
- radio 单选框（name值相同的时候，可单选）
- checkbox 复选框
- submit 提交按钮
- button 按钮
- reset 重置按钮
- text 文本域
- password 密码字段
2）value规定按钮的初始值，可用脚本进行修改
对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本
对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值
对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。
3）name规定 ＜input＞元素的名称。
name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。
注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
name是控件的名称 ，value是控件的值， id是控件的身份标志。
————————————————
4）check="checked"表示默认已选的选项
5) action="url地址"规定当提交表单时，向何处发送表单数据。
6）method="提交方式" 规定如何发送表单数据（form-data)(表单数据会被发送到在 action 属性中规定的页面中
- get 默认。将表单数据（form-data）以名称/值对的形式附加到 URL
- post 以 HTTP post 事务的形式发送表单数据（form-data）
- 关于 GET 的注释：
URL 的长度是有限的（大约 3000 字符）
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
对于用户希望加入书签的表单提交很有用
GET 更适用于非安全数据，比如在 Google 中查询字符串
- 关于 POST 的注释：
将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签
区块
div 定义了文档的区域，块级 (block-level),前后折行
span 组合文档中的行内元素， 内联元素
框架
标签<iframe>
语法:
<iframe src="URL"></iframe>
可以显示一个目标链接的页面
<iframe src="" name="iframe_a"></iframe>
<p><a href="" target="iframe_a">xxxxxx</a></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个作业</title>
</head>
<h1>青春不常在，抓紧谈恋爱</h1>
<table>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="boy">男<input type="radio" name="gender" value="girl">女
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
</select>
<select>
<option>--请选择月--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择日--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" name="area">
</td>
</tr>
<tr>
<td>
婚姻状况
</td>
<td>
<input type="radio" name="marital status">已婚<input type="radio" name="marital status">未婚<input type="radio" name="marital status" >离婚
</td>
</tr>
<tr>
<td>
学历
</td>
<td>
<input tyle="text">
</td>
</tr>
<tr>
<td>
喜欢的类型
</td>
<td>
<input type="checkbox" name="style">妩媚的<input type="checkbox" name="style">可爱的<input type="checkbox" name="style">鲜肉<input type="checkbox" name="style">老腊肉<input type="checkbox" name="style">都喜欢
</td>
</tr>
<tr>
<td >自我介绍</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册"></input>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<u1><b>我承诺</b>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</u1>
</td>
</tr>
</table>
</body>
</html>
