一、a标签
作用:1、跳转到外部页面;2、跳转到内部锚点;3、跳转到邮箱或电话。
属性:
href(hyper+reference):超级引用、超级链接
1、a的href的取值:
<
//http://google.com:无协议的网址,因为是最高级,会自动选择。由于此方式能够自动补齐相关的网络地址,前面两种写错就会报错,所以推荐使用。
2、路径:
/a/b/c以及a/b/c是当前路径下的a里面的b,b里面的c。
3、伪协议:
<a href="javascript:;">点击后无动作</a>
![696b5b9940e4b0e1e3e0a659003d37c3.png](https://i-blog.csdnimg.cn/blog_migrate/d5aece3fc63ca91784c61e61e564ba71.png)
<a href="javascript:;alert(1)">javascript伪协议</a>
![521bcb1136c50ddadfc5742bc53b94f9.png](https://i-blog.csdnimg.cn/blog_migrate/7df5e4bb9c2900fbf6af208f1d4aac86.jpeg)
4、mailto:邮箱
<a href="mailto:XXXXX@qq.com">发邮件给我</a>
5、tel:电话号码
<a href="tel:123456789">打电话给我</a>
6、id:
<a href="#xxx">查看xxx</a>
备注:如果html href留空<a href=" ">留空</a>,页面则会刷新;
如果想写一个a标签,什么也不做,就之能写<a href="javascript:;">...</a>。
7、a的target的取值:
_blank:在空白的页面打开
_top:在最上面的窗口打开
_parent:在当前链接所在的iframe上一层打开
_sejf:在自己当前位置打开,是默认值
二、table标签:
thead:表示表格的头部,可有可无
tbody:表示表格的内容
tfoot:表示表格的尾部,可有可无
tr(table row):table里面的一行
th:表示表头
td(table data):表示表格数据
<table>
<thead>
<tr>
<th></th>
<th>小红</th>
<th>小明</th>
<th>小兰</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>61</td>
<td>91</td>
<td>85</td>
</tr>
<tr>
<th>语文</th>
<td>79</td>
<td>82</td>
<td>92</td>
</tr>
<tr>
<th>英语</th>
<td>100</td>
<td>97</td>
<td>87</td>
</tr>
</tbody>
<tfoot>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tfoot>
</table>
![854f82569ab9f8977b8165f274746ef2.png](https://i-blog.csdnimg.cn/blog_migrate/8dcd8a25f10b7d783a568cd3bae4a85a.jpeg)
1、table的相关样式:
table-layout:auto:根据内容自动计算行距
table-layout:fixed:表格和列的宽度通过表格来计算的,平均分布
border-collapse:控制border是否合并,默认不合并
border-spacing:控制border和border之间的距离,最好是0
<style>
table{
width: 600px;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
td,th{
border:1px solid black
}
</style>
三、img标签:
1、作用:发出get请求,展示图片
2、属性:
alt:可选的,可替换的,在图片加载失效时,显示一行字来提示用户
<img src="图片.jpg" alt="图片" />
![ba05306cffdb3c9f6489807a81d1e82c.png](https://i-blog.csdnimg.cn/blog_migrate/155c15ed6d372755237536349e6ae3f2.png)
height:只写高度,宽度会自适应
width:只写宽度,高度会自适应
src(source):图片地址
3、响应式:
img{
max-width: 100%;
}
4、事件:
onload/onerror:用来监听图片是否加载成功,若加载成功就调用onload;若没有加载成功,则调用onerror
四、form标签:
1、作用:发送get或post请求,然后刷新页面
2、属性:
action:的作用时控制请求哪个页面,刷新页面的地址
method:是控制get还是用post请求
autocomplete:是否自动填充(on)是,(off)否
target:把哪个页面变成当前页面,告诉浏览器提交到哪个页面,哪个页面应该刷新
3、事件:
onsubmit:如果写了input type=“submit”,那么浏览器会根据当前使用的语言自动变成看得懂的文字。
input type=“submit”和button type=“submit”的区别是input里面不能再有内容,只能有纯文本;button里可以有任何其他内容。
form表单必须有一个type=“submit”的按钮,表单才可提交。
五、input标签:
<
![f10b88d2d53450535e4cd99f380926c6.png](https://i-blog.csdnimg.cn/blog_migrate/258a22a57233657553412dde0c682ea5.png)
<
![a553eaf55322a7ac6fd1b52a6bb117e2.png](https://i-blog.csdnimg.cn/blog_migrate/0e312c0a31a27dac61737e0a06c36164.jpeg)
<input type="password" />
![05dfe48b1c67db03acbe3bf6da9258b6.png](https://i-blog.csdnimg.cn/blog_migrate/887fb6d62b845912c6ab64db7035749f.png)
<input name="gender" type="radio" />男
<input name="gender" type="radio" />女
![68ab16479b68e20cbe2c86fe54ddb134.png](https://i-blog.csdnimg.cn/blog_migrate/89ddd0448e4670ff4568aadb79253512.png)
<input type="checkbox" name="hobby" />唱
<input type="checkbox" name="hobby" />跳
<input type="checkbox" name="hobby" />打篮球
![b0be206ed9f38e47e929a5ef4a9c38c3.png](https://i-blog.csdnimg.cn/blog_migrate/21baac38dcfcb65949245225cc4c3cfd.png)
<input type="file" />
![c4835f0d01e331382011d41a1de43d4e.png](https://i-blog.csdnimg.cn/blog_migrate/6835e7b756093fe228b2c0267f819686.png)
<textarea style="resize: none; width: 50%; height: 300px;"></textarea>
![9aa35a69cda52225078974c195140fec.png](https://i-blog.csdnimg.cn/blog_migrate/8005c3153aa05d55a72747cb1c581c5f.png)
<select>
<option value="">-请选择-</option>
<option value="1">星期一</option>
<option value="1">星期二</option>
</select>
![d500d70131b9bcd9699db29749bd4636.png](https://i-blog.csdnimg.cn/blog_migrate/d5bc0cdd1b228765078c2e94cdd527fe.png)
这节课的内容太多了,我消化的有点慢,但是还是在这节课里学到了许多,我希望我能好好坚持学到最后,加油