HTML5 乱记

  1. HTML5 的文档类型声明可以触发所有具备标准模式的浏览器的标准模式，包括那些对 HTML5 一无所知的浏览器，也就是说，可以在任何网页中都使用 HTML5 文档类型声明 <!DOCTYPE html> 如果没有文档类型声明，大多数浏览器将转换到混杂模式。

  2. 为文档添加字符编码 <meta charset="utf-8"> 。

  3. 指定网页中使用的自然语言 <html lang="en"> en 表示英语。

  4. 添加样式表 <link rel="stylesheet" href="xxx.css"> 。

  5. 添加 JS 文件 <script src="xxx.js"></script>>。

  6. 在 HTML 中，应保持良好的代码风格。

    1. 包含 <html>，<body> 和 <head> 标签。
    2. 标签全部小写。
    3. 属性值加引号
    4. 省略关闭空元素的斜杠。

  7. HTML5 验证器。

  8. 浏览器装机情况统计。

  9. 检测功能。

  10. 使用腻子脚本填补功能缺陷。

  11. HTML5 语义元素。

    1. <time>：用于在网页中标注一个有效的日期，时间。
    2. <header>：用来标注网页的页眉或标注内容的标题。
    3. <footer>：页脚，可以放一些网站版权信息，作品来源，法律限制及链接之类的信息，不能放太多链接，重要的或无关的内容，如广告，社交媒体，按钮等。
    4. <article>：包含所有相关的内容，包括标题，作者署名以及正文。
    5. <figure>：添加插图，与图片的概念不太一样，HTML5 规范建议我们把插图想像成一本书的附图，图题可以放在 <figure> 中的 <figcaption> 元素里。
    6. <aside>：添加附注，表示与它周围文本没有密切关系的内容，也可以用来盛放广告，相关内容的链接，和醒目引文。

  12. 浏览器（IE8 及更早版本除外）在遇到不认识的元素时，会把它们当成内联(inline)元素，大多数 HTML5 语义元素（<time> 除外）都是块级元素，所以要在老的浏览器中兼容它们，需要显式的设置 display：block。

  13. 对于 IE8 及更早版本的浏览器，它们会拒绝给无法识别的元素应用样式，好在可以通过 JS 创建新元素，就可以骗过 IE ，让它识别外来元素，document.createElement('header') 。简单的方法是直接使用别人做好的“垫片”脚本 <script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"><script> 当然，这应该只在使用旧版本 IE 的情况下执行，为了避免不必要的加载 JS 文件，可以将这段代码放在 IE 的条件注释中 <!--[if lt IE 9]> 脚本 <[!endif--]> 这样，其他浏览器（IE9 及更高版本）就会忽略这个脚本。（使用第 9 条的检查工具也可以解决这个问题，此工具内置了 HTML5 垫片脚本，因此会自动解决这些问题。）

  14. 如果你在 IE 中要花大量时间检测包含 JS 的页面，还应该在 <head> 区块中包含一条特殊的注释，叫做 web 标志。这行注释要放在指定字符编码的标签后面，<!-- saved from url=(0014)about:internet --> 这行注释告诉 IE 将页面视为从远程网站上下载来的。否则，IE 会切换到一种特殊的锁定模式，弹出一条安全警告，在你点了“允许阻止的内容”按钮之后才会执行 JS 代码。其它所有浏览器都会忽略这个 web 标志注释，对远程站点和本地文件使用相同的安全设置。

  15. 语义元素续。

    1. <nav>：用来包装一组链接。
    2. <section>：区块元素。如果有一个带有标题的内容块，而其它语义元素都不合适，那么选择 <section> 通常比选择 <div> 更好一些。
    3. <main>：用于标识网页的主要内容，不能把 <main> 嵌套在 <article> 或其他任何语义元素里面。这是因为 <main> 元素的使命是包裹页面中的主要内容，而非标识文档中某个重要的部分。换句话说，一个页面中只能有一个 <main> 元素。在复杂些的页面中，比如包含多个 <article> 元素时，<main> 就应该包含所有 <article>。

  16. 查看纲要：

    1. 在线的 HTML 纲要生成器。
    2. Chrome扩展。
    3. Opera扩展。

  17. 使用 <time> 元素标注日期和时间

    对于浏览网页的人，你可以随便采用任何格式来显示日期时间，只要你在 datetime 属性中提供计算机能够看懂的通用格式的日期时间就行了。另外，<time> 还有一个 pubdate 属性。如果当前内容（例如 <time> 元素所在的 <article>）对应一个发表时期，可以使用这个属性。

  18. 语义元素续。

    1. <output>：标注 JS 返回值。实际上，这个元素就是一个占位符，用于展示一小段计算后的信息。比如，通过某些计算后，JS 返回值显示在页面中。以前一般是利用一个 <span> 来用做占位符，而唯一的问题就是该元素不提供任何语义 <p>返回值：<span id="result"></span></p>。
    2. <mark>：用于标注一段文本，这段文本会突出显示。在需要引用他人的内容，而你想吸引人注意时，就可以使用 <mark> 元素。

  19. 关于其他未由 HTML5 规定的语义元素，诸如名字，地址，企业名录，产品说明，个人简介等等。可以由其他语义标准（微格式，微数据等等）来实现。

  20. 可以且只能给 <input> 或 <textarea> 元素添加一个 autofocus 属性，使得浏览器能够在用户未操作之前，自动把焦点给予正确的控件。

  21. 在 <form> 元素中添加 novalidate 属性可以禁用验证功能。

  22. 表单伪类。

    1. required（必填）和optional（选填）：根据字段是否使用了 required 属性来应用不同的样式。
    2. valid（有效）和 invalid（无效）：根据控件中是否包含错误来应用不同的样式。注意，除非访客提交表单，否则大多数浏览器并不会发现哪些值有效，哪些值无效。换句话说，访客不会实时看到表示输入无效的样式变化。
    3. in-range（在范围内）和 out-of-range（超出范围）：根据控件的 min 和 max 属性判断输入值是否超出范围，从而为控件应用样式。

  23. 在 <input> 元素中可以使用 pattern 属性使用正则表达式来进行验证（不推荐）。

  24. 也可以使用 setCustomvalidy() 方法自定义验证（推荐）。

  25. 下面是借特殊的表单输入属性，这不是用于验证的属性，而是用于在编辑表单时控制浏览器的行为。

    1. spellcheck：拼写检查。true，开启。false，关闭。
    2. autocomplete：是（on）否（off）提供最近输入的值进行选择。
    3. autocorrect 和 autocapitalize：这两个属性可以用来在移动设备（即 iPad 和 iPhone 中的 Safari）上控制自动纠错和自动大小写功能。
    4. multiple：很久以来，web 开发人员一直通过为 <select> 元素添加 multiple 属性，达到让用户能选择多个列表项的目的，现在也可以为某些类型的 <input> 元素添加这个属性，包括用于上传文件的 file 类型和 email 类型。在支持的浏览器中，用户可以选择多个文件一块上传，或者可以在一个输入框中贴上多个邮件地址。

  26. <input> 元素遇见不认识的 type 类型，会将其当作普通文本框来处理，但支持 HTML5 表单的浏览器会更聪明一些，比如会提供便于编辑的辅助，限制可能出现的错误和执行验证。下面是 HTML5 表单的新类型。

    1. email：电子邮件。
    2. url：网址。
    3. search：搜索框。
    4. tel：电话号码。
    5. number：常规数值，可使用 min 和 max 属性限制大小，step 属性控制数值间隔。
    6. range：滑动条形状的数值。与 number 属性一样。
    7. date 和 time：日期和时间。
    8. color：颜色。

  27. 表单新元素。

    1. <datalist>：可以让你在普通文本框中添加一个建议列表。
    2. <progress> 和 <meter>：进度条和计量条。

  28. 网页中的HTML编译器。

    1. contenteditable：把这个属性添加到任何元素中并且设置它的值为 true ，那么该元素的内容便可以编辑了。
    2. designMode：使用户编辑整个页面。最常用的形式是将这个属性添加到 <iframe> 元素中，从而使它充当了一个超级的编译框。

  29. <audio>：音频。

    1. src 属性指定文件。
    2. preload属性告诉浏览器如何加载一个媒体文件，当值为 auto 时，浏览器在后台下载整个文件，为 metadata 时，告诉浏览器先获取音频文件的数据块，从而足以确定一些基本信息（比如音频的总时长），为 none 时，告诉浏览器不必预先下载预先下载。
    3. autoplay 属性告诉浏览器在加载完音频文件后立即播放。
    4. loop 属性告诉浏览器在播放结束时，再从头开始播放。
    5. controls 属性显示播放控件。

  30. <video>：视频。与 <audio> 元素很像，也有 src ，controls ，preload ，autoplay ，loop 属性。<video> 元素还有另外三个属性。

    1. height 和 width 属性用于设置视频窗口的大小（像素），在设置这个尺寸时，应该注意按照视频的原始比例设置。而明确设置视频窗口大小，可以在视频未加载完成时（或者在视频加载失败时），不影响页面的布局。
    2. poster 属性用于设置替换视频的图片。浏览器会在三种情况下使用这个图片。视频第一帧为加载完毕。把 preload 属性设置为 none 。没有找到指定的视频文件

  31. 现在主流且最新版的浏览器都支持 mp3 与 mp4 格式，对于老式浏览器，我们有两种替代的后辈措施。

    1. 使用 <video> 和 <audio> 元素内置的格式后辈系统，要使用它，就要从 <video> 和 <audio> 元素中删除 src 属性，然后嵌套一组 <source> 元素。
    2. 添加 flash。

  32. -prefix-free库，使用它可以自动添加开发商前缀（CSS3）。

  33. 实现透明效果的方法有两种。

    1. 使用 rgba() 函数，它接受 4 个数值作为参数，前三个值分别代表红，绿，蓝分量，取值范围为 0 到 255 ，最后一个值是 alpha（不透明度）值，取值范围为 0 到 1 。
    2. opacity 属性，这个属性跟 alpha 值一样，取值范围为 0 到 1 ，0 表示完全透明，1 表示完全不透明。

  34. rem 设定的文字大小始终相对于 <html> 元素（而不是包含元素）的文字大小计算。而 em 的大小则是根据包含元素的文字大小计算。

  35. 要让网页能够在移动设备中不要自动执行缩放，那就得修改视口的设置 <meta content="initial-scale=1.0" name="viewport"> 。

  36. web 存储分为二种，分为对应两个 JS 对象。

    1. 本地存储，对应 localStorage 对象，用于长期保存网站的数据，并且站内任何页面都可访问该数据。
    2. 会话存储，对应 sessionStorage 对象，用于临时保存针对一个窗口的数据。

  37. 要把一段信息保存到本地存储或会话存储中，首先要为该信息想一个名字，这个名字叫做键，将来要通过它取回数据。

    1. 要保存数据，需要使用 setItem() 方法。localStorage.setItem("键", "值") 。
    2. 要读取数据，需要使用 getItem() 方法。 localStorage.getItem("键") 。
    3. 也可以使用属性名或索引方式进行读写。 localStorage.键 ，localStorage["键"] 。
    4. 删除数据项，需要调用 removeItem() 方法。localStorage.removeItem("键") 。
    5. 也可以调用 clear() 方法，清空网站在本地保存的会话数据。 sessionStorage.clear()。
    6. 要查找所有数据项，可以使用 key() 方法。
    7. 通过本地或会话存储保存数据时，该数据会自动被转换为文本字符串。
    8. 在本地或会话存储发生变化时，同一站点中其它页面的窗口就会触发 window.onstorage 事件。

  38. ......

posted @ 2015-11-11 15:50  微日月  阅读(498)  评论(0)  编辑  收藏  举报