/ html

html

https://haobing.wang/frontend/
https://haobing.wang/css/
https://haobing.wang/javascript/

html 是内容的载体。另外,使用 CSS 营造视觉效果,使用 JavaScript 实现交互效果。

html 错误会不仅会影响 css 的效果。也会让 js 代码失去作用,所以必须使用 validator 对 html 进行检验!!!

可以使用 emmet 插件来解决:http://haobing.wang/emmet

HTML5 Boilerplate:

W3C 的 HTML5 验证工具:http://validator.w3.org

前端的瑞士军刀 Modernizr

https://modernizr.com

Modernizr 是一个用于检测浏览器功能的开源 JavaScript 库。它既能给老版本浏览器(一般指IE9之前的)打补丁,又能保证新浏览器渐进增强的用户体验。

从实际操作看, Modernizr 默认做的事很少,除了(在你选择的情况下)给不支持 HTML5 标签的浏览器 IE6、7、8 追加一点 HTML5 垫片脚本,使其可以识别 <aside><section> 等 HTML5 元素之外,它主要做的就是浏览器“功能检测”。因此,它知道浏览器是否支持各种 HTML5 和 CSS3 特性。

在页面头部正确加载后,会发现 <html> 上被追加了一堆不同的类名,不支持的特性会有 no- 前缀。例如:

<html class="js flexbox no-csstransforms3d" lang="zh">

例如这里可以知道,当前浏览器支持 js 和 flexbox。但是不支持 no-csstransforms3d。基于检测结果我们可以做两件事:

  1. 在 CSS 文件中逐个特性地修改样式。
  2. 按需加载额外的 CSS 或 JS 文件。

针对不支持特性的工作:在不支持 no-csstransforms3d 的浏览器中显示不支持特性的备注

.note {
  display: none;
}
.no-csstransforms3d .note {
  display: block;
}

即,支持 csstransforms3d 不会看到任何提示,只有不支持 csstransforms3d 才会看到备注信息。

按需加载示例,为不支持 CSS3 媒体查询的浏览器(如 IE6、7、8)加载 Respond.js

Modernizr.load({
  test: Modernizr.mq('only all'),
  nope: 'js/respond.min.js'
});

检测浏览器是否支持媒体查询:test: Modernizr.mq('only all')

如果不支持,则加载 respond.min.js 这个文件:nope: 'js/respond.min.js'

HTML5 时代

H5 存储的主要目标是:

  • 解决 4K 限制问题

  • 解决请求头常带存储信息问题

  • 解决关系型存储的问题

  • 解决跨浏览器的问题

  • LocalStorage

    • 存储形式:键值对
    • 存储容量:每个域名 5M
    • 过期:永不过期,手动删除
  • SessionStorage

    • 过期:关闭页面,或重新打开浏览器,或者重新打开新Tab,刷新不会过期
  • IndexedDB

  • Web SQL(已不再维护)

  • application cache

LocalStorage

localStorage.setItem('hello','world')
localStorage.getItem('hello')
localStorage.key(0)
localStorage.clear()

SessionStorage

sessionStorage.setItem('hello','world')
sessionStorage.getItem('hello')
sessionStorage.key(0)

IndexedDB

一种能在浏览器中持久地存储结构化数据的数据库,并且为 Web 应用提供了丰富的查询能力。

每个域名都可以创建多个 db,每个 db 可以创建多个表

  • 增删改
  • 事务
  • 游标
  • 索引

HTML5 存储

如何实现把图片存储在客户端?
如何实现跨域共享客户端缓存?
如何做到真正的离线访问web应用?
如何实现一个客户端数据库?

关于存储

  • 内存存储 cache
  • 磁盘存储 文件
  • 磁盘存储 数据库

2 开发技巧

2.1 汉字占位符

推荐使用汉字占位符 &#12288;,这个实体相当于一个汉字。

2.2 如何在一个 html 页面中嵌入 另一个 html 页面?

<iframe src="http://localhost:4000/archives/"
  width="400"
  height="300"
  frameborder="0"
  scrolling="no"
  marginheight="0"
  marginwidth="0">
  <p>Your browser does not support iframes.</p>
</iframe>

2.3 如何选择 lang

下载完成后,首先要修改 <html lang="en"><html lang="zh-Hans">

Chinese                  zh  
Chinese (Simplified)     zh-Hans  
Chinese (Traditional)    zh-Hant  

常用场景

使 input 不可修改

  • disabled,form 提交数据中没有该项。
  • readonly

重写 checkbox 样式

label.for 的值必须为 input.id,这样点击 label 对应的 input 就会 focus,click 事件也会被触发。

控制 checkbox

https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript

<input type="checkbox" onclick="return false;"/>