1.a标签
1.1作用
<a> 元素(或称锚元素)可以通过创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
1.2属性
1.download
将网页下载到本地,很多浏览器不支持这个功能。使用时一定要加路径。
<a href="/images/baiduimage.jpg" download="baidu">
2.href的取值:
2.1网址:
google.com
google.com
//google.com
2.2路径:
/x/y/z
x/y/z
index.html
./index.html
2.3伪协议:
<a href="javaScript:alter(1);">javaScript伪协议,能使页面不会有任何改动.</a>
<a href="mailto:000000@qq.com">发送邮件</a>
<a href="tel:00000000">若在手机端,可以直接打电话</a>
2.4id HTML中a标签中href="#xxx",当点击后,页面会跳转到标签中id="xxx"的地方
3.target
该属性指定在何处显示链接的资源。
<a target="top">在顶部窗口打开</a>
<a target="self">在当前页面打开</a>
<a target="blank">在空白页打开网页</a>
<a target="parent">在父级窗口打开</a>
< a target="xxx">如果有个窗口叫xxx就直接打开,没有就创造一个并打开</a>
2.img标签
2.1作用
发出一个get请求,展示一张图片。
2.2事件
onload/onerror
<img src="mianhuacao.jpg" alt="一堆草" id="zzz" width="360">
<script>
zzz.onload = function () {
console.log("图片加载成功");
};
zzz.onerror = function () {
console.log("图片加载失败");
};
</script>
2.3响应
将图片大小调整为自适应屏幕大小
max-width:100%
2.4属性
src alt
3.form标签
3.1功能
发出get或post请求,刷新页面。
3.2属性
autocomplete 给出自动建议
action method target
4.table标签
4.1相关标签
thead表头
tbody表身
tfoot表尾
在写代码时一定要使用规范,表格的表头表身表尾一定要划分清楚。
tr表格中的一行
th一行的第一列,表格中的表头
td表格中的一个单元格
4.2相关样式
table-layout:auto;表设置表格布局算法
border-spacing:0px;相邻单元格的边框间的距离
border-collapse:collapse;相邻单元格间的边框合并
4.3例子
table {
table-layout: auto;
border-spacing: 20px;
border-collapse: collapse;
}
td,
th {
border: 1px solid;
}
</style>
<body>
<table>
<thead>
<tr>
<th></th>
<th>读书</th>
<th>跑步</th>
<th>打篮球</th>
<th>敲代码</th>
</tr>
</thead>
<tbody>
<tr>
<th>懒羊羊</th>
<td>8</td>
<td>7</td>
<td>6</td>
<td>5</td>
</tr>
<tr>
<th>美羊羊</th>
<td>6</td>
<td>7</td>
<td>6</td>
<td>5</td>
</tr>
<tr>
<th>喜羊羊</th>
<td>2</td>
<td>5</td>
<td>3</td>
<td>5</td>
</tr>
<tr>
<th>沸羊羊</th>
<td>8</td>
<td>7</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>评价</th>
<td>良好</td>
<td>良好</td>
<td>差</td>
<td>良好</td>
</tr>
</tfoot>
</table>
</body>
效果