-
Doctype
- SGML(Standard Generalized
Markup Language)
- DTD(Document
Type Definition)
-
渲染模式
- 标准模式
-
怪异模式
- IE盒模型缺陷
- 接近标准模式
-
常用标签
- div
- h1~h66, p, span, strong, em...
- ul, li, ol, dl, dt, dd
- form表单相关
- table表格相关
- img, canvas
- a
-
iframe
- 自适应
- 跨域
-
空元素
- 知名的空元素:
<br> <hr> <img> <input> <link> <meta>
- 鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
-
内联元素与块级元素
-
块级元素(block)特性
- 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
- a b span img input select strong
-
内联元素(inline)特性
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
- div ul ol li dl dt dd h1 h2 h3 h4…p
-
优雅降级和渐进增强
-
优雅降级(graceful degradation)
- 一开始就构建站点的完整功能,然后针对浏览器测试和修复)
- 针对那些最高级、最完善的浏览器来设计网站
- 将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段
- 测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本
-
渐进增强(progressive enhancement)
- 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能)
- 认为应关注于内容本身
-
cookies,sessionStorage 与
localStorage 的区别
- cookie在浏览器和服务器之间来回传递,其他不会。
- sessionStorage和localStorage有更丰富的接口。
- sessionStorage和localStorage有各自独立的存储空间。
-
meta
-
SEO优化
-
页面关键词
- <meta name="keywords" content="your tags" />
-
页面描述
- <meta name="description" content="150 words" />
-
搜索引擎索引方式
- <meta name="robots" content="index,follow" />
-
页面重定向和刷新
- <meta http-equiv="refresh" content="0;url=" />
-
其他
- <meta name="author" content="author name" /> <!-- 定义网页作者 -->
- <meta name="google" content="index,follow" />
- <meta name="googlebot" content="index,follow" />
- <meta name="verify" content="index,follow" />
-
移动设备
-
viewport
- width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
- height:高度(数值 / device-height)(范围从223 到10,000)
- initial-scale:初始的缩放比例 (范围从>0 到10)
- minimum-scale:允许用户缩放到的最小比例
- maximum-scale:允许用户缩放到的最大比例
- user-scalable:用户是否可以手动缩 (no,yes)
-
WebApp全屏模式
- <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
-
隐藏状态栏/设置状态栏颜色
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
添加到主屏后的标题
- <meta name="apple-mobile-web-app-title" content="标题">
-
忽略数字自动识别为电话号码
- <meta content="telephone=no" name="format-detection" />
-
忽略识别邮箱
- <meta content="email=no" name="format-detection" />
-
网页相关
-
申明编码
- <meta charset='utf-8' />
-
优先使用 IE 最新版本和 Chrome
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <!-- 关于X-UA-Compatible -->
- <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
- <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
- <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
-
浏览器内核控制
- <meta name="renderer" content="webkit|ie-comp|ie-stand">
-
禁止浏览器从本地计算机
的缓存中访问页面内容
- <meta http-equiv="Pragma" content="no-cache">
- Windows 8
-
站点适配:主要用于PC
-手机页的对应关系
- <meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
-
转码申明
- <meta http-equiv="Cache-Control" content="no-siteapp" />
-
条件注释
(针对IE)
-
下层显示
(downlevel revealed)
- <![if expression]> HTML <![endif]>
-
下层隐藏
(downlevel hidden)
忽略不支持条件注释
- <!--[if expression]> HTML <![endif]-->
- 运算符:!,lt,lte,gt,gte,(),&,|
-
HTML 事件属性
- Window 事件属性
- Form 事件
- Keyboard 事件
- Mouse 事件
- Media 事件
-
HTML 全局属性
-
accesskey
- 规定激活元素的快捷键
-
class
- 规定元素的一个或多个类名(引用样式表中的类)
-
dir
- 规定元素中内容的文本方向
-
id
- 规定元素的唯一 id
-
lang
- 规定元素内容的语言
-
style
- 规定元素的行内 CSS 样式
-
tabindex
- 规定元素的 tab 键次序
-
title
- 规定有关元素的额外信息
-
src与href的区别
-
src(source)
- 替换元素
- script,img
-
href(Hypertext Reference)
- 建立与外部资源的联系
- link,a,