[TOC]

meta viewport相关

HTML meta标签总结与属性使用介绍

<!DOCTYPE html><!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”><!--标准的 lang 属性写法-->
<meta charset=’utf-8′><!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/><!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/><!--页面描述-->
<meta name=”keywords” content=””/><!--页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/><!--网页作者-->
<meta name=”robots” content=”index,follow”/><!--搜索引擎抓取-->
<!--为移动设备添加 viewport-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>
<meta name=”apple-mobile-web-app-title” content=”标题”><!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/><!--添加到主屏后的标题（iOS 6 新增）-->
<!--是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/><!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”><!--启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”><!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /><!--不让百度转码-->
<!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name=”HandheldFriendly” content=”true”>
<meta name=”MobileOptimized” content=”320″><!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”><!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”><!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”><!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”><!--QQ强制全屏-->
<meta name=”browsermode” content=”application”><!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”><!--QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”><!--windows phone 点击无高光-->
<!--设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

Doctype 作用 标准模式与兼容模式区别

  • 声明位于位于 HTML 文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
  • 标准模式的排版和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

window 常用属性与方法

window 对象的常用属性

  • window.self 返回当前窗口的引用
  • window.parent 返回当前窗体的父窗体对象
  • window.top 返回当前窗体最顶层的父窗体的引用
  • window.outerwidt 返回当前窗口的外部宽
  • window.outerheight 返回当前窗口的外部高
  • window.innerwidth 返回当前窗口的可显示区域宽
  • window.innerheight 返回当前窗口的可显示区域高

提示：通过直接在 Chrome 控制台中输入 console.log(window) 可以查看到其所有的被当前浏览器支持的属性及值。

window 对象的常用方法

  • window.prompt() 弹出一个输入提示框，若用户点击了“取消”则返回 null
  • window.alert() 弹出一个警告框
  • window.confirm() 弹出一个确认框
  • window.close() 关闭当前浏览器窗口。 有些浏览器对此方法有限制。
  • window.open(uri, [name], [features]) 打开一个浏览器窗口，显示指定的网页。name 属性值可以是“_blank”、“_self”、“_parent”、“_top”、任意指定的一个窗口名。
  • window.blur( ) 指定当前窗口失去焦点
  • window.focus( ) 指定当前窗口获得焦点
  • window.showModalDialog(uri, [dataFromParent]) 打开一个“模态窗口”（打开的子窗口只要不关闭，其父窗口即无法获得焦点；且父子窗口间可以传递数据）

document 常用属性与方法

document 常见的属性

  • body 提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。
  • cookie 设置或返回与当前文档有关的所有 cookie。
  • domain 返回当前文档的域名。
  • lastModified 返回文档被最后修改的日期和时间。
  • referrer 返回载入当前文档的文档的 URL。
  • title 返回当前文档的标题。

  • URL 返回当前文档的 URL。

    document常见的方法

  • write()：动态向页面写入内容

  • createElement(Tag)：创建一个 HTML 标签对象
  • getElementById(ID)：获得指定 id 的对象
  • getElementsByName(Name)：获得之前 Name 的对象
  • body.appendChild(oTag)：向 HTML 中插入元素对象

BOM属性对象方法

什么是Bom? Bom是浏览器对象。有哪些常用的Bom属性呢？

(1)location对象

location.href— 返回或设置当前文档的URL
location.search — 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamd… 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash — 返回URL#后面的内容，如果没有#，返回空
location.host — 返回URL中的域名部分，例如www.dreamdu.com
location.hostname — 返回URL中的主域名部分，例如dreamdu.com
location.pathname — 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port — 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol — 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign — 设置当前文档的URL
location.replace() — 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() — 重载当前页面

(2)history对象

history.go() — 前进或后退指定的页面数 history.go(num);
history.back() — 后退一页
history.forward() — 前进一页

(3)Navigator对象

navigator.userAgent — 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled — 返回浏览器是否支持(启用)cookie

HTML全局属性(global attribute)

  • accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
  • class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
  • contenteditable: 指定元素内容是否可编辑
  • contextmenu: 自定义鼠标右键弹出菜单内容
  • data-*: 为元素增加自定义属性
  • dir: 设置元素文本方向
  • draggable: 设置元素是否可拖拽
  • dropzone: 设置元素拖放类型： copy, move, link
  • hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
  • id: 元素id，文档内唯一
  • lang: 元素内容的的语言
  • spellcheck: 是否启动拼写和语法检查
  • style: 行内css样式
  • tabindex: 设置元素可以获得焦点，通过tab可以导航
  • title: 元素相关的建议信息
  • translate: 元素和子孙节点内容是否需要本地化

    offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

    offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
    clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
    scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

attribute和property的区别

attribute是dom元素在文档中作为html标签拥有的属性；
property就是dom元素在js中作为对象拥有的属性。
对于html的标准属性来说，attribute和property是同步的，是会自动更新的
但是对于自定义的属性来说，他们是不同步的

e.getAttribute(propName)和e.propName区别和联系

  • e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
  • e.propName通常是在HTML文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如a标签生成HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用getAttribute进行访问
  • e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回””）
  • e.propName返回值可能是字符串、布尔值、对象、undefined等
  • 大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
  • 一些布尔属性的检测设置需要hasAttribute和removeAttribute来完成，或者设置对应property
  • 像link中href属性，转换成property的时候需要通过转换得到完整URL
  • 一些attribute和property不是一一对应如：form控件中对应的是defaultValue，修改或设置value property修改的是控件当前值，setAttribute修改value属性不会改变value property

target和currentTarget的区别

event.target 返回触发事件的元素
event.currentTarget 返回绑定事件的元素

document load 和 document DOMContentLoaded 两个事件的区别

他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件（DOM树构建完成），后触发load事件（页面加载完毕）

src 与 href 的区别

  • href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
  • src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
  • 在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。