WEB前端知识点整理（HTML+CSS+JAVASCRTPT）

最新推荐文章于 2024-03-12 12:54:22 发布

起床悠悠

最新推荐文章于 2024-03-12 12:54:22 发布

阅读量3.7k

点赞数 50

分类专栏：前端 html JavaScript 文章标签：前端 html css javascript

本文链接：https://blog.csdn.net/gyeolhada/article/details/135392568

版权

前端同时被 3 个专栏收录

7 篇文章 2 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

1.HTML5、HTML和XHTML都是用于创建网页的标记语言，它们之间有一些关键的区别：

（1）语法和规范：
HTML5： HTML5是HTML标准的最新版本，引入了许多新的元素和API，以提供更丰富的功能和更好的语义化。HTML5语法相对宽松，对错误的容忍度更高，同时引入了新的语义元素如<header>、<nav>、<section>等。
HTML（HTML 4.01）： HTML 4.01是之前的HTML版本，语法相对较宽松，但没有HTML5那么丰富的语义元素和API。
XHTML： XHTML是HTML的严格版本，要求更为严格的语法，必须遵循 XML 规范。XHTML的目标是将HTML转变为XML，强调文档的结构和规范性。
（2）文档结构：
HTML5： HTML5引入了一些新的结构元素，如<article>、<section>、<nav>等，以更好地描述文档的结构。
HTML（HTML 4.01）：较早的HTML版本使用传统的结构元素，如<div>和<span>，并没有像HTML5那样引入一系列新的语义元素。
XHTML： XHTML更强调文档的结构和规范，要求使用小写字母，元素必须正确嵌套和闭合。
（3）语法要求：
HTML5： HTML5的语法较为宽松，浏览器在解析时有一定的容错性，对于不严格的代码也能够正常工作。
HTML（HTML 4.01）： HTML 4.01的语法相对宽松，但没有HTML5那么宽容。
XHTML： XHTML对语法要求更为严格，必须遵循 XML 规范，标签必须闭合，属性必须使用引号括起来，大小写也必须一致。
如：XHTML syntax: <br />；HTML syntax: <br>
（4）DTD：
DTD（Document Type Definition）是一种用于定义XML或HTML文档结构的规范。在HTML和XHTML中，使用不同的DTD来定义文档结构。以下是它们之间的主要区别：
HTML DTD：
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
<!DOCTYPE html>
总体而言，HTML5是HTML标准的最新版本，引入了更多功能和语义元素，而XHTML是对HTML更为严格的规范。在实际开发中，HTML5已经成为主流标准，而XHTML的应用逐渐减少。

2.HTML的PHASE ELEMENTS

<b>：用于表示文本中的粗体文本，但不强调语义。
<p>This is <b>bold</b> text.</p>
<em>：用于表示强调的文本，通常以斜体显示。
<p><em>This is emphasized</em> text.</p>
<i>：用于表示文本中的斜体文本，但不强调语义。
<p>This is <i>italic</i> text.</p>
<mark>：用于表示文本中的突出显示或标记。
<p>Search for <mark>important</mark> information.</p>
<small>：用于表示文本中的小号字体文本。
<p>This is <small>small text</small>.</p>
<strong>：用于表示强调的文本，通常以粗体显示。具有更强的语义重要性。
<p><strong>This is strong</strong> text.</p>
<sub>：用于表示文本中的下标。
<p>H<sub>2</sub>O</p>
<sup>：用于表示文本中的上标。
<p>x<sup>2</sup></p>

3.HTML的LISTS

（1）无序列表 (Unordered List):
无序列表用于表示一组项目，项目之间没有顺序关系。通常使用圆点、方块或其他符号作为项目标记。
使用<ul>元素来定义无序列表，而每个列表项使用<li>元素表示。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
（2）有序列表 (Ordered List):
有序列表用于表示一组项目，并给项目指定了顺序。项目通常用数字或字母标记。
使用<ol>元素来定义有序列表，每个列表项仍然使用<li>元素。
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
（3）描述列表 (Description List):
描述列表用于表示一组术语及其相应的描述。每个术语都由<dt>（描述术语）标记，而相应的描述则由<dd>（描述内容）标记。
使用<dl>元素来定义描述列表。
<dl>
<dt>Term 1</dt>
<dd>Description for Term 1</dd>
<dt>Term 2</dt>
<dd>Description for Term 2</dd>
</dl>

4.特殊符号

5.<div>和<a>

（1）<div> 元素：
<div> 是一个块级元素，用于在 HTML 文档中创建一个分割或者容器。它通常用于组织和布局页面的内容，可以包含其他块级或内联元素。
<div> 本身并没有特定的语义，它是一个通用的容器元素，主要用于样式和布局的目的。开发者可以使用 CSS 来样式化和定位 <div> 元素。
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
（2）<a> 元素：
<a> 是用于创建超链接（链接）的元素。它可以将文本、图像或其他元素转变为可点击的链接，通过指定 href 属性来定义链接的目标 URL。
当用户点击链接时，浏览器会导航到目标页面或执行指定的操作。除了 href，<a> 还可以包含其他属性，例如 target（指定链接如何在浏览器中打开）。
<a href="https://example.com">Visit Example.com</a>

6.table表格

<table> 是 HTML 中用于创建表格的元素。表格是一种用于组织和显示数据的结构，通常包含行和列，每个单元格中可以放置文本、图像或其他 HTML 元素。
基本的 <table> 结构通常包含以下元素：
<table>：定义整个表格。
<tr>（table row）：定义表格中的行。
<td>（table data）：定义表格中的数据单元格。
<th>（table header）：定义表格的表头单元格。通常放在表格的第一行或第一列，用于标识列或行的内容。浏览器通常会将 <th> 中的文本加粗显示，并将文本居中对齐。
<thead>、<tbody> 和 <tfoot>：分别定义表格的头部、主体和尾部。这些元素有助于更好地组织和样式化表格的不同部分。
例如：
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

7.使用 CSS 样式化表格：

（obsolete表示是在HTML中的）
（1）align (obsolete):
HTML Attribute: 用于设置整个表格在页面中的水平对齐方式。
CSS Property: 使用 CSS 的 width 和 margin 属性来实现表格在页面中的居中对齐。
（2）bgcolor (obsolete):
HTML Attribute: 用于设置整个表格的背景颜色。
CSS Property: 使用 CSS 的 background-color 属性来设置背景颜色。
（3）cellpadding (obsolete):
HTML Attribute: 用于设置单元格内容与单元格边框之间的空白。
CSS Property: 使用 CSS 的 padding 属性来设置单元格内边距。
（4）cellspacing (obsolete):
HTML Attribute: 用于设置单元格之间的空白，即单元格边框之间的距离。
CSS Property: 使用 CSS 的 border-spacing 或 border-collapse 属性来设置单元格之间的空白。
（5）border (obsolete):
HTML Attribute: 用于设置表格的边框宽度。
CSS Property: 使用 CSS 的 border 属性来设置表格边框。
（6）background-image:
CSS Property: 用于设置元素的背景图像。

8.CSS 伪类（pseudo-class）

用于选择文档中特定位置或类型的元素。
（1）:first-of-type：
目的：选择指定类型的第一个元素。
示例：选择页面中每个段落的第一个 <span> 元素。
p span:first-of-type {
color: red;
}
（2）:first-child：
目的：选择某个元素的第一个子元素。这是 CSS2 中的选择器。
示例：选择页面中每个段落的第一个子元素。
p:first-child {
font-weight: bold;
}
（3）:last-of-type：
目的：选择指定类型的最后一个元素。
示例：选择页面中每个段落的最后一个 <span> 元素。
p span:last-of-type {
text-decoration: underline;
}
（4）:last-child：
目的：选择某个元素的最后一个子元素。
示例：选择页面中每个段落的最后一个子元素。
p:last-child {
color: blue;
}
（5）:nth-of-type(n)：
目的：选择指定类型的第 n 个元素，其中 n 是一个整数、odd（奇数）或 even（偶数）。
示例：选择每个段落中的第三个 <em> 元素。
p em:nth-of-type(3) {
font-style: italic;
}
示例：选择每个段落中的奇数位置的 <strong> 元素。
p strong:nth-of-type(odd) {
font-weight: 700;
}
示例：选择每个段落中的偶数位置的 <strong> 元素。
p strong:nth-of-type(even) {
font-weight: 400;
}

9.层叠样式表（Cascading Style Sheets，CSS）的四种不同类型：

（1）Inline Styles（内联样式）：
意义：内联样式是直接在HTML元素中使用style属性指定的样式。这样的样式直接应用于单个元素，优先级较高，会覆盖其他样式。
style="Declaration Property:Declaration Value;"
示例：
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
（2）Embedded Styles（嵌入样式）：
意义：嵌入样式是通过在HTML文档的头部使用<style>标签定义的样式表，它适用于整个文档中的多个元素。
当在嵌入样式表中使用 body 选择器时，可以设置适用于整个页面的全局样式规则。这些规则将影响页面中的所有元素，除非它们被更具体的选择器所覆盖。在这个例子中，h1 和 h2 的样式规则将覆盖全局规则对应属性的值。
<head>
<style>
body { background-color: #E6E6FA;
color: #191970;}
h1 { background-color: #191970;
color: #E6E6FA;}
h2 { background-color: #AEAED4;
color: #191970;}
</style>
</head>
<body>
<h1>Title1</h1>
<h2>Title2</h2>
<p>paragraph</p>
</body>
（3）External Styles（外部样式）：
意义：外部样式是将样式定义在一个独立的外部CSS文件中，然后通过链接（<link>元素）引入到HTML文档中。这样的样式可以在多个文档中共享。

p {
color: red;
font-size: 20px;
}

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
（4）Imported Styles（导入样式）：
意义：导入样式是通过@import规则将一个外部CSS文件导入到另一个CSS文件中。这使得样式表的结构更加模块化和可维护。
/* imported-styles.css */
p {
text-decoration: underline;
}
/* main-styles.css */
@import url('imported-styles.css');
在CSS中，这些不同类型的样式表遵循一定的优先级规则，称为层叠规则。
内联样式优先级最高，其次是嵌入样式、外部样式和导入样式。

9.CSS 中的样式规则（rule）由两个主要部分组成：选择器（Selector）和声明块（Declaration）。

Selector{Declaration Property:Declaration Value}
（1）Selector（选择器）：
选择器指定了哪些 HTML 元素将应用这条样式规则。它可以是元素的名称、类、ID，也可以是元素的组合，以及其他选择器类型。
p {
color: blue;
font-size: 16px;
}
在这个例子中，p 就是选择器，表示这个样式规则将应用于所有段落元素。
（2）Declaration（声明块）：
声明块包含在大括号 {} 内，里面包含了一个或多个样式声明。每个声明都由一个属性（property）和一个值（value）组成，用冒号 : 分隔。多个声明之间使用分号 ; 分隔。
例如，下面是一条规则的声明块：
p {
color: blue; /* 声明1：颜色属性 */
font-size: 16px; /* 声明2：字体大小属性 */
}

10.CSS properties for configuring text:

CSS 属性，用于配置文本的样式和外观。
（1）font-weight（字重）：
作用：用于配置文本的粗细或加粗程度。
值：可以使用数字值（如 400、700）表示字重，也可以使用关键词（如 normal、bold）。
p {
font-weight: bold;
}
（2）font-style（字体样式）：
作用：用于配置文本的斜体样式。
值：可以使用关键词（如 normal、italic）。
em {
font-style: italic;
}
（3）font-size（字体大小）：
作用：用于配置文本的大小。
值：可以使用像素值、百分比、相对长度单位（如 em、rem）等。
h1 {
font-size: 24px;
}
（4）font-family（字体族）：
作用：用于配置文本的字体族，即字体的类型。
值：可以指定一个具体的字体名称，也可以使用通用字体族，如 serif、sans-serif。
body {
font-family: 'Helvetica', Arial, sans-serif;
}

11.CSS SELECTORS

CSS 中不同类型的选择器：
（1）HTML Element Selector（HTML 元素选择器）：
描述： HTML 元素选择器是用于选择特定类型的 HTML 元素的选择器。它以 HTML 元素的名称作为选择器，将样式规则应用于相应类型的所有元素。
示例：以下规则将应用于所有 <p> 元素。
p {
color: blue;
font-size: 16px;
}
（2）Class Selector（类选择器）：
描述：类选择器用于选择具有相同类名的元素。类选择器以点 . 开头，后面跟着类名。一个页面上可以有多个元素共享同一个类，并且一个元素可以拥有多个类。
示例：以下规则将应用于所有具有类名为 "highlight" 的元素。
.highlight {
background-color: yellow;
color: black;
}
[1]class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。
[2]class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点"."号显示。
[3]类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
[4]也可以指定特定的 HTML 元素使用 class。
（3）ID Selector（ID 选择器）：
描述： ID 选择器用于选择具有唯一标识符（ID）的单个元素。ID 在整个页面中必须是唯一的，因此一个样式规则将只应用于页面中的一个元素。
示例：以下规则将应用于具有 ID 为 "header" 的元素。
#header {
font-size: 24px;
text-align: center;
}
[1]id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
[2]HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 # 来定义。
[3]id属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。
[4]id属性只能在每个 HTML 文档中出现一次。

12.CSS 中的上下文选择器（Contextual Selector）

CSS 中的上下文选择器（Contextual Selector）是一种通过元素在文档中的嵌套结构来选择元素的方法。上下文选择器使用空格分隔不同级别的选择器，表示只选择满足某个条件并且处于特定上下文中的元素。以下是几种常见的上下文选择器：
（1）Descendant Selector（后代选择器）：
描述：选择某个元素的所有后代元素，无论它们有多深嵌套。
语法：使用空格分隔两个选择器。
示例：选择所有 <li> 元素，无论它们位于文档的哪个层次结构。
ul li {
list-style-type: square;
}
（2）Child Selector（子元素选择器）：>
描述：选择某个元素的直接子元素，不包括孙子元素及更深层次的后代。
语法：使用 > 符号分隔两个选择器。
示例：选择所有 <li> 元素，但只在它们是某个 <ul> 元素的直接子元素时应用样式。
ul > li {
font-weight: bold;
}
（3）Adjacent Sibling Selector（相邻兄弟选择器）：+
描述：选择某个元素的相邻兄弟元素，即它们具有相同的父元素并且在父元素中是相邻的。
语法：使用 + 符号分隔两个选择器。
示例：选择所有 <h2> 元素后面紧跟的相邻的 <p> 元素。
h2 + p {
color: red;
}
（4）General Sibling Selector（通用兄弟选择器）：~
描述：选择某个元素之后的所有兄弟元素，它们具有相同的父元素。
语法：使用 ~ 符号分隔两个选择器。
示例：选择所有 <h2> 元素后面的所有相邻兄弟 <p> 元素。
h2 ~ p {
font-style: italic;
}

13.SPAN元素

<span> 的主要目的是用于配置一小部分文本，使其具有特殊的格式或样式。这个元素通常是内联元素，意味着它不会在文本中另起一行，而是与其他文本元素一起在同一行显示。它可以包裹文本、图像或其他内联元素，使得可以对这部分内容进行定制化样式或添加脚本。
<span> 元素是内联元素，它不会在其上方或下方创建额外的空白空间。这意味着当你在文本中使用 <span> 时，它不会导致换行，也不会在其周围创建额外的空间。它会像普通文本一样与其他元素并排显示，只是可能具有通过样式或其他属性配置的特殊外观或行为。
例子：
Embedded CSS:
<style>
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
}
</style>
HTML:
<p>Your needs are important to us at <span class=“companyname">Acme Web Design</span>.
We will work with you to build your Web site.</p>

14.CSS中的BLOCK/INLINE元素：

在CSS中，block 和 inline 是两种常见的元素显示类型，它们在边框的表现上有一些区别。
（1）Block Elements（块级元素）：
特点：块级元素通常会在页面中单独占据一行，从而在其前后创建新的行。它们会尽可能地占满其父容器的宽度。
示例：常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li> 等。
边框表现：对于块级元素，默认情况下，边框会包围整个元素，从左边到右边，上边到下边。
（3）Inline Elements（内联元素）：
特点：内联元素不会在页面中创建新的行，它们会在同一行内显示，并尽可能占据其内容所需的空间。
示例：常见的内联元素包括 <span>、<a>、<strong>、<em>、<img> 等。
边框表现：对于内联元素，默认情况下，边框会包围元素的内容，而不会占据整个水平空间。上下边界会被边框包裹，但左右边界不会。
<style>
/* 块级元素样式 */
div {
border: 2px solid #333;
padding: 10px;
margin: 10px;
}
/* 内联元素样式 */
span {
border: 2px solid #666;
padding: 5px;
margin: 5px;
}
</style>
<div>This is a block-level element.</div>
<span>This is an inline element.</span>
在这个例子中，<div> 是一个块级元素，它的边框将占据整个父容器的宽度。而 <span> 是一个内联元素，其边框将包围其内容而不会占据整个水平空间。
（4）display修改：
需要注意的是，可以通过样式调整元素的 display 属性来改变元素的显示类型，例如，将块级元素变为内联元素或将内联元素变为块级元素。这可以通过设置 display: block; 或 display: inline; 等来实现。

15.CSS Border property

CSS 中的 border 属性用于设置元素的边框样式、宽度和颜色。border 属性是一个复合属性，可以通过以下子属性进行详细设置：
[1]border-width：
设置边框的宽度。
可以使用像素值、百分比、em 等作为单位。
示例：border-width: 2px;
[2]border-style：
设置边框的样式，如实线、虚线、点线等。
可以取值为 solid、dashed、dotted 等。
示例：border-style: solid;
[3]border-color：
设置边框的颜色。
可以使用颜色名称、十六进制值、RGB 值等表示。
示例：border-color: #333;
/* 作为复合属性设置 */
border: 2px solid #333;
/* 分开设置子属性 */
border-width: 2px;
border-style: solid;
border-color: #333;
[4]还有一些更特定的属性，用于设置边框的四个方向（上、右、下、左）：
border-top、border-right、border-bottom、border-left：
分别用于设置元素的上、右、下、左边框的样式、宽度和颜色。

16.The Box Model

CSS 中的盒子模型（Box Model），这是一个用于描述页面元素在布局时所占空间的概念。以下是对每个部分的解释：
（1）Content（内容）：
描述：指的是元素内部包含的文本、图像或其他页面元素的实际内容。内容的大小由元素的宽度（width）和高度（height）属性决定。
示例：对于一个 <div> 元素，其内容就是 <div> 标签包裹的文本或其他元素。
（2）Padding（内边距）：
描述：内边距是指元素内容区域与元素边框之间的空间。它是元素内容与边框之间的距离，可以用来增加元素内部内容与边框之间的间隔。
padding-bottom
padding-left
padding-right
padding-top
示例：如果一个 <div> 元素设置了 padding: 10px;，那么它的内容就会被包裹在距离边框 10 像素的内边距内。
[1]一个值：
如果只提供一个值，它会应用于所有四个方向的内边距。
示例：padding: 15px; 表示所有方向的内边距都为 15 像素。
[2]两个值：
第一个值配置上下内边距，第二个值配置左右内边距。
示例：padding: 10px 20px; 表示上下内边距为 10 像素，左右内边距为 20 像素。
[3]三个值：
第一个值配置上内边距，第二个值配置左右内边距，第三个值配置下内边距。
示例：padding: 10px 20px 15px; 表示上内边距为 10 像素，左右内边距为 20 像素，下内边距为 15 像素。
[4]四个值：
分别按照顺时针顺序配置上、右、下、左的内边距。
示例：padding: 10px 20px 15px 25px; 表示上内边距为 10 像素，右内边距为 20 像素，下内边距为 15 像素，左内边距为 25 像素。
（3）Border（边框）：
描述：边框是围绕在元素内容和内边距外部的边界线。它定义了元素的可见边界，并可以有不同的样式、宽度和颜色。
示例：通过设置 border: 2px solid #333;，一个元素将有一个2像素宽的实线边框，颜色为深灰色。
（4）Margin（外边距）：
描述：外边距是元素边框之外的空间，它定义了元素与相邻元素之间的距离。外边距可以用来控制元素之间的间隔。
示例：如果一个 <div> 元素设置了 margin: 15px;，那么它的外边距将在其边框外围增加 15 像素的间隔，用于与其他元素之间的空隙。

17.Types of Graphics

（1）GIF (Graphics Interchange Format)：
特点：
支持透明度，允许图像中的某些部分是透明的。
支持简单的动画，可以创建循环播放的图像序列。
无损压缩，但对颜色深度有一定限制（最多支持256种颜色）。
（2）JPG or JPEG (Joint Photographic Experts Group)：
特点：
适用于照片和真实场景图像，支持高颜色深度。
有损压缩，但可以调整压缩比例，平衡图像质量和文件大小。
不支持透明度，不适用于包含透明背景的图像。
JPG的渐进式JPEG–类似于交错显示
（3）PNG (Portable Network Graphics)：
特点：
支持透明度，可以创建包含半透明效果的图像。
无损压缩，保持图像质量，适用于图标和图形。
支持更高的颜色深度，不会导致颜色丢失。
选择使用哪种图形格式取决于图像的特性和在网页上的使用场景。例如，对于需要透明背景的图标，PNG 可能是更好的选择。对于摄影或照片，JPG 可能更适合，而 GIF 则适用于需要动画或简单图形的情况。

18.HTML Image Element

（1）src：
描述：指定图像文件的 URL（Uniform Resource Locator）。
示例： <img src="example.jpg" alt="Example Image">
（2）alt：
描述：提供图像的替代文本，用于在图像无法显示时显示。也对辅助技术（如屏幕阅读器）提供了有用的信息。
示例： <img src="example.jpg" alt="Example Image">
（3）width：
描述：设置图像的宽度，可以使用像素值或百分比。
示例： <img src="example.jpg" alt="Example Image" width="300">
（4）height：
描述：设置图像的高度，可以使用像素值或百分比。
示例： <img src="example.jpg" alt="Example Image" height="200">
（5）title：
描述：提供关于图像的额外信息，通常在用户将鼠标悬停在图像上时显示。
示例： <img src="example.jpg" alt="Example Image" title="This is an example image">
（6）loading：
描述：指定图像的加载行为，可以设置为 "lazy"（延迟加载）或 "eager"（立即加载）。
示例： <img src="example.jpg" alt="Example Image" loading="lazy">
（7）srcset：
描述：提供一组可选的图像资源和其对应的显示宽度，浏览器会根据显示设备的特性和屏幕大小选择适当的图像。
示例： <img srcset="example-small.jpg 320w, example-medium.jpg 640w, example-large.jpg 1024w" sizes="(max-width: 320px) 280px, (max-width: 640px) 640px, 1024px" src="example.jpg" alt="Example Image">
（8）decoding：
描述：指定图像的解码行为，可以设置为 "async"（异步解码）或 "sync"（同步解码）。
示例： <img src="example.jpg" alt="Example Image" decoding="async">
（9）img link图像链接：
[1]描述：指的是在网页上创建一个图像，使其成为一个可点击的超链接，当用户点击图像时会导航到其他页面或执行其他操作。
实现方式：使用 HTML 锚元素 <a> 包含 HTML 图像元素 <img>。例如：
<a href="destination.html">
<img src="image.jpg" alt="Clickable Image">
</a>
[2]浏览器会自动为图像链接添加边框：
描述：指的是在一些浏览器中，默认情况下，将图像超链接周围添加一个边框，以突显该区域是一个可点击的链接。
问题：有时，设计或布局需求可能要求消除这个默认的边框。
实现方式：通过使用 CSS 样式来配置图像元素，将其边框样式设置为 "none"，以消除默认的边框效果。在页面的 CSS 样式中添加以下规则：
img {
border-style: none;
}
（10）Thumbnail Image缩略图：
配置为链接到该图像的较大版本的小图像。
<a href=“big.jpg”><img src=“small.jpg” alt=“country road” width=“200” height=“100”></a>
（11）Choosing Names for Image Files命名图片文件：
1使用所有小写字母；
2不要使用标点符号和空格；
3不要更改文件扩展名（应为.gif、.jpg、.jpeg或.png）；
4保持文件名简短但具有描述性。

19.HTML5 Figure and Figcaption Elements

（1）<figure> 元素：
描述： <figure> 元素用于包裹一个独立的内容块，通常是图像、照片、图表、代码片段等。它表示文档中的一个独立单元，可以包含与文本内容相关的媒体。
<figure>
<img src="example.jpg" alt="Example Image">
<figcaption>This is an example image.</figcaption>
</figure>
（2）<figcaption> 元素：
描述： <figcaption> 元素用于为 <figure> 元素提供标题或说明文字。它是 <figure> 的子元素，用于描述包裹的内容。
<figure>
<img src="example.jpg" alt="Example Image">
<figcaption>This is an example image.</figcaption>
</figure>
在示例中，<figure> 包含了一个图像，并通过 <figcaption> 提供了对图像的说明。这样的结构更好地表达了图像和说明之间的关系，而不仅仅是简单地将图像放置在页面上。

20.HTML5 Progress Element

<progress> 元素是 HTML5 中引入的用于表示任务进度的元素。它提供了一种在页面上显示任务完成度或操作进度的标准方法。<progress> 元素通常用于表示文件上传、下载、表单提交等涉及时间较长的操作的进度。
以下是 <progress> 元素的基本结构和属性：
<progress value="50" max="100">50%</progress>
（1）value 属性：表示当前任务完成的进度值。它的取值应该在 0 到 max 之间。在上面的例子中，value 设置为 50 表示任务完成了一半。
（2）max 属性：表示进度的最大值，即任务完成的总量。在上面的例子中，max 设置为 100，表示任务的总量为 100。

21.CSS background-image Property

background-image 是 CSS 中用于设置元素背景图像的属性。允许指定一个图像文件，该图像将被用作元素的背景。
（1）使用相对路径设置背景图像：
.example {
background-image: url('relative-path/image.jpg');
}
（2）使用绝对路径或完整的 URL 设置背景图像：
.example {
background-image: url('https://example.com/full-path/image.jpg');
}
（3）使用线性渐变作为背景图像：
.example {
background-image: linear-gradient(to right, #ff0000, #00ff00);
}
（4）使用多个背景图像：
.example {
background-image: url('image1.jpg'), url('image2.jpg');
}
（5）设置背景图像的大小和位置：
.example {
background-image: url('image.jpg');
background-size: cover; /* 或 contain 或具体的尺寸值 */
background-position: center; /* 或具体的位置值 */
}
（6）使用 none 移除背景图像：
.example {
background-image: none;
}
（7）repeat：
默认情况下，当设置了背景图像后，它会在元素的背景区域中重复平铺。如果背景图像的尺寸小于元素的背景区域，浏览器会在水平和垂直方向上平铺图像，使整个背景区域都被覆盖。这种默认的平铺行为是为了填充整个背景区域，确保图像充满整个元素。如果不想让背景图像平铺，可以使用其他 CSS 属性来控制平铺行为，比如 background-repeat 属性。例如，可以将 background-repeat 设置为 no-repeat，这样就可以阻止背景图像的平铺效果：
.example {
background-image: url('image.jpg');
background-repeat: no-repeat;
}
上述 CSS 规则中的 background-repeat: no-repeat; 将阻止背景图像在水平和垂直方向上的平铺，使其只显示一次，不进行重复。
repeat-x：
当使用 background-repeat: repeat-x; 时，背景图像仅在水平方向上进行平铺，而在垂直方向上不进行平铺。这意味着图像会在水平方向上重复，但不会在垂直方向上重复。
repeat-y：
当使用 background-repeat: repeat-y; 时，背景图像仅在垂直方向上进行平铺，而在水平方向上不进行平铺。这意味着图像会在垂直方向上重复，但不会在水平方向上重复。

22.图像映射（Image Map）

是一种在网页上将多个可点击区域链接到不同目标的技术。通过图像映射，可以在同一张图像上定义多个区域，每个区域都可以关联到不同的链接或执行不同的操作。
图像映射主要使用 <map> 元素和 <area> 元素来实现。以下是图像映射的基本结构：
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Example</title>
</head>
<body>
<img src="example-image.jpg" usemap="#imagemap" alt="Clickable Image Map">
<map name="imagemap">
<area shape="rect" coords="0,0,50,50" href="link1.html" alt="Area 1">
<area shape="circle" coords="100,100,50" href="link2.html" alt="Area 2">
<area shape="poly" coords="200,0,250,50,200,100" href="link3.html" alt="Area 3">
</map>
</body>
</html>

上述代码的解释：
<img> 元素用于显示图像，并通过 usemap 属性关联到一个图像映射，其中的值是 <map> 元素的 name 属性。
<map> 元素用于定义图像映射，通过 name 属性指定一个名称。
<area> 元素用于定义图像映射的区域。它有几个属性，其中：
[1]shape 属性定义了区域的形状，可以是 "rect"（矩形）、"circle"（圆形）、"poly"（多边形）等。
[2]coords 属性定义了区域的坐标，具体取决于形状。
对于矩形，坐标是左上角和右下角的 x、y 坐标；(4个值)
对于圆形，坐标是圆心和半径；
对于多边形，坐标是多个点的 x、y 坐标。
[3]href 属性定义了区域点击后的目标链接。
[4]alt 属性提供了区域的替代文本，类似于 <area> 元素的 alt 属性。
这个例子中，图像被分成三个区域，每个区域都是可点击的，点击后会导航到不同的链接。这是一种常见的用法，特别适用于需要在一个图像上定义多个交互区域的场景。

23.Favorites Icon简称为 Favicon（即网页图标）

是一种显示在浏览器标签页、书签栏以及浏览器地址栏左侧的小图标。Favicon 是网站的标志性图标，用于在用户浏览网页时标识特定网站。
以下是 Favorites Icon 的一些特点和相关信息：
（1）图标格式：通常以 ICO 格式为主，但也支持其他格式如 PNG、GIF 等。ICO 格式是最常见的，因为它允许在一个文件中包含多个尺寸和颜色深度的图标。
（2）尺寸： Favicons 通常包含多个尺寸的图标，以适应不同的显示环境。典型的尺寸包括 16x16、32x32、48x48 等。
（3）设置方式：在网站的根目录下放置一个名为 favicon.ico 或其他支持格式（如 favicon.png）的文件，浏览器会自动检测并加载它。
（4）用途： Favicons 主要用于标识网站，提高用户在浏览器中快速识别网站的能力。它们还可以在浏览器标签页中显示，帮助用户轻松切换和识别不同的打开页面。
（5）示例 HTML 代码，用于在网页中添加 Favicon：
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>My Website</title>
</head>
<body>

</body>
</html>

24.CSS Sprites

CSS Sprites 是一种将多个小图标或图像合并成一个单一图像文件的技术。这个单一的图像文件通常称为雪碧图（Sprite），而通过 CSS 的背景图像和定位属性，可以选择性地显示其中的某一部分。
使用 CSS Sprites 的主要目的是减少页面加载时间，因为通过减少 HTTP 请求的数量，可以提高网页的性能。每次加载一个图像都需要一个独立的 HTTP 请求，而通过将多个图像合并成一个，可以减少请求次数，提高页面加载速度。
以下是一个简单的使用 CSS Sprites 的示例：
原始图像文件：
三个小图标分别是 icon1.png、icon2.png、icon3.png。
合并成雪碧图：
这三个图标被合并成一个雪碧图文件 sprites.png。
CSS 代码：
使用 CSS 的 background 和 background-position 属性将雪碧图中的特定区域显示在页面上。
.icon1 {
width: 32px;
height: 32px;
background: url('sprites.png') 0 0;
}
.icon2 {
width: 32px;
height: 32px;
background: url('sprites.png') -32px 0;
}
.icon3 {
width: 32px;
height: 32px;
background: url('sprites.png') -64px 0;
}
在上述代码中，每个图标都通过设置不同的 background-position 来显示雪碧图中的不同区域。这样，通过加载一个雪碧图文件，就能同时显示多个图标，减少了页面对图像资源的请求次数。
CSS Sprites 是一种优化前端性能的常见技术，但在使用时需要注意维护和更新雪碧图文件，以及确保不同图标之间的样式不会相互影响。

25.CSS3 Rounded Corners

CSS3 圆角（Rounded Corners）是 CSS3 中引入的一项功能，用于通过简单的 CSS 属性设置元素的边框为圆角形状，而不是传统的直角形状。
使用 CSS3 圆角可以为元素的边框添加圆角效果，使得页面元素看起来更加美观和现代化。以下是设置圆角的基本属性：
/* 设置所有四个角都为相同的圆角半径 */
.example {
border-radius: 10px;
}
/* 设置每个角的不同圆角半径 */
.example {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}
上述代码中的 border-radius 属性用于设置元素的四个角都具有相同的圆角半径。另外，也可以使用分别设置每个角的属性。
这些属性的值可以是具体的长度值（像素、百分比等），也可以是相对值，如 em 或 rem。通过调整这些值，可以根据设计需求创建不同的圆角效果。
这样的 CSS3 圆角特性可以应用于各种元素，如 <div>、<button>、<input> 等，为它们的边框添加圆角效果。
只有4个值，边界半径的四个值分别配置每个角按左上、右上、右下、左下顺序排列。

26.CSS3 SHADOW

（1）box-shadow Property
box-shadow 是 CSS3 中的属性，用于在元素周围创建阴影效果。通过使用 box-shadow，你可以为元素添加立体感，使其看起来浮在其他元素之上。
box-shadow 属性的语法如下：
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
水平偏移（horizontal offset）：阴影相对于元素的水平偏移量。可以为正值（向右偏移）或负值（向左偏移）。
垂直偏移（vertical offset）：阴影相对于元素的垂直偏移量。可以为正值（向下偏移）或负值（向上偏移）。
模糊半径（blur radius）：控制阴影的模糊程度。值越大，阴影越模糊。可以为零。
扩展半径（spread radius）：控制阴影的尺寸。正值会使阴影扩大，负值会使阴影缩小。默认为零。
颜色（color）：阴影的颜色。可以使用颜色关键字、十六进制、RGB、RGBA 等表示。
/* 创建一个水平向右、垂直向下的阴影，模糊半径为5px，颜色为灰色 */
.example {
box-shadow: 5px 5px 5px #888888;
}
上述代码为一个元素添加了一个向右下方投影的阴影效果。
水平偏移为正值：阴影向右偏移。
水平偏移为负值：阴影向左偏移。
垂直偏移为正值：阴影向下偏移。
垂直偏移为负值：阴影向上偏移。
box-shadow 属性常用于创建卡片效果、按钮阴影等，以提高用户界面的立体感。它是一个强大而灵活的样式属性，可以根据设计需求进行调整。
（2）text-shadow Property（属性同box）
text-shadow 是 CSS3 中的属性，用于在文本周围创建阴影效果。与 box-shadow 类似，text-shadow 允许为文本添加阴影，从而使文本在页面上看起来更加突出或立体。
text-shadow 属性的语法如下：
text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

27.CSS3 opacity Property、Rgba Color、CSS3 Gradients

（1）opacity 是 CSS3 中的属性，用于控制元素的不透明度。通过设置 opacity，你可以使元素变得半透明，从完全透明（值为 0）到完全不透明（值为 1）。
opacity 属性的值是一个介于 0（完全透明）和 1（完全不透明）之间的数字，也可以是一个百分比值。以下是基本的语法：
/* 将元素的不透明度设置为 0.5，即50%的透明度 */
.example {
opacity: 0.5;
}
opacity 属性影响元素及其所有子元素的透明度。如果只想让元素自身半透明而保持子元素不受影响，可以考虑使用 RGBA 颜色，其中的 A 表示 alpha 通道，表示透明度。例如：
/* 使用 RGBA 颜色实现元素自身半透明，但子元素不受影响 */
.example {
background-color: rgba(255, 0, 0, 0.5); /* 红色，透明度为 0.5 */
}
在上述例子中，rgba(255, 0, 0, 0.5) 表示红色，透明度为 0.5，即半透明的红色。这样只会影响元素自身的透明度，而不会影响子元素。
（2）RGBA 是 CSS 中表示颜色的一种方式，它包含了红、绿、蓝三个颜色通道，以及一个表示透明度的 alpha 通道。RGBA 表示颜色的语法为：
rgba(red, green, blue, alpha);
red (红色通道): 表示红色的值，取值范围是 0 到 255 或百分比值，0 表示没有红色，255 或 100% 表示纯红色。
green (绿色通道): 表示绿色的值，取值范围同样是 0 到 255 或百分比值。
blue (蓝色通道): 表示蓝色的值，取值范围同样是 0 到 255 或百分比值。
alpha (透明度通道): 表示颜色的透明度，取值范围是 0 到 1，其中 0 表示完全透明，1 表示完全不透明。
/* 完全不透明的红色 */
color: rgba(255, 0, 0, 1);
/* 半透明的绿色 */
background-color: rgba(0, 255, 0, 0.5);
/* 50% 红色，25% 绿色，75% 蓝色，完全不透明 */
border: 2px solid rgba(50%, 25%, 75%, 1);
这些例子演示了如何使用 RGBA 表示颜色，其中 alpha 通道用于控制颜色的透明度。RGBA 常用于需要设置半透明颜色的地方，例如实现元素的半透明效果。
（3）CSS3 渐变（Gradients）是一种用于创建平滑过渡效果的技术，通过在元素的背景或边框中应用渐变，可以实现从一种颜色到另一种颜色的平滑过渡。
在 CSS3 中，有两种主要类型的渐变：
[1]线性渐变（Linear Gradients）：通过定义一个方向，颜色会沿着这个方向发生线性变化。可以从一个颜色到另一个颜色，也可以定义多个颜色点。
/* 从上到下的线性渐变，从红色到蓝色 */
linear-gradient(to bottom, red, blue);
[2]径向渐变（Radial Gradients）：通过定义一个中心点和一个或多个颜色环，颜色会向外辐射形成圆形渐变。可以从一个颜色到另一个颜色，也可以定义多个颜色环。
/* 从内到外的径向渐变，从黄色到绿色 */
radial-gradient(yellow, green);

28.Normal Flow

"Normal Flow" 是 CSS 中用于描述文档中元素默认布局的术语。在正常流中，HTML 文档中的元素按照其在文档中出现的顺序，从上到下，从左到右进行布局。
在正常流中，块级元素独占一行，从上到下垂直排列，每个块级元素从左到右水平布局。行内元素则在一行中水平排列，从左到右。这种默认的布局方式可以通过 CSS 的样式进行调整，但在没有其他样式干扰的情况下，元素会按照正常流的规则进行排列。
正常流中的元素的布局不会重叠，而是按照文档流的顺序一个接一个地排列。如果屏幕的宽度不足以容纳元素，块级元素会被压缩到适应屏幕，而行内元素则会换行显示。
通过调整元素的 display、position、float 等属性，可以改变元素在正常流中的布局特性。例如，将元素设置为 position: absolute; 就可以使其脱离正常流，不再占用文档流中的位置。

29.相对定位（Relative Positioning）

（1）是 CSS 中的一种定位方式，它允许你相对于元素在正常流中的位置进行微调。使用相对定位时，元素仍然占据正常流中的位置，但可以通过 top、right、bottom 和 left 属性相对于其正常位置进行移动。
（2）相对定位的基本语法如下：
position: relative;
top: value;
right: value;
bottom: value;
left: value;
position: relative; 声明了相对定位。
top、right、bottom、left 属性控制了元素相对于其正常位置的偏移量。这些值可以是正数、负数或百分比。
（3）示例：
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
上述示例将 .relative-box 元素相对于其在正常流中的位置(top)向下移动了 10 像素，向左移动了 20 像素。
（4）相对定位的特点：
元素仍占据正常流中的位置：相对定位不会使元素脱离正常文档流，它仍然占据其在正常流中的位置，只是视觉上的位置发生了变化。
（5）相对于自身移动：元素的位置是相对于其自身在正常流中的位置进行调整的。其他元素不受影响。
相对定位通常用于微调元素的位置，使其相对于正常流中的位置产生一些视觉上的偏移。

30.绝对定位（Absolute Positioning）

（1）是 CSS 中的一种定位方式，允许将元素相对于其最近的已定位（非 static）的祖先元素或文档的边界框进行定位。使用绝对定位时，元素不再占据正常流中的位置，而是脱离正常文档流，可以自由移动到指定位置。
（2）绝对定位的基本语法如下：
position: absolute;
top: value;
right: value;
bottom: value;
left: value;
position: absolute; 声明了绝对定位。
top、right、bottom、left 属性控制了元素相对于其定位父元素或文档的边界框的位置。这些值可以是正数、负数或百分比。
（3）示例：
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
}
上述示例将 .absolute-box 元素从其正常流中的位置脱离，绝对定位到距离其定位父元素（如果有）或文档左上角 100 像素的水平位置和 50 像素的垂直位置。
（4）绝对定位的特点：
[1]脱离正常文档流：绝对定位的元素不再占据正常流中的位置，不影响其他元素的布局。
[2]相对于定位父元素或文档进行定位：元素的位置是相对于其最近的已定位（非 static）的祖先元素或文档的边界框进行调整的。
[3]如果没有定位父元素：如果没有已定位的祖先元素，元素的位置将相对于文档的边界框。
绝对定位通常用于创建浮动效果、弹出层、菜单等需要脱离正常文档流并精确控制位置的情境。

31.float Property

（1）float 是 CSS 中的属性，用于控制元素在其包含块内的浮动方式。使用 float 属性，你可以使元素向左或向右浮动，让其脱离正常流，从而实现元素的横向排列。
（2）float 属性的基本语法如下：
float: value;
其中 value 可以是以下值之一：
left：元素向左浮动。
right：元素向右浮动。
none（默认）：元素不浮动，恢复到正常流中。
（3）示例：
.float-left {
float: left;
}
.float-right {
float: right;
}
上述示例中，.float-left 类将元素向左浮动，而.float-right 类将元素向右浮动。
（4）float 的特点：
[1]浮动的元素脱离正常文档流：浮动的元素不再占据正常流中的位置，可以浮动到其包含块的左边或右边。
[2]浮动元素会影响周围的元素：正常流中的元素会围绕浮动元素的边缘，适用于浮动元素左边或右边的空间。
[3]清除浮动：由于浮动可能导致包含块的高度塌陷，需要使用 clear 属性清除浮动，以确保包含块包含浮动元素。

32.clear Property

（1）clear 是 CSS 中的属性，用于指定一个元素不能放在浮动元素的左边或右边，从而清除浮动。当使用浮动布局时，浮动的元素可能会导致其后续的元素不按预期布局，因此可以使用 clear 来解决这个问题。
（2）clear 属性的基本语法如下：
clear: value;
其中 value 可以是以下值之一：
none（默认）：元素可以出现在浮动元素的两侧。
left：元素不允许出现在浮动元素的左侧。
right：元素不允许出现在浮动元素的右侧。
both：元素不允许出现在浮动元素的任何一侧，即清除浮动。
（3）示例：
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
上述示例中，.clear-left 类将元素清除左侧浮动，.clear-right 类将元素清除右侧浮动，.clear-both 类将元素清除左右两侧的浮动。
clear 的主要用途是处理浮动元素可能导致的父元素高度塌陷（高度坍塌）的问题，确保后续元素能够按照预期的布局。
（4）clear 属性主要用于清除浮动（float）的影响。当元素被设置为浮动时，它会脱离正常文档流，可能导致其后续的元素不按照预期进行布局。在这种情况下，使用 clear 属性可以控制元素在浮动元素的左侧、右侧或两侧的行为，确保后续元素布局正常。
如果没有浮动元素，clear 的应用通常不会产生明显的效果，因为在正常文档流中，元素默认就是按照文档流的规则布局的，不会受到浮动元素的影响。

33.overflow Property

overflow 是 CSS 属性，用于控制元素内容溢出容器时的表现方式。当元素的内容超过容器的尺寸时，可以使用 overflow 属性来定义如何处理这种溢出情况。
overflow 属性有以下几个可能的值：
（1）visible（默认值）：内容会溢出容器，并且会显示在容器的边界之外。这是默认值。
overflow: visible;
（2）hidden：内容会被裁剪，超出容器的部分将被隐藏。
overflow: hidden;
（3）scroll：如果内容溢出容器，会显示滚动条，用户可以通过滚动条来查看被隐藏的内容。
overflow: scroll;
（4）auto：如果内容溢出容器，会显示滚动条，但只有在实际需要时才会出现滚动条。如果内容未溢出，不会显示滚动条。
overflow: auto;
（5）inherit：继承父元素的 overflow 属性。
overflow: inherit;

34.Display Property

display 是 CSS 属性之一，用于指定元素的显示类型（display type）。它决定了元素在页面中的渲染方式，即元素是块级元素、行内元素还是其他特殊类型的元素。以下是一些常见的 display 属性的值：
（1）block（块级元素）：元素呈现为块级元素，会在页面中独占一行，并在前后都有换行。
display: block;
（2）inline（行内元素）：元素呈现为行内元素，会在页面中按照文本流水布局，不会独占一行。
display: inline;
（3）inline-block（行内块级元素）：元素呈现为行内块级元素，保持行内元素的特性，但可以设置宽度和高度等块级元素的属性。
display: inline-block;
（4）none（隐藏）：元素不会在页面中显示，即完全隐藏。
display: none;
（5）flex（弹性盒子）：元素将会生成一个弹性容器，子元素可以使用弹性布局进行排列。
display: flex;
（6）grid（网格布局）：元素将会生成一个网格容器，子元素可以使用网格布局进行排列。
display: grid;
（7）table（表格元素）：元素呈现为表格元素，类似于 <table>、<tr>、<td> 等。
display: table;
这只是一些 display 属性的常见值，实际上还有其他一些值和一些复杂的概念，如 inline-table、list-item、run-in 等。选择合适的 display 属性值有助于实现所需的布局和样式效果。

35.Vertical Navigation

在无序列表中配置超链接，通常用于垂直导航。
<div id="leftcolumn">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
CSS removes the list marker and underline:
#leftcolumn ul { list-style-type: none; }（除去点）
#leftcolumn a { text-decoration: none; }（除去链接下划线）

36.Horizontal Navigation

在无序列表中配置超链接，通常用于水平导航。
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
CSS removes the list marker, removes the underline, adds padding, and configures the list items for inline display.
#nav ul { list-style-type: none;}
#nav a { text-decoration: none;
padding-right: 10px; }
#nav li { display: inline; }（在一行中显示）

37.CSS伪类pseudo-classes超链接上

CSS 伪类（Pseudo-classes）与锚元素（anchor element，通常用 <a> 标签表示）相关的一些状态。这些状态可以通过伪类来选择和样式化。以下是每个伪类的解释：
（1）:link（默认状态）：
:link 伪类用于选择尚未被访问的链接（超链接）。它表示超链接的默认状态，即用户尚未点击或访问链接。
a:link {
/* 样式规则适用于未访问的链接 */
}
（2）:visited（已访问状态）：
:visited 伪类用于选择已经被访问过的链接。浏览器会追踪用户访问过的链接，从而在下一次访问页面时，通过 :visited 可以选择并样式化这些链接。
a:visited {
/* 样式规则适用于已访问的链接 */
}
（3）:focus（焦点状态）：
:focus 伪类用于选择当前获得焦点的元素。在超链接上，当用户使用键盘导航时，或者通过点击链接使其获得焦点时，:focus 触发。
a:focus {
/* 样式规则适用于获得焦点的链接 */
}
（4）:hover（悬停状态）：
:hover 伪类用于选择用户悬停在元素上的状态。在超链接上，当用户将鼠标悬停在链接上时，:hover 触发，可以用于添加一些视觉效果。
a:hover {
/* 样式规则适用于悬停在链接上的状态 */
}
（5）:active（激活状态）：
:active 伪类用于选择正在被用户点击的元素。在超链接上，当用户点击链接但尚未释放鼠标按钮时，:active 触发。通常用于添加点击效果。
a:active {
/* 样式规则适用于点击链接的状态 */
}

38.HTML5 Structural Elements

HTML5 引入了一些新的结构性元素，以更好地描述文档的结构和内容。以下是一些 HTML5 结构性元素：
<header>：用于表示页面或区块的页眉。通常包含标题、标志或导航。
<footer>： block display用于表示页面或区块的页脚。通常包含版权信息、联系方式或其他底部相关内容。
<nav>： block display表示页面的导航部分。通常包含链接到其他页面的导航链接。
<article>： block display表示页面独立的内容块，比如一篇博客文章或新闻报道。
<section>： block display表示文档中的一个区块或节，可以包含相关的内容组。
<aside>： block display用于表示页面的侧边栏或附属内容，通常包含与主内容相关但不是必需的内容。
<main>：表示文档的主要内容，通常排除页眉、页脚、侧边栏等。
<figure>：用于将图片、图表、图形、照片等媒体与其相关的说明性内容（如标题、图注）组合在一起。
<figcaption>：用于为 <figure> 元素提供说明性的标题或图注。
<time>： inline display用于表示日期和时间。
<mark>：用于标记文本中的某个部分，以便在页面上突出显示。
<progress>：用于表示任务的完成进度。
<output>：用于表示用户输入的输出。
<details>：用于表示一个可以展开或折叠的区域，通常与 <summary> 配合使用。
<summary>：用于表示 <details> 元素的摘要或标题。
<hgroup> 是 HTML5 中的一个元素，但自 HTML5.2 起已被废弃，不再推荐使用。在 HTML5 标准中，<hgroup> 用于将一组标题元素（<h1> 到 <h6>）作为一个单独的组，表示它们属于同一个整体。通常用于对标题进行组织，使其更有层次感。
<hgroup>
<h1>Main Heading</h1>
<h2>Subheading</h2>
</hgroup>
上述示例中，<h1> 和 <h2> 被包含在 <hgroup> 中，表示它们一起构成了文档的主标题和副标题。

39.FORM表单

<form> 是 HTML 中的一个元素，用于创建包含交互性控件的表单。表单允许用户输入数据，然后将该数据提交到服务器进行处理。表单是用户与网站进行交互的重要方式之一，它可以用于登录、搜索、用户注册等场景。
<form> 元素包含了一系列的表单元素，例如文本框、复选框、单选按钮、下拉列表等，以及用于提交和重置表单的按钮。表单的结构通常如下：
<form action="/submit" method="post">

<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
在这个例子中：
action 属性定义了表单提交的目标 URL，即数据将被发送到该 URL。
method 属性定义了提交表单时使用的 HTTP 方法，通常是 "get" 或 "post"。
表单内包含了两个文本框（username 和 password），以及一个提交按钮和一个重置按钮。
用户可以在文本框中输入信息，然后点击提交按钮，表单的数据将被发送到服务器上定义的目标 URL。服务器接收到数据后，可以进行相应的处理，例如验证用户身份、保存数据到数据库等。
（1）<form>：
含义： <form> 元素用于创建表单，是包含表单元素的容器。
标签类型：容器标签。
用途：用于包裹表单中的各种输入元素，定义用户输入数据的区域。
[1]action 属性：
含义： action 属性用于指定处理表单数据的服务器端程序或脚本的 URL。
用途：当用户提交表单时，浏览器会将表单数据发送到 action 属性指定的 URL，从而实现数据的处理和响应。
[2]method 属性：
含义： method 属性用于指定提交表单时使用的 HTTP 方法。
取值：
get（默认值）：将表单数据附加在 URL 的查询字符串中，适用于较短、不敏感的数据。
post：将表单数据作为 HTTP 请求的实体体传递，适用于较长、敏感的数据，更安全。
[3]name 属性：
含义： name 属性用于标识表单元素，便于在 JavaScript 或服务器端程序中引用。
用途：在处理表单数据时，可以通过表单的 name 属性来访问和处理表单中的各个元素。
<form action="/submit" method="post" name="myForm">

</form>
[4]id 属性：
含义： id 属性用于为表单元素指定唯一的标识符。
用途：在页面的其他地方，特别是在 CSS 和 JavaScript 中，可以使用 id 属性来引用和操作整个表单元素。
<form action="/submit" method="post" id="myForm">

</form>
（2）<input>：
含义： <input> 元素用于配置各种表单元素，如文本框、单选按钮、复选框和按钮。
标签类型：独立标签。
用途：根据 type 属性的不同值，可以创建不同类型的表单元素。
<input type="text" name="username" />
<input type="radio" name="gender" value="male" />
<input type="checkbox" name="subscribe" />
<input type="submit" value="Submit" />
[1]INPUT TEXT BOX
type="text"：
含义：指定输入框的类型为文本输入框，用于接受单行文本信息。
用途：允许用户输入普通文本，如姓名、用户名等。
<input type="text" name="username" id="username" />
name 属性：
含义：用于标识输入框，以便在提交表单时能够识别和处理该输入框的值。
用途：在服务器端处理表单数据时，通过表单元素的 name 属性来引用输入框的值。
<input type="text" name="username" id="username" />
id 属性：
含义：为输入框指定唯一标识符，方便在页面的其他地方引用和操作。
用途：通过 JavaScript 或 CSS 可以通过 id 属性来操纵该输入框。
<input type="text" name="username" id="username" />
size 属性：
含义：指定输入框的可见宽度，以字符为单位。
用途：控制输入框在页面上显示的宽度，但并不限制用户输入的字符数。
<input type="text" name="username" id="username" size="30" />
maxlength 属性：
含义：指定输入框可接受的最大字符数。
用途：限制用户在输入框中输入的字符数，超过该数值的字符将被截断。
<input type="text" name="username" id="username" maxlength="50" />
value 属性：
含义：为输入框设置默认值。
用途：提供一个初始值，用户可以在需要时修改该值。
<input type="text" name="username" id="username" value="Default Value" />
[2]input Submit Button
<input>元素可以用于创建提交按钮，用于提交表单信息。以下是与提交按钮相关的常用属性：
type（类型）：
描述：指定输入框的类型。
值：submit表示提交按钮。
用法：<input type="submit">
name（名称）：
描述：定义提交按钮的名称，用于标识表单数据在提交时的字段名。在实际使用中，有时可以用来标识不同的提交按钮。
用法：<input type="submit" name="submit_button">
id（标识）：
描述：为提交按钮指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的按钮。
用法：<input type="submit" id="submit_button">
value（值）：
描述：设置提交按钮上显示的文本，即按钮的标签文本。
用法：<input type="submit" value="Submit Form">
当用户点击提交按钮时，触发了与表单相关联的<form>标签上的action属性指定的服务器端脚本或程序。同时，表单中的数据（每个表单元素的name=value对）会被发送到Web服务器，以便进行处理和响应。这使得用户能够将表单中的信息提交到服务器，例如进行用户注册、搜索查询等操作。
[3]input Reset Button
<input>元素可以用于创建重置按钮，用于重置表单中的所有字段到它们的初始值。以下是与重置按钮相关的常用属性：
type（类型）：
描述：指定输入框的类型。
值：reset表示重置按钮。
用法：<input type="reset">
name（名称）：
描述：定义重置按钮的名称，用于标识表单数据在提交时的字段名。在实际使用中，有时可以用来标识不同的重置按钮。
用法：<input type="reset" name="reset_button">
id（标识）：
描述：为重置按钮指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的按钮。
用法：<input type="reset" id="reset_button">
value（值）：
描述：设置重置按钮上显示的文本，即按钮的标签文本。
用法：<input type="reset" value="Reset Form">
当用户点击重置按钮时，表单中的所有字段将被重置为它们最初加载时的值。这对于用户想要重新填写表单或取消之前的更改非常有用。值得注意的是，这并不会影响通过JavaScript或其他客户端脚本动态更改的字段值，仅仅是重置到HTML中初始定义的值。
[4]input Password box
<input>元素可以用于创建密码框，该框允许用户输入文本信息，但输入的内容将被隐藏。以下是与密码框相关的常用属性：
type（类型）：
描述：指定输入框的类型。
值：password表示密码框。
用法：<input type="password">
name（名称）：
描述：定义密码框的名称，用于标识表单数据在提交时的字段名。
用法：<input type="password" name="password_field">
id（标识）：
描述：为密码框指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的密码框。
用法：<input type="password" id="password_field">
size（大小）：
描述：指定密码框的可见宽度，以字符数为单位。这个属性已经不推荐使用，通常使用CSS来控制输入框的样式。
用法：<input type="password" size="20">
maxlength（最大长度）：
描述：限制用户在密码框中输入的字符数的最大数量。
用法：<input type="password" maxlength="50">
value（值）：
描述：设置密码框的初始值。由于安全原因，密码框的初始值通常为空，因此很少使用这个属性。
用法：<input type="password" value="initial_password">
密码框的主要特点是输入的文本内容会被掩码或隐藏，以增加安全性，防止密码被轻易窥视。这对于用户输入敏感信息，如登录密码等场景非常重要。
[5]input Check box
<input>元素可以用于创建复选框，允许用户从一组预定项中选择一个或多个。以下是与复选框相关的常用属性：
type（类型）：
描述：指定输入框的类型。
值：checkbox表示复选框。
用法：<input type="checkbox">
name（名称）：
描述：定义复选框的名称，用于标识表单数据在提交时的字段名。当多个复选框共享相同的name属性时，它们被视为同一组，并且用户可以选择其中的多个选项。
用法：<input type="checkbox" name="checkbox_group">
id（标识）：
描述：为复选框指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的复选框。
用法：<input type="checkbox" id="checkbox_id">
checked（选中状态）：
描述：用于指定复选框是否初始时就被选中。
值：checked表示初始时选中，没有该属性或值为空表示初始时不选中。
用法：<input type="checkbox" checked>
value（值）：
描述：设置复选框的值。当表单被提交时，如果复选框被选中，其name和value将被包含在表单数据中，以便在服务器端进行处理。
用法：<input type="checkbox" value="checkbox_value">
复选框允许用户选择多个选项，通常用于表达一组相关的选择。通过设置name属性，多个复选框可以被组合在一起，以形成一个选项组。设置checked属性可以让某个复选框在初始时就被选中。
[6]input Radio Button
<input>元素可以用于创建单选按钮，允许用户从一组预定项中选择一个。以下是与单选按钮相关的常用属性：
type（类型）：
描述：指定输入框的类型。
值：radio表示单选按钮。
用法：<input type="radio">
name（名称）：
描述：定义单选按钮的名称，用于标识表单数据在提交时的字段名。当多个单选按钮共享相同的name属性时，它们被视为同一组，用户只能在组内选择一个选项。
用法：<input type="radio" name="radio_group">
id（标识）：
描述：为单选按钮指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的单选按钮。
用法：<input type="radio" id="radio_id">
checked（选中状态）：
描述：用于指定单选按钮是否初始时就被选中。
值：checked表示初始时选中，没有该属性或值为空表示初始时不选中。
用法：<input type="radio" checked>
value（值）：
描述：设置单选按钮的值。当表单被提交时，被选中的单选按钮的name和value将被包含在表单数据中，以便在服务器端进行处理。
用法：<input type="radio" value="radio_value">
单选按钮通常用于提供用户在一组互斥的选项中选择一个的功能。设置相同的name属性将它们关联到同一组。用户只能选择同一组中的一个单选按钮。设置checked属性可以使某个单选按钮在初始时就被选中。
[7]input Hidden form data
<input>元素可以用于创建隐藏的表单字段，该字段不会在页面上显示，但可以在客户端和服务器端脚本中访问。以下是与隐藏表单字段相关的常用属性：
type（类型）：
描述：指定输入框的类型。
值：hidden表示隐藏字段。
用法：<input type="hidden">
name（名称）：
描述：定义隐藏字段的名称，用于标识表单数据在提交时的字段名。
用法：<input type="hidden" name="hidden_field">
id（标识）：
描述：为隐藏字段指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的隐藏字段。
用法：<input type="hidden" id="hidden_field">
隐藏字段通常用于在表单中包含一些不需要用户输入的数据，但这些数据需要在提交表单时传递到服务器。由于隐藏字段不可见，用户无法直接修改它们。这使得隐藏字段成为在不影响用户界面的情况下传递信息的一种有效方式。例如，它们可能用于存储会话标识、跟踪用户行为或其他需要在页面之间保持状态的信息。
[8]Input Image Button
<input>元素可以使用type="image"来创建图像提交按钮。这是一种通过图像作为提交按钮的方式。以下是与图像提交按钮相关的常用属性：
type（类型）:
描述：指定输入框的类型。
值：image表示图像提交按钮。
用法：<input type="image">
name（名称）：
描述：定义图像提交按钮的名称，用于标识表单数据在提交时的字段名。
用法：<input type="image" name="image_button">
id（标识）：
描述：为图像提交按钮指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的按钮。
用法：<input type="image" id="image_button">
src（源）：
描述：指定用作提交按钮的图像的URL。点击图像时，将触发表单的提交动作。
用法：<input type="image" src="button_image.png">
图像提交按钮允许用户通过单击图像来提交表单，而不是使用常规的提交按钮。当用户点击图像时，表单的action属性指定的服务器端脚本或程序会被触发，并且表单数据将被发送到服务器。这种方式常常用于创建自定义外观的提交按钮，以提供更好的用户体验。
[9]HTML5: Email Text Box
HTML5 中的电子邮件文本框（Email Text Box）是通过 <input> 元素实现的，用于接受电子邮件地址格式的文本信息。以下是常见属性的中文解释：
type="email"（类型为 "email"）：
指定输入框用于输入电子邮件地址。这不仅提供了一个标准的文本框，还帮助浏览器验证输入是否符合电子邮件地址的格式。
name（名称）：
用于标识表单中输入字段的名称，以便在提交表单时将其与后端处理程序关联起来。
id（标识符）：
提供一个唯一的标识符，通常用于通过 CSS 或 JavaScript 引用该元素。
size（大小）：
指定输入框的可见字符数，用于控制输入框的宽度。
maxlength（最大长度）：
指定输入框允许输入的最大字符数。
value（值）：
提供输入框的初始值，可以是预先填充的电子邮件地址。
placeholder（占位符）：
提供一个在输入框为空时显示的灰色文本，用于提示用户应该输入的内容。这是可选的。
required（必填）：
如果设置为 required，则表示用户必须在提交表单之前输入有效的电子邮件地址。浏览器将在用户尝试提交空值时显示相应的错误消息。
[10]HTML5: URL TEXT BOX
HTML5 中的 URL 文本框通过 <input> 元素实现，用于接受 URL 格式的文本信息。以下是常见属性的中文解释：
type="url"（类型为 "url"）：
指定输入框用于输入 URL 地址。这不仅提供了一个标准的文本框，还帮助浏览器验证输入是否符合 URL 的格式。
name（名称）：
用于标识表单中输入字段的名称，以便在提交表单时将其与后端处理程序关联起来。
id（标识符）：
提供一个唯一的标识符，通常用于通过 CSS 或 JavaScript 引用该元素。
size（大小）：
指定输入框的可见字符数，用于控制输入框的宽度。
maxlength（最大长度）：
指定输入框允许输入的最大字符数。
value（值）：
提供输入框的初始值，可以是预先填充的 URL 地址。
placeholder（占位符）：
提供一个在输入框为空时显示的灰色文本，用于提示用户应该输入的内容。这是可选的。
required（必填）：
如果设置为 required，则表示用户必须在提交表单之前输入有效的 URL 地址。浏览器将在用户尝试提交空值时显示相应的错误消息。
[11]HTML5: TELEPHONE NUMBER TEXT BOX
HTML5 中的电话号码文本框通过 <input> 元素实现，用于接受电话号码格式的文本信息。以下是常见属性的中文解释：
type="tel"（类型为 "tel"）：
指定输入框用于输入电话号码。这不仅提供了一个标准的文本框，还帮助浏览器验证输入是否符合电话号码的格式。
name（名称）：
用于标识表单中输入字段的名称，以便在提交表单时将其与后端处理程序关联起来。
id（标识符）：
提供一个唯一的标识符，通常用于通过 CSS 或 JavaScript 引用该元素。
size（大小）：
指定输入框的可见字符数，用于控制输入框的宽度。
maxlength（最大长度）：
指定输入框允许输入的最大字符数。
value（值）：
提供输入框的初始值，可以是预先填充的电话号码。
placeholder（占位符）：
提供一个在输入框为空时显示的灰色文本，用于提示用户应该输入的内容。这是可选的。
required（必填）：
如果设置为 required，则表示用户必须在提交表单之前输入有效的电话号码。浏览器将在用户尝试提交空值时显示相应的错误消息。
[12]HTML5: SEARCH TEXT BOX:
HTML5 中的搜索文本框通过 <input> 元素实现，用于接受搜索词汇。以下是常见属性的中文解释：
type="search"（类型为 "search"）：
指定输入框用于输入搜索词汇。这不仅提供了一个标准的文本框，还可能启用浏览器的搜索特性，以提供更丰富的搜索体验。
name（名称）：
用于标识表单中输入字段的名称，以便在提交表单时将其与后端处理程序关联起来。
id（标识符）：
提供一个唯一的标识符，通常用于通过 CSS 或 JavaScript 引用该元素。
size（大小）：
指定输入框的可见字符数，用于控制输入框的宽度。
maxlength（最大长度）：
指定输入框允许输入的最大字符数。
value（值）：
提供输入框的初始值，可以是预先填充的搜索词汇。
placeholder（占位符）：
提供一个在输入框为空时显示的灰色文本，用于提示用户应该输入的内容。这是可选的。
required（必填）：
如果设置为 required，则表示用户必须在提交表单之前输入有效的搜索词汇。浏览器将在用户尝试提交空值时显示相应的错误消息。
[13]HTML5: Datalist Control(input list=" ")
HTML5 中的 <datalist> 元素是一个用于定义输入域（如 <input> 元素）的预定义选项列表的容器。以下是 <datalist> 控件的中文解释：
<datalist> 元素：
<datalist> 元素是 HTML5 中引入的，用于为用户提供一组可选的选项，以辅助输入框的输入。
作用：
用于创建一个包含预定义选项的列表，供用户在输入时选择。这样，用户可以从提供的选项中选择，而不必完全手动输入。
结构：
<datalist> 元素通常包含一个或多个 <option> 元素，每个 <option> 元素代表一个预定义的选项。
与输入框结合使用：
通过将 <datalist> 元素与 <input> 元素的 list 属性关联，可以使输入框与 <datalist> 中的选项关联起来。用户在输入时将会看到匹配的选项。
下面是一个简单的示例：
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
在这个例子中，用户可以在输入框中键入，并根据预定义的浏览器选项进行选择。这提供了一种更方便的方式，用户可以选择而不必记住所有可能的选项。
[14]HTML5: Slider Control(input type="range")
HTML5 中的滑块控件（Slider Control）是 <input> 元素的一种类型，用于允许用户通过拖动滑块来选择数值。以下是滑块控件的中文解释：
<input> 元素的 type="range"：
通过将 <input> 元素的 type 属性设置为 "range"，创建了一个滑块控件。
作用：
滑块控件允许用户在给定的范围内选择数值。用户可以通过拖动滑块的滑块块来选择一个值。
属性：
滑块控件可以使用 min 和 max 属性来定义数值范围，使用 value 属性来设置默认值。其他常见属性包括 step（步长）和 list（关联 <datalist>）等。
下面是一个简单的滑块控件的例子：
<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="5">
在这个例子中，滑块控件用于选择音量值，范围从 0 到 100，初始值为 50，步长为 5。用户可以通过拖动滑块来选择不同的音量值。
滑块控件是 HTML5 中提供的一种交互式输入方式，适用于需要用户在给定范围内选择数值的场景，例如音量调节、亮度控制等。
[15]HTML5: SPINNER CONTROL(input type="number")
HTML5 中的微调控件（Spinner Control）通常通过 <input> 元素的 type="number" 结合 min、max 和 step 属性来实现，用于允许用户通过增减按钮或手动输入来选择数字值。以下是微调控件的中文解释：
<input> 元素的 type="number"：
通过将 <input> 元素的 type 属性设置为 "number"，可以创建一个微调控件。
作用：
微调控件允许用户在给定的数值范围内选择数字。用户可以通过点击微调控件旁边的增减按钮或手动输入数值来进行选择。
属性：
微调控件通常使用 min 和 max 属性来定义数值范围，使用 value 属性来设置默认值。另外，step 属性定义了每次增减的步长。
下面是一个简单的微调控件的例子：
<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1" step="1">
在这个例子中，微调控件用于选择数量，范围从 1 到 10，初始值为 1，步长为 1。用户可以通过点击增减按钮或手动输入数值来进行选择。
微调控件提供了一种方便的方式，让用户在数值范围内进行选择，适用于需要精确数值输入的场景，例如购物车中商品数量的选择。
[16]HTML5: Calendar Control(input type="date")
HTML5 中的日期选择器（Calendar Control）通常通过 <input> 元素的 type="date" 来实现，用于允许用户选择日期。以下是日期选择器的中文解释：
<input> 元素的 type="date"：
通过将 <input> 元素的 type 属性设置为 "date"，可以创建一个日期选择器。
作用：
日期选择器允许用户从弹出的日历中选择一个日期，提供了一种直观的方式来输入日期信息。
属性：
日期选择器通常包括 min 和 max 属性，用于限定可选择的日期范围，以及 value 属性，用于设置默认日期。
下面是一个简单的日期选择器的例子：
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday" max="2023-12-31" value="2000-01-01">
在这个例子中，日期选择器用于选择生日日期，限定可选择的范围为当前日期到 2023 年底，初始值为 2000 年 1 月 1 日。
日期选择器提供了一种方便的方式，让用户选择日期，适用于需要涉及日期的表单输入场景，例如生日、预定日期等。用户可以通过点击输入框旁边的日历图标或在输入框中手动输入日期。
（3）<textarea>：
含义： <textarea> 元素用于配置具有滚动条的文本框，允许用户输入多行文本。
标签类型：容器标签。
用途：创建用于输入大段文本的区域。
<textarea rows="4" cols="50" name="comments"></textarea>
（4）Select List
<select>：
含义： <select> 元素用于配置下拉列表框，用户可以从中选择一个或多个选项。
标签类型：容器标签。
用途：创建一个下拉列表框。
<select name="cars">

</select>
<select>元素用于创建下拉列表框，也被称为选择框、下拉列表、下拉框或选项框。它允许用户从一组预定的选项中选择一个或多个。以下是与下拉列表框相关的常用属性：
name（名称）：
描述：定义下拉列表框的名称，用于标识表单数据在提交时的字段名。
用法：<select name="select_name">
id（标识）：
描述：为下拉列表框指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的下拉列表框。
用法：<select id="select_id">
size（可见行数）：
描述：指定下拉列表框的可见行数。这不会限制用户选择的数量，只是决定了在未展开列表时可见的选项行数。
用法：<select size="3">
multiple（多选）：
描述：用于指定是否允许多选。如果设置了该属性，用户可以按住Ctrl键（在Windows系统中）或Command键（在Mac系统中）同时选择多个选项。
值：multiple表示允许多选，没有该属性或值为空表示单选。
用法：<select multiple>
<select>元素通常与<option>元素一起使用，<option>定义了下拉列表框中的各个选项。用户可以通过点击下拉列表框并选择一个选项，或者按住Ctrl/Command键选择多个选项。
（5）Options in a Select List
<option>：
含义： <option> 元素用于配置下拉列表框中的选项。
标签类型：容器标签。
用途：在 <select> 元素中定义每个选项。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>

</select>
<option>元素用于定义<select>元素中的选项，即下拉列表框中的每一个可选择的项。以下是与<option>元素相关的常用属性：
value（值）：
描述：定义选项的值。当用户选择某个选项时，该值将作为表单数据的一部分提交到服务器。如果未设置value属性，浏览器会默认使用选项的文本内容作为值。
用法：<option value="option_value">Option Text</option>
selected（选中状态）：
描述：用于指定该选项是否初始时就被选中。如果设置了该属性，该选项将在页面加载时就被默认选中。
值：selected表示初始时选中，没有该属性或值为空表示初始时不选中。
用法：<option value="option_value" selected>Option Text</option>
<select name="fruits">
<option value="apple" selected>Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
</select>
在这个示例中，"Apple"被设置为初始时选中的选项，而"Orange"和"Banana"是可选的选项。用户可以从下拉列表中选择一个选项，然后将该选项的value提交到服务器。

40.textarea Scrolling Text Box

<textarea> 是 HTML 中的一个表单元素，用于创建多行文本框，允许用户输入多行文本信息。它通常用于接受用户的较大段落文字，例如评论、说明或其他需要多行输入的文本。
以下是 <textarea> 的基本用法和属性：
<textarea rows="4" cols="50" name="comments"></textarea>
rows 属性：指定文本框的行数，表示文本框可显示的行数。
cols 属性：指定文本框的列数，表示文本框可显示的列数。
name 属性：用于标识文本框，以便在提交表单时能够识别和处理该输入框的值。
id 属性: 用于为元素指定一个唯一的标识符
在这个例子中，<textarea> 创建了一个包含 4 行和 50 列的文本框，用户可以在其中输入多行文本。由于 <textarea> 是一个容器元素，它可以包含默认文本，用户可以在提交表单时将其中的文本数据一同提交。
<form action="/submit" method="post">
<textarea rows="4" cols="50" name="comments">Default text goes here.</textarea>
<input type="submit" value="Submit">
</form>
在 <textarea> 中使用 id 属性的例子：
<textarea id="myTextarea" rows="4" cols="50" name="comments"></textarea>
在这个例子中，<textarea> 元素的 id 属性被设置为 "myTextarea"。通过这个 id，可以在 JavaScript 或 CSS 中选择和操作这个特定的 <textarea> 元素。例如，可以使用以下 JavaScript 代码来获取该 <textarea> 元素的值：
var textareaValue = document.getElementById("myTextarea").value;

41.BUTTON ELEMENT

<button>元素是一个容器标签，用于创建按钮。它可以包含文本、图像和媒体等内容。当用户点击按钮时，按钮的功能取决于type属性的值。以下是与<button>元素相关的常用属性：
type（类型）：
描述：指定按钮的类型。
值：
submit：创建提交按钮，点击后会提交包含该按钮的表单。
reset：创建重置按钮，点击后会重置包含该按钮的表单。
button：创建普通按钮，点击后不会触发表单的提交或重置动作。
用法：<button type="submit|reset|button">
name（名称）：
描述：定义按钮的名称，用于标识表单数据在提交时的字段名。
用法：<button name="button_name" type="submit">Click me</button>
id（标识）：
描述：为按钮指定一个唯一的标识符，通常用于通过JavaScript或CSS选择特定的按钮。
用法：<button id="button_id" type="reset">Reset</button>
alt（替代文本）：
描述：为按钮指定替代文本，通常用于图像按钮，表示图像的替代文本。
用法：<button type="submit" alt="Submit Form">Submit</button>
value（值）：
描述：设置按钮的值。在type="submit"时，该值将作为表单提交时的按钮值；在type="reset"时，该值用于显示在按钮上；在type="button"时，该值用于表示按钮的内容。
用法：<button type="submit" value="submit_value">Submit</button>
<button>元素允许更灵活的按钮内容和样式，可以包含文本、图像等。根据type属性的不同值，按钮的行为会有所不同。例如，type="submit"的按钮会触发表单的提交，而type="button"的按钮只是执行JavaScript或其他客户端脚本而不会触发表单提交。

42.Accessibility & Forms

（1）<label> Element:
描述： <label>元素用于为表单控件（如输入框、复选框、单选按钮等）提供标签。这不仅有助于提高可访问性，还改善了用户体验。
示例：
<label for="username">Username:</label>
<input type="text" id="username" name="username">
格式 1：
在这个格式中，<input> 元素嵌套在 <label> 元素内部，标签文本包含在 <label> 标签中。
<label>Email: <input type="text" name="email" id="email"></label>
在这个例子中，标签文本 "Email:" 直接与电子邮件输入字段相关联。这个格式简洁易读，因为标签文本与表单控件放置在一起。
格式 2：
在这个格式中，<label> 元素有一个 for 属性，该属性与关联表单控件的 id 属性匹配。
<label for="email">Email: </label>
<input type="text" name="CustEmail" id="email">
在这个例子中，<label> 的 for 属性指定了它与哪个表单控件关联。输入字段的 id 属性与标签的 for 属性匹配。这个格式在标签和表单控件之间提供了更清晰的分离，这有助于样式和脚本。
这两种格式实现了相同的效果：将标签与表单控件关联起来。选择使用哪种格式取决于个人喜好和 HTML 结构或样式的特定要求。
（2）<fieldset> Element:
描述： <fieldset>元素用于将相关的表单元素进行分组，并提供一个可选的标题（<legend>）来描述该组的内容。它有助于提高表单的结构和可读性。
示例：
<fieldset>
<legend>Personal Information</legend>

</fieldset>
（3）<legend> Element:
描述： <legend>元素用于为<fieldset>元素提供一个标题，以描述包含在<fieldset>中的相关表单元素的内容。
示例：
<fieldset>
<legend>Account Information</legend>

</fieldset>
（4）tabindex Attribute:
描述： tabindex属性用于指定元素在通过键盘导航时的顺序。通过设置tabindex，可以定义用户通过Tab键访问页面上的元素的顺序。
示例：
<input type="text" tabindex="1">
<input type="button" tabindex="2">
如这个例子：
<input type="text" name="CustEmail" id="CustEmail" tabindex="1">
tabindex 属性被设置为 "1"。这意味着当用户按下 Tab 键在页面上导航时，具有 id 为 "CustEmail" 的这个文本输入字段 (<input type="text">) 将首先接收焦点，因为它在页面上的元素中具有最低的 tabindex 值。随后的元素将按照它们的 tabindex 值的升序接收焦点。如果多个元素有相同的 tabindex 值，则它们按照它们在 HTML 中出现的顺序接收焦点。
（5）accesskey Attribute:
描述： accesskey属性用于为元素分配一个键盘快捷键。通过按下与accesskey相关的键和浏览器定义的修饰键，用户可以直接访问具有accesskey属性的元素。
示例：
<a href="#" accesskey="H">Home</a>
<button type="submit" accesskey="S">Submit</button>
如这个例子：
<input type="text" name="CustEmail" id="CustEmail" accesskey="E">
这意味着用户可以按下键盘上的 "Alt" 键（在大多数浏览器中）加上 "E" 键的组合，以将焦点移动到具有 accesskey 属性的这个文本输入字段 (<input type="text">)。在 Windows 系统上，用户可以按下 "Alt" + "E" 组合来实现这个效果。
这些元素和属性有助于增强表单的可访问性、结构性和用户体验。 <label>和<legend>提供可读性更好的标签，<fieldset>帮助组织相关的表单元素，而tabindex和accesskey提供了键盘导航的控制。

43.Server-Side Processing

服务端处理（Server-Side Processing）指的是在 Web 开发中，Web 浏览器向 Web 服务器请求网页及其相关文件的过程。整个过程可以分为以下几个步骤：
（1）浏览器请求：您的 Web 浏览器向 Web 服务器发出请求，请求特定的网页或其他资源文件（例如图像、样式表、脚本等）。
（2）服务器响应： Web 服务器接收到浏览器的请求后，会根据请求的内容和路径定位相关的文件。一旦找到这些文件，服务器会将它们打包成响应（Response）并发送回浏览器。
（3）浏览器渲染：您的 Web 浏览器接收到来自服务器的响应后，开始解析和渲染这些文件。这包括解析 HTML、应用样式表（CSS）、执行脚本（JavaScript）等操作。
（4）显示页面：最终，浏览器根据解析和渲染的结果，将请求的网页显示在用户的屏幕上。这包括网页的文本、图像、交互元素等。
整个过程中，服务端处理主要涉及到 Web 服务器端的操作，它负责响应浏览器的请求、定位文件、执行服务器端的逻辑（如果有的话），并将所需的资源发送回浏览器。客户端（浏览器）负责接收并渲染来自服务器的响应，最终呈现给用户。这种分布式的处理方式使得 Web 应用能够动态地响应用户的请求，并提供丰富的交互和内容。

44.Server-Side Scripting

Server-Side Scripting（服务器端脚本）是一种技术，其中服务器端的脚本嵌入到以诸如以下文件扩展名保存的 Web 页面文档中：
.php（PHP）
.asp（Active Server Pages）
.cfm（Adobe ColdFusion）
.jsp（Sun JavaServer Pages）
.aspx（ASP.Net）
服务器端脚本的作用是在服务端执行，而不是在用户的浏览器中执行。这些脚本通常嵌入到 HTML 页面中，可以用于生成动态内容、处理用户输入、访问数据库等。每种扩展名都关联着一种特定的服务器端脚本语言。
服务器端脚本的一般工作流程如下：
（1）用户请求页面：用户在浏览器中请求一个包含服务器端脚本的页面。
（2）服务器执行脚本：服务器端脚本由服务器直接执行，或者由服务器上的扩展模块执行。脚本可以包含业务逻辑、数据库访问、文件操作等。
（3）生成动态内容：脚本生成动态内容，可以是 HTML、XML、JSON 等格式，具体内容取决于脚本的逻辑。
（4）发送响应：生成的动态内容作为响应发送回用户的浏览器。
（5）浏览器渲染：用户的浏览器接收到响应后，渲染显示页面。用户看到的内容是由服务器端脚本动态生成的，可以根据用户请求和其他条件进行调整。
这种方式使得 Web 开发者能够创建更动态、交互性强的网页，同时通过服务器端脚本处理业务逻辑，访问数据库等。
Sending information to a Server-side Script
发送信息到服务器端脚本
<form method="post" action="http://webdevbasics.net/scripts/demo.php">
<form> 元素：定义了一个 HTML 表单，用户可以在其中输入信息并提交给服务器端脚本进行处理。
method="post"：指定了表单提交时使用的 HTTP 请求方法为 POST。POST 方法将表单数据包含在请求的正文中，适用于传输较大量的数据，且相对于 GET 方法更安全。
action="http://webdevbasics.net/scripts/demo.php"：指定了表单数据在提交时将被发送到的服务器端脚本的 URL 地址。在这个例子中，数据将被发送到名为 "demo.php" 的服务器端脚本，该脚本位于 "http://webdevbasics.net/scripts/" 目录下。
这段 HTML 代码定义了一个使用 POST 方法提交的表单，用户在该表单中输入的信息将被发送到指定的服务器端脚本 "demo.php" 进行处理。这通常是用户通过填写表单来与服务器进行交互的基本形式，服务器端脚本可以处理这些数据并执行相应的操作，例如存储到数据库、生成动态内容等。

45.Steps in Utilizing Server-Side Processing

利用服务器端处理的过程涉及以下几个步骤：
（1）Web 页面调用：
这个过程开始于用户与网页进行交互，通常是通过提交表单或点击超链接。
表单可能包含用户输入的数据，而超链接可能携带参数或表示所需的操作。
（2）服务器端脚本执行：
Web 服务器接收到用户的请求，识别与表单或超链接中指定操作相关的服务器端脚本。
服务器执行服务器端脚本，该脚本通常用一种服务器端脚本语言编写，例如 PHP、ASP、ColdFusion、JSP 等。
（3）访问资源：
一旦执行了服务器端脚本，它可以访问各种资源，如数据库、文件或其他进程。
（4）Web 服务器返回网页：
服务器端脚本根据执行结果生成相应的信息或数据。
Web 服务器将包含所请求信息或操作确认的网页返回给用户。
这个过程允许通过表单提交或超链接点击等方式触发服务器端处理，服务器端脚本可以执行各种操作，包括访问数据库、处理文件、生成动态内容等。
最终，用户会收到包含所请求信息的网页或操作成功的确认。

46.CGI：Common Gateway Interface

CGI（Common Gateway Interface）是一种用于 Web 服务器与应用程序之间进行通信的协议。它允许 Web 服务器将用户的请求传递给应用程序，然后接收应用程序提供的信息并将其发送回用户。
具体而言，CGI 充当了 Web 服务器和应用程序之间的桥梁，它定义了一种标准的方式，使得 Web 服务器能够与外部应用程序进行交互。当用户在浏览器中请求一个特定的网页或资源时，Web 服务器可以使用 CGI 将请求传递给一个独立的应用程序或脚本，这个应用程序会处理请求并生成相应的响应。
CGI 协议使用环境变量和标准输入/输出来传递信息。例如，用户提交一个包含表单数据的 HTML 表单，Web 服务器可以使用 CGI 将这些数据传递给一个处理脚本，脚本再生成相应的 HTML 页面，最后由 Web 服务器将这个页面返回给用户。
总体而言，CGI 是一种早期的 Web 技术，虽然在今天被更先进的技术（如服务器端脚本和应用程序框架）所取代，但仍然在某些环境中被使用。

47.JavaScript基础

（1）JavaScript最初由Netscape公司的Brendan Eich（布兰登﹒艾奇）设计，最初命名为LiveScript，是一种动态、弱类型、基于原型的语言。
（2）JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中，能给HTML网页添加动态功能，响应用户各种操作。
（3）JavaScript具有如下特点：
1.简单性(小程序、无须编译、解释性、弱数据类型)
2.安全性( Browser无法访问本地硬盘数据/写入到数据库)
3.动态性（JS可以直接对用户提交的信息作出回应）
4.跨平台性（支持JS的Browser）
（4）基本语法：
<script type=“text/javascript [src=“外部JS文件”]>js语句块;</script>或
<script language=“javascript [src=“外部JS文件”]>js语句块;</script>
<script type=“text/javascript src=“外部JS文件”></script>
注：引用文件后，此时在< script ></script >标记之间的所有JS语句都被忽略，不会执行。
（5）放置：
JavaScript代码放置有4种情形:
[1]头部;
注：JS脚本插入在头部时，JavaScript通常需要定义为函数格式，格式：
function 函数名(参数1,参数2,…，参数n){函数体语句;}。
<html>
<head>
<title>调用head中定义的JavaScript函数</title>
<script type="text/javascript">
function message() {
alert("调用head中定义的JavaScript函数！");
}
</script>
</head>
<body>
<h4>head标记内定义的JavaScript函数</h4>
<form><input name="btnCallJS" type="button" οnclick="message();" value="事件调用自定义函数"></form>
</body>
</html>

[2]主体;
<html>
<head>
<title>主体部分JavaScript</title>
</head>
<body>
<script type="text/javascript" >
alert(“JS放置在主体中，直接运行！”);
</script>
</body>
</html>

48.Javascript程序

JavaScript程序由语句、函数、对象、方法、属性等构成，程序结构包括顺序、分支和循环三种基本结构。
（1）语句和语句块
JavaScript语句是发送给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。
例如：alert(“这是告警消息框!”);
JavaScript语句可以分批组合起来形成语句块，语句块以左花括号“{”开始，以右花括号“}”束。
例如：{var s=0;document.write(“S的值=”+s);}
（2）代码
JavaScript代码是由若干条语句或语句块构成的执行体。
（3）消息对话框（不需要加对象声明）
[1]警告框alert (message)
<html>
<head>
<title>告警消息框使用实例</title>
</head>
<body>
<script type="text/javascript">
alert("这是告警消息框！");
</script>
</body>
</html>

49.Javascript标识符与变量

（1）标识符
[1]必须使用字母或者下划线开始。
[2]必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
[3]不能使用JavaScript关键字与JavaScript保留字。
[4]不能使用JavaScript语言内部的单词，比如Infinity，NaN，undefined等。
[5]大小写敏感，如name和Name是不同的两个标识符。
（2）关键字
JavaScript的关键字（语句执行属于关键字）
break     case     catch     continue     default
delete    do    else    finally    for
function    if    in    instanceof    new
return    switch    this    throw    try
typeof    var    void    while    with
（3）保留字（数据类型属于保留字）
JavaScript的保留字
abstract     boolean     byte     char     class
const    debugger    double    enum    export
extends    final    float    goto    implements
import    int    interface    long    native
package    private    protected    public    short
static    super    synchronized    throws    transient
volatile
（4）数据类型
JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。
数据类型之间可以通过函数进行转换。
Nnumber(value):把值转换成数字（整型或浮点数）
String(value):把值转换成字符串
Boolean(value):把值转换成Boolean类型
[1]字符型
字符型数据又称为字符串，由若干个字符组成，并且用单引号或双引号封装起来，如“你好！”、‘你好！’、“学习‘语言’”。
在使用字符串的过程中，需要注意单引号、双引号必须成对使用相互包含，但不能交叉。
[2]数值型
分为整型、浮点型、内部常量以及特殊值。
整型数值即整数，例如100、-3500、0等都是整数。
整数表示方法有十进制表示、八进制和十六进制的方式表示。
使用0打头的整数是八进制整数，如017，-035等都是合法的八进制整数。（负号也OK）
使用0x后0X打头的整数是十六进制整数，如0x16，0X3A89等都是合法的十六进制整数。
浮点数，例如3.53、-534.87等都是浮点型数值。浮点数还可以采用科学计数法进行表示，如3.5E15表示3.5×1015。
[3]内部常量
Math.E(自然对数的底数e)、Math.PI等。
[4]特殊值
Infinity（∞）、NaN-Not a Number。
<script type="text/javascript">
var i = 304;
var f = 3.87;
var s = 8.1e3;
var o = 034;
var h = 0x2A;
document.write("十进制整型数304的输出结果："+i+"<br>");//304
document.write("十进制浮点型数3.87的输出结果："+f+"<br>");//3.87
document.write("十进制数科学计数法8.1e3的输出结果："+s+"<br>");//8100
document.write("八进制整型数034的输出结果："+o+"<br>");//28
document.write("十六进制整型数0x2A的输出结果："+h+"<br>");//42
</script>
//输出全是10进制数，在JavaScript中，整数直接表示时，默认是十进制的
[5]布尔型
Boolean（布尔型）是一种只含有true和false这两个值的数据类型，通常来说，布尔型数据表示“真”或“假”。
JavaScript中，通常采用true和false表示布尔型数据，但也可将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。
[6]NULL
null,表示空,不是0，0是有值的。
[7]Undefined
变量创建后未赋值（数字：NaN；字符串：Undefined；Boolean:false）。
[8]Object
也是JS的重要组成部分，如date、window、document等，在后面介绍。
（5）变量
变量：可以保存执行时变化的值的名字，称为“变量”，变量是存储信息的容器。
格式： var 变量名 [=初值][,变量名[=初值] …] ；
var作用：声明或创建变量，变量命名要“见名知意”。
具有良好编程习惯的程序员应该“先声明变量再使用”
例如： var area = 0;
var area=0，y=2,str1=“欢迎你学习JS”;
area = 3.14*radius*radius;
var status = true;
var a,b,c;
name="张华"; //向未声明的变量赋值
（6）转义字符
如果在字符串中涉及到一些特殊字符如“\”、“"”、“'”等，这些字符无法直接使用，需要采用转义字符的方式。
转义字符   代表含义   转义字符   代表含义
\b   退格符   \t   水平制表符
\f   换页符   \'   单引号
\n   换行符   \"   双引号
\r   回车符   \\   反斜线
例如：alert("姓名:王二\n班级:11计算机1班\r专业:计科系");

50.Javascript运算符和表达式

JavaScript运算符主要有：算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、逗号运算符和位运算符等。
根据操作数的个数，将运算符分为一元运算符、二元运算符和三元运算符。
由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”，最简单的表达式可以是常量名称。
对应的表达式包括：算术表达式、关系表达式、逻辑表达式、赋值表达式、自增、自减表达式、逗号表达式、条件表达式、位表达式。
（1）算术运算符和表达式
算术运算符
运算符   描述   例子（假定a = 2）   结果
+   加   b = a+2   b = 4
-   减   b = a -1   b = 1
*   乘   b = a * 2   b = 4
/   除   b = a / 2   b = 1
%   取模   b = a%2    b = 0
++   自增   b = a++（后置，先使用再运算）   b = 2
--   自减   b = - -a（前置，先运算再使用）   b = 1
（2）关系运算符和表达式
运算符   >   <   >=   <=   !=   ==   ===   !==
名称   大于小于大于或等于小于或等于不等于等于恒等于   不恒等于
表达式   6>5   6<5   6>=5   6<=5   6!=5   6==5   5==="5"   5!=="5"
结果   true   false   true   false   true   false   false   true
判断内容   数值   数值   数值   数值   数值   数值数值与类型数值与类型
=与==的区别：=是赋值运算符，==是等于运算符
===与!==：===恒等于，不仅判断数值，而且判断类型
（3）关系运算符和表达式
相等性判断的特殊情况一览表
表达式   值   表达式   值   表达式   值
null== undefined   true   "NaN" == NaN   false   false == 0   true
null == 0   false   NaN != NaN   true   true == 1   true
undefined == 0   false   NaN == NaN   false   true == 2   false
5 == NaN   false   "5" == 5   true
（4）逻辑运算符和表达式
逻辑运算符
a   b   !a（非）   a||b或   a&&b与
true   true   false   true   true
true   false   false   true   false
false   true   true   true   false
false   false   true   false   false
（5）赋值运算符和表达式
运算符   =   +=   -=   *=   /=   %=
名称   赋值   加法赋值   减法赋值   乘法赋值   除法赋值   模赋值(求余赋值)
表达式   i=6   i+=5   i-=5   i*=5   i/=5   i%=5
示例
   var i=6;   i+=5;   i-=5;   i*=5;   i/=5;   i%=5;
i的结果   6   11   1   30   1.2   1
等价于        i=i+5;   i=i-5;   i=i*5;   i=i/5;   i=i%5;
位移   a=4   <<=   >>=   >>>=
表达式       a<<=1   a>>=1   a>>>=1
a结果       a=8   a=2   a=2
（6）位运算符和表达式
位运算符：&-按位与；~ -按位非；|-按位或；^-按位异或
其中位运算~， NOT 实质上是对数字求负，然后减 1。
（7）条件运算符和表达式
条件运算符是一个3元运算符，也就是该运算涉及3个操作数。
变量=布尔表达式 ? 真值表达式 : 假值表达式
var variable = boolean_expression ? true_value : false_value;
（8）其它运算符和表达式
[1]逗号运算符（,）
var x=1 , y=2 , z=3;
x=y+z , y=x+z;
[2]新建对象运算符（new）
var str1=new String();var stu=new Array();
[3]删除运算符（delete）
删除运算符是一个一元运算符，用于删除一个对象的属性或某个数组的元素。delete array[30],delete object.height
[4]类型运算符（typeof）
typeof(300),typeof("Welcome to You!")

51.Javascript程序控制结构

JavaScript程序设计分为两种:面向过程和面向对象的程序设计。每种方式都是对数据结构和算法的描述。
程序控制结构：顺序结构、分支结构和循环结构。
（1）顺序结构
<html>
   <head>
       <title>顺序结构使用实例</title>
   </head>
   <body>
       <script type="text/javascript">
           var radius = 6;
           var circumference = 2 * Math.PI * radius;
           var area = Math.PI * radius * radius;
           alert("圆的周长为" + circumference+"\n"+"圆的面积为" + area);
       </script>
   </body>
</html>

（2）分支结构
[1]if 语句（单条件单分支）：在一个指定的条件成立时执行代码。
<script type="text/javascript">
var x=78；
   if (x>=60)
   {alert(“1-通过考试！");}
   alert(“2-程序结束！");
</script>
[2]if...else 语句（单条件双分支）：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
<script type="text/javascript">
//判断成绩是否通过
var x=55;
if (x>=60){
alert("1--考试通过！");}
else{
alert("2--55分\n\r考试未通过！");}
alert("3--程序结束！");
</script>
[3]if...else if....else 语句（多条件多分支）：使用这个语句可以选择执行若干块代码中的一个。
<script type=“text/javascript”>
var x=85;
if (x>=90)
{alert("1--成绩为\"优秀\"！");}
else if (x>=80)
{alert("2--成绩为\"良好\"！");}
else if (x>=70)
{alert("3--成绩为\"中等\"！");}
else if (x>=60)
{alert("4--成绩为\"合格\"！");}
else{alert("5--成绩为\"不及格\"！");}
alert("6--程序结束！");
</script>
[4]switch 语句（单条件多分支）：使用这个语句可以选择执行若干块代码中的一个。
<script type="text/javascript"> var X=80；
if (x>=90){level=1};
if (x<90 && x>=80){level=2};
if (x<80 && x>=70){level=3};
if (x<70 && x>=60){level=4};
if (x<60){level=5};
switch (level) {
case 1:{alert("1--成绩为\"优秀\"！");break;}
case 2:{alert("2--成绩为\"良好\"！");break;}
case 3:{alert("3--成绩为\"中等\"！");break;}
case 4:{alert("4--成绩为\"合格\"！");break;}
default:{alert("5--成绩为\"不及格\"！");} }
</script>

（3）循环结构
[1]FOR
<script type="text/javascript">
//计算1+2+...+n的和
var n=prompt("输入整数N：",1);
//sum=0;
if (n!=null)
{
for (sum=0,i=1;i<=n ;i++ )
{ sum=sum+i;
document.write("<br>"+sum);
}
}
alert("1+2+...+N="+sum);
</script>
[2]WHILE
<script type="text/javascript">
//计算1+2+...+n的和
var n=prompt("请输入整数N",1);
var i=1,sum=0; //逗号运算符
if (n!=null)
{
while (i<=n)
{ sum=sum+i; i++;   }
alert("1+2+...+N="+sum);
}
</script>
[3]DO-WHILE
<script type="text/javascript">
//计算1+2+...+n的和
var n=prompt("输入整数N",1);
var i=1,sum=0; //逗号运算符
if (n!=null)
{
do
{ sum=sum+i; i++;
}while(i<=n)
alert("1+2+...+N="+sum);
}
</script>
[4]FOR-IN
该循环用来对数组或对象的属性进行操作的。
<script type="text/javascript">
           var i = 1;
           document.write("document对象所有属性名称/属性值：<br/>");
           for (property in document){
               document.write(i+"."+property+"/"+document[property]+"  ");
               if (i % 2 ==0) {document.write("<br/>");} //每行输出2列数据
           i++;
           }
       </script>

[5]循环的嵌套
<script type="text/javascript">
document.write("九九乘法表<br>");
var i=1,j=1;
for (i=1;i<=9 ;i++ )
{ //九九方阵
for (j=1;j<=i ;j++ )
{ document.write(j+"*"+i+"="+i*j+"  ");
}
document.write("<br>");
}
</script>
[6]break/contiune
break作用:立即结束循环并转到循环后续语句执行。
continue作用:结束本次循环，其后的语句本次不再执行，开始下一次的循环。

52.Javascript函数

函数需要先定义后使用，JavaScript函数一般定义在HTML文件的头部head标记或外部JS文件中，而函数的调用可以在HTML文件的主体body标记中任何位置。
常用系统内部函数又称为内部函数（内部方法），与任何对象无关，可以直接使用。
（1）常用系统函数
[1]返回字符串表达式中的值：eval（字符串表达式）
返回值：表达式的值或“undefined”。
<script type="text/javascript">
           eval("x=20;y=30;document.write('x为'+x+',y为'+y+',x*y的值为'+x*y)");
           document.write("<br/>");
           document.write("2+2的值为"+eval("2+2"));//4
           var abce; //声明变量未赋值
document.write("<br/>abce的值为"+eval(abce));//undefined
</script>
[2]返回字符的编码：escape(字符串)
escape 函数将参数字符串中的特定字符(ISO-Latin-1 字符集)进行编码，并返回一个编码后的字符串。它可以对空格、标点符号及其他非ASCII字母表的字符进行编码，除了以下字符：“* @ - _ + . / ”。
[3]返回字符串ASCII码:unescape (string)
[4]返回实数:parseFloat(string);
<script type="text/javascript">
document.write("\"100\"转换后为："+parseFloat("100")+"<br/>");//100
document.write("\"100.00\"转换后为："+parseFloat("100.00")+"<br/>");//100
document.write("\"100.88\"转换后为："+parseFloat("100.88")+"<br/>");//100.88
document.write("\"12 34 56\"转换后为："+parseFloat("12 34 56")+"<br/>");
//12
document.write("\" 60 \"转换后为："+parseFloat(" 60 ")+"<br/>");
//60
document.write("\"40 years\"转换后为："+parseFloat("40 years")+"<br/>");
//40
document.write("\"这件衣服100元\"转换后为："+parseFloat("这件衣服100元")+"<br/>");
//NaN（因为没空格）
</script>
[5]返回不同进制的数:parseInt(numbestring , radix);
字符串以“0x”开始-16进制；以“0“开始--8进制；其他--10进制。
[6]判断是否为数值 :isNaN(testValue);
NaN:not a Number （注意大小写）

（2）自定义函数
function 函数名(参数1, 参数2, ... 参数N) {函数体；}
语法说明：
可以没有参数，但括号必须保留、以及包含在大括号内的由若干条语句构成的函数体。
不能在其他语句或其自身中嵌套function语句，也就是说，每个函数声明都是独立的。
函数名（参数），形参是用来接收函数调用者传递过来的实参。
调用实参与形参要一一对应，主要表现在类型、顺序、数量、内容要一致。
由于js是弱类型脚本语言，函数的参数没有类型检查和类型限制，要求编程者自查。
每一个函数体内都内置地存在着一个对象arguments，它是一个类似数组的对象，通过它可以查看函数当前有几个传递来的参数（并非定义的形式参数），各个参数的值是什么。
<html>
<head>
<title>return语句返回计算结果</title>
<script type="text/javascript">
function plus(a,b,c){return a+b+c; //返回累加和}
</script>
</head>
<body>
<script type="text/javascript">
document.write("3+4+5结果为："+plus(3,4,5));
</script>
</body>
</html>

53.JAVASCRIPT常用对象

JavaScript的对象类型（分为4类）：
（1）本地对象（native object），本身提供的类型，如Math等，这种对象无需具体定义，直接就可以通过名称引用它们的属性和方法，如Math.Random()；
[1]Math
Math 对象提供多种算术常量和函数，执行普通的算术任务。可以直接通过“Math”名来使用它提供的属性和方法。
var area=Math.PI*radius*radius ;//计算圆的面积
var r= Math.random(); //生成介于 0.0 - 1.0之随机数
var s3=sqrt(10); //10的平方根，值小于0，则返回 NaN。其他函数：
Math.max(x,y):返回 x 和 y 中的最高值。
var max=Math.max(100,200,300);//max=300
Math.min(x,y):返回 x 和 y 中的最低值。
var min=Math.min(1,45,67);//min=1
Math.pow(x,y):返回 x 的 y 次幂(xy)。
ceil()：对数进行上舍入。 Var x=Math.ceil(10.5);//x=11
floor()：对数进行下舍入。Var x=Math.floor(10.5);//x=10
round()：把数四舍五入为最接近的整数。
var x=Math.round(10.5); //x=10,
var y=Math.round(-10.5);//y=-10
exp() ：返回 e 的指数。
var x=Math.exp(1);//x=2.718
log()：返回数的自然对数（底为e）。
pow(x,y) ：返回 x 的 y 次幂。
产生某一区间数据方法：[m,n]
var num=Math.round(Math.random()*(n-m)+m)
[2]NUMBER
(1)按指定进制将数值转换为字符串
toString(radix)
如： var x=10;
var s=x.toString(2) ; //s=1010
var s1=x.toString(8); //s1=12
(2)将Nmber四舍五入为指定小数点的数字
toFixed(n) ：固定小数点的位数
如： var x=10.24523;
var y=x.toFixed(2); //y=10.25

（2）内建对象（built-in object），如Array, String等。这些对象独立于宿主环境，在JavaScript程序中由程序员定义具体对象，并可以通过对象名来使用；
[1]ARRAY
数组对象用来在单独的变量名中存储一系列的值。通过声明一个数组，将相关的数据存入数组，使用循环等结构对数组中的每个元素进行操作(使用循环体的语句体)。
定义数组并直接初始化数组元素//var 弱变量
var course = new Array ("C++程序设计","HTML开发基础","数据库原理","计算机网络");
var course = ["C++程序设计","HTML开发基础","数据库原理","计算机网络"];
先定义数组，后初始化数组元素
var course = new Array();
course[0] = "C++程序设计";//圆括号，还无定义数组
course[1] = "HTML开发基础";//方括号直接赋数组
course[2] = "数据库原理";
course[3] = "计算机网络";
数组下标可以用变量替代，但变更的取值范围必须符合数组下标的边界，否则返回undefined 。（越界返回undefined）
可以用再赋值的方式来修改数组对应位置的元素。
length：数组对象长度；
join(separator)：把数组各个项用某个字符(串)连接起来，但并不修改原来的数组，默认用逗号分隔。
例如：
var cn=course.join('-'); //短横线作为分隔符
Cn的值为“Java程序设计-HTML开发基础-数据库原理-计算机网络”。
pop()：删除并返回数组的最后一个元素。
例如var cn=course.pop();
则变量cn获得的值是“计算机网络”。
push(newelement1,.,newelementX)：可向数组的末尾添加一个或多个元素，并返回新的长度。
例如：var length=course.push("软件工程","人工智能");
则变量length获得的值6。
shift()：用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var ss=course1.shift();
unshift(newelement1,newelement2,....,newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
var s= course2.unshift(“大学语文”)；//s=5
其它方法:sort()、reverse()、toString()等。
[2]DATE
JavaScript 脚本内置了核心对象Date，该对象可以表示从毫秒到年的所有时间和日期，并提供了一系列操作时间和日期的方法。
生成日期对象
var MyDate = new Date();
var MyDate = new Date(milliseconds);
var MyDate = new Date(string);
var MyDate = new Date(year,month,day,hours,minutes,seconds,milliseconds);
应用举例
var birthday = new Date(“December 17, 1991 03:24:00”); birthday = new Date(1991,11,17);
提取日期字段方法:
方法名   说明
getDate()   从Date对象返回一个月中的某一天(1～31)。
getDay()   从Date对象返回一周中的某一天(0～6)。//一周第一天(0)为周日
getMonth()   从Date对象返回月份(0～11)。//注意月份加一操作
getFullYear()   从Date对象以四位数字返回年份。
getHours()   返回Date对象的小时(0～23)。
getMinutes()   返回Date对象的分钟(0～ 59)。
getSeconds()   返回Date对象的秒数(0～ 59)。
getMilliseconds()   返回Date对象的毫秒(0～999)。
getTime()   返回至今的毫秒数。
日期转换与调整:
将日期转化为字符串较
today.toString():把Date对象转换为字符串
today.toLocaleString():转换为本地时间串
today.toDateString();//日期部分转为字符串
today.toTimeString();//时间部分转为字符串
调整日期对象的日期和时间
var today = new Date();
today.setDate(today.getDate()+5); //将日期调整到5天以后，如果碰到跨年月，自动调整,setDate不会改动计算机的时钟
today.setFullYear(2007,10,1); //调整today对象到2007-10-1，月和日期参数可以省略

[3]STRING
1)两种不同的定义字符串对象的方式
var s1 = "Welcome to you!";
var s2 = new String("Welcome to you!");
2) 获取字符串的长度
每个字符串都有一个length属性来说明该字符串的字符个数，例如：
var s1 = "Welcome to you!";
var len = s1.length; // s1.length返回15，也就是s1所指向的字符串中有15个字符
3) charAt()：获取字符串中指定位置的字符
该方法可以获得一个字符串指定位置上的字符。
s1=“welcome to you”;var ch = s1. charAt(3);
4) indexOf(searchvalue,fromindex)：字串查找。
子字符串，搜索起始位置，方向：从前向后搜索，找到返回具体位置数值，未找到返回-1。
5)lastIndexOf(searchvalue,fromindex)：字串查找。
子字符串，搜索起始位置，方向：从后向前搜索，找到返回具体位置数值，未找到返回-1。
6) split():字符串的分割
split() 方法用于把一个字符串分割成字符串数组。默认按字符分割。
7)其他函数
字符串的显示风格
big() ：变大些； small()：变小些；
fontsize()：字体大小； fontcolor()：字体颜色；
bold() ：变粗些；italics()：斜体；
sub()：下标；up()：下标
大小写转换
toLowerCase()：把字符串转换为小写
toUpperCase()：把字符串转换为大写
[4]BOOLEAN
Boolean对象
var bo=new boolean(value);
var bo1=boolean(value);
参数为下列情况时返回true
1、true、”true”、”false”、”dfaf a”（！字符串返回true）
参数为下列情况时返回flase
0、null、false、NaN、””、空
（3）宿主对象（host object）是被浏览器支持的, 目的是为了能和被浏览的文档乃至浏览器环境交互，如document, window 和 frames等；
（4）自定义对象，是程序员基于需要自己定义的对象类型。

54.HTML DOM

（1）DOM（Document Object Model）模型
整个文档是一个文档节点；
每个 HTML 标签是一个元素节点；
包含在 HTML 元素中的文本是文本节点；
每一个 HTML 属性是一个属性节点；
注释属于注释节点。
HTML文档来主要节点：
元素节点 (Element Node ), <html>,<head>、<body>、<h1>、<p>和<ul>等标签都是元素节点。
文本节点(Text Node),文本节点包含在元素节点内，如h1、p、li等节点就可以包含一些文本节点。
属性节点(Attribute Node),属性节点总是被包含在元素节点当中，可以通过元素节点对象调用getAttribute( )方法来获取属性节点。
（2）DOM节点访问
[1]通过getElementById( )方法访问节点
var s=document.getElementById(id);
语法： document.getElementById(id)
参数： id必选项，为字符串(String)
返回值：对象或null(无符合条件的对象)
例如：
var userName=document.getElementById("userName").value;
注意：
最好为需要交互的元素设定一个唯一的id，以便查找；
getElementById()返回的是一个页面元素的引用.
元素ID引用时，必须加引号，如“userName”，否则易引起语法错误，缺少对象。
[2]通过getElementsByName ( )方法访问节点
var s=document.getElementByName(name);
语法： document.getElementsByName(name)
参数： name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
例如：
var userNameInput=document.getElementsByName("userName");
var userName=userNameInput[0].value;
使用该方法需要注意：
该方法返回一个数组，引用元素必须通过下标进行；
如果返回一个长度为0的数组，没有元素；可以通过对象的length属性来判断。
[3]通过getElementsByTagName ( )方法访问节点
var s=document.getElementByTagName(tagname);
语法： document.getElementsByTagName(tagname)
参数： tagname:必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
[4]通过form元素访问节点
var loginform = document.myform;//myform为form对象的名称
var username1=loginform.elements[0];//通过elements属性来访问用户名输入框
var username2=loginform.username;//通过name属性来访问用户名输入框
获得当前页面所有的Form对象
语法： document.forms
参数：无
返回值：数组对象; 如果无符合条件的对象(Form对象)，则返回空数组
例如：var loginform=document.forms[0];
var username=loginform.elements[0];
var password=loginform.elements[1];

55.BOM

客户端浏览器这些预定义的对象统称为浏览器对象，它们按照某种层次组织起来的模型统称为浏览器对象模型（BOM-Browser Object Model）。浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
（1）WINDOW对象
window对象位于浏览器对象模型的顶层，是document、frame、location等其他对象的父类。window对象的常用方法如下表。
方法名   说明
open(url,name,features,replace)   打开新的浏览器窗口或查找一个已命名的窗口。
prompt(“提示信息”，默认值)   显示可提示用户输入的对话框。
blur()   把键盘焦点从顶层窗口移开。
close()   关闭浏览器窗口。
focus()   把键盘焦点给予一个窗口。
setInterval(code,interval)   按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(code,delay)   在指定的毫秒数后调用函数或计算表达式。
clearInterval(intervalID)   取消由setInterval()设置的timeout。
clearTimeout(timeoutID)   取消由setTimeout()方法设置的timeout。
（2）NAVIGATOR对象
navigator对象用于获取用户浏览器的相关信息。
属性名   说明
appName   返回浏览器的名称。
appVersion   返回浏览器的平台和版本信息。
platform   返回运行浏览器的操作系统平台。
systemLanguage   返回操作系统使用的默认语言。
userAgent   返回由客户机发送服务器的user-agent头部的值。
appCodeName   返回浏览器的代码名。
appName   返回浏览器的名称。
appVersion   返回浏览器的平台和版本信息。
（3）HISTORY对象
history对象表示窗口的浏览历史，并由window对象的history属性引用该窗口的history对象。
方法名   说明
forward()   加载history列表中的下一个 URL。
back()   加载history列表中的前一个 URL。
go(number|URL)   加载history列表中的某个具体页面。URL参数指定要访问的URL，number参数指定要访问的URL在history的URL列表中的位置。
在实际开发中，如下使用history方法：
history.back() //与单击浏览器后退按钮执行的操作一样
history.go(-2) //与单击两次浏览器后退按钮执行的操作一样
history.forward() //等价于点击浏览器前进按钮或调用history.go(1)。
（4）LOCATION对象
location对象用来表示浏览器窗口中加载的当前文档的URL，该对象的属性说明了URL中的各个部分。

56.JAVASCRIPT事件处理

（1）事件类型
[1]鼠标单击：例如单击button、选中checkbox和radio等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table的范围；
[2]键盘按键：当按下按键或释放按键时；
[3]HTML事件：例如页面body被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；
[4]突变事件：主要指文档底层元素发生改变时触发的事件，如DomSubtreeModified(DOM子树修改)。
（2）事件句柄
事件句柄是事件发生要进行的操作。onload属性就是我们所说的事件句柄,也称为事件属性。
基本语法：
<标记事件句柄=“JavaScript代码”…></标记>
如： <body οnlοad=“show()”>… </body>
格式： onload =“show();” /*load */

（3）事件处理
事件处理程序在JavaScript中动态指定(分配)：
<事件主角-对象>.<事件>=<事件处理程序>;
obj.οnclick=function(){disp();}
（4）事件处理程序的返回值
在JavaScript中通常事件处理程序不需要有返回值，这时浏览器会按默认方式进行处理；很多情况下需要使用返回值，来判断事件处理程序是否正确进行处理。
返回值类型：boolean布尔型值
浏览器根据返回值的类型决定下一步如何操作。当返回值为true，进行默认操作；当返回值为 false，阻止浏览器的下一步操作。
基本语法：事件句柄=“return 函数名（参数）;"