当前位置：首页 > news >正文

【前端:Html】--1.2.基础语法

news 2025/8/4 8:06:08

1.Html--颜色（color）

1.1.背景色

1.2. 文本颜色

1.3.边框颜色

2.Html--CSS

2.1.使用 CSS

2.2.内联css

2.3.内部css

2.4.外部 CSS

3.Html-- 图像（img）

3.1.HTML Images 语法

3.2.图像映射

3.3.图像映射和 JavaScript

4.Html--表格（table）

4.1.边框--border

4.2.填充-- padding

4.3.对齐-- text-align

5.Html--列表（ul）

5.1.无序列表--ul

5.2.有序列表--ol

5.3.自定义列表--dl

6.Html--块和内联元素（div）

6.1.块元素

6.2.内联元素

6.3.div元素

7.Html--类（class）

7.1.class属性

7.2.class语法

7.3.class多类

7.4.class的js调用

8.Html--id

8.1. ID 实现 HTML 书签

8.2.ID在js中的使用

9.Html--Iframes框架

9.1.Iframes语法

9.2.Iframes使用

10.Html--JavaScript 标签

10.1. script>标签

10.2.noscript> 标签

1.Html--颜色（color）

HTML 颜色由预定义的颜色名称指定，或由RGB、HEX、HSL、RGBA或HSLA值指定。

在 HTML 中，可以使用颜色名称指定颜色:

HTML 支持 140个标准颜色名称。

1.1.背景色

您可以设置 HTML 元素的背景色:

<!DOCTYPE html>
<html>
<body><h1 style="background-color:DodgerBlue;">Hello World</h1><p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p></body>
</html>

1.2. 文本颜色

<!DOCTYPE html>
<html>
<body><h3 style="color:Tomato;">Hello World</h3><p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></body>
</html>

1.3.边框颜色

<!DOCTYPE html>
<html>
<body><h1 style="border: 2px solid Tomato;">Hello World</h1><h1 style="border: 2px solid DodgerBlue;">Hello World</h1><h1 style="border: 2px solid Violet;">Hello World</h1></body>
</html>

颜色值：

在 HTML 中，还可以使用 RGB 值、十六进制值、HSL值、RGBA 值和 HSLA 值指定颜色。

以下三个 <div> 元素的背景色设置为 RGB、HEX 和 HSL 值:

属性	RGB（Red Green Blue）	HEX（十六进制）	HSL（Hue Saturation Lightness）
全称	红绿蓝	Hexadecimal（十六进制）	色相饱和度明度
格式	`rgb(R, G, B)` 或 `rgba(R, G, B, A)`	`#RRGGBB` 或 `#RGB`（简写）	`hsl(H, S%, L%)` 或 `hsla(H, S%, L%, A)`
取值范围	R/G/B: 0–255<br>A: 0–1（透明度）	RR/GG/BB: 00–FF（十六进制）	H: 0–360°（色相）<br>S/L: 0%–100%<br>A: 0–1
示例	`rgb(255, 99, 71)`<br>`rgba(255, 99, 71, 0.5)`	`#FF6347`<br>`#F64`（简写）	`hsl(9, 100%, 64%)`<br>`hsla(9, 100%, 64%, 0.5)`
对应颜色	番茄红（Tomato）	番茄红（Tomato）	番茄红（Tomato）
优点	- 直观，基于三原色<br>- 支持透明度（RGBA）	- 简洁，广泛用于CSS<br>- 易复制粘贴	- 更符合人类对颜色的感知<br>- 调节色调、明暗更方便
缺点	- 不直观调节亮度/饱和度	- 不支持透明度（HEX8 可扩展但兼容性有限）	- 格式稍长<br>- 旧浏览器支持稍差（但现代浏览器均支持）

<!DOCTYPE html>
<html>
<body><p>与颜色名称"Tomato"相同：</p><h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1><p>与颜色名称"Tomato"相同，但透明度为 50%：</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1><p>除了预定义的颜色名称之外，还可以使用 RGB、HEX、HSL 或什至使用 RGBA 或 HSLA 颜色值的透明颜色来指定颜色。</p></body>
</html>

2.Html--CSS

简单理解一下前端三件套的关系：

html：基础架构
css：外观
js：功能

特性	HTML	CSS	JavaScript
全称	HyperText Markup Language（超文本标记语言）	Cascading Style Sheets（层叠样式表）	JavaScript（编程语言）
核心作用	定义网页的结构与内容<br>（如标题、段落、图片、链接等）	控制网页的外观与样式<br>（如颜色、字体、布局、动画）	实现网页的交互与行为<br>（如点击响应、表单验证、动态加载数据）
类比	网页的骨架或建筑结构	网页的皮肤与装修	网页的神经系统与肌肉（让页面“活”起来）
文件扩展名	`.html`	`.css`	`.js`
如何引入	原生支持，无需额外引入	使用 `<link rel="stylesheet" href="style.css">`	使用 `<script src="script.js"></script>`

CSS 代表级联样式表。

CSS 可节省大量的工作。可以同时控制多个网页的布局。

2.1.使用 CSS

CSS 可以通过3种方式添加到 HTML 文档:

内联 - 通过在 HTML 元素中使用 style 属性
内部 - 使用 <head> 部分中的 <style> 元素
外部 - 通过使用 <link> 元素链接到外部 CSS 文件

添加 CSS 最常见的方法是将样式保存在外部 CSS 文件中。

2.2.内联css

内联 CSS 用于将唯一样式应用于单个HTML元素。

内联 CSS 使用 HTML 元素的 style 属性。

以下示例将 <h1> 元素的文本颜色设置为 blue， <p> 元素的文本颜色设置为 red:

<!DOCTYPE html>
<html>
<body><h1 style="color:blue;">一个蓝色标题</h1><p style="color:red;">一个红色的段落。</p></body>
</html>

2.3.内部css

内部 CSS用于定义单个 HTML 页面的样式。

内部 CSS是在 HTML 页面的<head>部分中<style>元素中定义的。

下面的示例将所有<h1>元素（在该页上）的文本颜色设置为 blue，将所有<p>元素的文本颜色设置为 red。此外，页面将以 powderblue 背景色显示:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body><h1>这是一个标题</h1>
<p>这是一个段落。</p></body>
</html>

2.4.外部 CSS

外部样式表用于定义许多 HTML 页面的样式。

要使用外部样式表，请在每个 HTML 页面的 <head> 部分中添加指向该样式表的链接:

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是一个标题</h1>
<p>这是一个段落。</p></body>
</html>

外部样式表可以在任何文本编辑器中编写。文件不能包含任何 HTML 代码，并且必须以.css扩展名保存。

结果应该是 "styles.css" 文件:

body {background-color: powderblue;
}
h1 {color: blue;
}
p {color: red;
}

提示: 使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！

3.Html-- 图像（img）

通过使用 HTML，可以在文档中显示图像。图像可以改善网页的设计和外观。

3.1.HTML Images 语法

在 HTML 中，图像由 <img> 标签定，用于在网页中嵌入图像。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

<img> 标签有两个必需属性:

src - 指定图像的路径
alt - 指定图像的备用文本

<!DOCTYPE html>
<html>
<body><h2>替代文字</h2><p>alt 属性应反映图像内容，以便看不到图像的用户了解图像包含的内容：</p><img src="img_chania.jpg" alt="花在公园" width="460" height="345"></body>
</html>

<!DOCTYPE html>
<html>
<body><p>如果浏览器找不到图像，它将显示替代文本：</p><img src="wrongname.gif" alt="花在公园"></body>
</html>

使用 HTML <img> 元素定义图像
使用 HTML src 属性定义图像的URL
使用 HTML alt 属性为其定义备用文本
使用 HTML width 和 height 属性或 CSS width 和 height 属性定义图像的大小
使用 CSS float 属性使图像向左或向右浮动

3.2.图像映射

使用 HTML 图像映射，您可以在图像上创建可单击的区域。

<map> 标记定义了一个图像映射。图像映射是具有可单击区域的图像。区域由一个或多个<area>标记定义。

尝试单击下图中的计算机、电话或咖啡杯:

Workplace

<!DOCTYPE html>
<html>
<body><h2>图像映射</h2>
<p>单击计算机、电话或咖啡以转到新页面并阅读有关该主题的更多信息：</p><img src="workplace.jpg" alt="工作场所" usemap="#workmap" width="400" height="379"><map name="workmap"><area shape="rect" coords="34,44,270,350" alt="计算机" href="computer.htm"><area shape="rect" coords="290,172,333,250" alt="电话" href="phone.htm"><area shape="circle" coords="337,300,44" alt="一杯咖啡" href="coffee.htm">
</map></body>
</html>

它是如何工作的?

图像映射背后的想法是，您应该能够根据您在图像中单击的位置执行不同的操作。

要创建图像映射，您需要一个图像和一些描述可单击区域的 HTML 代码。

添加 usemap 属性,<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
创建图像映射<map name="workmap">
定位区域

可单击区域是使用 <area> 元素定义的。

必须定义可单击区域的形状，并且可以选择以下值之一:

rect - 定义矩形区域
circle - 定义圆形区域
poly - 定义多边形区域
default - 定义整个区域

您还必须定义一些坐标，以便能够将可单击区域放置到图像上。

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

3.3.图像映射和 JavaScript

一个可点击的区域也可以触发一个 JavaScript 函数。

将 click 事件添加到 he <area> 元素以执行JavaScript函数:

在这里，我们使用 onclick 属性指定在单击区域时执行的 JavaScript 函数:

<!DOCTYPE html>
<html>
<body><h2>图像映射</h2><p>点击一杯咖啡来执行一个 JavaScript 函数：</p><img src="workplace.jpg" alt="工作场所" usemap="#workmap" width="400" height="379"><map name="workmap"><area shape="circle" coords="337,300,44" onclick="myFunction()">
</map><script>
function myFunction() {alert("你点击了咖啡杯！");
}
</script></body>
</html>

4.Html--表格（table）

HTML 表格允许 web 开发人员将数据排列成行和列。

简单的示例：

<!DOCTYPE html>
<html>
<body><h2>基本 HTML 表格</h2><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr>
</table></body>
</html>

注释: <td> 元素是表的数据容器。
它可以包含各种 HTML 元素；文本、图像、列表、其他表等。

4.1.边框--`border`

要向表中添加边框，请使用 CSS border 属性:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {border: 1px solid black;
}
</style>
</head>
<body><h2>带边框的表格</h2><p>使用 CSS border 属性为表格添加边框。</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr>
</table></body>
</html>

HTML 表格 - 边框折叠

设置表格边框是折叠为单一边框还是分开的，使用 CSS border-collapse 属性:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {border: 1px solid black;border-collapse: collapse;
}
</style>
</head>
<body><h2>折叠边框</h2>
<p>如果您希望边框折叠为一个边框，请添加 CSS border-collapse 属性。</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr>
</table></body>
</html>

4.2.填充-- padding

填充指定单元格内容与其边框之间的间距。

如果不指定填充，则将显示不带填充的表格单元格。要设置填充，请使用 CSS padding 属性:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {border: 1px solid black;border-collapse: collapse;
}
th, td {padding: 15px;
}
</style>
</head>
<body><h2>单元格填充</h2>
<p>单元格填充指定单元格内容与其边框之间的空间。</p><table style="width:100%"><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr>
</table><p><strong>提示</strong>：尝试将内边距更改为 5 像素。</p></body>
</html>

4.3.对齐-- text-align

默认情况下，表格标题为粗体且居中。

要左对齐表格标题，请使用 CSS text-align 属性:

th {text-align: left;
}

总结：

使用 HTML <table> 元素定义表
使用 HTML <tr> 元素定义表行
使用 HTML <td> 元素定义表数据
使用 HTML <th> 元素定义表格标题
使用 HTML <caption> 元素定义表格标题
使用 CSS border 属性定义边框
使用 CSS border-collapse 属性折叠单元格边框
使用 CSS padding 属性向单元格添加填充
使用 CSS text-align 属性对齐单元格文本
使用 CSS border-spacing 属性设置单元格之间的间距
使用 colspan 属性使单元格跨多个列
使用 rowspan 属性使单元格跨多行
使用 id 属性唯一地定义一个表

5.Html--列表（ul）

HTML 支持有序、无序和定义列表

5.1.无序列表--ul

无序列表以 <ul> 标签开始。每个列表项都以 <li> 标签开始。

无序列表是一个项目的列表，默认情况下，此列项目使用粗体圆点（典型的小黑圆圈）进行标记:

<!DOCTYPE html>
<html>
<body><h2>一个无序 HTML 列表</h2><ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>  </body>
</html>

5.2.有序列表--ol

有序列表以 <ol> 标签开始。每个列表项都以 <li> 标签开始。

列表项目使用数字进行标记。

<!DOCTYPE html>
<html>
<body><h2>一个有序 HTML 列表</h2><ol><li>咖啡</li><li>茶</li><li>牛奶</li>
</ol>  </body>
</html>

5.3.自定义列表--dl

HTML还支持描述列表。

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html>
<body><h2>一个描述列表</h2><dl><dt>咖啡</dt><dd>- 黑色热饮</dd><dt>牛奶</dt><dd>- 白色冷饮</dd>
</dl></body>
</html>

6.Html--块和内联元素（div）

6.1.块元素

编者注:"块级元素"译为 block level element，"内联元素"译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

<!DOCTYPE html>
<html>
<body><div style="border: 1px solid black">Hello World</div><p>DIV 元素是一个块元素，并且总是从一个新行开始并占据可用的整个宽度（尽可能地向左和向右延伸）。</p></body>
</html>

这个咋以解一下呢，就是一个整体块div

之前我们学习的基本都是块元素，比如段落,标题这些

6.2.内联元素

内联元素在显示时通常不会以新行开始。

一个 <span> 元素在段落内。

<!DOCTYPE html>
<html>
<body><p>这是段落内的内联跨度 <span style="border: 1px solid black">Hello World</span> 元素。</p><p>SPAN 元素是一个内联元素，不会在新行开始，只占用必要的宽度。</p></body>
</html>

6.3.div元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<!DOCTYPE html>
<html>
<body><div style="background-color:black;color:white;padding:20px;"><h2>伦敦</h2><p>伦敦是英格兰的首都。它是英国人口最多的城市， 拥有超过 1300 万居民的大都市区。</p><p>伦敦坐落在泰晤士河畔，两千年来一直是一个重要的定居点，其历史可以追溯到罗马人建立之时，罗马人将其命名为伦迪尼姆 (Londinium)。</p>
</div> </body>
</html>

7.Html--类（class）

HTML class 属性用于指定HTML元素的类。多个 HTML 元素可以共享同一个类。

7.1.class属性

class 属性通常用于指向样式表中的类名。JavaScript 也可以使用它来访问和操作具有特定类名的元素。

在下面的示例中，我们有三个 <div> 元素，它们的 class 属性值为 "city"。所有三个 <div> 元素的样式都将根据 head 部分定义的 .city 样式定义进行设置:

注意：在内部css定义class类的时候一定是‘.’+名字

<!DOCTYPE html>
<html>
<head>
<style>
.city {background-color: tomato;color: white;border: 2px solid black;margin: 20px;padding: 20px;
}
</style>
</head>
<body><div class="city">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
</div> <div class="city">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
</div><div class="city">
<h2>东京</h2>
<p>东京是日本的首都。</p>
</div></body>
</html>

7.2.class语法

在head里面的style里面定义类，创建一个类；写一个句点(.) 字符，后跟一个类名。然后，在大括号 {} 中定义CSS属性:

<!DOCTYPE html>
<html>
<head>
<style>
.city {background-color: tomato;color: white;padding: 10px;
}
</style>
</head>
<body><h2>class 属性</h2>
<p>使用 CSS 为类名为"city"的元素设置样式：</p><h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都。</p><h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p><h2 class="city">东京</h2>
<p>东京是日本的首都。</p></body>
</html>

7.3.class多类

HTML 元素可以属于多个类。

要定义多个类，请用空格分隔类名，例如 <div class="city main">。元素将根据指定的所有类设置样式。

在下面的示例中，第一个 <h2> 元素同时属于 city 类和 main 类，并将从这两个类中获取 CSS 样式:

<!DOCTYPE html>
<html>
<head>
<style>
.city {background-color: tomato;color: white;padding: 10px;
} .main {text-align: center;
}
</style>
</head>
<body><h2>多个类</h2>
<p>这里，所有三个 h2 元素都属于"city"类。 此外，London 也属于"main"类，将文本居中对齐。</p><h2 class="city main">伦敦</h2>
<h2 class="city">巴黎</h2>
<h2 class="city">东京</h2></body>
</html>

7.4.class的js调用

JavaScript 还可以使用类名为特定元素执行某些任务。

JavaScript 可以使 getElementsByClassName() 方法访问具有特定类名的元素:

<!DOCTYPE html>
<html>
<body><h2>JavaScript中class类属性的使用</h2>
<p>单击按钮隐藏类名为"city"的所有元素：</p><button onclick="myFunction()">隐藏元素</button><h2 class="city">伦敦</h2>
<p>伦敦是英格兰的首都。</p><h2 class="city">巴黎</h2>
<p>巴黎是法国的首都。</p><h2 class="city">东京</h2>
<p>东京是日本的首都。</p><script>
function myFunction() {var x = document.getElementsByClassName("city");for (var i = 0; i < x.length; i++) {x[i].style.display = "none";}
}
</script></body>
</html>

8.Html--id

HTML id 属性用于为HTML 元素指定唯一的 id。

一个 HTML文档中不能存在多个有相同 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><h2>id 属性</h2>
<p>使用 CSS 为 ID 为"myHeader"的元素设置样式：</p><h1 id="myHeader">我的标题</h1></body>
</html>

注释: id 名称对大小写敏感！

注释: id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

Class 与 ID 的差异

同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用:

8.1. ID 实现 HTML 书签

HTML 书签用于让读者跳转至网页的特定部分。

如果页面很长，那么书签可能很有用。

要使用书签，您必须首先创建它，然后为它添加链接。

然后，当单击链接时，页面将滚动到带有书签的位置。

<!DOCTYPE html>
<html>
<body><p><a href="#C4">跳转到第 4 章</a></p>
<p><a href="#C10">跳转到第 10 章</a></p><h2>第 1 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 2 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 3 章</h2>
<p>这一章解释了bla bla bla</p><h2 id="C4">第 4 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 5 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 6 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 7 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 8 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 9 章</h2>
<p>这一章解释了bla bla bla</p><h2 id="C10">第 10 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 11 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 12 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 13 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 14 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 15 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 16 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 17 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 18 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 19 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 20 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 21 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 22 章</h2>
<p>这一章解释了bla bla bla</p><h2>第 23 章</h2>
<p>这一章解释了bla bla bla</p></body>
</html>

8.2.ID在js中的使用

JavaScript 也可以使用 id 属性为特定元素执行某些任务。

JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素:

<!DOCTYPE html>
<html>
<body><h2>在 JavaScript 中使用 id 属性</h2>
<p>JavaScript 可以使用 getElementById() 方法访问具有指定 id 的元素：</p><h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">更改文字</button><script>
function displayResult() {document.getElementById("myHeader").innerHTML = "祝你今天过得愉快！";
}
</script></body>
</html>

9.Html--Iframes框架

Iframes--内嵌框架

9.1.Iframes语法

HTML 使用 <iframe> 定义一个内联的 iframe。

内联框架用于在当前HTML文档中嵌入另一个文档。

<iframe src="url" title="description">

提示: 最好为 <iframe> 设置 title 属性。屏幕阅读器使用它来读取 iframe 的内容。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定:

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe 示例"></iframe>

亲自试一试 »

或者可以用 style 的 height 和 width 属性:

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe 示例"></iframe>

亲自试一试 »

9.2.Iframes使用

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性:

<!DOCTYPE html>
<html>
<body><h2>Iframe - target 链接目标</h2><iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe 示例"></iframe><p><a href="https://www.w3schools.cn" target="iframe_a">w3schools.cn</a></p><p>当链接的 target 目标属性与 iframe 的名称匹配时，链接将在 iframe 中打开。</p></body>
</html>

10.Html--JavaScript 标签

JavaScript 使 HTML 页面更具动态性和交互性

<!DOCTYPE html>
<html>
<body><h1>我的第一个 JavaScript</h1><button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击我显示日期和时间。</button><p id="demo"></p></body>
</html>

10.1. script>标签

HTML <script> 标签用于定义客户端脚本（JavaScript）。

<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

如需选取 HTML 元素，JavaScript 最常用 document.getElementById() 方法。

这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!"

<!DOCTYPE html>
<html>
<body><h2>使用 JavaScript 更改文本</h2>
<p>这个例子写“Hello JavaScript!” 放入一个 id="demo" 的 HTML 元素中：</p><p id="demo"></p><script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> </body>
</html>

10.2.noscript> 标签

HTML <noscript> 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户:

<!DOCTYPE html>
<html>
<body><p id="demo"></p><script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script><noscript>抱歉，您的浏览器不支持 JavaScript！</noscript><p>不支持 JavaScript 的浏览器将显示写在 noscript 元素内的文本。</p></body>
</html>