HTML常用标签

(一)a

1.属性:

  • href(hyper reference:超级链接)
  • target
  • download
  • rel=noopener

2.作用

  • 跳转到外部页面
  • 跳转内部锚点
  • 发邮件、打电话

3.取值:

  • href:

    • 网址:①http(s)://www.baidu.com ②//google.com
    • 路径:① /a/b/c以及a/b/c ②index.html
    • 伪协议:①javascript: 代码 ; ②mailto: 邮箱 ③tel: 手机号
    • id:href="# xxx" (跳转内部锚点)
  • target:

    • _blank:在新窗口打开
    • _top:在最上层的窗口打开
    • _parent:在上一层窗口打开
    • _self:默认设置,在当前窗口打开
    • xxx(自己命名):原理:新建一个页面,命名为xxx,此后再打开一个target=“xxx”的网页时,会覆盖当前的xxx网页。
    • xxx 举例:

(二)table

  • 相关标签:

          table row
        
    table data table head
  • 相关的样式:

       table-layout:
       auto:表格及单元格根据其包含的内容自动调整宽度
       fixed:表格和列的宽度通过表格的width值来设置
       border-collapse:
       collapse; 相邻单元格之间边缘合并
       border-spacing:单元格之间的空隙宽度
  • 正确结构:
  •     
    title 1 title 2
    sth 1 sth 2
    • 画表格的方法:先在纸上画出表格图形,再对照着敲代码。

    (三)img

    • 作用:发出GET请求,展示一张图片

      • 属性:

        • alt:若图片加载失败,则显示alt的内容
        • height:若只给定高度,则宽度自适应
        • width:若之给定宽度,则高度自适应
        • src(sourc):图片地址
      • 事件:

        • onload:js相关
        • onerror:js相关
      • 响应式:

        • max-width:100%,则在移动端图片也会根据比例缩放,充满屏幕
      • 为img 可替换元素
      • !! 永远不要让图片变形

    (四)form

    • 作用:发送GET或POST请求,然后刷新页面
    • 属性:

      • action:发送请求的路径
      • autocomplete(是否自动填充):默认为off,给出取值建议
      • method(请求类型):POST/GET,默认值为GET
      • target(打开方式):_blank / xxx
    • 基本格式:
    • 事件:onsubmit:
    • 区别:
      前者双标签,中间可以加其他内容,后者单标签

    (五)input:

    • 作用:让用户输入内容
    • 属性:

      • type:

        • text(默认):普通文本
        • button:按钮
        • email
        • file:提交文件

          • 上传一个文件
          • 上传多个文件
        • hidden:供计算机使用,使用js输入提交
        • number
        • password:不展示具体内容(以小圆点代替)
        • radio:单选

          • (实现方法:多个type="radio" 的input标签,使用相同的name)
        • checkbox:多选

          • (实现方法:多个type="checkbox"的input标签并列,使用相同的 选项名称跟在标签后边 )
          • 如:
        • search:查找
        • submit:提交
        • tel
        • color:颜色
      • name:
      • autofocus
      • checked
      • disabled
      • maxlength
      • pattern
      • value
      • placeholder
    • 事件:

      • onchange
      • onfocus
      • onblur
    • 验证器:HTML5的新功能
    • 注意事项:

      • 一般不监听input的click事件
      • form里的input要有name
      • form里要放一个type=submit才能触发submit事件

    (六)一些感触

    • HTML+CSS+JS是前端的三大支柱,从入门的第一天就重复不断的听到这句话,随着学习深入,越来越能体会到为什么说“HTML=结构,CSS=样式,JS=行为”
    • HTML提供了很好的web网页架构,但是其标签内置的属性风格单一,操作繁杂,而且与css共同使用易使得代码可读性变差,样式重叠,给后期修改造成很大负担,所以HTML尽量只用来进行网站结构的搭建,而对于外观的美化交由css和js来做。
    • HTML不是一项难以理解的技术,它的难度在于布局的合理有效性,和大量标签的理解度、记忆度和运用程度,我认为HTML相关的学习是一个经验积累的过程,在不难的技术里重复打磨进而精通,也可称匠人。
    • 越努力越幸运。