JavaScript 两项基本原则
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
<script type="text/javascript" src="scripts/displayCitations.js"></script>
</head>
<body>
<h1>What is the Document Object Model?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> defines
the <abbr title="Document Object Model">DOM</abbr> as:
</p>
<blockquote cite="http://www.w3.org/DOM/">
<p>
A platform- and language-neutral interface that will allow programs
and scripts to dynamically access and update the
content, structure and style of documents.
</p>
</blockquote>
<p>
It is an <abbr title="Application Programming Interface">API</abbr>
that can be used to navigate <abbr title="HyperText Markup Language">
HTML</abbr> and <abbr title="eXtensible Markup Language">XML
</abbr> documents.
</p>
</body>
</html>
// 创建列表
var dlist = document.createElement("dl");
for (key in defs) {
// 以上加入的列表当中并进行循环
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
- 渐进增强：你应该总是从最核心的部分，也就是从内容开始。应该根据内容使用标记实现良好的结构；然后再逐步加强这些内容。
- 平稳退化：不支持JavaScript也能访问基本内容。
内容：我们在Html文件中编辑如下的内容
<!DOCTYPE html> <!-- HTML5文档类型说明 -->
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Explaining the Document Object Model</title>
<!-- 引用自定义样式 -->
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Explaining the Document Object Model</title>
<!-- 引用自定义样式 -->
<link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" />
<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
<script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
<script type="text/javascript" src="scripts/displayCitations.js"></script>
</head>
<body>
<h1>What is the Document Object Model?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> defines
the <abbr title="Document Object Model">DOM</abbr> as:
</p>
<blockquote cite="http://www.w3.org/DOM/">
<p>
A platform- and language-neutral interface that will allow programs
and scripts to dynamically access and update the
content, structure and style of documents.
</p>
</blockquote>
<p>
It is an <abbr title="Application Programming Interface">API</abbr>
that can be used to navigate <abbr title="HyperText Markup Language">
HTML</abbr> and <abbr title="eXtensible Markup Language">XML
</abbr> documents.
</p>
</body>
</html>
<abbr>：文档类型说明
编写displayAbbreviations函数：把<abbr>标签中的title属性集中起来显示在一个页面。
function displayAbbreviations() {
//检查浏览器是否支持函数
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// 获取所有的缩略词
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false; //如果没有直接返回
var defs = new Array();
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title"); //缩略语的解释文本
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition; //缩略语
}
if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// 获取所有的缩略词
var abbreviations = document.getElementsByTagName("abbr");
if (abbreviations.length < 1) return false; //如果没有直接返回
var defs = new Array();
for (var i=0; i<abbreviations.length; i++) {
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title"); //缩略语的解释文本
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition; //缩略语
}
// 创建列表
var dlist = document.createElement("dl");
for (key in defs) {
var definition = defs[key];//创建标题
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
// 创建解释文字
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
// 创建解释文字
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
// 以上加入的列表当中并进行循环
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
//创建标题，内容为Abbreviations
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
var header = document.createElement("h2");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
显示“快捷键清单”
accesskey：属性可以把一个元素与键盘上的某个特定按键关联在一起。
Windows：快捷键的用法是同时按ALT键和特定键
Mac：同时按Ctrl和特定键
下面是accesskey的一个例子：
<a href="index.html" accesskey="1">Home</a>
