前端三件套 html,CSS,JavaScript 中虽然 HTML 是学习难度最低的, 但也因此导致了很多人简单上手后就没有再深入学习了, 这篇文章除了介绍常用标签之外还会简单介绍一下 HTML 的规范.
指路
W3C 官方 HTML 文档: https://www.w3.org/TR/html52/, 感兴趣的可以阅读.
MDN: https://developer.mozilla.org/zh-CN/,HTML,CSS,JavaScript 的所有基础知识可以在这里找到, 不要再去 w3school 了.
基本标签和用法规范
div
可以说是使用最多的标签了, 代表一个没有任何意义的块级元素. 现在的前端开发把 HTML 语义化作为一个重要的开发规范, 语义化指的是用含有特定含义的标签来完成 HTML 页面结构, 比如说标题用 < h1></h1 > 标签, 而不是用 < div></div > 再用 CSS 将内容放大加粗, 所以要尽可能的少用没有语义的 div 之类的标签. HTML5 新增了许多的语义化标签, 使用这些标签可以让页面的结构更加清晰, 让代码更容易看懂, 也更便于 SEO. 所以不要全篇 div + span 了.
span
span 代表一个行内元素, 没有语义, 于 div 基本类似.
- h1~h6
- <h1 > 标题 < h1>
h 系列标签代表标题, h6 到 h1 字号逐渐变大
nav
块级元素, 语义是导航, 一般页面的导航栏使用 < nav></nav>
- ul li
- <ul>
- <li></li>
- <li></li>
- </ul>
ul 内只能放 li 标签, 代表无序列表, 比如说导航栏的选项卡一般可以用 li 来实现.
ol li
这一组标签于 ul li 类似, 但是表示的是有序列表.
- dl dt dd
- <dl>
- <dt > 定义 </dt>
- <dd > 描述 </dd>
- </dl>
包含一组术语定义及描述的列表.
HTML head body title
每个页面必会用到的四个标签, 页面基本结构如下
- <HTML>
- <head>
- <title></title>
- </head>
- <body></body>
- </HTML>
head 规定文档相关的配置信息 (元数据), 包括文档的标题, 引用的文档样式和脚本等. 不能放 div,span 之类的标签.
body 标签放页面的主体内容, 一般可以在网页上看到的所以内容都是放在 body 里面的.
HTML 是最外层的标签, 也是 HTML 的根节点.
title 内放标题, 可以在浏览器最上方的网页的选项卡中看到.
input
表示输入元素的控件, 使用 type 属性来表示不同的种类
- <input type="text">
- 最常用的输入框
- <input type="radio">
- 单选框
- <input type="checkbox">
- 复选框
- <input type="number">
- 输入数字
- <input type="password">
- 密码框
- <input type="email">
- 输入邮件
- <input type="file">
- 让用户选择文件
- <input type="button">
- 按钮, 但不推荐使用, 推荐使用
- < button>
- </button>
- 按钮
以上是常用的几种, 更多 input 的类型可以到 MDN 查看
- button
- <button></button> 标签中可以放文件, 图标以及图片,<input type="button"> 只能放文字
button 标签的使用最好规定一下 type 属性, 写成 < button type="button"></button > 这种形式.
因为在某些浏览器中 button 的默认 type 是 submit,<button type="submit"></button>, 在与 form 标签一起使用时可能会造成不想要的效果.
- iframe
- <iframe></iframe > 可以在当前页面嵌入一个其他的 HTML 页面, 但是会对网页性能有比较大的影响, 现在用到的比较少了.
- form
- <form action="https://www.baidu.com" method="post">
- <input type="text">
- <input type="password">
- </form>
form 标签表示表单, 一般搭配 < input > 来发送 http 请求
- table
- <table>
- <thead>
- <tr>
- <th>Header content 1</th>
- <th>Header content 2</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Body content 1</td>
- <td>Body content 2</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>Footer content 1</td>
- <td>Footer content 2</td>
- </tr>
- </tfoot>
- </table>
table 表示表格.
- <b>
- <em>
- <strong>
- <mark>
- <i>
- <big>
- <small>
- <b>
- </b>
- 规定粗体文字, 没有语义
- <i>
- </i>
- 表示斜体效果
- <em>
- </em>
- 表示强调的文本
- <strong>
- </strong>
- 表示重要文本
- <mark>
- </mark>
- 表示标注的 / 突出显示的文本
- <big>
- </big>
- 放大字号
- <small>
- </small>
- 缩小字号
- <sub>
- </sub>
- 定义下标文本
- <sup>
- </sup>
- 定义上标文本
- <del>
- <ins>
- <del>
- </del>
- 移除的内容
- <ins>
- </ins>
- 添加的内容
- <header>
- <footer>
- <header>
- </header>
- 页眉
- <footer>
- </footer>
- 页脚
- <main>
- <main>
- </main>
- 页面主要内容, 一个页面只能用一次
- <section>
- <section>
- </section>
- 具有相似主题的一组内容, 比如网站的主页可以分成介绍, 新闻条目, 联系信息等条块.
- <article>
- <article>
- </article>
- 表示文档, 页面, 应用或一个独立的容器. article 可以嵌套 article, 只要里面的 article 与外面的是部分与整体的关系.
- 20.
- <aside>
- <aside>
- </aside>
- 指定附注栏, 包括引述, 侧栏, 指向文章的一组链接, 广告, 友情链接, 相关产品列表等.
- <code>
- <code>
- </code>
- 定义代码模块.
- <figure>
- <figcaption>
- <figure>
- </figure>
- : 创建图 (默认有 40px 左右 margin).
- <figcaption>
- </figcaption>
- :figure 的标题, 必须是 figure 内嵌的第一个或者最后一个元素.
- <cite>
- <cite>
- </cite>
- 指明引用或者参考, 如图书的标题, 歌曲, 电影, 等的名称, 演唱会, 音乐会, 规范, 报纸, 或法律文件等.
只用于参考源本身, 而不是从中引述.
- 24.<blockquoto>
- <blockquoto></blockquoto> 引述文本, 默认新的一行显示.
- 25 <abbr>
- <abbr></abbr>: 解释缩写词. 使用 title 属性可提供全称
- <dfn>
- <dfn></dfn>: 定义术语元素, 与定义必须紧挨着, 可以在描述列表 dl 元素中使用.
- <pre>
- <pre></pre>: 预格式化文本. 保留文本固有的换行和空格.
- <address>
- <address></address>: 作者, 相关人士或组织的联系信息 (电子邮件地址, 指向联系信息页的链接).
总结
HTML5 新增了许多的语义化标签, 在日常开发中希望大家可以有意识的使用这些语义化标签, 而不是 div + span 到底.
来源: http://www.jianshu.com/p/f453b4061317