通过html之标签(1)我们知道了在html中常用标签，在这些标签中有以下几个标签使用时需要格外观注。
一、a标签
强调：base标签：用来统一指定网页中所有链接以何种方式打开以及链接地址。
功能如下几点：
1、跳转页面：
target 目标点(_blank在新页面中打开，_self在本页面中打开（默认）)
href 要跳转页面的地址（即可网络地址也可以是本地地址，绝对地址相对地址皆可），下载地址或者锚点。href属性一定不能空，如果不确定的话，可以写上#或者是javascript。
2、下载：
在href里写上地址，如浏览器能认别则可直接打开，如不能识别那就下载(h5新增download属性，添加后浏览器能识别也是可以下载文件)。
3、锚点
在href的值里写上#name,name为对应id的名字（这样内容可以在一个页面中显示）；也可以写上网址:#id ，跳到指定地址页面设置的id。
4、伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 400px; height: 400px; border: 1px solid black; } a:link{ color:blue; } a:hover{ color:pink; } </style> <base target="_blank" /> </head> <body> <a href="#pink">粉色</a> <div id="blue">蓝色</div> <div id="red">红色</div> <div id="green">绿色</div> <div id="pink">粉色</div> </body> </html>
二、img标签
它的标签类型为类联块。引入图片时如果是给图片一个width或是height，它会同比例缩放，都给会变形。title=""，表示鼠标在图片上悬停时显示图片的名称。alt=""，表示图片不见时，网页上显示的内容。
三、h标签
h标签在使用时，不要为了减小标题字体而使用低级别标题，而是使用css的font-size样式；避免跳过某级标题，要从<h1>~<h6>；避免在一个页面上重复使用<h1>它一般唯一。
四、表格标签
在使用表格标签时，我们要注意表格的默认样式,并清除默认样式。要善于作用col和colgroup标签。
table{border-collapse:collapse;}
th,td{padding:0;}
其中合并单元格的方法如下：
rowspan 合并行
colspan 合并列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> table{ border-collapse: collapse; } th,td{ padding:0; } th,td { border: 1px solid black; text-align: center; background: rgba(187, 240, 205,0.7); } table{ width: 400px; } caption{ background: pink; border:1px solid black; border-bottom: none; } </style> </head> <body> <table> <thead> <caption>**课程表</caption> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <tr> <td rowspan="2">上午</td> <td>数学</td> <td>化学</td> <td>语文</td> <td>英语</td> <td>数学</td> </tr> <tr> <td>数学</td> <td>化学</td> <td>语文</td> <td>英语</td> <td>数学</td> </tr> <tr> <td rowspan="2">下午</td> <td>数学</td> <td>化学</td> <td>语文</td> <td>英语</td> <td>数学</td> </tr> <tr> <td>数学</td> <td>化学</td> <td>语文</td> <td>英语</td> <td>数学</td> </tr> </tbody> <tfoot> <th colspan="6">晚自习</th> </tfoot> </table> </body> </html>
五、表单
表单包含表单元素，允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用<form>标签来设置,<form>下有三点：
1、action:其作用是指定向何处发送表单链接，里面可以放绝对路径也可以放相对路径。
2、method:表单提交数据方式。分为post（提交的数据不会显示到url中，安全性高，提交数据无大小限制常用）和get（明文提交，使用大小有限制，方便，安全性低）两种。
<form>内表单标签
1、input：用来接收用户输入的信息，用法如下：
type类型为text，可以输入内容的文本输入框
type类型为password,输入时不显示明文
type类型为button，按钮
type类型为radio,单选框
type类型为checkbox，复选框
type类型为file,上传文件
type类型为submit,提交按钮
type类型为reset,重置
type类型为submit,提交
type类型为email,定义一个邮箱文本框，输入不是，则会有提示。
name可以指定提交数据的key,value指定提交数据的value,可设置输入框的默认值。
2、select 下拉列表
name属性指定提交给后台的数据的key。
3、label 用来辅助input,点击label后能够让对应的input变成可输入的状态
for属性的值等于被关联的表单元素的id值
4、其它：checked让表单一上来就有一个默认选中状态，disabled禁止用户输入，表单不会提交，readonly，表单为只读状态可以提交。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <div> <form action="http://www.baidu.com/" method="GET"> <input type="text"> <input type="password" name="password" /> <input type="button" value="按钮" /> <input type="radio" name="sex" value="man" />男人 <input type="radio" name="sex" value="woman" />女人 <input type="radio" name="sex" value="ladyman" />人妖 <input type="checkbox" name="interest" value="eat" />吃饭 <input type="checkbox" name="interest" value="sleep" />睡觉 <input type="checkbox" name="interest" value="play"/>游戏 <input type=" file" /> <input type="email" /> <input type="url" /> <input type="submit" value="提交按钮" /> <input type="reset" value="重置按钮" /> </form> </div> <br /> <!-- 以下为一个简单的例子，虽然格式有点难看，但最终效果出来了 --> <div> <form action="www.baidu.com/" method="POST"> <div>用户名 <input type="text" style="width:200px;" placeholder="请设置用户名"></div> <div>手机号 <input type="text" style="width:200px;" placeholder="可用于登录和找回密码"></div> <div>密 码   <input type="password" style="width:200px;" placeholder="设置密码"></div> <div> 验证码 <input type="text" style="width:200px;" placeholder="请输入验证码"/> <input type="button" value="获取验证码"/> </div> <div> <input type="radio">阅读并接受 <a href="#" style="text-decoration: none"/>《百度用户协议》</a>及 <a href="#" style="text-decoration: none"/>《百度隐私保护声明》</a> </div> </form> <dir style="padding:1px"> <input type="submit" value="注册" style="height:50px;width:300px;" /> </dir> </div> <br> <select name="add" value="value" style="width: 100px"> <option value="深圳"">深圳</option> <option value="北京" selected="selected">北京</option> <option value="上海">上海</option> </select> </body> </html>
六、figure
<figure>标签规定独立的流内容（图像，照片，代码等）。figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如被删除，对文档流不产生影响。
注意：figure可带有标题，一个figure元素内最多只允许放一个figcaption元素，其它元素可以随意放置。figure有一个子标签：figcaption
<figcaption>标签定义figure元素的标题，figcaption应该被放置于figure元素的第一个或者是最后一个子元素的位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 200px; height: 200px; margin-bottom: 10px; background:yellow; } img{ width: 50%; } </style> </head> <body> <figure> <img src="../MyProject/imges/1.jpg" alt=""> <img src="../MyProject/imges/2.jpg" alt=""> <img src="../MyProject/imges/3.jpg" alt=""> <figcaption>标题可以选择</figcaption> </figure> </body> </html>
