16、id
HTML id 属性用于 为HTML 元素指定唯一的 id。
一个 HTML文档中不能存在多个有相同 id 的元素。
使用 id 属性
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
下面的例子中我们有一个 <h1> 元素，它指向 id 名称 “myHeader”。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
注释：id 名称对大小写敏感！
注释：id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。
Class 与 ID 的差异
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用：
实例
<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* 设置类名为 "city" 的所有元素的样式 */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>
<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
在 JavaScript 中使用 id 属性
JavaScript 也可以使用 id 属性为特定元素执行某些任务。
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素：
实例
使用 id 属性通过 JavaScript 来处理文本：
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
17、iframe 用于在网页内显示网页。
添加 iframe 的语法
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。
实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 “0” 就可以移除边框：
实例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
实例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
18、JavaScript 使 HTML 页面更具动态性和交互性
HTML <script> 标签
HTML <script> 标签用于定义客户端脚本（JavaScript）。
<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。
这个 JavaScript 示例向 id=“demo” 的 HTML 元素内写入 “Hello JavaScript!”：
实例
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
JavaScript 能够更改内容：
document.getElementById("demo").innerHTML = "Hello JavaScript!";
JavaScript 能够更改样式：
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
JavaScript 能够更改属性：
document.getElementById("image").src = "picture.gif";
HTML <noscript> 标签
HTML <noscript> 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：
实例
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>
19、路径
HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到：
网页
图像
样式表
JavaScript
绝对文件路径
绝对文件路径是指向一个因特网文件的完整 URL：
实例
<img src="http://bpic.588ku.com/element_origin_min_pic/16/10/29/2ac8e99273bc079e40a8dc079ca11b1f.jpg" alt="flower">
相对路径
相对路径指向了相对于当前页面的文件。
在本例中，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：
实例
<img src="/images/picture.jpg" alt="flower">
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
