HTML 笔记 2

前言:

本篇文章介绍一下 html 常用标签的用法。预计阅读时间 10 分钟。以下代码示例可自行复制到 vscode 中尝试。

a 标签的用法

1. 可以跳转到页面上的任何位置，只需写上html对应的id号即可。

<div style="height: 800px; background-color: green" id="nihao">你好</div>
<div id="good">大家好才是真的好</div>

<a href="#nihao">跳转到你好</a>
<a href="#good">跳转到大家好</a>

2. 跳转对应的网址,以百度为例

<!-- 再网址前加 //  它会自主选择是https还是http。 -->
<a href="//baidu.com">baidu</a>

为了看到上述效果，请按 F12 打开控制台。选择 _Preserve log(保留日志)_ (看不见图片请访问github.com/chenrubin11…)

看不见图片用github访问

target 属性，取值有_blank,_top,_parent,分别是空白页打开，顶层容器打开，在父级元素打开。也可以取值为 xxx,跳转到 id 为 xxx 的 iframe 中打开

<a href="//baidu.com" target="xxx">baidu</a>
<iframe name="xxx" src="" frameborder="0"></iframe>

href 也可写上手机号和邮箱，他会自动跳转到拨号界面以及选择邮件的界面

<a href="tel:1785xxxxxxx">手机号</a> <a href="mailto:xx@xx.com">邮箱</a>

download 属性下载的意思，考虑到兼容性问题所以很少使用。
当开启一个 http-server 后, href 属性/a/b/c 和 a/b/c 的区别, /a/b/c 是在 http 服务中的根目录打开,不是在磁盘根目录,双击 c.html 则是以文件的形式打开

<!--http服务中打开 Request URL: http://127.0.0.1:5501/a/b/c.html -->
<a href="/a/b/c.html">http根目录打开</a>
<!--双击html文件 file:///C:/mm/yy/xx/xxxxx/a/b/c.html  -->

伪协议,作用是标签什么都不做。比如说老板让你做个查看的功能,不用#的原因是因为#会跳转到页面顶部，href 属性为空的话会刷新页面。早期使用伪协议的目的是为了方便执行一段 js 代码

<p>页面顶部</p>
<div style="height: 1200px"></div>
<a href="">空href属性刷新页面</a>
<a href="#">#跳转到页面顶部</a>
<a href="javascript:;">伪协议</a>
<a href="javascript:alert(1);">alert1</a>

img 标签用法 img 的作用是:发起 get 请求,展示一张图片。

监听事件 onload,onerror 失败监听
图片只可以写 width|| height，然后让高度或者宽度自适应,如果全部写死取值,那么图片比例就不对了。
让图片自适应采用下列 css

* {
  max-width: 100%;
}

当图片超过 300kb 的时候建议将图片压缩(超过 300kb 难下载)，可自行搜索 jpg/png 图片压缩工具,这里就不推荐了，除了压缩也可以进行剪裁。

table 标签的用法

正确的用法,html 结构如下,table 标签应该包裹着 thead,tbody,以及 tfoot。而不是直接在 table 标签直接使用 tr,td这是错误的写法. 如果直接使用的话,会被解析成 tbody 下的 tr,td,可自行在控制台查看效果.

<!--正确写法 -->
   <table>
      <thead>
        <th>成绩</th>
        <th>姓名</th>
      </thead>
      <tbody>
        <tr>
          <td>95</td>
          <td>小明</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>95</td>
          <td>小李</td>
        </tr>
        <tr>
          <td>98</td>
          <td>小黄</td>
        </tr>
      </tfoot>
    </table>

单元格之间的间距调整以及合并单元格。

   word-spacing: 0;
   border-collapse: collapse;

html 标签使用并不难,关键是要细心使用,注意中英文的分号。

html标签常见用法

HTML 笔记 2