a标签的用法
小提示:打开html文件请使用 http server -c-1 不要双击打开!!!(命令行执行 yarn global add http-server安装)
属性
- href属性表示链接的目标
<a href="//baidu.com">超链接</a>
<a href="a/b/c.html">c.html</a>
<a href="javascript:alert('你好');">伪协议</a>
<a href="javascript:;">空伪协议阻止页面刷新</a>
<a href="mailto:xxx@qq.com">发邮件给XXX</a>
<a href="tel:12345678901">打电话给谁</a>
<p id="xxx">跳转到这里</p>
<a href="#xxx">跳转</a>
- 一般取值有网址: //google.com , google.com , google.com;
- 路径:/a/b/c以及a/b/c,index.html以及./index.html;
- 伪协议:javascript:代码(可以不写代码为空,点击链接不做任何操作且不刷新页面),mailto:邮箱,tel:手机号
- href里还可以加id 用来做锚点定位使用;
- target属性表示在何处打开目标链接
- 一般取值有_blank: 表示在新页面打开;
- _self 默认页面打开就是当前页面;
- _top 表示在最顶层的窗口打开链接;
- _parent 表示在当前链接的上一层窗口打开链接;
- 可以自定义xxx 表示新窗口的名字 不管有几个链接 只要target是xxx 那就会在同一个窗口打开;
-
download 属性定义了下载链接的地址
-
rel属性用于指定当前文档与被链接文档的关系,只有在使用了href属性才能使用rel属性。
作用
- 跳转外部页面;
- 跳转内部锚点;
- 跳转到邮箱或者电话等;
img 标签的用法
作用
- img标签用于发出get请求,展示一张图片
属性等用法
- alt 是显示图加载失败所显示的文字;
- 如果只写宽度(width)或者高度(height),另外一个自适应,如果同时写会导致图片变形;
- onload/onerror 检测图片是否加载成功 js事件
- max-width:100% 在css里面写可以使得图片是响应式的;
table 标签的用法
<table>
<thead>
<tr>
<th>英语aaaaa</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>link</td>
<td>链接</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
相关的标签
-
thead 表头部 tbody 表的主体 tfooter 表的脚部;
-
tr 表示一行;
-
th 表示一个表头;
-
td 表示一个数据;
其他的心得(form标签)
<form action="/xxx" method="GET" autocomplete="on">
<input type="text" name="username" id="">
<input type="submit">
</form>
作用
- 发get或者post请求,然后刷新页面;
属性
-
action 里面写什么就是请求那个页面;
-
method 控制是使用get还是post;
-
autocomplete 是否自动填充 on或者off;
-
target 和a标签用法差不多 告诉浏览器要提交到哪个页面哪个页面需要刷新;