通过html之标签(1)知道了在html中常用的标签，在这些标签中有几个标签的使用要注意：
一、a标签
<a href=""></a> 默认有一个下划线，可以使用text-decoration为none去掉。不会继承父类的样式颜色，下划线颜色根据文本颜色而变化。a标签之间一定要写上内容，不然找不到这个a标签。a标签不能嵌套a标签。强调：base标签：用来统一指定网页中所有的链接以何种方式打开以及链接地址。
功能有如下几点：
1、跳转页面：
target 目标点(_blank 在新页面中打开，_self在本页面中打开，默认)
href 要跳转页面的地址（即可网络地址也可以是本地地址，绝对地址相对地址皆可），下载地址，锚点。href属性一定不能空，如果不确定的话，可以写上#或者是javascript。
2、下载：
在href里写上地址，如浏览器能认别则可直接打开，如不能识别那就下载(h5新增download属性，添加后浏览器能识别也是可以下载文件的)。
3、锚点
在href的值里写上#name,name为对应id的名字（这样内容可以在一个页面中显示）；也可以写上网址:#id ，跳到指定地址页面设置的id。
4、伪类
针对元素的某种状态添加的不同样式 :link 未访问链接的（颜色）状态 :visited 访问过的链接的（颜色）状态 :hover 标移入（悬停）的（颜色）状态 :active 鼠标按下不动时候的（颜色）状态 5、href与src的区别 href(HyperText Reference):超文本引用，用在link和a标签上，href是引用和页面关联，是在当前元素和引用资源之间建立联系，在文档中添加href，浏览器会识别这个文档为css文件，不会停止对当前文档的处理。 src(source):表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置，由于src的内容是页面中的一部分，所以浏览器在解析src时会停下对后文的处理，直到src加载完。一般用于srcipt，img，iframe标签中。 6、移动端 移动端中可以在href后面直接加上电话号码，可以唤出手机拨号盘。<a href="tel:137****3456">137****3456</a>。<!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标签
<img src="" alt="" title=""/>它的标签类型为类联块。引入图片时如果是给图片一个width或是height，它会同比例的缩放，都给会变形。title=""，表示鼠标在图片上悬停时显示图片的名称。alt=""，表示图片不见时，网页上显示的内容。
三、h标签
h标签在使用的时候，不要为了减小标题的字体而使用低级别的标题，而是使用css的font-size样式；避免跳过某级标题，要从<h1>~<h6>；避免在一个页面上重复使用<h1>,<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>
五、表单
<form action="提交地址" method="提交方式"></form>表单包含表单元素，允许用户在表单中输入内容,比如：文本域(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>