写代码啦
HTML 常用标签
回复数(0) 浏览数(20)
{{topic.upvote_count || 0}} 编辑 回复

今天学习了HTML的几个比较常用,也比较繁琐的标签,现在在这里进行一个总结,以复习巩固知识。

a 标签

  1. 定义
    a 标签是创建通向其他网页、文件、同一页面的其他位置、电子邮件地址或者其他任意URL的超链接。
  2. 属性
    • href 属性,它的取值有以下几种
      • 网址:
        • https://google.com 这个是https协议
        • http://google.com 这个是http协议
        • //google.com 这个是无协议网址,它会自动选择是用https还是http协议,所以我们推荐用这种写法
      • 路径:
      • /a/b/c(绝对路径)和 a/b/c(相对路径)。这里有些不一样的地方,因为http-server在哪里打开,它就会把哪里作为根目录。而如果我们是使用双击去打开这个html文件,那是文件路径,在点超链接的时候,我们会根据文件路径的做法找到文件的根目录去,这样就会出错。所以我们要用http-server来进行模拟测试,而不是用双击打开文件的方式去测试html文件。
      • index.html 和 ./index.html。这是在当前目录下寻找这个文件,两个意思是一样的。
      • 伪协议:
      • javascript:代码; 这里的代码为空的话,就是一个点击之后不会有任何反应的按钮,用其他任何办法都不能达到同样的效果。
      • mailto: 邮件地址 写邮件给邮件地址主人
      • tel:手机号 打电话给这个手机号
      • id
      • href="#id" 可以定位到页面中这个id的位置
  • target 属性,是指在哪个窗口打开这个超链接。它的取值分为以下两种:
    • 内置名字
      • _blank:在新标签页打开。
      • _top:在最顶层页面打开。
      • _parent:在父级页面打开。
      • _self:默认值,在当前页面打开。
    • 程序员命名
      • window的name
        • target="xxx",如果有xxx这个窗口,就在xxx窗口打开;如果没有,就创建xxx窗口,然后打开。
      • iframe的name
      • 如果iframe设置了name属性,那么target设置成这个name,就可以在这个iframe里打开窗口了。

以上就是a标签的基本用法了,还有一些就是不怎么常见了,如果碰到可以查MDN。

img 标签

  1. 定义:img标签是将图片嵌入文档的标签。
  2. 作用:发出GET请求,展示一张图片。
  3. 属性:
    • src:是必有的属性。是图片的来源地址,可以是网址,也可以是路径。
    • alt:alternative的意思。就是如果这个图因为意外原因不能加载,那么浏览器会显示alt中设置的备用文本。
    • height:图片的高度。如果只设置高度,那么宽度会自适应。
    • width:图片的宽度。如果只设置宽度,那么高度会自适应。
      前端要记住一点,千万不能让图片变形。
  4. 事件:
    • onload
    • onerror:可以使用这个事件,当src出问题的时候,可以将路径设置成其他备用路径。

table 标签

  1. table 标签的直系子标签只能有三个:thead、tbody、tfoot。
  2. 每个标签里都有tr(table row),表示一行
  3. thead的tr标签里有th(表头)
  4. tbody的tr标签里有th(在有两个表头的时候)和td(table data)
  5. 如果没有写tbody、thead的话,浏览器会把你写的tr都放在tbody里面;如果你只写了td,那浏览器会把你的td放在tr里,然后tr放在tbody里。
  6. thead、tbody、tfoot在写的时候可以不按顺序,浏览器会照常展示。
  7. 相关的样式
    • table-layout:
      • auto 自动根据内容计算行列宽度自行调整
      • fixed 是根据表格的宽度进行调整的
    • border-collapse:取值collapse,合并表格边框
    • border-spacing:表格之间的空隙

还有其他很多的标签,如果要详细地知道标签的整个内容,需要查询MDN,这是最详细最清楚的资料。

{{topic.upvote_count || 0}}

今天学习了HTML的几个比较常用,也比较繁琐的标签,现在在这里进行一个总结,以复习巩固知识。

a 标签

  1. 定义
    a 标签是创建通向其他网页、文件、同一页面的其他位置、电子邮件地址或者其他任意URL的超链接。
  2. 属性
    • href 属性,它的取值有以下几种
      • 网址:
        • https://google.com 这个是https协议
        • http://google.com 这个是http协议
        • //google.com 这个是无协议网址,它会自动选择是用https还是http协议,所以我们推荐用这种写法
      • 路径:
      • /a/b/c(绝对路径)和 a/b/c(相对路径)。这里有些不一样的地方,因为http-server在哪里打开,它就会把哪里作为根目录。而如果我们是使用双击去打开这个html文件,那是文件路径,在点超链接的时候,我们会根据文件路径的做法找到文件的根目录去,这样就会出错。所以我们要用http-server来进行模拟测试,而不是用双击打开文件的方式去测试html文件。
      • index.html 和 ./index.html。这是在当前目录下寻找这个文件,两个意思是一样的。
      • 伪协议:
      • javascript:代码; 这里的代码为空的话,就是一个点击之后不会有任何反应的按钮,用其他任何办法都不能达到同样的效果。
      • mailto: 邮件地址 写邮件给邮件地址主人
      • tel:手机号 打电话给这个手机号
      • id
      • href="#id" 可以定位到页面中这个id的位置
  • target 属性,是指在哪个窗口打开这个超链接。它的取值分为以下两种:
    • 内置名字
      • _blank:在新标签页打开。
      • _top:在最顶层页面打开。
      • _parent:在父级页面打开。
      • _self:默认值,在当前页面打开。
    • 程序员命名
      • window的name
        • target="xxx",如果有xxx这个窗口,就在xxx窗口打开;如果没有,就创建xxx窗口,然后打开。
      • iframe的name
      • 如果iframe设置了name属性,那么target设置成这个name,就可以在这个iframe里打开窗口了。

以上就是a标签的基本用法了,还有一些就是不怎么常见了,如果碰到可以查MDN。

img 标签

  1. 定义:img标签是将图片嵌入文档的标签。
  2. 作用:发出GET请求,展示一张图片。
  3. 属性:
    • src:是必有的属性。是图片的来源地址,可以是网址,也可以是路径。
    • alt:alternative的意思。就是如果这个图因为意外原因不能加载,那么浏览器会显示alt中设置的备用文本。
    • height:图片的高度。如果只设置高度,那么宽度会自适应。
    • width:图片的宽度。如果只设置宽度,那么高度会自适应。
      前端要记住一点,千万不能让图片变形。
  4. 事件:
    • onload
    • onerror:可以使用这个事件,当src出问题的时候,可以将路径设置成其他备用路径。

table 标签

  1. table 标签的直系子标签只能有三个:thead、tbody、tfoot。
  2. 每个标签里都有tr(table row),表示一行
  3. thead的tr标签里有th(表头)
  4. tbody的tr标签里有th(在有两个表头的时候)和td(table data)
  5. 如果没有写tbody、thead的话,浏览器会把你写的tr都放在tbody里面;如果你只写了td,那浏览器会把你的td放在tr里,然后tr放在tbody里。
  6. thead、tbody、tfoot在写的时候可以不按顺序,浏览器会照常展示。
  7. 相关的样式
    • table-layout:
      • auto 自动根据内容计算行列宽度自行调整
      • fixed 是根据表格的宽度进行调整的
    • border-collapse:取值collapse,合并表格边框
    • border-spacing:表格之间的空隙

还有其他很多的标签,如果要详细地知道标签的整个内容,需要查询MDN,这是最详细最清楚的资料。

20
回复 编辑