HTML常用标签
提示
像用户一样使用网页，方式是用http-server或parcel（二选一）来预览html，永远不要双击打开html
http-server . -c-1
或者
parcel xxx.html
后面复制上代码
一. a 标签
- 属性 href 超链接（hyper reference），跳转的网页地址
target 提交到哪个页面
download 下载网页，但很多浏览器不支持，可以不用
rel=noopener 用来防止一个bug（后续再说）
- 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:电话
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属性作用
可以跳转页面
可以跳转到内部锚点
可以打电话或者发邮件
- 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>
二. 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-layout
border-collapse
border-spacing
<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 标签
-
作用 发出get请求，展示一张图片。
-
属性 src 图片地址，可以是网络地址，也可以是相对/绝对路径
alt 图片加载失败时显示的内容
width/height 设置图片宽度/高度，二者只有设置一个，另一个会自适应，两个都设置图片会变形，作为前端工程师不能让图片变形
- 事件 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 标签
-
作用 发出get或post请求，然后刷新页面。
-
属性 action 相当于img的src，给个路径，但该路径是后台给的 method action属性控制请求哪个页面，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>
- 事件 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 标签
-
作用 让用户输入内容。
-
属性 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>
-
事件 onchange / onfocus / onblur
-
验证器 HTML5新增功能
六. 注意事项 一般不监听 input 的 click 事件 form 里面的 inpu t要有 name form 里要放一个 type=submit 才能触发 submit 事件
