HTML常用标签

天天要nx
260 阅读2分钟

HTML的标签很多，但实际中用到的标签不多，重点要记住常用标签的引用，属性等，这样才能更快更好的写出页面。

a标签的用法

  • 属性

    href 指定链接目标地址URL
target 规定在何处打开链接地址，只有在href属性存在时使用
download 理论上是下载链接，实际上无用处，不用记住
rel=noopener 防止一个bug,具体用处学完js后再做补充

  • href的取值

    1. 网址
    例如：https://google.com
http://google.com
//google.com 
常用写第三种形式，不容易出错，具体为什么等学完http协议再做补充
    1. 路径
    例如：
/a/b/c 表示绝对路径 以及a/b/c 表示相对路径
index.html或./index.html 表示在当前目录找index.html
    1. 伪协议
    javascript:; 写在href里面，在冒号和分号之间写js语法可实现相关操作，这是很早的操作，
现在用来禁止a标签的操作;
mailto:邮箱
tel:手机号 -做简历时可以方便HR直接打电话
    1. id
    href=#xxx 跳转指定id号的标签

    总结：href有9中取值

  • 作用

    1. 跳转外部链接
    2. 跳转内部锚点
    3. 跳转到邮箱或电话等

  • target的取值

    1. 内置名字
    _blank 表示在空白页面打开
_top  表示在层级最高的页面打开
_parent 表示在当前页面的上一层打开
_self  表示在当前页面打开
xxx随意命名 表示在xxx页面打开，如果没有，就创建一个xxx页面并打开
    1. 程序员命名
    window的name
iframe的name
可实现在一个面用多个搜索引擎

iframe 标签

内嵌窗口，现在很少使用

table标签

  • 相关的标签

    1. table 定义表格
    2. thead 定义表格页眉
    3. tbody 定义表格主体
    4. tfoot 定义表格页脚
    5. tr 表示表格每一行
    6. td 表示表格数据
    7. th 表格的表头
    thead,tbody和tfoot可以互换位置

  • 相关的样式

    1. table-layout 属性auto表示自动计算宽度，fixed会平均宽度
    2. border-collapse 属性collapse表示合并单元格之间的距离
    3. border-spacing 表示单元格之间的距离

img标签

  • 作用

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

  • 属性

    alt 用于图片加载失败时提示文字/height/width/src

    宽和高可不写像素，只写宽或高，另一个会自适应

  • 事件

    onload/onerror 监听是否加载成功，控制台可看，加载失败时可替换成404页面

  • 响应式

    max-width:100% 一般写在reset.css样式里，防止图片变形，适应手机端

  • 可替换元素

    面试时会问，会问的概率为30%，具体后面会学习到，再做补充

    以上a、table及img标签是重点，需在实践中练习记忆，具体怎么用还要学习css,js后在实际环境中 根据需求运用。

avatar
文章
阅读
粉丝