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">
超文本链接
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>
