<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- a标签 -->
<!-- href属性的使用 -->
<!-- 网址 -->
<a href="https://www.baidu.com">百度1</a>
<a href="http://www.baidu.com">百度2</a>
<a href="//baidu.com">百度3</a>
<!-- 路径 -->
<a href="test.html">跳转到test页面</a>
<!-- 伪协议 -->
<!-- 1.javascript;; 什么也不执行 既不自动刷新 也不默认跳转到顶部 -->
<a href="javascript:;">javascript:;</a>
<!-- 2.mailto 发邮件 -->
<a href="mailto:13284167983@163.com">发邮件</a>
<!-- 3.tel 打电话 -->
<a href="tel:13284167983">打电话</a>
<!-- target属性 _self _blank _top _parent-->
<a href="//baidu.com">当前页面打开</a>
<a href="//baidu.com" target="_blank">新页面打开</a>
<!-- table标签 -->
<style>
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
th,
tr,
td {
border: 2px solid #000;
padding: 10px;
text-align: center;
}
</style>
<table>
<!-- 头部 -->
<thead>
<tr>
<th></th>
<td>小明</td>
<td>小李</td>
<td>小华</td>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<th>数学</th>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<th>英语</th>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<th>语文</th>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<!-- 页脚 -->
<tfoot>
<tr>
<th>总分</th>
<td>240</td>
<td>240</td>
<td>240</td>
</tr>
</tfoot>
</table>
<!-- img -->
<style>
/* 响应式必备 */
img {
max-width: 100%;
}
</style>
<img id="img" src="1.png" alt="" title="" />
<script>
img.onload = function () {
console.log("图片加载成功");
};
img.onerror = function () {
console.log("图片加载失败");
img.src = "空白.jpg";
};
</script>
<!-- form
属性： action method autocomplete target
-->
<form action="xxx">
<input type="text" />
<button>登录</button>
</form>
<!-- submit -->
<form action="">
<input type="submit" value="提交" />
</form>
<!-- button -->
<form action="">
<input type="button" value="按钮" />
</form>
<!-- radio -->
<form action="">
<input name="gender" type="radio" />男
<input name="gender" type="radio" />女
</form>
<!-- checkbox -->
<form action="">
<input type="checkbox" />橘子 <input type="checkbox" />柚子
<input type="checkbox" />苹果
</form>
<!-- color -->
<form action="">
<input type="color" />
</form>
<!-- number -->
<form action="">
<input type="number" placeholder="请输入数字" />
</form>
<!-- password -->
<form action="">
<input type="password" placeholder="请输入密码" />
</form>
<!-- file -->
<form action="">
<!-- 单选 -->
<input type="file" />
<!-- 多选 -->
<input type="file" multiple />
</form>
<!-- email -->
<form action="">
<input type="email" placeholder="请输入邮件地址" />
</form>
<!-- tel -->
<form action="">
<input type="tel" placeholder="请输入手机号" />
</form>
<!-- search -->
<form action="">
<input type="search" placeholder="请输入搜索信息" />
</form>
<!-- hidden -->
<form action="">input隐身了：<input type="hidden" /></form>
<!-- select -->
<select>
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<!-- textarea -->
<textarea
name=""
id=""
cols="30"
rows="10"
style="display: block"
></textarea>
</body>
</html>
