HTML常用标签

焦糖史塔克
146 阅读3分钟

a 标签的用法

含义

超链接元素，可以指向其他网页、文件，以及同页面的某一位置、电子邮件地址，或者其他任意URL

属性

  • href ——用来表示超链接指向的地址
  • target ——用来表示在何处显示链接资源
  • download —— 很多浏览器不支持
  • rel=noopener 需要js知识

href 常用的8种取值

网址

路径

  • /a/b/c 此时的根目录是 hs -c-1的目录
  • a/b/c 在文件所处的目录下，找到a里的b里的c文件
  • index.html 以及 ./index.html 打开当前目录里的 index.html

伪协议

  • javascript:代码; ——直接执行js代码
  • mailto:邮箱 —— 点击后打开默认的邮件软件
  • tel:手机号 ——手机中点击后可以提示是否拨号

id

  • href=#xxx ——页面滚动到id为xxx的元素所在行

代码范例

<a href="//google.com">打开谷歌</a>
<a href="./index.html">c.html</a>
<a href="javascript:alert(1);">JavaScript伪协议</a>
<a href="javascript:;">空的伪协议</a>
<a href="mailto:yangfengnju@163.com">发邮件给我</a>
<a href="tel:15334553435">打电话给我</a>

target

内置名字

  • _blank ——在新页面打开
  • _top ——在当前页面的顶级窗口里打开
  • _parent ——在连接所在的上一级窗口打开·
  • _self —— 在当前窗口打开（默认值是self）

程序员命名

  • window 的 name ——始终在名为xxx的窗口打开网址，如果当前没有xxx窗口，就创建一个
  • iframe 的 name ——使用某个iframe打开链接 （iframe目前较少使用）
  • iframe name="xxx"

iframe 标签

  • 内嵌窗口，很少用，不好用

table 标签的用法

相关的标签（要背）

table、thead、tbody、tfoot、tr、th、td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr >
                <td>1</td>
                <td>2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

table 相关样式

  • table-layout
  • aotu 自动算法
  • fixed 每列等宽
  • border-collapse: collapse 边框合并
  • border-space: 0 边框间的距离设为0

img 标签的用法

作用

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

属性

  • alt —— 图片下载失败时，显示的提示文字
  • hight —— 这是img的属性，不是css，单写高度，宽度自适应
  • width —— 这是img的属性，不是css，单写宽度，高度自适应，高度宽度都写，图片可能会变形
  • src

事件

用来监听图片是否加载成功

  • onload
  • onerror

监听后，我们就可以在图片加载失败时进行挽救，比如提示加载失败的图片

响应式

max-width:100% —— 当图片宽度大于浏览器宽度时，图片宽度会和浏览器宽度相等

可替换元素

img标签是一种可替换元素，他的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

代码范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img标签</title>
    <style>
        * {
            margin: 0; 
            padding: 0;
            box-sizing: border-box;
        }

        img {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <img id="xxx" src="dog.jpg" alt="拉布拉多">
    <script>
        xxx.onload = function(){
            console.log("图片加载成功");
        }
        xxx.onerror = function(){
            console.log("图片加载失败");
            xxx.src="/失败.jpg" ;
        };
    </script>
</body>
</html>

其他感想

属性真的很多，不至于停下来背完再前进，尽量加深印象，以后在用到的时候尽量能直接用，不再需要再去查mdn。以后一边用一边加强记忆。

avatar
文章
阅读
粉丝