三省吾身丶丶

三省吾身丶丶

马上订阅 三省吾身丶丶 RSS 更新: https://blog.guowenfh.com/atom.xml

HTML5常用标签分类

2017年4月21日 23:45

文章是很早之前的笔记,做了一些属性上的补充,现发布到博客中来

十年踪迹的博客:HTML5 元素选择流程图

HTML5基本介绍

HTML5 设计思想

  • 兼容已有内容
  • 避免不必要的复杂性
  • 解决现实的问题
  • 优雅降级
  • 尊重事实标准
  • 用户->开发者->浏览器厂商->标准制定者->理论完美

语法

  • 标签不区分大小写,推荐小写
  • 空标签可以不闭合,比如 input / meta
  • 属性不必引号,推荐双引号
  • 某些属性值可以省略,比如 required,readonly

HTML5常用标签分类

一. HTML文档标签

  1. <!DOCTYPE>: 定义文档类型.
  2. <html>: 定义HTML文档.
  3. <head>: 定义文档的头部.(头部内包含)
  4. <meta>: 定义元素可提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词(由于规范没有规定关于 mete 中各种属性的强制定义,所以不同的浏览器都都可以通过 mete 来声明一些规则)
    • 参考:移动端的头部标签
    • <meta charset ="UtF-8">
    • <meta name ="keywords" conten="关键词">
    • <meta name ="description" conten="页面介绍">
    • <meta name =" viewport" conten="initial-scale=1">
  5. <base>:定义页面上的所有链接规定默认地址或默认目标.
  6. <title>: 定义文档的标题.
  7. <link>: 定义文档与外部资源的关系.
  8. <style>:定义 HTML 文档样式信息.
  9. <body>: 定义文档的主体.(脚本在非必须情况时在主体内容最后)
  10. <script>: 定义客户端脚本,比如 JavaScript.
  11. <noscript>:定义在脚本未被执行时的替代内容.(文本)

二. 布局标签&语义化

  1. <div>:定义块级元素.
  2. <span>:定义行业元素.
  3. <header>5[^footnote]:定义区段或页面的页眉.(头部)
  4. <footer>:定义区段或页面的页脚.(足部)
  5. <section>:定义文档中的区段.
  6. <article>:定义文章.(在<article>中也可以进行内容划分)
  7. <aside>:定义页面内容之外的内容.
  8. <details>:定义元素的细节.
  9. <summary>:定义 <details> 元素可见的标题.
  10. <dialog>:定义对话框或窗口.
  11. <nav>:定义导航.
  12. <hgroup>:定义标题组

三. 表格标签

  1. <table>:定义表格.

    • border=1定义边框
  2. <caption>:定义标题.(规范:必须是 table 的第一个元素)

  3. <thead>:定义页眉.

  4. <tbody>:定义主体.

  5. <tfoot>:定义页脚.

  6. <th>:定义表头.

  7. <tr>:定义一行.

  8. <td>:定义单元格.

    • rowspan="2"跨行(竖直)
    • colspan="2"跨列(水平)
  9. <colgroup><col class="" span="2"></colgroup>:列组,批量的给列做处理

    四. 表单标签

  10. <form>:定义表单.(表单包含在form标签中)

    • novalidate:禁用原生的验证规则
    • 表单提交最好是绑定 submit 事件
  11. <input>:定义输入域.

    • name="username":原生表单提交用于传输的 key 例:key1=value1&key2=value2
    • placeholder="2-10位":描述文字
    • minlength="2"最少(记录一下,一般这些还是走 js)
    • maxlength="10":最多
    • required:是否必填
    • pattern="1\d{10}":正则表达式
    • type="text":input 类型如 search/number/email等都是输入
    • readeonly
    • disabled
  12. <textarea>:定义文本域.(多行)

  13. <label>:定义一个控制的标签.(input 元素的标注)

    • for="abc", abc 为一个 id=”abc”的标签
    • 如果直接把 input 整个包在 label 中也可以有 for 的效果
  14. <fieldset>:定义域.

  15. <legend>:定义域的标题.

  16. <select>:定义一个选择列表.

    • name="aaaa":原生表单提交用于传输的 key
    • size="3":只展示几个
    • multiple...

剩余内容已隐藏

查看完整文章以阅读更多