逍遥

10-13 12:37

查看作者

看完这篇，快速学会 HTML、CSS、JS

HTML（超文本标记语言，HyperText Markup Language）是构建网页的基础语言。它使用标签（Tags）和属性（Attributes）来定义网页的结构和内容显示。下面将从HTML的结构、标签、属性等方面进行详细讲解。

一、HTML的基本结构

一个标准的HTML文档有明确的结构，由文档声明、头部、主体等部分组成。它定义了网页的骨架和各元素的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容写在这里 -->
</body>
</html>

1.1 文档声明 (<!DOCTYPE html>)

声明文档类型，告诉浏览器该文件是HTML5文档，这有助于浏览器解析和渲染网页内容。

1.2 <html> 标签

定义整个HTML文档的根元素，所有的HTML元素必须包含在 <html> 标签内。

lang 属性指定网页的语言，便于搜索引擎优化和辅助技术的使用，如表示英语，lang="zh" 表示中文。

1.3 <head> 标签

包含页面的元数据（metadata），不会显示在网页上，但对页面的呈现和搜索引擎优化至关重要。

常见的元素包括：

<title>：定义网页的标题，会显示在浏览器标签上。

1.4 <body> 标签

包含网页的可见内容，所有的文本、图片、视频、表格、表单等都在 <body> 中定义。

二、HTML标签（Tags）

HTML标签用来表示不同的元素，每个标签通常成对出现，包含开始标签和结束标签，中间是元素内容。部分标签是自闭合的，不需要结束标签。

2.1 常见的HTML标签

文本标签：

<h1> - <h6>：表示标题，<h1> 是最高级别标题，<h6> 是最低级别标题。

<p>：表示段落。

<br>：换行标签，不需要结束标签。

<hr>：水平线，表示主题的分隔。

列表标签：

<ul>：无序列表，用于创建带有圆点的列表项。

<ol>：有序列表，用于创建带编号的列表项。

<li>：列表项，用于在无序或有序列表中定义每一项。

链接和媒体标签：

<a>：超链接标签，用于在网页中创建可点击的链接。常用的属性有 href（链接的目标地址）。

<img>：图像标签，用于在网页中嵌入图片。常用属性包括 src（图片路径）和 alt（图片无法加载时显示的替代文本）。

<video> 和 <audio>：用于在网页中嵌入视频和音频。

表格标签：

<table>：定义一个表格。

<tr>：定义表格中的一行。

<td>：定义单元格（表格数据）。

<th>：定义表格头部单元格（表头）。

表单标签：

<form>：定义表单，用于提交用户输入。

<input>：定义各种类型的输入字段，比如文本框、单选按钮、复选框等。

<button>：定义可点击的按钮。

<select> 和 <option>：定义下拉列表。

三、HTML属性（Attributes）

HTML属性用于为HTML标签提供额外的信息。它们位于标签的开始部分，通常是键值对形式，如：<tag attribute="value">。

3.1 通用属性

这些属性可以应用于大多数HTML元素：

id：定义元素的唯一标识符。例如：

<div id="header">这是头部</div>

class：为元素指定一个或多个类名，常用于CSS或JavaScript选择器。例如：

<p class="text-bold">加粗文本</p>

style：定义元素的内联样式。例子：

<p style="color: red;">这是红色的文字</p>

3.2 特定标签属性

<a> 标签的属性：

href：指定链接的目标URL地址。

target：指定链接如何在浏览器中打开。值 _blank 会在新窗口或新标签页中打开链接。

rel：定义链接与当前文档的关系，常见的有 noopener、nofollow 等。

<img> 标签的属性：

src：指定图片的URL地址。

alt：当图片加载失败时显示的文本，有助于搜索引擎优化和辅助技术（如屏幕阅读器）。

width 和 height：定义图片的显示宽度和高度，可以使用像素或百分比。

<input> 标签的属性：

type：指定输入字段的类型，比如文本（text）、密码（password）、按钮（button）等。

placeholder：在输入字段为空时显示的提示文本。

value：定义默认值。

name：表单提交时的字段名称。

四、HTML中的其他重要概念

4.1 HTML注释

注释不会在浏览器中显示，主要用于给开发者添加说明或备注。HTML注释使用以下格式：

<!-- 这是注释 -->

4.2 HTML的语义化

语义化HTML意味着使用具有明确意义的标签来描述内容，这有助于提高网页的可访问性和SEO效果。常见的语义化标签包括：

<header>：定义页面或区块的头部。

<nav>：定义导航链接的集合。

<main>：定义文档的主要内容区域。

<section>：定义一个独立的内容区块。

<article>：定义一个独立的内容片段，比如一篇文章或博客。

<footer>：定义页面或区块的底部。

4.3 块级元素与行内元素

块级元素：占据一行的全部宽度，并会在前后产生换行。常见的块级元素有 <div>、<p>、<h1> 等。

行内元素：仅占据其内容的宽度，不会产生换行。常见的行内元素有 <span>、<a>、<img> 等。

五、HTML5的新特性

HTML5引入了许多新的标签和API，提升了HTML的功能。

5.1 新的语义标签

<article>：独立的文章或内容块。

<aside>：定义侧边栏内容，通常与页面的主要内容相关联。

<figure> 和 <figcaption>：用于包含图像、图表或表格及其标题。

5.2 媒体标签

HTML5支持直接嵌入多媒体内容，而无需依赖第三方插件：

<audio>：用于嵌入音频内容。

<video>：用于嵌入视频内容。

5.3 新的表单输入类型

HTML5表单中新增了一些类型，如 email、url、number、date、range 等，简化了表单的验证和用户输入。

---------------------------------------------------------------------------------------------------------------------

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档外观的样式表语言。它控制页面的布局、颜色、字体等，使网页的内容和样式分离，从而提高页面的可维护性和灵活性。

一、CSS的基本概念

1.1 CSS语法结构

CSS规则由选择器和声明组成，声明部分包含属性和值。基础语法格式如下：

选择器 {
    属性: 值;
    属性: 值;
}

例如：

h1 {
    color: blue;
    font-size: 24px;
}

该CSS规则表示所有 <h1> 元素的文本颜色设置为蓝色，字体大小设置为24像素。

1.2 CSS的作用方式

CSS可以通过三种方式应用到HTML中：

内联样式：直接在HTML元素的 style 属性中定义样式。

<p style="color: red;">这是红色的文本</p>

内部样式表：在HTML的 <head> 标签中通过 <style> 标签定义样式。

<head>
    <style>
        p { color: blue; }
    </style>
</head>

外部样式表：通过外部的CSS文件引入样式，通常使用 <link> 标签将CSS文件链接到HTML文档中。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

二、CSS选择器

选择器用于选择HTML元素并应用相应的样式。常见的CSS选择器有以下几种：

2.1 基础选择器

元素选择器：选择所有指定类型的HTML元素。例如，p 选择所有段落：

p { color: black; }

类选择器：选择具有特定类名的元素，使用 . 表示。例如，选择所有class="intro"的元素：

.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.属性选择器

[attribute]：选中具有指定属性的元素。

[disabled] {
  opacity: 0.5;
}

[attribute=value]：选中具有指定属性和值的元素。

[type="submit"] {
  background-color: blue;
  color: white;
}

[attribute^=value]：选中属性值以指定值开头的元素。

[href^="https"] {
  color: green;
}

[attribute$=value]：选中属性值以指定值结尾的元素。

[src$=".jpg"] {
  border: 1px solid gray;
}

[attribute*=value]：选中属性值包含指定值的元素。

[class*="button"] {
  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 + margin

box-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 {
    content: "";
    display: block;
    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 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100px 200px;
}

这表示创建两列和两行的网格，第一列的宽度是第二列的一半。

grid-column 和 grid-row：用于定义元素在网格中的位置。

例如：

.item {
    grid-column: 1 / 3;
    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) {
    .container {
        flex-direction: column;
    }
}

当屏幕宽度小于600像素时，.container 的布局将从水平排列改为垂直排列。

六、CSS中元素的展示

CSS 中的 display 属性用于控制元素的显示行为，它定义了元素在页面中的布局方式。最常用的值有 block、inline 和 inline-block，每种值都有其特定的特性和用途。下面详细讲解这三种常见的 display 值：

display: block

特性：

块级元素：display: block 使元素成为块级元素。块级元素总是从新行开始，占据整个可用的宽度。

宽高：块级元素可以设置宽度（width）和高度（height），并且这些属性会影响元素的实际显示。

自动换行：块级元素的前后会有换行，这意味着它会在新的一行开始，并在元素后面产生换行。

常见元素：<div>、<p>、<h1> 至 <h6>、<ul>、<ol>、<li> 等。

示例：

<div style="display: block; width: 100px; height: 50px; background-color: lightblue;">
  我是块级元素
</div>

在这个例子中，<div> 是块级元素，占据了整个宽度，并在前后有换行。

display: inline

特性：

行内元素：display: inline 使元素成为行内元素。行内元素不会开始新行，它们在页面上按顺序排列，并且只占据其内容的空间。

宽高：行内元素不能设置宽度和高度，width 和 height 属性对其不起作用。

边距和填充：可以设置行内元素的 margin 和 padding，但这些不会影响元素的行高（即不会增加行高）。

常见元素：<span>、<a>、<strong>、<em>、<img> 等。

示例：

<span style="display: inline; background-color: lightcoral;">
  我是行内元素
</span>

在这个例子中，<span> 是行内元素，它不会导致换行，只占据其内容的宽度。

display: inline-block

特性：

行内块级元素：display: inline-block 结合了 block 和 inline 的特性。它使元素在页面上像行内元素一样排列，但允许设置宽度和高度。

宽高：可以设置元素的 width 和 height，这些属性会影响元素的显示。

边距和填充：可以设置 margin 和 padding，这些设置会影响元素的布局。

示例：

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen;">
  我是行内块级元素
</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral;">
  我也是行内块级元素
</div>

在这个例子中，两个 inline-block 元素在同一行内显示，且它们的宽度和高度都被设置。

在 CSS 中，white-space、text-overflow 和 overflow 属性用于控制元素中内容的显示方式，尤其是处理文本溢出和元素内容的布局。下面是对这些属性的详细讲解：

white-space

white-space 属性用于控制元素中的空白字符（如空格和换行符）的处理方式。

white-space: normal（默认值）

空白字符会被合并为一个空格。

文本会自动换行以适应其容器的宽度。

.normal {
  white-space: normal;
}

white-space: nowrap

空白字符不会被合并，也不会自动换行。

文本会在一行中显示，直到遇到 <br> 或文本溢出容器边界。

.nowrap {
  white-space: nowrap;
}

white-space: pre

空白字符和换行符会被保留。

文本显示方式类似于在 HTML 中的 <pre> 标签，保持原始格式。

.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;
}
<div>
  这是一个很长的文本，可能会溢出容器边界，从而显示省略号。
</div>

七、CSS中的继承与优先级

继承

某些CSS属性会自动继承父元素的值，如 color、font-family 等。而 margin、padding 等属性则不会自动继承。

例如：

body {
    color: black;
}
p {
    font-size: 16px;
}

在这段代码中，所有段落的文本颜色将继承自 body 元素的 color 属性（黑色），而 font-size 则根据自身定义为16像素。

层叠与优先级

当多个CSS规则作用于同一个元素时，CSS会根据特定的优先级规则决定应用哪一条样式。优先级的计算取决于选择器的类型：

内联样式：最高优先级，直接在元素中定义的样式。

ID选择器：次高优先级。

类选择器、伪类和属性选择器。

元素选择器。

通配符：最低优先级。

CSS中还可以使用 !important 来强制优先应用某条规则，覆盖其他规则的影响。

例如：

p {
    color: red !important;
}

八、CSS动画与过渡

CSS允许为元素添加动画和过渡效果，使页面更加生动和具有交互性。

过渡效果（transition）

transition 用于定义属性在某个时间段内发生的变化，常用于鼠标悬停等交互效果。

常见属性：

transition-property：要发生变化的属性（如 color、width）。

transition-duration：过渡持续时间。

transition-timing-function：过渡的速度曲线，如 linear（线性）或 ease（缓慢加速再减速）。

例如：

button {
    background-color: blue;
    transition: background-color 0.5s ease;
}
button:hover {
    background-color: green;
}

当用户将鼠标悬停在按钮上时，按钮的背景色将在0.5秒内平滑地从蓝色过渡为绿色。

动画（animation）

animation 属性用于创建复杂的动画效果。通过 @keyframes 定义动画帧。

常见属性：

@keyframes：定义动画的关键帧。

animation-name：指定要应用的关键帧。

animation-duration：动画持续时间。

animation-iteration-count：动画循环次数，infinite 表示无限次。

例如：

@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}
div {
    animation: move 2s infinite;
}

这段代码让 div 元素每2秒向右移动100像素，并不断循环。

九、CSS中的其他概念

CSS变量（自定义属性）

CSS变量允许开发者定义可重复使用的值，简化代码的管理和维护。CSS变量使用 -- 定义，并通过 var() 函数调用。

例如：

:root {
    --primary-color: #4CAF50;
}
button {
    background-color: var(--primary-color);
}

这样，当我们需要修改主颜色时，只需要更改 --primary-color 的值，而不需要修改每个地方的样式。

浏览器前缀

一些新的CSS特性在不同浏览器中的支持可能不完全一致，因此需要使用浏览器前缀。常见的前缀有：

-webkit-：Chrome、Safari

-moz-：Firefox

-o-：Opera

-ms-：Internet Explorer

例如：

div {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

总结

CSS是用于控制网页外观和布局的重要技术。它通过选择器和属性，允许开发者对HTML元素进行样式定义和控制。掌握CSS的基本语法、布局模式（如Flexbox和Grid）、动画、媒体查询等知识，能够帮助开发者创建更加美观、响应式且用户友好的网页设计。

---------------------------------------------------------------------------------

JavaScript（简称JS）是一种轻量级、解释型、面向对象的脚本语言，主要用于为网页添加动态功能、控制多媒体、处理事件以及构建复杂的Web应用程序。JS广泛应用于前端开发，并且通过Node.js等技术扩展到了服务器端。

基本语法参考这篇文章，本文主要讲解 js 对dom 的操作。

一、DOM概念与基础

1.1 什么是 DOM

DOM 是 HTML 和 XML 文档的编程接口，它将整个页面表示为一个层次结构的节点树。每个节点表示页面的一部分（如元素、属性、文本等），JavaScript 通过 DOM 可以动态地访问和修改这些节点。

节点类型：

元素节点：例如 HTML 标签（如 <div>、<p>）。

属性节点：元素的属性（如 <a href="url"> 的 href 属性）。

文本节点：元素或属性中的文本内容。

HTML 示例：

<!DOCTYPE html>
<html>
  <body>
    <h1 id="header">Title</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

1.2 DOM 树结构

DOM 树表示页面的结构，每个 HTML 标签都是树中的一个节点。上面的 HTML 代码会生成如下的 DOM 树：

Document

├── html

├── head

└── body

├── h1 (id="header")

└── p (class="text")

通过 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[0].textContent);  // 输出 "This is a paragraph."

2.3 getElementsByTagName()

根据标签名称获取元素列表，返回 HTMLCollection 对象。

语法：

document.getElementsByTagName(tagName);

例子：

let allDivs = document.getElementsByTagName("div");

console.log(allDivs.length); // 输出页面中所有 <div> 的数量

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 = "<span>Updated Title</span>";  // 插入 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() {
    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) {
    console.log("Key pressed:", event.key);  // 输出按下的键
});
// 捕获窗口大小调整事件
window.addEventListener("resize", function() {
    console.log("Window resized to:", window.innerWidth, "x", window.innerHeight);
});

5.3 事件委托

事件委托是一种优化事件处理的技术。通过将事件绑定到祖先元素而不是每个子元素上，利用事件冒泡机制，可以减少事件处理程序的数量。

例子：

let parent = document.getElementById("parent");
parent.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        console.log("Button clicked:", event.target.textContent);
    }
});

在这个例子中，即使父元素 parent 内有多个按钮，事件只会被委托到父元素上，而不是为每个按钮分别添加事件监听器。这样提高了性能，尤其是在动态添加子元素的情况下。

5.4 事件处理中的默认行为与冒泡

在事件处理过程中，某些事件会触发默认行为，例如点击链接会跳转页面，提交表单会刷新页面。可以通过 event.preventDefault() 来阻止这些默认行为。类似地，event.stopPropagation() 可以阻止事件的冒泡，防止事件传播到父元素。

例子：

let link = document.querySelector("a");
link.addEventListener("click", function(event) {
    event.preventDefault();  // 阻止链接的跳转行为
    console.log("Link clicked but default action prevented");
});
let button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
    event.stopPropagation();  // 阻止事件冒泡
    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);  // 输出当前页面 URL

6.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() {
    console.log("This will run after 2 seconds");
}, 2000);
// 每隔1秒重复执行代码
let intervalId = setInterval(function() {
    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) {
    let input = document.getElementById("nameInput");
    if (input.value === "") {
        event.preventDefault();  // 阻止表单提交
        alert("Name cannot be empty!");
    }
});

7.3 表单字段验证 API

HTML5 提供了一些内建的表单验证属性（如 required、pattern），同时可以通过 JavaScript 使用 checkValidity() 方法进行验证。

例子：

let form = document.getElementById("myForm");
let emailInput = document.getElementById("email");
form.addEventListener("submit", function(event) {
    if (!emailInput.checkValidity()) {
        event.preventDefault();
        alert("Invalid email format!");
    }
});

八、JavaScript中的异步编程

在浏览器环境中，很多操作是异步的，例如网络请求、定时器、文件读取等。为了防止阻塞主线程（影响用户体验），JavaScript提供了多种方式处理异步任务。

2.1 回调函数（Callback）

回调函数是最基本的异步编程方法。它是指把函数作为参数传递给另一个函数，并在某些操作完成后调用这个函数。

例子：

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 1000);
}
fetchData(function(result) {
    console.log(result);  // 输出 "Data received"（1秒后）
});

在这段代码中，setTimeout 模拟一个耗时1秒的异步操作，完成后调用传入的回调函数。

2.2 Promise

Promise 是ES6引入的一种异步操作解决方案，提供了更加优雅的异步编程方式。Promise 对象代表一个未来的值，可能是异步操作成功的结果，也可能是失败的原因。

基本语法：

let promise = new Promise((resolve, reject) => {
    // 异步操作
    let success = true;
    if (success) {
        resolve("Success");
    } else {
        reject("Error");
    }
});
// 处理 Promise 结果
promise.then(result => {
    console.log(result);  // 成功时输出 "Success"
}).catch(error => {
    console.error(error);  // 失败时输出 "Error"
});

2.3 async/await

async/await 是基于 Promise 的语法糖，提供了更加简洁的方式来编写异步代码。通过 await，你可以暂停函数的执行，直到 Promise 完成，并获得其返回的结果。

例子：

async function fetchData() {
    try {
        let result = await new Promise((resolve) => {
            setTimeout(() => resolve("Data received"), 1000);
        });
        console.log(result);  // 输出 "Data received"
    } catch (error) {
        console.error("Error:", error);
    }
}

fetchData();

在这段代码中，await 使得代码看起来像同步代码，但它实际上是在等待异步操作完成后继续执行。

html

css

952

#笔记

请登录之后再进行评论

作者信息

逍遥

活跃用户

随机内容

看完这篇，快速学会 HTML、CSS、JS

一、HTML的基本结构

1.1 文档声明 (<!DOCTYPE html>)

1.2 <html> 标签

1.3 <head> 标签

1.4 <body> 标签

二、HTML标签（Tags）

文本标签：

列表标签：

链接和媒体标签：

表格标签：

表单标签：

三、HTML属性（Attributes）

3.1 通用属性

3.2 特定标签属性

四、HTML中的其他重要概念

4.1 HTML注释

4.2 HTML的语义化

4.3 块级元素与行内元素

五、HTML5的新特性

5.1 新的语义标签

5.2 媒体标签

5.3 新的表单输入类型

一、CSS的基本概念

1.1 CSS语法结构

1.2 CSS的作用方式

二、CSS选择器

2.1 基础选择器

2.2 组合选择器

2.3 伪类选择器

2.4.属性选择器

三、CSS属性（position）

3.1 文本相关属性

3.2 颜色和背景属性

3.3 布局相关属性

3.4 定位 position 属性

3.5 显示与隐藏属性

四、CSS盒模型（Box Model）

五、CSS布局 （flex和grid）

5.1 浮动布局（float）

5.2 清除浮动（clear）

5.3 Flexbox布局

5.4 CSS Grid布局

5.5 响应式布局与媒体查询

六、CSS中元素的展示

七、CSS中的继承与优先级

八、CSS动画与过渡

九、CSS中的其他概念

总结

一、DOM概念与基础

1.1 什么是 DOM

1.2 DOM 树结构

1.3 DOM 事件传播

二、获取 DOM 元素

2.1 getElementById()

2.2 getElementsByClassName()

2.3 getElementsByTagName()

2.4 querySelector() 和 querySelectorAll()

2.5 parentNode 和 childNodes

三、修改 DOM 元素

3.1 修改元素内容

3.2 修改元素属性

3.3 修改元素样式

3.4 创建与删除元素

四、操作节点关系

4.1 父节点与子节点

4.2 兄弟节点

4.3 克隆节点

五、DOM事件处理

5.1 事件绑定与移除

5.2 事件类型

5.3 事件委托

5.4 事件处理中的默认行为与冒泡

六、文档与窗口对象的操作

6.1 document 对象

6.2 window 对象

五、CSS布局（flex和grid）