《HTML常用标签》

这篇博客将包含HTML中常见且重要的a标签、table标签以及img标签的用法和作用。

a标签的用法

首先a标签是超链接标签,长下面这个样子

<a href="https://google.com" >超链接</a>

它的作用有三点

• 跳转到外部链接
• 跳转到内部的锚点
• 跳转到邮箱或者电话等

接下来是a标签的一些属性

href

用于填写目标网页的网址
其中href的取值有很多种

• https://google.com
• http://google.com
• //google.com
  以上三种是网址，其中//google.com是无协议网址，要注意在开发者工具中勾选preserve log
• /a/b/c 以及a/b/c
• index.html 以及./index.html
  以上两种是路径，但要注意的是http服务不是硬盘的根目录，哪里是你开启的服务哪里就是根目录
• javascript:代码;
• mailto:邮箱
• tel:手机号
  以上三种是伪协议,其中javascript伪协议例子如下

<a href="javascript:alert(1);">javascript伪协议</a>

• id href=#xxx 用于跳转到内部锚点

target

指定在哪个窗口打开页面

• _self 在当前窗口打开目标网页，为默认值
• _blank 在一个新的空白窗口打开目标网页
• _top 在最顶层窗口打开
• _parent 在父级窗口打开
• 可以自命名，如果没有则创建该窗口，内容会覆盖
  举例：

<a href="https://google.com" target="_blank">google </a>

download

用于下载网页

rel=noopener

用于防防止某个bug

table标签

• table标签内只能有三个标签 thead tbody tfoot 其中thead tfoot可以没有
• tr是表格里面的一行 table row
• th表示表头
• td 表示table data 数据
  ps：如果table里面不写thead tbody tfoot 里面的内容默认被放到tbody里面
  下面是运用table标签做的一个综合案例

    <table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小颖</th>
            </tr>
        <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>240</td>
                <td>270</td>
                <td>264</td>
            </tr>
        </tfoot>
        </thead>
    </table>

具体效果如下：

截屏2022-07-05 11.33.15.png

拓展一下相关样式

• table-layout
  默认值auto自动计算表格宽高
  fixed会尽量平均宽高
• border-collapse
  合并表格
• border-spacing
  控制边框空隙
  适当调整一下样式

        table {
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
            width: 500px;
        }

        td,
        th {
            border: 1px solid blue;
        }

效果如下：

截屏2022-07-05 11.36.28.png

img标签

<img src="jp.png" alt="">

作用

发出get请求，展示图片

• 属性
• alt 如果图片加载失败则显示alt的内容
• height 设置高度
• width 设置宽度 （永远不要让图片变形，宽和高只设置一个，另一个会自适应）
• src 图片地址

事件

监听图片是否被成功加载

• 成功则调用unload
• 失败则调用onerror
  举例：

   <img id="xxx" src="jp.png" alt="">
   <script>
       xxx.onload = function () {
           console.log('图片加载成功')
       }
       xxx.onerror = function () {
           console.log('图片加载失败')
       }
   </script>

在开发者工具中的console可以看到结果

响应式

    <style>
        img {
            max-width: 100%;
        }
    </style>

实现在手机上也能自适应浏览

本节课中方方老师也介绍了两种打开网页的方式
一种是利用http-server
打开终端，安装http-server

yarn global add http-server

安装好以后，输入

http-server . -p-1

则会出现地址，但需要在后面加上网页的路径
第二种是parcel
打开终端，安装parcel

yarn global add percal

安装好以后，输入html文件名

parcel index.html

会出现网址然后进入即可

这节课将HTML的一些重点常用的标签深入理解了一下，内容比较丰富，其中也稍微了一些CSS和JS的内容，感觉这样子现在留下一些印象，到后面学习的时候能更加流畅，这样重复多次的遇见这些内容可能也更加难忘。学到这里的话，给我最深的感受是面对这么多的标签以及属性，真的需要多敲，多打才能记得牢固，仅仅看和记笔记是不太够用的。我后续的学习重点除了记笔记应该要增添一个多敲代码的实践当中了。