美文网首页饥人谷技术博客
HTML常用标签的总结

HTML常用标签的总结

作者: 向前进进进 | 来源:发表于2022-07-03 15:11 被阅读0次

    1. a 标签的用法

    <a href=""></a>

    属性
    • href
      超链接
    • target
      指定在哪个窗口打开超链接
    • download
    • rel=noopener
      防止一个bug,暂时未学
    a的href的取值
    • 网址
      <a href="https://bilibili.com"></a>
      <a href="http://bilibili.com"></a>
      <a href="//bilibili.com"></a> (无协议网址)
    • 路径
      <a href="/a/b/c"></a>
      <a href="a/b/c"></a>
      <a href="index.html"></a>
      <a href="./index.html"></a>
    • 伪协议
      <a href="javascript:代码;"></a>
      <a href="mailto:abcdef@163.com"></a>
      <a href="tel:12345678901"></a>
    • id
      <a href="#xxx"></a> (跳转到指定的标签)
    a的target的取值
    • 内置名字
      <a href="https://bilibili.com" target="_blank"></a> (在空白页面打开)
      <a href="https://bilibili.com" target="_top"></a> (在顶级页面打开)
      <a href="https://bilibili.com" target="_parent"></a> (在当前链接所在的iframe的上一层打开)
      <a href="https://bilibili.com" target="_self"></a> (在当前页面打开,为默认值)
    • 程序员命名
      iframe的name:
     <a href="http://163.com" target="xxx">163</a>
     <a href="http://taobao.com" target="yyy">taobao</a>
     <hr>
     <iframe src="" name="xxx"></iframe>
     <hr>
     <iframe src="" name="yyy"></iframe>
    
    总结:a标签的作用
    • 跳转外部页面
    • 跳转内部锚点
    • 跳转到邮箱或电话等

    2. img 标签的用法

    <img src="" alt="">

    作用

    发出get请求,展示一张图片

    属性
    • src
      <img src="abc.png" alt="加载失败"> (图片的来源)
    • alt
      <img src="abc.png" alt="加载失败"> (如果图片加载失败,就会展示alt的内容)
    • height/width
      <img src="abc.png" alt="加载失败" height="800">
      <img src="abc.png" alt="加载失败" width="800"> (只写宽度时,高度会自适应。只写宽度时,高度会自适应)

    3. table 标签的用法

    • 相关的标签
      table/thead/tbody/tfoot/tr/td/th
      tr指table row,表格行
      td指table data,表格数据
      th指table head,表头

    • 只有一行表头的表格

    <table>
            <thead>
                <tr>
                    <th>英语</th>
                    <th>翻译</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>hyper</td>
                    <td>超级</td>
                </tr>
                <tr>
                    <td>target</td>
                    <td>目标</td>
                </tr>
                <tr>
                    <td>reference</td>
                    <td>引用</td>
                </tr>  
            </tbody>
            <tfoot>
                <tr>
                    <td>无</td>
                    <td>无</td>
                </tr>
            </tfoot>
        </table>
    
    • 有一行一列表头的表格
    <table>
            <thead>
                <tr>
                    <th></th>
                    <th>小明</th>
                    <th>小红</th>
                    <th>小影</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>数学</th>
                    <td>100</td>
                    <td>100</td>
                    <td>100</td>
                </tr>
                <tr>
                    <th>语文</th>
                    <td>100</td>
                    <td>100</td>
                    <td>100</td>
                </tr>
                <tr>
                    <th>英语</th>
                    <td>100</td>
                    <td>100</td>
                    <td>100</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>总分</th>
                    <td>300</td>
                    <td>300</td>
                    <td>300</td>
                </tr>
            </tfoot>
        </table>
    
    • 相关的样式
    table {
          table-layout: fixed;
          border-collapse: collapse;
          border-spacing: 0;
        }
    
    table {
          table-layout: auto;
          border-collapse: collapse;
          border-spacing: 0;
        }
    

    table-layout

    auto:根据内容去预测多宽
    fixed:尽量平均
    border-collapse:控制border是否合并
    border-spacing:控制border之间的距离

    4. 其他感想

    • !!永远不能让图片变形!!
    • !!永远不能让图片变形!!
    • !!永远不能让图片变形!!
    • iframe标签为内嵌窗口,已经很少使用,还有些老系统再用

    相关文章

      网友评论

        本文标题:HTML常用标签的总结

        本文链接:https://www.haomeiwen.com/subject/nzudbrtx.html