<a>标签的使用:
(1) 超链接
href 超链接的地址
target:_self 默认 在当前中打开链接地址
_blank 在空白的页面打开链接地址
(2) 标签内部跳转
锚点 默认有点击行为.我们可以javascript:void(0);阻止a标签的默认点击行为.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <div id="peiqi">配齐</div> <p>alex</p> <p>alex</p> <p>alex</p> <p>alex</p> <!-- hash值 锚点 默认有点击行为 javascript:void(0);阻止a标签的默认点击行为--> <a href="javascript:void(0);">找小猪1</a> <a href="#">找小猪2</a> <a href="#">找小猪3</a> <a href="#">找小猪4</a> <a href="#">找小猪5</a> <a href="#">找小猪6</a> <!-- <a href="tell:18511803134">打电话</a> --> </body> </html>
<img>标签的使用:
(1)src:连接的图片资源
(2)alt:图片资源加载失败.显示的文本
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ display: inline-block; width: 300px; height: 300px; } </style> </head> <body> <div class="box"> <a href="javascript:void(0);"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537752361&di=eeaea9ec907f0162f3fd1f2e1ebaf9d0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.52pk.com%2Ffiles%2F160216%2F5329500_160443_1.png" width="300" height="300"> </a> </div> <div> <span>哈哈哈哈</span> </div> </body> </html>
<ul>标签的使用:
unordered list 无序列表 ul下的子元素只能是li
li
type='circle' 圆心
type='square' 方块
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul> <li> alex <ul> <li> 哈哈哈哈 <ul> <li>ahhaha</li> </ul> </li> <li>哈哈哈哈2</li> <li>哈哈哈哈3</li> <li>哈哈哈哈4</li> <li>哈哈哈哈5</li> </ul> </li> <li>wusir</li> <li>太亮</li> <li>女神</li> <li>日天</li> <li>涛哥</li> </ul> <ul type="square"> <li>alex</li> <li>wusir</li> <li>太亮</li> <li>女神</li> <li>日天</li> <li>涛哥</li> </ul> <ul type="circle"> <li>alex</li> <li>wusir</li> <li>太亮</li> <li>女神</li> <li>日天</li> <li>涛哥</li> </ul> <ul> <li> <a href=""> <img src=""> </a> </li> </ul> <ol type="i" start="3"> <li>alex</li> <li>alex</li> <li>alex</li> <li>alex</li> <li>alex</li> <li>aaaa</li> </ol> <dl> <dt>第一条规则</dt> <dd>不准睡觉</dd> <dd>不准交头接耳</dd> <dd>不准下神</dd> <dt>第二条规则</dt> <dd>可以泡妞</dd> <dd>可以找妹子</dd> <dd>可以看mv</dd> </dl> </body> </html>
<input>标签的使用:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
type:
text: 文本输入框
password:密码输入框
file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
submit:提交按钮
button:普通按钮
name:提交到服务器端的key
value: 显示的文本内容,与服务器端的value
placeholder:文本代替