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. ......

HTML5 乱记的更多相关文章

  1. JS 乱记

    JS 中不存在块级作用域,也就是说在全局作用域下 if ,for 语句中用 var 声明的变量是全局变量. JS 中浮点数运算的值为近似值,比如:0.1 + 0.2 不等于 0.3 ,所以避免使用浮点 ...

  2. AngularJS 乱记

    1. 前端简单逻辑 <title data-ng-bind="{true:' ('+notice_count+') '}[notice_count > 0]+{true:glob ...

  3. Angularjs乱记

    http://www.cnblogs.com/floor/p/6652313.html 在指令中使用filter DI规则 AngularJS注入规则 数据绑定 http://www.cnblogs. ...

  4. 乱记结论之OI常用四大数列

    一.斐波那契数列 $f(0)=1,f(1)=1,f(i)=f(i-1)+f(i-2) \ \ \ \ (i>=2)$ 经典的解释是兔子生小孩,第0年一对兔子,一对兔子需要一年长大,后面每年都生小 ...

  5. C指针乱记

    //int a[3][4] = { { 66, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 } }; //读取二维数组任意元素hint int(*)a[4] ...

  6. HTML5随记

    1.浏览器加载HTML的过程是从上至下,因此引用的第三方js文件一定要放到自己定义的js文件的前面,否则引入的js文件将会在加载时失效. 2.html的全局属性包括:accesskey.content ...

  7. HNOI2019：My Dream

    反正这次的目标也不是进省队,目标就是做到最好吧-- 下面都是流水账~ Day -INF ~ Day -3 专题交流没什么好说的,模拟赛详见3.11-3.27省选前多校联考乱记和3.28-4.2CJ大毒 ...

  8. .NET下日志系统的搭建——log4net+kafka+elk

    .NET下日志系统的搭建--log4net+kafka+elk 前言     我们公司的程序日志之前都是采用log4net记录文件日志的方式(有关log4net的简单使用可以看我另一篇博客),但是随着 ...

  9. JSP 基于Oracle分页

    booklist.jsp <%@page import="books.accp.utils.Pager"%> <%@page import="books ...

随机推荐

  1. iOS生命周期

    1.application didFinishLaunchingWithOptions:当应用程序启动时执行,应用程序启动入口,只在应用程序启动时执行一次.若用户直接启动,lauchOptions内无 ...

  2. 【原创】setjmp longjump一些注意点及使用方法

    setjmp longjump一些注意点及使用方法 jmp_buf结构体的定义 #define _JBLEN  9typedef struct { int _jb[_JBLEN + 1]; } jmp ...

  3. Android应用正确使用扩展SD卡，特别是安卓4.4以后的版本

    Android 开发时如何正确获取使用扩展存储路径 在 2.x 版本中,Android设备都是单存储,第三方App写文件,必须申请 WRITE_EXTERNAL_STORAGE 权限: 在4.0之后, ...

  4. SQL2008-不同数据库之间的触发器

    create trigger tr_update_Table_1   on   rwqd     FOR  UPDATE   As   update dataabc.dbo.Table_1  set ...

  5. hdoj 2120 Ice_cream's world I【求成环数】

    Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  6. [iOS基础控件 - 6.7.1] 微博展示 代码

      Controller: // // ViewController.m // Weibo // // Created by hellovoidworld on 14/12/4. // Copyrig ...

  7. VirtualBox NAT方式与主机互相通信

    之前说过,桥接方式适合在统一的网络环境中使用(一样的网关和许可). 如果网络环境发生改变,那就难堪了 -- 这就是我遇到的问题,公司里每人的IP都是固定的. 解决办法,改为NAT网络地址转换模式. 但 ...

  8. VB操作CAD

    Dim xlapp As Excel.Application            Dim xlbook As Excel.Workbook            Dim sheet As Excel ...

  9. mac磁盘满解决方案

    背景 : 用mac电脑的人,估计都不习惯去关机吧.mac虽然可以不需要关闭电脑,但是久而久之由于应用软件占用产生缓存文件 or 产生虚拟内容交换文件 or 睡眠镜像文件 and so on. 会占用大 ...

  10. linux下eclipse的安装

    Eclipse的安装http://java.sun.com/javace/downloads/index.jsp下载:Jdk-6u17-linux-i586.binhttp://www.eclipse ...