内容主要有a标签,table标签,img标签
1.a标签
属性值:href(含义为hyper+reference,超链接),href的取值一般有如下几种。
网址:
<
路径:
<a href="a/b/c.html" >超链接</a>
a/b/c.html,含义为寻找a下面的b下面的c.html
伪协议:
<a href="javascript:;">点击后不会发生任何变化</a>
形式为"javascript:;" 冒号和分号间可以写js代码
id:
<a href="#xxx">在xxx页面打开</a>
可以跳转到指定页面,也可以充当锚点使用
属性值:target 可以取的值有: "_blank" => 在新的窗口打开
"_top" => 在顶级窗口打开
"_parent" => 在上一级窗口打开
"_self" => 在当前窗口打开
"_xxx" => 可以自己设置窗口名为xxx,在xxx打开
属性值:download
下载,现在一般不使用了
2.table标签
thead:头部
tbody:身体
tfoot:尾部
每个外部标签内部都含有 tr (table row,表的每一行)
tr 内可以有 th 和 td (table data)
table还有一些相关的样式:table-layout => 默认值有aotu和fixed,用来调整大小
border-spacing => 调整边距的大小
border-collapse => 将表格的边框合并起来
下面是一个示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
table-layout: fixed;
border-spacing: 10px;
border-collapse: collapse;
}
td,
th {
border: 1px solid blue;
}
</style>
</head>
<body>
<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>61</td>
<td>91</td>
<td>85</td>
</tr>
<tr>
<th>英语</th>
<td>61</td>
<td>91</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<th>总分</th>
<td>200</td>
<td>200</td>
<td>200</td>
</tfoot>
</table>
</body>
</html>
3.img标签
<img src="1.png" alt="图片" width="400" />
作用:发出get请求,展示一张图片
属性:alt => 图片加载失败时就会显示alt中的内容
src => 图片的来源,可以是网上和本地
height => 图片的高度,单独调整高的话宽度会自适应
width => 图片的宽度,单独调整高的话高度会自适应
事件:onload => 图片加载成功后会执行的事件
onerror => 图片加载失败后会执行的事件
响应式:max-width:100% => 设配手机所用,所有图片的最大宽度为100%
自己的感想:
HTML标签非常的多,我认为要记住它们不能是死记硬背,而是要在实践中去使用,当不断的重复使用之后,就会逐渐地记住了。