1 a 标签的用法
1.1 作用
- 用户点击后，跳转到外部页面
- 用户点击后，跳转到内部锚点
- 用户点击后，打开默认邮件程序
- 用户点击后，唤起电话拨号
<a href="https://wikipedia.org/" target="_blank">维基百科</a>
<a href="https://www.example.com/">
<img src="https://www.example.com/foo.jpg">
</a>
1.2 属性
- href：指向
- 网址，如
http://baidu.com,https://baidu.com,//baidu.com - 路径，如
/a/b/b1.html,a/b/b1.html，这里要注意根目录指的是当前服务 - 伪协议，如
javascripy:; - 锚点，和id属性相关，如
#demo
- 网址，如
- target：指定如何展示打开的链接
-
_self默认值，在当前窗口打开 -
_blank在新窗口打开 -
_parent在父窗口打开 -
_top在顶层窗口打开 - 其他自定义命名
-
- download：点击后，会出现下载对话框，兼容有问题，特别是手机
- rel：说明链接与当前页面的关系
-
noopener告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。
-
2 img 标签的用法
2.1 作用
发送一个get请求，然后展示图片。它是单独使用的，没有闭合标签
<img src="foo.jpg">
2.2 属性
-
src：指定图片的网址 -
alt：设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本 -
height：指定图片高度，单位是像素或百分比 -
width：指定图片宽度，单位是像素或百分比
2.3 事件
- onload: 图片加载成功的事件
- onerror：图片加载失败的事件，这时候可以换一张默认的失败图片
2.4 响应式
网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。如果想让图片在页面大小随意拖动的情况下都能占满，看到比例不变，需要在reset整个css之后，使用max-width:100%的统一配置。
* {
margin:0;
padding:0;
box-sizing:border-box;
}
img{
max-width:100%
}
2.5 可替换元素
面试可能会考可替换元素
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
3 table 标签的用法
3.1 作用
以表格的形式展示数据
<table>
<tr>
<th>学号</th><th>姓名</th>
</tr>
<tr>
<td>001</td><td>张三</td>
</tr>
<tr>
<td>002</td><td>李四</td>
</tr>
</table>
3.2 相关标签
-
table:所有表格的内容都放在这个里面 -
thead:table的一级子元素，表示表头 -
tbody:table的一级子元素，表示表体 -
tfoot:table的一级子元素，表示表尾 -
tr:table row, 表格的一行 -
th:标题单元格 -
td:数据单元格
3.3 相关CSS样式
-
table-layout：控制列宽度,主要使用auto宽度取决于内容，fixd仅由该列首行的单元格 -
border-collapse:collapse：边框合并，表格中相邻单元格共享边框 -
border-spacing:0：边框之间的距离设置为0
屏幕快照 2019-10-04 下午8.34.56.png
实际测试代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
img {
max-width: 100%;
}
table {
width: 200px;
border: 2px solid black;
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<div>电话：<a href="tel:15612345678">susu的手机</a></div>
<div>邮箱：<a href="tel:15612345678">susu的邮箱</a></div>
<div>
百度：<a href="//baidu.com" target="_blank" rel="noopener">百度搜索</a>
</div>
<img src="xiaohei.jpg" alt="罗小黑" />
<table>
<caption>
班级表
</caption>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>王五</td>
<td>2班</td>
</tr>
<tr>
<td>张三</td>
<td>1班</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总人数</th>
<td>2</td>
</tr>
</tfoot>
</table>
</body>
</html>
4 form 标签的用法
4.1 作用
发送get或者post请求，然后刷新页面
<form action="https://example.com/api" method="post">
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
</form>
4.2 属性
- action: 控制请求哪个服务器接口
- autocomplete: off（不自动填写）和on（自动填写），与input中的name属性配合使用，比如
<input name="username" type="text"> - method: 提交数据的 HTTP 方法
-
method=post表单数据作为 HTTP 数据体发送 -
method=get表单数据作为 URL 的查询字符串发送
-
- target: 在哪个窗口展示服务器返回的数据。可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。
4.3 事件
- onsubmit，要触发这个事件，必须要有一个
type="submit"的控件，如果没有就默认<button>为submit - 注意，一般不监听input的click事件;form的input要有name属性
5 <input>标签的用法
5.1 作用
与<form>表单有关的接收用户的输入的标签
5.2 属性
-
type: 控件类型-
type="text"普通的文本输入框 -
type="color"选择颜色的控件 -
type="password"密码输入框。用户的输入会被遮挡 -
type="radio"单选框，多个单选框的name属性值一致时表示一组 -
type="checkbox"多选框，多个多选框的name属性值一致时表示为一组 -
type="file"选择文件， 添加multiple属性允许用户选择多个文件 -
type="hidden"，不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交 -
<input type="submit" value="提交">与<button>提交</button>的区别是，input里面不能再有其他东西，而button里可以有其他标签
-
-
name: 控件的名称 -
value: 控件的值
5.3 事件
- onchange 当用户输入改变的时候触发
- onfocus
- onblur
5.4 验证器
必填required
<input id="POST-name" type="text" name="user" required>
6 <textarea>标签的用法
6.1 作用
多行的文本框
<textarea id="story" name="story"
style="resize:none; width:50%; height:300px;">
这是一个很长的故事。
</textarea>
6.2 属性
-
style="resize:none;"使用css避免右下角拖来拖去
7 <select>标签的用法
7.1 作用
用于生成一个下拉菜单
<label for="pet-select">宠物：</label>
<select id="pet-select" name="pet-select">
<option value="">--请选择一项--</option>
<option value="dog">狗</option>
<option value="cat">猫</option>
<option value="others">其他</option>
</select>
7.2 属性
-
selected默认选中某一项
8 感想
HTML的标签和属性非常多，但是实际工作中用到的，或者说能让大多数浏览器兼容的标签其实不多。学习的时候大概知道有这么回事就好了，实际使用的时候知道在哪查文档，怎么查文档，检查哪些点就OK。
网友评论