HTML

  • 认识所有的 HTML 标签，并知道他们的作用，在实际运用的时候，可以参考文档，谨慎用之。
  • 高度熟练 8/2 原则中，那 20% 的高频率使用标签，理解他们的特性、属性等性质。
  • 兼容性知识、规范化、语义化、H5新标签、常见问题等。
  • 和 CSS / JS 的交集。

参考资料：

  • MDN API
  • HTML5 Cookbook
  • HTML HTMLX & CSS Bible
  • HTML Pocket Reference
  • HTML5 权威指南

基本概念和工具

  • HTML5 特性检测：Modernizr 检测技术
  • 语义元素：请在写下每一个标签的时候，都需要明白“语义Web”的含义。语义是为了让结构便于理解和处理，而不仅仅为了显示页面。
  • 页面正确性检测：Using the W3C’s Validator to validate your HTML Pages. W3C Validator
  • HTML标签的构成：标准、自闭合、虚元素
  • 标签的属性：标准属性、布尔属性、自定义属性
    • HTML5 全局属性：
  1. accesskey | class | contenteditable | contexmenu | did 
  2. draggable | drop zone | hidden | id | lang | spellcheck
  3. style | tabindex | title

鼓励网站作者在 html 元素上指定 lang 属性，来指出页面的语言。这样做会有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。

通过规约中的 lang 属性了解更多相关内容。

  • 元素分类：元数据元素 metadata element、流元素 flow element、短语元素 phrasing element
  • HTML实体：&lt &nbsp &trade &copy...
  • 块级元素和内联元素：
a acronym b do big br cite code dfn em font i 
img input kbd label q s samp select small span 
strike strong sub sup texture tt u var

Know the HTML Tags

  • see the standard head.html and standard HTML.html from Developer Library

Document Data

  • <base />
    • Property: href / target
    • Used to set a base URL.
      • It leaves out the Protocol / Hostname / Port for the rest of urls in the documents.
  • <body></body>
  • <!DOCTYPE>
    • Standard: <!DOCTYPE HTML> with HTML5 Doc, there are also HTML4.0 / XHTML1.0 doctype.
    • Tells the browser how to render a document.
      • Pay attention to IE’s Quirk Pattern. In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.
      • See the Quirks Mode on Wikipedia.
  • <html></html>
    • <html xmlns="http://www.w3.org/1999/xhtml"></html>
    • Property
      • manifest
        • It is concerned with Cache of this page. You should declare a manifest file to list the cached resources.
        • It is working with off-line Web App.
  • <head></head>
    • Contain the data of this HTML document.
  • <link />
    • Create links with external resources.
    • Property
      • href | hreflang
      • rel: alternate | author | help | icon | license | pingback | prefetch | stylesheet | shortcut
      • media: Media Query 技术：适用于 CSS 之中，针对不同条件的屏幕，适配不同的 CSS
      • type: MIME Type for the related sources.
      • sizes
  • <meta /> 这是一个富含元数据的重要标签！
    • metadata of this document
    • Property: name | content | charset
      • http-equiv
        • refresh // Refresh the webpage per x second.
        • default-style
        • content-type
    • 我们可以使用 Meta 标签来控制缓存策略。
<!-- IE 兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  • <noscript></noscript>
  • <script></script>
    • Property: type | src | defer | async | charset
  • <style></style>
    • Property
      • type = “text/css”
      • scoped // work for the parent & brother element
      • media
        • screen | all | tv | print … Ref => Official Document
        • There are lots of values for media property to set.

    • Define the CSS rules.
  • <title></title>
    • Title of this webpage.

FOUC 文档样式闪烁问题

<style type="text/css" media="all">@import "../fouc.css";</style>

引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

Text Elements

  • <a></a>
  • <abbr>
  • <b>
  • <br \>
  • <cite>
  • <code>
  • <del>
  • <dfn>: term define
  • <em>: pay attention / emphasis
  • <i>: foreign words / terms
  • <ins>: inserted content
  • <kbd>: represent the input of the user
  • <mark>
  • <q>: quote
  • <rp>: compare to work with ruby element
  • <rt>: compare to work with ruby element
  • <ruby>: ruby character
  • <s>: no longer right / accurate
  • <samp>: represent the output of computer
  • <small>: fine print
  • <span>
  • <strong>
  • <sub>: bottom sign
  • <sup>: top sign
  • <time>
  • <u>: underline
  • <var>: variable
  • <wbr>: nextline | work with word break

Content Group

  • <blockquote></blockquote>: Contains the content like using <cite></cite>
  • <dd></dd>: description of a define.
  • <div></div>: div has no special meanings. When you can’t find proper elements to represent your content, you can use div. Try to avoid using div.
  • <dl></dl>: description of a list. 标记定义了一个定义列表，定义列表中的条目是通过使用<dt> 标记(“definition title”，定义标题)和 <dd> 标记(“definition description”，定义描述)创建的。<dt> 给出了术语名，<dd>标记给出了术语的定义。
  • <dt></dt>: description of a term in a list
  • <figcaption></figcaption>: Combine with figure to use, representing the title of this figure.
  • <figure></figure>: Contain the flow-elements.
  • <hr />:Paragraph-level thematic break.
  • <li></li>
  • <ol></ol>
  • <p></p>
    • Represents Paragraph. A paragraph contains one or more sentences.
    • Notice: <p></p> has default styles.
  • `

``

  • <ul></ul>
  • <template></template>: for the Shadow DOM.

Content Division

  • <address></address>
  • <article></article>
  • <aside></aside>
  • <details></details>
  • <footer></footer>
  • <h1 ~ h6></h1>
  • <header></header>
  • <hgroup></hgroup>: Form a head groups together.
  • <nav></nav>
  • <section></section>: generate a section to contain groups of contents.
  • <summary></summary>: summary

Table

  • <caption>: Adding head-title for a table
  • <col>: Handling the table based on column.
  • <colgroup>: A group of col elements.
  • <table>
  • <tbody>
  • <td>
    • colspan
    • rowspan
    • Use colspan and rowspan to create not-regular tables.
  • <tfoot>
  • <th>
  • <thead>
  • <tr>

Form

  • <button>
    • submit | reset | button
    • when set to submit
      • form | formaction | formenctype | formmethod | formtarget | formnovalidate
  • <datalist>: work with option to offer suggestions for input elements.
  • <fieldset>: Group the form elements, and the second-level group under the form.
  • <legend></legend> tag can add tag for fieldset tag.
  • <form>: Biggest container of a form.
    • Property
      • method: POST / GET / CREATE / PUT / DELETE
      • action: url to post/get/…
      • enctype
        • it defines the data encode pattern to send to the server
          • application/x-www-form-urlencoded // default data encode
          • multipart/form-data // file uploader
          • text/plain
      • autocomplete
      • target
  • <input>
    • Actually it is a powerful element.
    • Please, when you want to use a form element, you must check the APIs, and read it carefully, and then implement it!
    • Property
      • autofocus
      • disabled
      • size | maxlength // define the size of an input element.
      • value | placeholder
      • list | datalist
      • readonly | disabled
      • required
      • type
        • text
          • dirname // direction of the words
          • list // suggestion list link
            • Use ID property of find
          • maxlength
          • pattern // regular expression pattern test
          • placeholder
          • readonly
          • size
          • value
        • password
        • submit | reset
        • number
        • range
        • checkbox
        • radio
        • email | tel | url
        • datetime | datetime-local | date | month | time | week
        • color
        • search
        • hidden
        • image
        • file // multipart/form-data
          • multiple
          • accept // MIME information for the uploading files.
  • <keygen>
  • <label>: The tag works as a description for a form component.
  • <legend>
  • <optgroup>: Offer the selectiong item for select tag.
  • <option>: Working with datalist / select.
  • <output>
  • <select>
  • <textarea>

Embed Content

  • <area>
  • <audio>
  • <canvas>
  • <embed>
  • <iframe>
    • 解决加载缓慢的第三方内容如图标和广告等的加载问题
    • Security sandbox，支持跨域的访问，通过 parent 对象得以实现
    • 存在问题：
      • 阻塞主页面的 onload 事件 / 即时内容为空也需要加载时间 / 没有语义
  • <img>
    • src | alt | title
    • height | width
    • usemap
    • ismap // whether this is a map to the connection
  • <map>: Match with area tag to create a response area which can be clicked and then directed to specific urls. Not works very well in Chrome and Safari.
  • <meter>
  • <object>
  • <param>
  • <progress>
  • <source>
  • <svg>
  • <track>
  • <video>: shadow DOM 的是一种展现

FAQ：

Q：如何开启 IE 兼容模式？

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">