html css js(这一篇就够了)

html

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="en" 表示英语,lang="zh" 表示中文。

1.3 <head> 标签

  • 包含页面的元数据(metadata),不会显示在网页上,但对页面的呈现和搜索引擎优化至关重要。
  • 常见的元素包括:
    • <meta charset="UTF-8">:设置页面字符编码,UTF-8能覆盖全球大部分语言字符。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">:优化移动端浏览体验。
    • <title>:定义网页的标题,会显示在浏览器标签上。

1.4 <body> 标签

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

二、HTML标签(Tags)

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

2.1 常见的HTML标签

  1. 文本标签

    • <h1> - <h6>:表示标题,<h1> 是最高级别标题,<h6> 是最低级别标题。
    • <p>:表示段落。
    • <br>:换行标签,不需要结束标签。
    • <hr>:水平线,表示主题的分隔。
  2. 列表标签

    • <ul>:无序列表,用于创建带有圆点的列表项。
    • <ol>:有序列表,用于创建带编号的列表项。
    • <li>:列表项,用于在无序或有序列表中定义每一项。
  3. 链接和媒体标签

    • <a>:超链接标签,用于在网页中创建可点击的链接。常用的属性有 href(链接的目标地址)。
    • <img>:图像标签,用于在网页中嵌入图片。常用属性包括 src(图片路径)和 alt(图片无法加载时显示的替代文本)。
    • <video><audio>:用于在网页中嵌入视频和音频。
  4. 表格标签

    • <table>:定义一个表格。
    • <tr>:定义表格中的一行。
    • <td>:定义单元格(表格数据)。
    • <th>:定义表格头部单元格(表头)。
  5. 表单标签

    • <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 特定标签属性

  1. <a> 标签的属性

    • href:指定链接的目标URL地址。
    • target:指定链接如何在浏览器中打开。值 _blank 会在新窗口或新标签页中打开链接。
    • rel:定义链接与当前文档的关系,常见的有 noopenernofollow 等。
  2. <img> 标签的属性

    • src:指定图片的URL地址。
    • alt:当图片加载失败时显示的文本,有助于搜索引擎优化和辅助技术(如屏幕阅读器)。
    • widthheight:定义图片的显示宽度和高度,可以使用像素或百分比。
  3. <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表单中新增了一些类型,如 emailurlnumberdaterange 等,简化了表单的验证和用户输入。

css

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中:

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

    <p style="color: red;">这是红色的文本</p>
    
  2. 内部样式表:在HTML的 <head> 标签中通过 <style> 标签定义样式。

    <head>
        <style>
            p { color: blue; }
        </style>
    </head>
    
  3. 外部样式表:通过外部的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; }
    
  • 并集选择器:选择多个不同元素,使用逗号 , 分隔。例如,选择所有 h1p 元素:

    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属性

CSS属性用于定义HTML元素的样式,它们按照不同类别分为布局、文本、颜色、背景等。

3.1 文本相关属性

  • color:设置文本的颜色。可以使用颜色名称、十六进制、RGB或HSL值。

    p { color: #ff0000; } /* 红色文本 */
    
  • font-size:设置文本的大小,单位可以是 pxemrem、百分比等。

    p { font-size: 16px; }
    
  • font-family:设置字体族,通常会列出多个字体供浏览器选择。

    p { font-family: Arial, sans-serif; }
    
  • text-align:设置文本的对齐方式,可以是 leftrightcenterjustify

    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 布局相关属性

  • widthheight:定义元素的宽度和高度,单位可以是 px、百分比等。

    div { width: 200px; height: 100px; }
    
  • margin:设置元素的外边距,用来控制元素与周围元素的距离。可以单独设置四个方向的边距。

    p { margin: 20px; }
    
  • padding:设置元素的内边距,用来控制元素内容与其边框之间的距离。

    div { padding: 15px; }
    
  • border:设置元素的边框,可以设置边框的宽度、样式和颜色。

    div { border: 1px solid black; }
    

3.4 定位属性

CSS提供了几种不同的定位方式来控制元素的位置。

  • position:常用的取值包括 static(默认)、relative(相对)、absolute(绝对)、fixed(固定)、sticky(粘性)。

    div { position: absolute; top: 50px; left: 100px; }
    
  • z-index:控制元素的堆叠顺序,数值越大,元素越靠前。(对 static 属性的不起作用)

    div { z-index: 10; }
    

3.5 显示与隐藏属性

  • display:控制元素的显示方式,常见的取值有 blockinlineinline-blocknone

    p { display: block; }
    
  • visibility:控制元素的可见性,取值包括 visiblehidden。隐藏元素后,它仍占据空间。

    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。在这种模式下,widthheight 只应用于内容区域,内边距、边框和外边距会额外增加到元素的总尺寸中。
    • 计算公式:总宽度 = width + padding + border + margin
  • border-box

    • 在这种模式下,widthheight 包括内容区域、内边距和边框。因此,总宽度和总高度不会受到内边距和边框的影响。
    • 计算公式:总宽度 = 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-boxwidth 100px 只是内容区域的宽度,内边距和边框会额外增加到总宽度中。


五、CSS布局

5.1 浮动布局(float)

float 用于将元素浮动到容器的左侧或右侧,并允许文本或其他元素围绕它布局。

img { float: left; margin-right: 10px; }

5.2 清除浮动(clear)

浮动元素可能会影响其父元素和相邻元素的布局。为了解决这种问题,使用 clear 属性来取消浮动的影响。常见的取值为 leftrightboth,分别清除左、右或两侧的浮动。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

这个 .clearfix 类通常用在浮动元素的父元素上,以确保容器能够正确包裹浮动内容。

5.3 Flexbox布局

Flexbox(弹性盒子模型)是CSS中用于创建复杂布局的一种强大工具。它能轻松控制元素的对齐、排列和分配空白空间。

常见属性:

  • display: flex;:将容器设为Flex容器。
  • flex-direction:定义主轴方向,可以设置为 row(水平)、column(垂直)。
  • flex-wrap:定义是否允许元素换行,取值有 nowrapwrapwrap-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-columnsgrid-template-rows:定义网格的列和行。例如:

    .container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
    }
    

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

  • grid-columngrid-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 属性用于控制元素的显示行为,它定义了元素在页面中的布局方式。最常用的值有 blockinlineinline-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 使元素成为行内元素。行内元素不会开始新行,它们在页面上按顺序排列,并且只占据其内容的空间。
    • 宽高:行内元素不能设置宽度和高度,widthheight 属性对其不起作用。
    • 边距和填充:可以设置行内元素的 marginpadding,但这些不会影响元素的行高(即不会增加行高)。
  • 常见元素<span><a><strong><em><img> 等。

  • 示例

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

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

display: inline-block

  • 特性

    • 行内块级元素display: inline-block 结合了 blockinline 的特性。它使元素在页面上像行内元素一样排列,但允许设置宽度和高度。
    • 宽高:可以设置元素的 widthheight,这些属性会影响元素的显示。
    • 边距和填充:可以设置 marginpadding,这些设置会影响元素的布局。
  • 示例

    <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-spacetext-overflowoverflow 属性用于控制元素中内容的显示方式,尤其是处理文本溢出和元素内容的布局。下面是对这些属性的详细讲解:

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 属性用于处理溢出的文本内容的显示方式,通常与 overflowwhite-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: nowrapoverflow: hiddentext-overflow: ellipsis
    .ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    <div class="ellipsis">
      这是一个很长的文本,可能会溢出容器边界,从而显示省略号。
    </div>
    

七、CSS中的继承与优先级

继承

某些CSS属性会自动继承父元素的值,如 colorfont-family 等。而 marginpadding 等属性则不会自动继承。

例如:

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

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

层叠与优先级

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

  1. 内联样式:最高优先级,直接在元素中定义的样式。
  2. ID选择器:次高优先级。
  3. 类选择器、伪类和属性选择器
  4. 元素选择器
  5. 通配符:最低优先级。

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

例如:

p {
    color: red !important;
}

八、CSS动画与过渡

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

过渡效果(transition)

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

常见属性:

  • transition-property:要发生变化的属性(如 colorwidth)。
  • 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)、动画、媒体查询等知识,能够帮助开发者创建更加美观、响应式且用户友好的网页设计。


js

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 class="text">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事件有三个传播阶段:捕获目标冒泡

  1. 捕获阶段:事件从最外层的祖先元素开始,向下传播到目标元素。
  2. 目标阶段:事件到达目标元素(触发事件的元素)。
  3. 冒泡阶段:事件从目标元素开始,向上冒泡到最外层的祖先元素。

二、获取 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 parentNodechildNodes

  • 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:获取上一个兄弟节点。
  • nextElementSiblingpreviousElementSibling:获取相邻的元素兄弟节点。

例子

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.innerHeightwindow.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 提供了一些内建的表单验证属性(如 requiredpattern),同时可以通过 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 使得代码看起来像同步代码,但它实际上是在等待异步操作完成后继续执行。