您的当前位置：首页正文

html css js（这一篇就够了）

2024-10-17 来源：个人技术集锦

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 ：定义链接与当前文档的关系，常见的有 noopener 、 nofollow 等。

  2. <img> 标签的属性 ：

    • src ：指定图片的URL地址。
    • alt ：当图片加载失败时显示的文本，有助于搜索引擎优化和辅助技术（如屏幕阅读器）。
    • width 和 height ：定义图片的显示宽度和高度，可以使用像素或百分比。

  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表单中新增了一些类型，如 email 、 url 、 number 、 date 、 range 等，简化了表单的验证和用户输入。

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; }

  • 并集选择器 ：选择多个不同元素，使用逗号 , 分隔。例如，选择所有 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 class="ellipsis">  这是一个很长的文本，可能会溢出容器边界，从而显示省略号。</div>

七、CSS中的继承与优先级

继承

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

例如： 

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

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 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";// 操作 classheader.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 使得代码看起来像同步代码，但它实际上是在等待异步操作完成后继续执行。

Copyright © 2019- zgxue.com 版权所有
京ICP备2021021884号-5

Top