HTML学习总结记录
1.超链接
应用场景：主要实现网站（web应用）内部跳转、网站之间的跳转
语法：
<a href="链接地址" target="_blank|_self|_parent|_top">内容</a>
target属性的属性值
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
（1）创建超链接，连接到百度
<a href="www.baidu.com" target="_self" title = "百度一下你就知道">
<h1 style="text-align:center">百度</h1>
</a>
（2）创建一个图像链接
<a href="http://www.baidu.com">
<img border="2px" width="900px" height="600px" src="test.jpg" />
</a>
（3）创建一个网页内部的超链接 (锚点链接)
首先指定跳转到哪个目标位置:
<a href="#目标名称">链接文字</a>
然后在目标位置设置相对应的跳转名称:
<a name="目标名称"> </a>
（4）创建一个电子邮件链接
<a herf=“mailto: test@163.com">联系我们</a>
2.表格
作用：帮助设计界面布局
语法：
<table > <!-- <table>为表格标记，表格的整体外观由<table>标记的属性决定 -->
<tr> <!-- <tr> 为表行标记，表示表格中新的一行的开始; -->
<th>...</th> <!-- <th> 为表头标记，<th>标记的文字按照粗体字显示 -->
...
</tr>
<tr>
<td>...</td>> <!-- <td> 为表项（定义表格的具体数据），数据的内容放在<td></td>标记之间。 -->
...
</tr>
</table>
（1）单元格合并：colspan和rowspan
<td colspan="2">20</td>
<!-- colspan="2"向右合并两个单元格 -->
<td rowspan="3">20</td>
<!-- rowspan="2"向下合并两个单元格 -->
（2）表格边框：cellspacing和cellspacing
cellspacing="0" //字与单元格边框的距离为0
cellpadding="0" //指的是单元格之间的距离为0
表格属性
| 属性 | 值 | 描述 |
|---|---|---|
| width | pixels、% | 规定表格的宽度 |
| align | left、center、right | 水平对齐方式 |
| valign | top、bottom、middle | 垂直对齐方式。 |
| border | pixels | 设置表格边框的粗细，其取值为正数，单位是象素，省略则不带边框。 |
| bgcolor | rgb(x,x,x)、#XXXXXX、colorname | 背景颜色 |
| bordercolor | rgb(x,x,x)、#XXXXXX、colorname | 边框颜色 |
| cellpadding | pixels、% | 单元格间距，指的是单元格之间的距离，单位是象素 |
| cellspacing | pixels、% | 单元格的边距，指的是字与单元格边框的距离，单位是象素 |
| frame | 属性值 | 规定外侧边框的那个部分是可见的 |
| rules | 属性值 | 规定内侧边框的哪个部分是可见的 |
| rowspan | 数字 | 行合并 |
| colspan | 数字 | 列合并 |
3.表单
应用场景：用于在Web应用中采集用户数据
语法：
<form action="资源名称" method="get|post">
表单yuan's
</form>
<!-- action： 表单提交的地址 -->
<!-- method： 提交保单的方法 -->
<!-- get—发送数据的大小有限制（256byte)，表单中的数据显示在url后面，如:user.html?userid=zhangsan。 post—发送教据的大小没有限制，而且不会现在在url后面 -->
一些input元素：
1.文本框
<input type="text"(文本框) name="username"(文本框名称) placeholder="请输入用户名"(提示) size="value"(文本框长度) maxlength="value"(文本框可输入最大字符数) >
value表示默认值
2.密码框
<input type="password"(密码框) name="password"(密码框的名称) placeholder="请输入密码"(提示) size="value"(密码框的长度) >
3.单选按钮
<input name="sex" type="radio"(单选按钮框) value="男"(值) check="checked">男
<input name="sex" type="radio" value="女" >女
checked表示此项默认被选中
4.复选框
<input type="checkbox"(复选框) name="class" value="Chinese"(值)/>语文
<input type="checkbox" name="class" value="math" >数学
<input type="checkbox" name="class" value="English">英语
5.按钮
<input type="button"(普通按钮) name="Button" value="button"(按钮上面的文字)>
<input type="submit"(提交按钮) name="Submit" value="submit">
<input type="reset" (重置按钮) name="Reset" value="reset">
<input type="image" (图片按钮) name="Image" src="image_url">
6.菜单/列表
<select name="select_name" size="number" multiple="multiple"(与许多选)>
<option="select_name" selected="selected"(默认值)>选项名称</option>
<option="select_name" >选项名称</option>
...
</select>
7.多行文本域
<textarea name="textname" rows="文本域行数" cols="文本域列数">
8.按钮
<button type="button">Click Me!</button>
