提示
像用户一样使用网页，方式是用http-server或parcel（二选一）来预览html，永远不要双击打开html
http-server . -c-1
或者
parcel xxx.html
一. a 标签
1. 属性
href 超链接（hyper reference），跳转的网页地址
target 提交到哪个页面
download 下载网页，但很多浏览器不支持，可以不用
rel=noopener 用来防止一个bug（后续再说）
2. href 取值
1). 网址
- https:// google.com
- http:// google.com
- //google.com (无协议网址) 三个都可以，建议选无协议网址。
代码展示
<a href="//google.com" target="_blank" download>Google</a>
2). 路径
- /a/b/c.html 以及 a/b/c.html 前者虽然是绝对路径，但依然是对的，因为开始我是用http-server打开文件的，此根目录是http服务的根目录，所以不会出错；后者是相对路径，在当前目录下找，没问题。
- index.html 以及 ./index.html 二者完全一样，都是在当前目录寻找文件。
代码展示
<a href="/a/b/c.html">c.html</a>
<a href="index.html">index.html</a>
3). 伪协议
- javascript:代码;
- mailto:邮箱
- tel:电话
代码展示
<!-- 点击后直接执行代码块 -->
<a href="javascript:alert(1);">JavaScript伪协议</a>
<!-- 点击该链接，页面既不会刷新也不会滚动 -->
<a href="javascript:;">空的伪协议</a>
<a href="mailto:t17dm19@abdn.ac.uk">发邮件给牟某某</a>
<!-- 点击链接直接拨号，可用于简历中 -->
<a href="tel:13512345678">打电话给我</a>
4). id
指向内部锚点。
代码展示
<p>1</p>
<p id="xxx">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<!-- 点击链接会跳转到2 -->
<a href="#xxx">查看xxx</a>
href属性作用
- 可以跳转页面
- 可以跳转到内部锚点
- 可以打电话或者发邮件
3. target 取值
1). 内置名字
- _self （默认值，点击链接在当前页打开）
- _blank （点击链接在新窗口打开）
- _top （有两个窗口才有作用，在顶级窗口打开）
- _parent （在当前链接所在的iframe上一层打开）
代码展示
<a href="//google.com" target="_blank">_blank在新页面打开google</a>
<a href="//google.com" target="_self">_self在当前页面打开google</a>
<!-- a-target.html -->
<a href="//google.com" target="_top">_top可以在当前页面引用另一个页面</a>
<div>
<iframe width="600" height="600" src="a-target-iframe.html" frameborder="0"></iframe>
</div> -->
<!-- a-target-iframe.html -->
<body style="background: red;">
我是 iframe
里面有一个 a 标签
<a href="//google.com" target="_top">top</a>
<a href="//google.com" target="_self">self</a>
<iframe src="a-target-iframe2.html " frameborder="0"></iframe>
<!-- a-target-iframe2.html -->
<body style="background: green;">
我是 iframe2
<hr>
里面有一个 a 标签
<a href="//baidu.com" target="_parent">parent</a>
</body>
</body>
代码效果图
点击红色页面的top会在最上级白色页面打开google，
点击绿色页面的parent会在红色页面打开baidu。
2). 程序员命名
- window的name
target="xxx"，但会被一直覆盖 - iframe的name 可以实现goog-bai网站
代码展示
<a href="//google.com" target="xxx">google</a>
<a href="//baidu.com" target="xxx">baidu</a>
<hr>
<iframe style="border: none; width: 100%; height: 800px;" src="" name=xxx></iframe>
二. table 标签
table常用标签
<thead> <tbody> <tfoot>
<tr> <th> <td>
代码展示
<table>
<!-- 表头部 -->
<thead>
<!-- table row 一行 -->
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>target</td>
<td>目标</td>
</tr>
<tr>
<td>reference</td>
<td>引用 </td>
</tr>
</tbody>
<!-- 表尾部可以没有 -->
<tfoot></tfoot>
</table>
代码效果图
table标签相关样式
table-layoutborder-collapseborder-spacing注意：border-spacing 在有 border-collapse: collapse;的情况下不会生效，只对 border-collapse 被设置为 separate 时生效。
border-collapse: collapse; 和 border-spacing: 0; 的时候这两个的效果有点像，但会有一些差别。 border-collapse: collapse; 相邻格子看起来被一条线分隔(也就是我们看起来正常的表格)。border-spacing: 0; 相邻格子分界线看起来是两条线并在一起。 因此如果写了 border-collapse: collapse; 就不必再写 border-spacing: 0;
代码展示
<style>
table {
width: 600px;
<!-- 表格长宽根据内容个性化定制。若值为fixed，则表格会尽量平均 -->
table-layout: auto;
<!-- 控制border合并 -->
border-collapse: collapse;
<!-- 控制border间距离 -->
border-spacing: 0;
}
td,
th {
border: 1px solid blue;
}
</style>
<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>
<tr>
<th>总分</th>
<td>230</td>
<td>220</td>
<td>210</td>
</tr>
</tfoot>
</table>
代码效果图
三. img 标签
1. 作用
发出get请求，展示一张图片。
2. 属性
src图片地址，可以是网络地址，也可以是相对/绝对路径alt图片加载失败时显示的内容width/height设置图片宽度/高度，二者只有设置一个，另一个会自适应，两个都设置图片会变形，作为前端工程师不能让图片变形
3. 事件
onload / onerror （优化用户体验）
代码展示
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 响应式 pc手机页面均可 */
img {
max-width: 100% ;
}
</style>
<body>
<img id="xxx" src="dog.png " alt="一只可爱的狗子">
<script>
xxx.onload = function() {
console.log("图片加载成功");
}
<!-- 优化用户体验，若原图加载失败，则以其他代替-->
xxx.onerror = function() {
console.log("图片加载失败");
xxx.src = '/404.png';
}
</script>
</body>
四. form 标签
1. 作用
发出get或post请求，然后刷新页面。
2. 属性
action相当于img的src，给个路径，但该路径是后台给的methodaction属性控制请求哪个页面，method属性控制用get还是post来请求，这两个值要大写autocomplete两个值，on和off，值为on时点击输入框浏览器会自动给出提示target与a标签的target用法一样，提交到哪个页面，哪个页面需要刷新
代码展示
<form action="/xxx" method="POST" autocomplete="on" target="_blank">
<!-- form一般会有一个输入框和一个提交按钮，这是最简单的一个表单 -->
<input type="text" >
<input type="submit" >
</form>
3. 事件
onsubmit (当用户点击按钮触发的事件)
<!-- 创建提交按钮，value值为自定义的值 -->
<input type="submit" value="搞起">
<!-- 创建提交按钮 -->
<button type="submit">
<strong>搞起</strong>
<img src="dog.png" width="100" alt="">
</button>
二者区别是input里不能再有其他标签，而button里可以再添加任何标签。
一个表单必须有一个 type=submit，input或者button，否则不能触发submit事件。
五. input 标签
1. 作用
让用户输入内容。
2. 属性
type text / color / password / radio / checkbox / file / hidden / submit
其他标签 textarea / select option /
代码展示
<input type="text" >
<hr>
<!-- 设置文本框颜色 -->
<input type="color">
<hr>
<!-- 密码框，输入密码会以...显示-->
<input type="password">
<hr>
<!-- 单选框 实现多选一必须要设置共同的name -->
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<hr>
<!-- 复选框 要有共同的name -->
<input type="checkbox" name="hobby"> 唱
<input type="checkbox" name="hobby"> 跳
<input type="checkbox" name="hobby"> Rap
<hr>
<!-- 上传文件，multiple表示可以上传多个文件 -->
<input type="file" multiple>
<hr>
看不见的input: <input type="hidden">
<hr>
<!-- textarea多行文本输入 style属性可以固定文本框大小 -->
<textarea style="resize: none; width: 50%; height: 300px;" ></textarea>
<hr>
<!-- select下拉选框 -->
<select>
<option value="">-请选择-</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
3. 事件
onchange / onfocus / onblur
4. 验证器
HTML5新增功能
六. 注意事项
- 一般不监听 input 的 click 事件
- form 里面的 inpu t要有 name
- form 里要放一个 type=submit 才能触发 submit 事件
