HTML常用标签

HTML（HypeText Markup language）超文本标记语言

• 版本历史：
  HTML 的版本（W3C 组织制定规范）
  1.HTML 4.01
  2.XHTML
  3.HTML 5（与H5没关系，可以运行在微信上的网页就叫H5）
  4.HTML 5.1（已经发布）
  HTML specifications标准文档由W3C组织编写
• DOCTYPE
  用来选择文档类型
  html / head / body
  省略标签
  常见标签：a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg
  基本上，你知道标签对应单词的意思，就知道这个标签怎么用了（语义化）
  除了 div 和 span，其他标签都有默认样式
  html标签
  如果开始不是一个注释，开头标签可以省略
  如果结尾不是一个注释，那么结尾标签也可以省略
• head标签
  根据协议规定，在没有内容的情况下是可以省略的
• body标签
  只要第一个不是空格且没有注释的情况下也是可以不写的
  anchor 锚点
  
  表单
  输入
  点击
  

  主标题
  

  paragraph段落
  

  unordered list 没有顺序的列表
  
  ordered list 有顺序的列表
  

  description list 描述列表
  

  description term 描述词语
  

  定义
  不重要的字
  重要的字（有情感，逻辑）（物理状态）
  

  divide 划分（没有任何意义的标签class）
  横向的划分（没有任何意义的标签，需要搭配class）
  keyboard键盘
  

  除了 div 和 span，其他标签都有默认样式

  • a标签
    download属性：表示是用来下载
    跳转页面发起的是GET（获取）请求
  • form
    跳转页面一般发起的是POST（上传）请求
    如果form表单里面没有【提交按钮】就无法提交这个form

  type

  • button
    button如果没有type默认升级为subline
    button没有提交作用
  • checkbox
    
    

    image.png
    
    设置label for与input的ID进行关联，此时点击文字就能勾选
    老司机是这样写的用label将input包起来就可以达到和上面同样的效果
    
    

    image.png
  • radio 单选
    只能选择一个，前提是name要设定一致

  • -select 下拉列表

    
    
    

    image.png
    
    

    disable不可以选择，selected默认选择
    value是空 则没有值
    select中如果添加一个multiple则可以多选

    
    
    

    image.png
  • textarea 文本域
    一定要给一个name否则无法提交
    resize：none设置不可以被拉伸，用CSS设置宽高

  table 表格

  • th（table row）表示表头 td（table data）表示信息
    colgroup中col设置每一列宽高

    
    
    

    image.png
  • 的顺序不影响呈现出的内容
    CSS中加入border-collapse：collapse；可以使表格之间的空隙取消
    
    

    image.png

                      
                  
                      姓名学校年级班级
                  
              
              
                  
                      小红育红小学三年级七班
                  
              
              
                  
                      小明育红小学三年级八班
                  
              
          
  

  

  image.png