html css js（这一篇就够了）
htmlHTML（超文本标记语言，HyperText Markup Language）是构建网页的基础语言。它使用标签（Tags）和属性（Attributes）来定义网页的结构和内容显示。下面将从HTML的结构、标签、属性等方面进行详细讲解。
一、HTML的基本结构
一个标准的HTML文档有明确的结构，由文档声明、头部、主体等部分组成。它定义了网页的骨架和各元素的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<link rel="stylesheet" href="styles.css">
</head><meta charset="UTF-8">
<head>
<link rel="stylesheet" href="styles.css">
</head><meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="styles.css">
</head><title>页面标题</title>
</head>
<body>
<head>
<link rel="stylesheet" href="styles.css">
</head>
</body>
</html>1.1 文档声明 ()
[*]声明文档类型，告诉浏览器该文件是HTML5文档，这有助于浏览器解析和渲染网页内容。
1.2标签
[*]定义整个HTML文档的根元素，所有的HTML元素必须包含在标签内。
[*]lang 属性指定网页的语言，便于搜索引擎优化和辅助技术的使用，如 lang="en" 表示英语，lang="zh" 表示中文。
1.3标签
[*]包含页面的元数据（metadata），不会显示在网页上，但对页面的呈现和搜索引擎优化至关重要。
[*]常见的元素包括：
[*]：设置页面字符编码，UTF-8能覆盖全球大部分语言字符。
[*]：优化移动端浏览体验。
[*]：定义网页的标题，会显示在浏览器标签上。
1.4标签
[*]包含网页的可见内容，所有的文本、图片、视频、表格、表单等都在中定义。
二、HTML标签（Tags）
HTML标签用来表示不同的元素，每个标签通常成对出现，包含开始标签和结束标签，中间是元素内容。部分标签是自闭合的，不需要结束标签。
2.1 常见的HTML标签
<ol>文本标签：
[*] - ：表示标题， 是最高级别标题， 是最低级别标题。
[*]
：表示段落。
[*]
：换行标签，不需要结束标签。
[*]<hr>：水平线，表示主题的分隔。
列表标签：
<ul>
：无序列表，用于创建带有圆点的列表项。
[*]：有序列表，用于创建带编号的列表项。
[*]
[*]：列表项，用于在无序或有序列表中定义每一项。
[*]链接和媒体标签：
[*]：超链接标签，用于在网页中创建可点击的链接。常用的属性有 href（链接的目标地址）。
[*]<img>：图像标签，用于在网页中嵌入图片。常用属性包括 src（图片路径）和 alt（图片无法加载时显示的替代文本）。
[*] 和 ：用于在网页中嵌入视频和音频。
[*]表格标签：
[*]：定义一个表格。
[*]：定义表格中的一行。
[*]：定义单元格（表格数据）。
[*]：定义表格头部单元格（表头）。
[*]表单标签：
[*]：定义表单，用于提交用户输入。
[*]：定义各种类型的输入字段，比如文本框、单选按钮、复选框等。
[*]：定义可点击的按钮。
[*] 和 ：定义下拉列表。
三、HTML属性（Attributes）
HTML属性用于为HTML标签提供额外的信息。它们位于标签的开始部分，通常是键值对形式，如：。
3.1 通用属性
这些属性可以应用于大多数HTML元素：
[*]id：定义元素的唯一标识符。例如：这是头部
[*]class：为元素指定一个或多个类名，常用于CSS或JavaScript选择器。例如：<p >加粗文本</p>
[*]style：定义元素的内联样式。例子：<p >这是红色的文字</p>
3.2 特定标签属性
[*] 标签的属性：
[*]href：指定链接的目标URL地址。
[*]target：指定链接如何在浏览器中打开。值 _blank 会在新窗口或新标签页中打开链接。
[*]rel：定义链接与当前文档的关系，常见的有 noopener、nofollow 等。
[*]<img> 标签的属性：
[*]src：指定图片的URL地址。
[*]alt：当图片加载失败时显示的文本，有助于搜索引擎优化和辅助技术（如屏幕阅读器）。
[*]width 和 height：定义图片的显示宽度和高度，可以使用像素或百分比。
[*] 标签的属性：
[*]type：指定输入字段的类型，比如文本（text）、密码（password）、按钮（button）等。
[*]placeholder：在输入字段为空时显示的提示文本。
[*]value：定义默认值。
[*]name：表单提交时的字段名称。
四、HTML中的其他重要概念
4.1 HTML注释
注释不会在浏览器中显示，主要用于给开发者添加说明或备注。HTML注释使用以下格式：
4.2 HTML的语义化
语义化HTML意味着使用具有明确意义的标签来描述内容，这有助于提高网页的可访问性和SEO效果。常见的语义化标签包括：
[*]：定义页面或区块的头部。
[*]：定义导航链接的集合。
[*]：定义文档的主要内容区域。
[*]：定义一个独立的内容区块。
[*]：定义一个独立的内容片段，比如一篇文章或博客。
[*]：定义页面或区块的底部。
4.3 块级元素与行内元素
[*]块级元素：占据一行的全部宽度，并会在前后产生换行。常见的块级元素有 、
、 等。
[*]行内元素：仅占据其内容的宽度，不会产生换行。常见的行内元素有 、、<img> 等。
五、HTML5的新特性
HTML5引入了许多新的标签和API，提升了HTML的功能。
5.1 新的语义标签
[*]：独立的文章或内容块。
[*]：定义侧边栏内容，通常与页面的主要内容相关联。
[*] 和 ：用于包含图像、图表或表格及其标题。
5.2 媒体标签
HTML5支持直接嵌入多媒体内容，而无需依赖第三方插件：
[*]：用于嵌入音频内容。
[*]：用于嵌入视频内容。
5.3 新的表单输入类型
HTML5表单中新增了一些类型，如 email、url、number、date、range 等，简化了表单的验证和用户输入。
css
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档外观的样式表语言。它控制页面的布局、颜色、字体等，使网页的内容和样式分离，从而提高页面的可维护性和灵活性。
一、CSS的基本概念
1.1 CSS语法结构
CSS规则由选择器和声明组成，声明部分包含属性和值。基础语法格式如下：
选择器 {
<head>
<link rel="stylesheet" href="styles.css">
</head>属性: 值;
<head>
<link rel="stylesheet" href="styles.css">
</head>属性: 值;
}例如：
h1 {
<head>
<link rel="stylesheet" href="styles.css">
</head>color: blue;
<head>
<link rel="stylesheet" href="styles.css">
</head>font-size: 24px;
}该CSS规则表示所有 元素的文本颜色设置为蓝色，字体大小设置为24像素。
1.2 CSS的作用方式
CSS可以通过三种方式应用到HTML中：
[*]内联样式：直接在HTML元素的 style 属性中定义样式。
<p >这是红色的文本</p>
[*]
内部样式表：在HTML的标签中通过
[*]外部样式表：通过外部的CSS文件引入样式，通常使用标签将CSS文件链接到HTML文档中。
<head>
<link rel="stylesheet" href="styles.css">
</head>
二、CSS选择器
选择器用于选择HTML元素并应用相应的样式。常见的CSS选择器有以下几种：
2.1 基础选择器
[*]元素选择器：选择所有指定类型的HTML元素。例如，p 选择所有段落：
p { color: black; }
[*]类选择器：选择具有特定类名的元素，使用 . 表示。例如，选择所有的元素：
.intro { font-size: 20px; }
[*]ID选择器：选择具有特定ID的元素，使用 # 表示。例如，选择ID为 header 的元素：
#header { background-color: grey; }
[*]通配符选择器：选择所有HTML元素，使用 * 表示。例如，设置所有元素的字体：
* { font-family: Arial, sans-serif; }
2.2 组合选择器
[*]后代选择器：选择某个元素内部的所有指定后代元素。例如，选择所有位于 div 元素内部的 p 元素：
div p { color: green; }
[*]子选择器：选择父元素的直接子元素，使用 > 表示。例如，选择所有 div 的直接子元素 p：
div > p { color: blue; }
[*]并集选择器：选择多个不同元素，使用逗号 , 分隔。例如，选择所有 h1 和 p 元素：
h1, p { margin: 10px; }
2.3 伪类选择器
伪类用于选择元素的特定状态，如鼠标悬停、已访问链接等。
[*]:hover：鼠标悬停时应用样式。例如，将链接在悬停时变为红色：
a:hover { color: red; }
[*]:focus：选中获得焦点的元素。
input:focus {
border-color: blue;
}
[*]:active：选中被点击的元素。
button:active {
background-color: yellow;
}
[*]:nth-child()：选择元素的特定子元素。例如，选择列表中的第二个 li 元素：
li:nth-child(2) { color: blue; }
2.4.属性选择器
[*]：选中具有指定属性的元素。
{
opacity: 0.5;
}
[*]：选中具有指定属性和值的元素。
{
background-color: blue;
color: white;
}
[*]：选中属性值以指定值开头的元素。
{
color: green;
}
[*]：选中属性值以指定值结尾的元素。
{
border: 1px solid gray;
}
[*]：选中属性值包含指定值的元素。
{
padding: 10px;
}
三、CSS属性（position）
CSS属性用于定义HTML元素的样式，它们按照不同类别分为布局、文本、颜色、背景等。
3.1 文本相关属性
[*]color：设置文本的颜色。可以使用颜色名称、十六进制、RGB或HSL值。
p { color: #ff0000; } /* 红色文本 */
[*]font-size：设置文本的大小，单位可以是 px、em、rem、百分比等。
p { font-size: 16px; }
[*]font-family：设置字体族，通常会列出多个字体供浏览器选择。
p { font-family: Arial, sans-serif; }
[*]text-align：设置文本的对齐方式，可以是 left、right、center 或 justify。
p { text-align: center; }
[*]line-height：设置文本的行高，常用于调整段落内文字的间距。
p { line-height: 1.5; }
3.2 颜色和背景属性
[*]background-color：设置元素的背景颜色。
div { background-color: lightblue; }
[*]background-image：设置元素的背景图片，图片可以是本地路径或网络地址。
div { background-image: url('background.jpg'); }
[*]opacity：设置元素的不透明度，取值范围是0到1。
div { opacity: 0.8; }
3.3 布局相关属性
[*]width 和 height：定义元素的宽度和高度，单位可以是 px、百分比等。
div { width: 200px; height: 100px; }
[*]margin：设置元素的外边距，用来控制元素与周围元素的距离。可以单独设置四个方向的边距。
p { margin: 20px; }
[*]padding：设置元素的内边距，用来控制元素内容与其边框之间的距离。
div { padding: 15px; }
[*]border：设置元素的边框，可以设置边框的宽度、样式和颜色。
div { border: 1px solid black; }
3.4 定位 position 属性
CSS提供了几种不同的定位方式来控制元素的位置。
[*]position：常用的取值包括 static（默认）、relative（相对）、absolute（绝对）、fixed（固定）、sticky（粘性）。
div { position: absolute; top: 50px; left: 100px; }
[*]z-index：控制元素的堆叠顺序，数值越大，元素越靠前。（对 static 属性的不起作用）
div { z-index: 10; }
CSS 中的定位是控制元素在页面上的位置的重要工具。使用 position 属性可以实现不同的定位效果。以下是几种主要的定位类型及其用法：
1. static（默认值）
[*]描述：这是默认定位方式。元素在文档流中按顺序排列。
[*]特点：不受 top、right、bottom、left 属性影响。
.element {
position: static;
}2. relative
[*]描述：相对定位。元素相对于其原始位置进行定位。
[*]特点：元素仍然占据文档流中的位置。可以使用 top、right、bottom、left 属性移动元素。
.element {
position: relative;
top: 10px; /* 向下移动10像素 */
left: 20px; /* 向右移动20像素 */
}3. absolute
[*]描述：绝对定位。元素相对于最近的已定位（即 position 不为 static）的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 html 或 body）。
[*]特点：元素不占据文档流中的空间。
.parent {
position: relative; /* 为子元素提供定位上下文 */
}
.child {
position: absolute;
top: 0; /* 距离父元素顶部0像素 */
left: 0; /* 距离父元素左侧0像素 */
}4. fixed
[*]描述：固定定位。元素相对于浏览器窗口进行定位，不随页面滚动而移动。
[*]特点：通常用于制作固定在视口中的导航条或提示框。
.element {
position: fixed;
top: 10px; /* 距离视口顶部10像素 */
right: 10px; /* 距离视口右侧10像素 */
}5. sticky
[*]描述：粘性定位。元素在特定的阈值内表现为相对定位，一旦滚动超过该阈值，则表现为固定定位。
[*]特点：适用于头部或侧边栏，保持在视口中的某个位置。
.element {
position: sticky;
top: 0; /* 当滚动到该元素时，它会固定在视口顶部 */
}3.5 显示与隐藏属性
[*]display：控制元素的显示方式，常见的取值有 block、inline、inline-block、none。
p { display: block; }
[*]visibility：控制元素的可见性，取值包括 visible 和 hidden。隐藏元素后，它仍占据空间。
div { visibility: hidden; }
四、CSS盒模型（Box Model）
盒模型是CSS布局的基础，它描述了一个HTML元素在页面中占据的空间，包括以下几部分：
[*]内容（content）：元素的实际内容区域。
[*]内边距（padding）：内容与边框之间的距离。
[*]边框（border）：元素的边界。
[*]外边距（margin）：元素与外部元素之间的距离。
盒模型的总宽度和高度计算公式：
元素的总宽度 = content width + padding + border + margin
元素的总高度 = content height + padding + border + marginbox-sizing 属性
CSS 的 box-sizing 属性允许你控制盒模型的计算方式，有两种常用的值：
[*]content-box（默认值）：
[*]默认情况下，box-sizing 属性的值为 content-box。在这种模式下，width 和 height 只应用于内容区域，内边距、边框和外边距会额外增加到元素的总尺寸中。
[*]计算公式：总宽度 = width + padding + border + margin。
[*]border-box：
[*]在这种模式下，width 和 height 包括内容区域、内边距和边框。因此，总宽度和总高度不会受到内边距和边框的影响。
[*]计算公式：总宽度 = width（包含内容、内边距和边框） + margin。
[*]使用 border-box 可以更容易地控制元素的实际尺寸，特别是在需要精确对齐和布局时。
示例：
/* 默认 box-sizing: content-box; */
.box-content-box {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
/* 使用 box-sizing: border-box; */
.box-border-box {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}在 .box-border-box 类中，width 100px 包括了内容、内边距和边框的宽度，因此元素的实际内容区域可能小于 100px。对于 .box-content-box，width 100px 只是内容区域的宽度，内边距和边框会额外增加到总宽度中。
五、CSS布局 （flex和grid）
5.1 浮动布局（float）
float 用于将元素浮动到容器的左侧或右侧，并允许文本或其他元素围绕它布局。
img { float: left; margin-right: 10px; }5.2 清除浮动（clear）
浮动元素可能会影响其父元素和相邻元素的布局。为了解决这种问题，使用 clear 属性来取消浮动的影响。常见的取值为 left、right 或 both，分别清除左、右或两侧的浮动。
.clearfix::after {<head>
<link rel="stylesheet" href="styles.css">
</head>content: "";<head>
<link rel="stylesheet" href="styles.css">
</head>display: block;<head>
<link rel="stylesheet" href="styles.css">
</head>clear: both;}这个 .clearfix 类通常用在浮动元素的父元素上，以确保容器能够正确包裹浮动内容。
5.3 Flexbox布局
Flexbox（弹性盒子模型）是CSS中用于创建复杂布局的一种强大工具。它能轻松控制元素的对齐、排列和分配空白空间。
常见属性：
[*]display: flex;：将容器设为Flex容器。
[*]flex-direction：定义主轴方向，可以设置为 row（水平）、column（垂直）。
[*]flex-wrap：定义是否允许元素换行，取值有 nowrap、wrap、wrap-reverse。
[*]flex-flow:: 是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。
justify-content
[*]作用：用于控制在主轴（通常是水平轴）上，Flex 容器内项目的对齐和分布方式。
[*]取值：
[*]flex-start：将项目对齐到主轴的起始位置（默认值）。
[*]flex-end：将项目对齐到主轴的结束位置。
[*]center：将项目在主轴上居中对齐。
[*]space-between：在项目之间平均分配空间，第一个项目在主轴起始位置，最后一个项目在主轴结束位置。
[*]space-around：在项目之间平均分配空间，但两端的空间也会分配到项目两侧。
[*]space-evenly：在项目之间以及项目两端分配相等的空间。
[*]示例：
.container {
display: flex;
justify-content: center; /* 将项目在主轴上居中对齐 */
}
align-items
[*]作用：用于控制在交叉轴（通常是垂直轴）上，Flex 容器内项目的对齐方式。
[*]取值：
[*]stretch：默认值，使项目在交叉轴方向上拉伸以填充容器。
[*]flex-start：将项目对齐到交叉轴的起始位置。
[*]flex-end：将项目对齐到交叉轴的结束位置。
[*]center：将项目在交叉轴上居中对齐。
[*]baseline：将项目的基线对齐。
[*]示例：
.container {
display: flex;
align-items: center; /* 将项目在交叉轴上居中对齐 */
}
align-content
[*]作用：用于控制在交叉轴上，Flex 容器中所有行的对齐方式（适用于多行的 Flex 布局）。
[*]取值：
[*]flex-start：将所有行对齐到交叉轴的起始位置。
[*]flex-end：将所有行对齐到交叉轴的结束位置。
[*]center：将所有行在交叉轴上居中对齐。
[*]space-between：在行之间平均分配空间，第一个行在交叉轴起始位置，最后一个行在交叉轴结束位置。
[*]space-around：在行之间平均分配空间，但行两端的空间也会分配到行的两侧。
[*]space-evenly：在所有行之间以及行两端分配相等的空间。
[*]stretch：拉伸行以填充容器的交叉轴空间。
[*]示例：
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
align-content: space-around; /* 在交叉轴上均匀分配行间的空间 */
}
详细属性参考文章
5.4 CSS Grid布局
CSS Grid是另一个用于创建复杂布局的强大工具，允许我们通过行和列来定义元素的布局结构。
常见属性：
[*]display: grid;：将容器设为Grid容器。
[*]grid-template-columns 和 grid-template-rows：定义网格的列和行。例如：
.container {<head>
<link rel="stylesheet" href="styles.css">
</head>display: grid;<head>
<link rel="stylesheet" href="styles.css">
</head>grid-template-columns: 1fr 2fr;<head>
<link rel="stylesheet" href="styles.css">
</head>grid-template-rows: 100px 200px;}这表示创建两列和两行的网格，第一列的宽度是第二列的一半。
[*]grid-column 和 grid-row：用于定义元素在网格中的位置。
例如：
.item {<head>
<link rel="stylesheet" href="styles.css">
</head>grid-column: 1 / 3;<head>
<link rel="stylesheet" href="styles.css">
</head>grid-row: 1 / 2;}这段CSS代码将一个元素跨越两列并占据第一行。
justify-items
[*]作用：用于控制 Grid 容器内每个项目在其单元格内的对齐方式，沿着水平轴。
[*]取值：
[*]start：将项目对齐到单元格的起始位置。
[*]end：将项目对齐到单元格的结束位置。
[*]center：将项目在单元格内居中对齐。
[*]stretch：使项目在单元格内拉伸以填充整个单元格（默认值）。
[*]示例：
.grid-container {
display: grid;
justify-items: center; /* 将每个网格项在单元格内居中对齐 */
}
align-items
[*]作用：用于控制 Grid 容器内每个项目在其单元格内的对齐方式，沿着垂直轴。
[*]取值：
[*]start：将项目对齐到单元格的起始位置。
[*]end：将项目对齐到单元格的结束位置。
[*]center：将项目在单元格内垂直居中对齐。
[*]stretch：使项目在单元格内拉伸以填充整个单元格（默认值）。
[*]示例：
.grid-container {
display: grid;
align-items: center; /* 将每个网格项在单元格内垂直居中对齐 */
}
justify-content（在 Grid 布局中）
[*]作用：用于控制 Grid 容器内所有行或列的对齐方式，沿着水平轴。
[*]取值：
[*]start：将所有网格行或列对齐到容器的起始位置。
[*]end：将所有网格行或列对齐到容器的结束位置。
[*]center：将所有网格行或列在容器内居中对齐。
[*]stretch：使网格行或列拉伸以填充整个容器（默认值）。
[*]space-between：在网格行或列之间平均分配空间。
[*]space-around：在网格行或列之间平均分配空间，但容器两端的空间也分配到行或列的两侧。
[*]space-evenly：在所有网格行或列之间以及容器两端分配相等的空间。
[*]示例：
.grid-container {
display: grid;
justify-content: space-between; /* 在网格行或列之间分配空间 */
}
align-content（在 Grid 布局中）
[*]作用：用于控制 Grid 容器内所有行的对齐方式，沿着垂直轴。
[*]取值：
[*]start：将所有网格行对齐到容器的起始位置。
[*]end：将所有网格行对齐到容器的结束位置。
[*]center：将所有网格行在容器内垂直居中对齐。
[*]stretch：使网格行拉伸以填充整个容器（默认值）。
[*]space-between：在网格行之间平均分配空间。
[*]space-around：在网格行之间平均分配空间，但容器两端的空间也分配到行的两侧。
[*]space-evenly：在所有网格行之间以及容器两端分配相等的空间。
[*]示例：
.grid-container {
display: grid;
align-content: space-around; /* 在网格行之间分配空间 */
}
5.5 响应式布局与媒体查询
响应式设计使网页能够适应不同设备的屏幕尺寸和分辨率。通过媒体查询（@media）可以根据不同条件（如屏幕宽度）应用不同的CSS规则。
例如：
@media (max-width: 600px) {<head>
<link rel="stylesheet" href="styles.css">
</head>.container {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>flex-direction: column;<head>
<link rel="stylesheet" href="styles.css">
</head>}}当屏幕宽度小于600像素时，.container 的布局将从水平排列改为垂直排列。
六、CSS中元素的展示
CSS 中的 display 属性用于控制元素的显示行为，它定义了元素在页面中的布局方式。最常用的值有 block、inline 和 inline-block，每种值都有其特定的特性和用途。下面详细讲解这三种常见的 display 值：
display: block
<ul>特性：
[*]块级元素：display: block 使元素成为块级元素。块级元素总是从新行开始，占据整个可用的宽度。
[*]宽高：块级元素可以设置宽度（width）和高度（height），并且这些属性会影响元素的实际显示。
[*]自动换行：块级元素的前后会有换行，这意味着它会在新的一行开始，并在元素后面产生换行。
常见元素：、、 至 、
、<ol>、
[*] 等。
[*]示例：
我是块级元素在这个例子中， 是块级元素，占据了整个宽度，并在前后有换行。
display: inline
[*]特性：
[*]行内元素：display: inline 使元素成为行内元素。行内元素不会开始新行，它们在页面上按顺序排列，并且只占据其内容的空间。
[*]宽高：行内元素不能设置宽度和高度，width 和 height 属性对其不起作用。
[*]边距和填充：可以设置行内元素的 margin 和 padding，但这些不会影响元素的行高（即不会增加行高）。
[*]常见元素：、、<strong>、<em>、<img> 等。
[*]示例：
我是行内元素在这个例子中， 是行内元素，它不会导致换行，只占据其内容的宽度。
display: inline-block
[*]特性：
[*]行内块级元素：display: inline-block 结合了 block 和 inline 的特性。它使元素在页面上像行内元素一样排列，但允许设置宽度和高度。
[*]宽高：可以设置元素的 width 和 height，这些属性会影响元素的显示。
[*]边距和填充：可以设置 margin 和 padding，这些设置会影响元素的布局。
[*]示例：
我是行内块级元素
我也是行内块级元素在这个例子中，两个 inline-block 元素在同一行内显示，且它们的宽度和高度都被设置。
在 CSS 中，white-space、text-overflow 和 overflow 属性用于控制元素中内容的显示方式，尤其是处理文本溢出和元素内容的布局。下面是对这些属性的详细讲解：
white-space
white-space 属性用于控制元素中的空白字符（如空格和换行符）的处理方式。
[*]white-space: normal（默认值）
[*]空白字符会被合并为一个空格。
[*]文本会自动换行以适应其容器的宽度。
.normal {
white-space: normal;
}
[*]white-space: nowrap
[*]空白字符不会被合并，也不会自动换行。
[*]文本会在一行中显示，直到遇到
或文本溢出容器边界。
.nowrap {
white-space: nowrap;
}
[*]white-space: pre
[*]空白字符和换行符会被保留。
[*]文本显示方式类似于在 HTML 中的标签，保持原始格式。
.pre {
white-space: pre;
}
[*]white-space: pre-wrap
[*]空白字符和换行符会被保留，但文本会在需要时自动换行以适应容器宽度。
.pre-wrap {
white-space: pre-wrap;
}
text-overflow
text-overflow 属性用于处理溢出的文本内容的显示方式，通常与 overflow 和 white-space 一起使用。
[*]text-overflow: clip（默认值）
[*]溢出的文本内容会被裁剪，不会显示超出容器的部分。
.clip {
text-overflow: clip;
}
[*]text-overflow: ellipsis
[*]溢出的文本内容会被用省略号 (…) 替代，通常用于显示不完整的文本。
.ellipsis {
text-overflow: ellipsis;
}
[*]text-overflow: string
[*]允许自定义溢出文本的替代内容，如 text-overflow: "..."。支持大多数现代浏览器，但不被所有浏览器广泛支持。
.custom {
text-overflow: "…";
}
overflow
overflow 属性用于控制元素内容溢出其容器时的显示方式。
[*]overflow: visible（默认值）
[*]内容溢出元素边界时，会显示在元素外部。
[*]适用于内容可以自由超出容器边界的情况。
.visible {
overflow: visible;
}
[*]overflow: hidden
[*]内容溢出元素边界时，会被裁剪，不显示超出部分。
[*]适用于不需要显示超出内容的情况。
.hidden {
overflow: hidden;
}
[*]overflow: scroll
[*]无论内容是否溢出，都始终显示滚动条。
[*]适用于内容可能溢出的情况，并希望始终提供滚动条进行查看。
.scroll {
overflow: scroll;
}
[*]overflow: auto
[*]如果内容溢出容器，则显示滚动条。如果内容没有溢出，则不显示滚动条。
[*]适用于需要动态决定是否显示滚动条的情况。
.auto {
overflow: auto;
}
结合使用
[*]常见组合：
[*]要实现文本溢出显示省略号的效果，通常需要结合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis。
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}这是一个很长的文本，可能会溢出容器边界，从而显示省略号。
七、CSS中的继承与优先级
继承
某些CSS属性会自动继承父元素的值，如 color、font-family 等。而 margin、padding 等属性则不会自动继承。
例如：
body {<head>
<link rel="stylesheet" href="styles.css">
</head>color: black;}p {<head>
<link rel="stylesheet" href="styles.css">
</head>font-size: 16px;}在这段代码中，所有段落的文本颜色将继承自 body 元素的 color 属性（黑色），而 font-size 则根据自身定义为16像素。
层叠与优先级
当多个CSS规则作用于同一个元素时，CSS会根据特定的优先级规则决定应用哪一条样式。优先级的计算取决于选择器的类型：
[*]内联样式：最高优先级，直接在元素中定义的样式。
[*]ID选择器：次高优先级。
[*]类选择器、伪类和属性选择器。
[*]元素选择器。
[*]通配符：最低优先级。
CSS中还可以使用 !important 来强制优先应用某条规则，覆盖其他规则的影响。
例如：
p {<head>
<link rel="stylesheet" href="styles.css">
</head>color: red !important;}八、CSS动画与过渡
CSS允许为元素添加动画和过渡效果，使页面更加生动和具有交互性。
过渡效果（transition）
transition 用于定义属性在某个时间段内发生的变化，常用于鼠标悬停等交互效果。
常见属性：
[*]transition-property：要发生变化的属性（如 color、width）。
[*]transition-duration：过渡持续时间。
[*]transition-timing-function：过渡的速度曲线，如 linear（线性）或 ease（缓慢加速再减速）。
例如：
button {<head>
<link rel="stylesheet" href="styles.css">
</head>background-color: blue;<head>
<link rel="stylesheet" href="styles.css">
</head>transition: background-color 0.5s ease;}button:hover {<head>
<link rel="stylesheet" href="styles.css">
</head>background-color: green;}当用户将鼠标悬停在按钮上时，按钮的背景色将在0.5秒内平滑地从蓝色过渡为绿色。
动画（animation）
animation 属性用于创建复杂的动画效果。通过 @keyframes 定义动画帧。
常见属性：
[*]@keyframes：定义动画的关键帧。
[*]animation-name：指定要应用的关键帧。
[*]animation-duration：动画持续时间。
[*]animation-iteration-count：动画循环次数，infinite 表示无限次。
例如：
@keyframes move {<head>
<link rel="stylesheet" href="styles.css">
</head>0% { transform: translateX(0); }<head>
<link rel="stylesheet" href="styles.css">
</head>100% { transform: translateX(100px); }}div {<head>
<link rel="stylesheet" href="styles.css">
</head>animation: move 2s infinite;}这段代码让 div 元素每2秒向右移动100像素，并不断循环。
九、CSS中的其他概念
CSS变量（自定义属性）
CSS变量允许开发者定义可重复使用的值，简化代码的管理和维护。CSS变量使用 -- 定义，并通过 var() 函数调用。
例如：
:root {<head>
<link rel="stylesheet" href="styles.css">
</head>--primary-color: #4CAF50;}button {<head>
<link rel="stylesheet" href="styles.css">
</head>background-color: var(--primary-color);}这样，当我们需要修改主颜色时，只需要更改 --primary-color 的值，而不需要修改每个地方的样式。
浏览器前缀
一些新的CSS特性在不同浏览器中的支持可能不完全一致，因此需要使用浏览器前缀。常见的前缀有：
[*]-webkit-：Chrome、Safari
[*]-moz-：Firefox
[*]-o-：Opera
[*]-ms-：Internet Explorer
例如：
div {<head>
<link rel="stylesheet" href="styles.css">
</head>-webkit-transition: all 0.3s ease;<head>
<link rel="stylesheet" href="styles.css">
</head>-moz-transition: all 0.3s ease;<head>
<link rel="stylesheet" href="styles.css">
</head>transition: all 0.3s ease;}总结
CSS是用于控制网页外观和布局的重要技术。它通过选择器和属性，允许开发者对HTML元素进行样式定义和控制。掌握CSS的基本语法、布局模式（如Flexbox和Grid）、动画、媒体查询等知识，能够帮助开发者创建更加美观、响应式且用户友好的网页设计。
js
JavaScript（简称JS）是一种轻量级、解释型、面向对象的脚本语言，主要用于为网页添加动态功能、控制多媒体、处理事件以及构建复杂的Web应用程序。JS广泛应用于前端开发，并且通过Node.js等技术扩展到了服务器端。
基本语法 参考这篇文章，本文主要讲解 js 对dom 的操作。
一、DOM概念与基础
1.1 什么是 DOM
DOM 是 HTML 和 XML 文档的编程接口，它将整个页面表示为一个层次结构的节点树。每个节点表示页面的一部分（如元素、属性、文本等），JavaScript 通过 DOM 可以动态地访问和修改这些节点。
[*]节点类型：
[*]元素节点：例如 HTML 标签（如 、
）。
[*]属性节点：元素的属性（如的 href 属性）。
[*]文本节点：元素或属性中的文本内容。
HTML 示例：
<head>
<link rel="stylesheet" href="styles.css">
</head>Title
<head>
<link rel="stylesheet" href="styles.css">
</head>This is a paragraph.
1.2 DOM 树结构
DOM 树表示页面的结构，每个 HTML 标签都是树中的一个节点。上面的 HTML 代码会生成如下的 DOM 树：
Document ├── html<head>
<link rel="stylesheet" href="styles.css">
</head>├── head<head>
<link rel="stylesheet" href="styles.css">
</head>└── body<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head> ├── h1 (id="header")<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head> └── p ()通过 JavaScript，你可以获取 DOM 树中的任何节点，并对其进行操作。
1.3 DOM 事件传播
JavaScript事件有三个传播阶段：捕获、目标和冒泡。
[*]捕获阶段：事件从最外层的祖先元素开始，向下传播到目标元素。
[*]目标阶段：事件到达目标元素（触发事件的元素）。
[*]冒泡阶段：事件从目标元素开始，向上冒泡到最外层的祖先元素。
二、获取 DOM 元素
JavaScript 提供了多种方法来获取 DOM 元素：
2.1 getElementById()
用于根据元素的 id 获取唯一的元素，返回一个 DOM 元素。
语法：
document.getElementById(id);例子：
let header = document.getElementById("header");
console.log(header.textContent);// 输出 "Title"2.2 getElementsByClassName()
根据元素的 class 名称获取元素列表，返回一个类数组对象（HTMLCollection）。
语法：
document.getElementsByClassName(className);例子：
let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs.textContent);// 输出 "This is a paragraph."2.3 getElementsByTagName()
根据标签名称获取元素列表，返回 HTMLCollection 对象。
语法：
document.getElementsByTagName(tagName);例子：
let allDivs = document.getElementsByTagName("div");
console.log(allDivs.length);// 输出页面中所有的数量2.4 querySelector() 和 querySelectorAll()
[*]querySelector() 返回与指定的 CSS 选择器匹配的第一个元素。
[*]querySelectorAll() 返回所有匹配选择器的元素（返回 NodeList，可以使用 forEach() 方法遍历）。
语法：
document.querySelector(cssSelector);
document.querySelectorAll(cssSelector);例子：
let firstParagraph = document.querySelector("p.text");// 匹配 class 为 "text" 的第一个 <p>
let allParagraphs = document.querySelectorAll("p");// 匹配所有 <p> 元素
allParagraphs.forEach(p => console.log(p.textContent));// 遍历所有 <p> 元素2.5 parentNode 和 childNodes
[*]parentNode：返回当前元素的父节点。
[*]childNodes：返回当前元素的所有子节点（包括文本节点、元素节点等）。
例子：
let header = document.getElementById("header");
console.log(header.parentNode);// 输出 <body> 元素
console.log(document.body.childNodes);// 输出 body 下的所有子节点三、修改 DOM 元素
JavaScript 允许对 DOM 中的元素进行动态修改，例如更改内容、样式、属性等。
3.1 修改元素内容
[*]textContent：用于修改元素的文本内容。它会替换元素中的所有文本，包括子元素中的文本。
[*]innerHTML：用于设置或获取元素的 HTML 内容，允许插入 HTML 标签。
例子：
let header = document.getElementById("header");
header.textContent = "New Title";// 修改文本内容
header.innerHTML = "Updated Title";// 插入 HTML 内容3.2 修改元素属性
[*]setAttribute() 和 getAttribute()：用于设置或获取元素的属性。
[*]removeAttribute()：移除某个属性。
例子：
let link = document.querySelector("a");
link.setAttribute("href", "https://new-url.com");// 修改 href 属性
let href = link.getAttribute("href");// 获取 href 属性
link.removeAttribute("title");// 移除 title 属性3.3 修改元素样式
[*]style 属性：可以通过直接修改 style 对象来设置内联样式。
[*]classList：通过 classList 可以添加、移除、切换元素的 CSS 类。
例子：
let header = document.getElementById("header");
// 修改内联样式
header.style.color = "blue";
header.style.fontSize = "24px";
// 操作 class
header.classList.add("highlight");
header.classList.remove("text-large");
header.classList.toggle("active");// 切换 class，若存在则移除，若不存在则添加3.4 创建与删除元素
[*]createElement()：用于创建新的元素节点。
[*]appendChild()：将新元素添加为子节点。
[*]removeChild()：删除子节点。
例子：
// 创建新的 <p> 元素
let newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
// 将新元素添加到 <body>
document.body.appendChild(newParagraph);
// 移除元素
document.body.removeChild(newParagraph);四、操作节点关系
通过 JavaScript 可以访问 DOM 树中的节点关系，例如父节点、子节点和兄弟节点。
4.1 父节点与子节点
[*]parentNode：获取当前节点的父节点。
[*]children：获取当前节点的所有子元素（不包括文本节点）。
例子：
let parent = document.getElementById("parent");
let firstChild = parent.firstChild;// 获取第一个子节点（可能是文本节点）
let firstElementChild = parent.firstElementChild;// 获取第一个子元素4.2 兄弟节点
[*]nextSibling：获取下一个兄弟节点（可能是文本节点）。
[*]previousSibling：获取上一个兄弟节点。
[*]nextElementSibling 和 previousElementSibling：获取相邻的元素兄弟节点。
例子：
let current = document.querySelector("p");
let nextElement = current.nextElementSibling;// 获取下一个兄弟元素
let previousElement = current.previousElementSibling;// 获取上一个兄弟元素4.3 克隆节点
[*]cloneNode()：用于克隆现有的节点。参数为 true 时，表示深度克隆，即克隆节点及其所有子节点。
例子：
let original = document.getElementById("header");
let clone = original.cloneNode(true);// 深度克隆 header 及其子节点
document.body.appendChild(clone);// 将克隆的节点添加到 body五、DOM事件处理
DOM 事件处理允许我们响应用户在网页上的交互。前文已经提到的事件机制，如 addEventListener()，在实际开发中极其重要。
5.1 事件绑定与移除
[*]addEventListener()：用于绑定事件监听器。
[*]removeEventListener()：移除事件监听器。
例子：
let button = document.getElementById("myButton");function handleClick() {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("Button clicked");}// 添加事件监听button.addEventListener("click", handleClick);// 移除事件监听button.removeEventListener("click", handleClick);5.2 事件类型
常见的 DOM 事件类型：
[*]鼠标事件：click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove
[*]键盘事件：keydown, keyup, keypress 用于处理键盘的输入事件。
[*]表单事件：submit, change, input 用于处理表单中的交互事件。
[*]窗口事件：load, resize, scroll, unload 这些事件常用于处理页面加载、窗口调整大小、页面滚动等操作。
例子：
// 捕获键盘按下的事件document.addEventListener("keydown", function(event) {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("Key pressed:", event.key);// 输出按下的键});// 捕获窗口大小调整事件window.addEventListener("resize", function() {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("Window resized to:", window.innerWidth, "x", window.innerHeight);});5.3 事件委托
事件委托是一种优化事件处理的技术。通过将事件绑定到祖先元素而不是每个子元素上，利用事件冒泡机制，可以减少事件处理程序的数量。
例子：
let parent = document.getElementById("parent");parent.addEventListener("click", function(event) {<head>
<link rel="stylesheet" href="styles.css">
</head>if (event.target.tagName === "BUTTON") {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>console.log("Button clicked:", event.target.textContent);<head>
<link rel="stylesheet" href="styles.css">
</head>}});在这个例子中，即使父元素 parent 内有多个按钮，事件只会被委托到父元素上，而不是为每个按钮分别添加事件监听器。这样提高了性能，尤其是在动态添加子元素的情况下。
5.4 事件处理中的默认行为与冒泡
在事件处理过程中，某些事件会触发默认行为，例如点击链接会跳转页面，提交表单会刷新页面。可以通过 event.preventDefault() 来阻止这些默认行为。类似地，event.stopPropagation() 可以阻止事件的冒泡，防止事件传播到父元素。
例子：
let link = document.querySelector("a");link.addEventListener("click", function(event) {<head>
<link rel="stylesheet" href="styles.css">
</head>event.preventDefault();// 阻止链接的跳转行为<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("Link clicked but default action prevented");});let button = document.getElementById("myButton");button.addEventListener("click", function(event) {<head>
<link rel="stylesheet" href="styles.css">
</head>event.stopPropagation();// 阻止事件冒泡<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("Button clicked without event bubbling");});六、文档与窗口对象的操作
除了直接操作 DOM 元素外，JavaScript 还提供了对整个文档 (document) 和窗口 (window) 对象的操作。这些对象是浏览器提供的全局对象，用于控制和操作整个页面和浏览器窗口。
6.1 document 对象
document 是整个网页的入口，它代表整个 HTML 文档。你可以通过 document 对象访问和操作 DOM 树。
[*]document.title：获取或设置页面标题。
[*]document.URL：获取当前页面的 URL。
[*]document.cookie：用于读取或设置页面的 cookie。
例子：
console.log(document.title);// 输出页面标题
document.title = "New Page Title";// 修改页面标题
console.log(document.URL);// 输出当前页面 URL6.2 window 对象
window 对象代表整个浏览器窗口，提供了大量与浏览器和页面交互的 API。
[*]window.innerHeight 和 window.innerWidth：返回窗口的高度和宽度。
[*]window.scrollTo()：滚动到指定的页面位置。
[*]window.open()：在新窗口中打开一个 URL。
例子：
console.log(window.innerWidth, window.innerHeight);// 输出窗口宽度和高度
// 滚动到页面顶部
window.scrollTo(0, 0);
// 打开新页面
window.open("https://www.example.com", "_blank");6.3 定时器
通过 window 对象，JavaScript 提供了定时器功能，用于延时执行代码或以固定的时间间隔重复执行代码。
[*]setTimeout()：在指定时间后执行一次代码。
[*]setInterval()：以指定的时间间隔重复执行代码。
[*]clearTimeout() 和 clearInterval()：停止定时器。
例子：
// 延时执行代码let timeoutId = setTimeout(function() {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("This will run after 2 seconds");}, 2000);// 每隔1秒重复执行代码let intervalId = setInterval(function() {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log("This will run every 1 second");}, 1000);// 停止定时器clearTimeout(timeoutId);clearInterval(intervalId);七、表单操作
JavaScript 对 HTML 表单有强大的操作能力，包括读取和设置表单字段的值、验证用户输入以及响应表单的提交。
7.1 读取和设置表单值
可以通过 value 属性读取和设置表单元素的值，例如输入框、选择框、单选按钮等。
例子：
let input = document.getElementById("nameInput");
// 获取输入框的值
console.log(input.value);
// 设置输入框的值
input.value = "John Doe";7.2 表单提交与验证
通过监听表单的 submit 事件，可以对表单提交进行验证或控制，常用于阻止无效表单的提交。
例子：
let form = document.getElementById("myForm");form.addEventListener("submit", function(event) {<head>
<link rel="stylesheet" href="styles.css">
</head>let input = document.getElementById("nameInput");<head>
<link rel="stylesheet" href="styles.css">
</head>if (input.value === "") {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>event.preventDefault();// 阻止表单提交<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>alert("Name cannot be empty!");<head>
<link rel="stylesheet" href="styles.css">
</head>}});7.3 表单字段验证 API
HTML5 提供了一些内建的表单验证属性（如 required、pattern），同时可以通过 JavaScript 使用 checkValidity() 方法进行验证。
例子：
let form = document.getElementById("myForm");let emailInput = document.getElementById("email");form.addEventListener("submit", function(event) {<head>
<link rel="stylesheet" href="styles.css">
</head>if (!emailInput.checkValidity()) {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>event.preventDefault();<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>alert("Invalid email format!");<head>
<link rel="stylesheet" href="styles.css">
</head>}});八、JavaScript中的异步编程
在浏览器环境中，很多操作是异步的，例如网络请求、定时器、文件读取等。为了防止阻塞主线程（影响用户体验），JavaScript提供了多种方式处理异步任务。
2.1 回调函数（Callback）
回调函数是最基本的异步编程方法。它是指把函数作为参数传递给另一个函数，并在某些操作完成后调用这个函数。
例子：
function fetchData(callback) {<head>
<link rel="stylesheet" href="styles.css">
</head>setTimeout(() => {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>callback("Data received");<head>
<link rel="stylesheet" href="styles.css">
</head>}, 1000);}fetchData(function(result) {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log(result);// 输出 "Data received"（1秒后）});在这段代码中，setTimeout 模拟一个耗时1秒的异步操作，完成后调用传入的回调函数。
2.2 Promise
Promise 是ES6引入的一种异步操作解决方案，提供了更加优雅的异步编程方式。Promise 对象代表一个未来的值，可能是异步操作成功的结果，也可能是失败的原因。
基本语法：
let promise = new Promise((resolve, reject) => {<head>
<link rel="stylesheet" href="styles.css">
</head>// 异步操作<head>
<link rel="stylesheet" href="styles.css">
</head>let success = true;<head>
<link rel="stylesheet" href="styles.css">
</head>if (success) {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>resolve("Success");<head>
<link rel="stylesheet" href="styles.css">
</head>} else {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>reject("Error");<head>
<link rel="stylesheet" href="styles.css">
</head>}});// 处理 Promise 结果promise.then(result => {<head>
<link rel="stylesheet" href="styles.css">
</head>console.log(result);// 成功时输出 "Success"}).catch(error => {<head>
<link rel="stylesheet" href="styles.css">
</head>console.error(error);// 失败时输出 "Error"});2.3 async/await
async/await 是基于 Promise 的语法糖，提供了更加简洁的方式来编写异步代码。通过 await，你可以暂停函数的执行，直到 Promise 完成，并获得其返回的结果。
例子：
async function fetchData() {<head>
<link rel="stylesheet" href="styles.css">
</head>try {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>let result = await new Promise((resolve) => {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>setTimeout(() => resolve("Data received"), 1000);<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>});<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>console.log(result);// 输出 "Data received"<head>
<link rel="stylesheet" href="styles.css">
</head>} catch (error) {<head>
<link rel="stylesheet" href="styles.css">
</head><head>
<link rel="stylesheet" href="styles.css">
</head>console.error("Error:", error);<head>
<link rel="stylesheet" href="styles.css">
</head>}}fetchData();在这段代码中，await 使得代码看起来像同步代码，但它实际上是在等待异步操作完成后继续执行。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]