HTML各种标签

列出了HTML的各种标签和使用方法，从音视频标签、H5新增语义化标签、块级元素等方面进行了分析和概述。

HTML标签

• 块级元素
  • div
  • h标签
    • 一般只用h1~h3
    • 搜索引擎
      • h1仅次于title，影响搜索引擎排名
  • p标签
    • 段与段之间有间距
  • hr标签
    • 生成分割线
  • 元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
• 其它
  • 字符实体
    • 空格  
    • < &lt;
    • > &gt;
    • “ &quot;
    • & &amp;
    • ‘ &apos;
  • br标签
    • 自结束标签
    • 换行,不另起段落
• 行内元素
  • img标签
    • 属性
      • src
        • 图片路径
          • 绝对路径
          • 相对路径，最好用相对路径
      • alt
        • 图片不能显示时，对图片的描述
      • title
        • 鼠标悬停时，显示文字内容
      • 置换元素
        • width/height，可设置宽高
    • 注意点
      • 一般除了自适应的页面，不建议设置宽高
      • 图片可能会失真
      • 只设置宽/高，另一个等比例缩放
  • span
    • 最常用
  • a标签
    • 属性
      • href
        • 跳转地址
        • mailto链接
          • mailto:[e-mail]
            • 收件人地址
          • cc=[e-mail]
            • 抄送地址
          • bcc=[e-mail]
            • 密件抄送地址
          • subject=subject text
            • e-mail 题目
          • body=body text
            • e-mail 内容
          • ?
            • 第一个拼接参数
          • &
            • 其他参数符号
      • title
        • 鼠标悬停显示
      • target
        • _self
          • 默认，当前页面跳转
        • _blank
          • 新页面跳转
        • 假链接
          • #
          • javascript:;
        • 锚点
          • #id
          • 还可跳到其它页面的指定位置
        • base标签
          • 统一指定，所有a的跳转方式
          • 写在head标签之间
          • 例如：<base target="_blank">
          • 如果有base，a也指定了target，则按a的跳转
    • 注意点
      • 必须有href
      • 图片也可被点击
      • 指定URL地址，前面要加 http:// 或 https://
      • 除了URL地址，还可指定本地地址
  • 其它
    • em
      • 强调，突出文章重点
    • strong
      • 强调，内容更为有用
    • b
      • 加粗
    • i
      • 斜体
    • u
      • 下划线
  • 元素：span、a、img、strong、b、i、em、sub、sup...
• H5新增语义化标签
  • 除语义外，与div相同
  • header
    • 头部标题，搜索表单或logo
  • nav
    • 页面导航的链接组
  • article
    • 文档
  • section
  • aside
    • 侧边栏，导航条，广告
  • footer
    • 脚注
  • address
    • 在文档中呈现联系信息
  • figure& figcaption
  • details
  • open属性
  • summary子元素
• 音视频标签
  • video
    • 属性
      • loop
        • 循环播放，多用于广告视频
      • src
        • 视频地址
      • muted
        • 静音
      • controls
        • 控制条
      • autoplay
        • 自动播放
      • width/height
        • 宽高
      • poster
        • 播放前的占位图片
    • 格式
      • 格式2：<video> <source src="" type=""></source> <source src="" type=""></source> </video>
      • 格式1:<video src=""></video>
    • 注意点
      • 支持H5标签，才能用video标签
      • 不支持H5，用JS的htmlmedia框架
  • audio
    • 格式
      • 与video差不多
    • 注意点
      • 与video标签，基本一样
      • 有3个属性不能用, height/width/poster