HTML重难点标签 2

182 阅读3分钟

a(anchor)标签超链接

作用

  • href的使用
    定义超链接,用于从一张页面链接到另一站页面

    <a href="//google.com"></a> 会自动在最前面添加www,并且会自动匹配是http协议还是https协议
    <a href="http://google.com"></a> 这种情况就是指定了在http协议下进行网站的跳转
    <a href="https://google.com"></a> #同上,指定了在https。

    href 属性也可以代表要跳转的文件路径

    <a href="a.html"></a> # 会跳转到服务器当前访问页面文件路径下的 a.html 文件, 此处是相对路径; <a href="/a.html"></a> <a href="./a.html"></a> # 这是绝对路径了,在服务器根目录下的 a.html 文件, 因为路径最 # 开始有个 / 符号, 第二个 ./ 符号也是代表 当前目录下的意思
    <a href="../a.html"></a> # 这次代表的是跳到位于当前文件目录上一级别的 a.html 文件

    <a href="https://google.com"></a> # 同上,指定了在https协议下进行网站的跳转

    href 属性也可以执行伪协议、javascript代码

    <a href="#"></a> # “ # ” 一看像是 id 的意思,但是这个只有一个#没有跟id,所以是回到页面最上面的意思,类似于一个小箭头能回到页面最上面

    <a href="#username_part"></a> # #后面跟id了,这回就会页面跳转到定义了这个id的相应的地 方,可以想像一个一个报错信息,你点那里就会自动跳转到相对应的代码块那里
    <a href="mailto:abcd@hotmail.com">abcd@hotmail.com</a> # 这里可以通过点击后启动本机默认邮箱软件然后自动填好收件人邮箱地址,就是我们定义好的这里这个
    <a href="tel:110">110</a> #这次换成了电话号码,点击后自动手机端会进入到拨号页面,
    <a href="javascript:void(0)"></a> <a href="javascript:;"></a> 以上两个就是执行的javascript空代码,防止页面进行刷新,进而监听click事件

    target 属性规定在何处打开链接文档(页面从哪里打开),它的值可以为:

    _self # 在当前浏览的窗口打开
    _blank # 浏览器总在一个新打开、未命名的窗口中载入目标文档开
    _parent # 在父层级页面打开开
    _top # 在最顶层级页面打开开
    <a target="_blank|_self|_parent|_top|framename">

    Download属性

    <a href="/images/myw3schoolimage.jpg" download="w3logo">

    其中 download 属性后面接的名字就是下载后默认设置好的文件下载名称,对于这个值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

    img的用法

    <img src="dog.jpg" alt="狗的图片">

    src: 表示图片地址或者链接 alt: 用于screen reader朗读给阅读障碍人士,同时若图片加载错误,可以显示这行字,告诉用户这图片原本应该是什么。

    若图片未加载成功

    <body>
        <img id="a_photo" src="a.jpg" alt="">
        <script>
            a_photo.onload = function() {
                console.log('图片加载成功!');
            };
            a_photo.onerror = function() {
                console.log('图片加载成功!');
                a_photo.src = "/404.jpg";
            };
        </script>
    </body>
    

    对应 img 标签有这两个加载的方法,如果加载不成功可以将未加载成功的图片进行替换,显示404图片,提高产品易用性.

    在移动端也要适合大小的图片

    <style lang="css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
    
            img {
                max-width: 100%;
            }
        </style>
        ```
        对于移动端的适配,可以在 css 文件中, 为img 标签设置一个最大宽度为100%的设置,这样左右就不会超屏,也不会影响正常的显示,更加的用户友好化
        
        ### 标签table 的使用方法
        
        
    theadtfoot在一张表中都只能有一个,而tbody可以有多个。
    tfoot必须出现在tbody前面,这样浏览器在接收主体数据之前,就能渲染表尾,有利于加快表格的显示速度。这一点对大型表格尤其重要。
    border-spacing 代表边框的间距
    border-collapse: collapse 代表边框合并