1.a
(1.)超链接
<a href="new.html">点击进入到新网页</a>
这里可以直接跳转到一个页面
<a href="http://www.baidu.com" target="_blank">进入百度</a>
这里 target="_blank 指可以在空白页面打开新网址
target="_self 指可以再当前页面显示新网址
（2）标签内部跳转
锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <p>my</p> 10 <p>my</p> 11 <p>my</p> 12 <p>my</p><p>my</p> 13 <p>my</p> 14 <div id="zhangqing">张庆</div> 15 <p>my</p> 16 <p>my</p> 17 <p>my</p> 18 <p>my</p> 19 <p>my</p> 20 <p>my</p> 21 <p>my</p> 22 <p>my</p> 23 <p>my</p><p>my</p> 24 <p>my</p> 25 <p>my</p><p>my</p> 26 <p>my</p> 27 <p>my</p> 28 <p>my</p> 29 <p>my</p> 30 <p>my</p><p>my</p> 31 <p>my</p> 32 <p>my</p><p>my</p> 33 <p>my</p> 34 <p>my</p><p>my</p> 35 <p>my</p> 36 <p>my</p><p>my</p> 37 <p>my</p> 38 <p>my</p><p>my</p> 39 <p>my</p> 40 <p>my</p><p>my</p> 41 <p>my</p> 42 <p>my</p> 43 <a href="#zhangqing">找张庆</a> 44 <a href="#zhangqing">找张庆</a> 45 <a href="#">找张庆</a> 46 <a href="#">找张庆</a> 47 <a href="javascript:void(20)">找张庆1</a> 48 <a href="javascript:void(0)">找张庆2</a> 49 50 </body> 51 </html>
锚点 默认有点击行为。我们可以javascript:void(0);阻止a标签的默认点击行为。
第一个根据 id 查找 第二个 回到顶部 第三个 刷新
2.image
src:连接的图片资源
alt:图片资源加载失败。显示的文本
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 span{ 8 color: blue; 9 } 10 a{ 11 display: inline-block; 12 width: 300px; 13 height: 300px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box"> 19 <a href="javascript:void(0);"> 20 <img src="https://img04.sogoucdn.com/app/a/100520093/9243fbcd523532c7-65a10dc900adf004-16cb2e34a14409c94f53ee8772786500.jpg" alt="奥斯卡讲道理" width="500" height="600"> 21 </a> 22 </div> 23 <div> 24 <span>我最强</span> 25 </div> 26 </body> 27 </html>
a{
display: inline-block;
300px;
height: 300px;
}
这里是将超链接于图片重合不会卡位置
3.ul ol dl
ul为无序 这里并不是没有序号 而是一个语句 可以嵌套 li
ol 为有序 有自己的type类型
dl为自定义 dt dd
dt 是主要描述的 是特别加粗的
dd是用来描述dt的 可没有
4.table
border='1' style="border-collapse:collapse;" 将单元格的线和表格的单元合并1
table 由 tr td 组成 tr是上面的列 td 是列上的内容 table实现的的是一个竖列
table 可以设置单元格的大小 border 是显示那些单元格的线
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="2" style="align-collapse: collapse;"> 9 <tr> 10 11 <td>我是</td> 12 <td>我是</td> 13 <td rowspan="2">我</td> 14 </tr> 15 <tr> 16 <td>拿着</td> 17 <td>拿着</td> 18 </tr> 19 </table> 20 </body> 21 </html>
单元格可以合并成一块 横向(左右)为
<td colspan="2">日天</td> 需要将空缺的是改掉 后面接的是合并的块
单元格可以合并成一块 纵向(上下)为
<td colspan="2">日天</td>
在表格中 有优先级<thead> <tbody> <tfoot> 这三个优先级
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="2" style="align-collapse: collapse;"> 9 <tfoot> 10 <tr> 11 <td>21拿着</td> 12 <td>我拿着</td> 13 </tr> 14 </tfoot> 15 <thead> 16 <tr> 17 18 <td>我是</td> 19 <td>我是</td> 20 <td rowspan="2">我</td> 21 </tr> 22 </thead> 23 24 <tr> 25 <td>拿着</td> 26 <td>拿着</td> 27 </tr> 28 </table> 29 </body> 30 </html>
5.form
form
HTTP协议
action:提交的服务器网址
method:get(默认)| post(应用：登录注册、上传文件)
页面中的a img link 默认是get请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="" method="get" enctype="multipart/form-data"> 9 10 姓名<input value="哈哈">逗比<br> 11 昵称<input value="哈哈" readonly="">逗比<br> 12 名字<input type="text" value="name" ><br> 13 密码<input type="password" value="pwd" size="50"><br> 14 性别<input type="radio" name="gender" value="male" checked="">男 15 <input type="radio" name="gender" value="male" >女<br> 16 爱好：<input type="checkbox" name="love" value="eat">吃饭 17 <input type="checkbox" name="love" value="sleep">睡觉 18 <input type="checkbox" name="love" value="bat">打豆豆 19 </form> 20 21 </form> 22 23 </body> 24 </html>
checkbox：多选按钮，名字相同的按钮作为一组进行选择。checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。value="内容"：文本框里的默认内容（已经被填好了的）size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
6.select 下拉列表清单
1 <form> 2 <select> 3 <option>小学</option> 4 <option>初中</option> 5 <option>高中</option> 6 <option>大学</option> 7 <option selected="">研究生</option> 8 </select> 9 <br><br><br> 10 11 <select size="3"> 12 <option>小学</option> 13 <option>初中</option> 14 <option>高中</option> 15 <option>大学</option> 16 <option>研究生</option> 17 </select> 18 <br><br><br> 19 20 <select multiple=""> 21 <option>小学</option> 22 <option>初中</option> 23 <option selected="">高中</option> 24 <option selected="">大学</option> 25 <option>研究生</option> 26 </select> 27 <br><br><br> 28 29 </form>
<option selected="">研究生</option> 为优先研究生
size 默认为1 为下拉视图 size="3 " 就按照滚动式图