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标签
文本标签:
<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
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属性
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 定位属性
CSS提供了几种不同的定位方式来控制元素的位置。
position
:常用的取值包括static
(默认)、relative
(相对)、absolute
(绝对)、fixed
(固定)、sticky
(粘性)。div { position: absolute; top: 50px; left: 100px; }
z-index
:控制元素的堆叠顺序,数值越大,元素越靠前。(对static
属性的不起作用)div { z-index: 10; }
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布局
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会根据特定的优先级规则决定应用哪一条样式。优先级的计算取决于选择器的类型:
- 内联样式:最高优先级,直接在元素中定义的样式。
- 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)、动画、媒体查询等知识,能够帮助开发者创建更加美观、响应式且用户友好的网页设计。
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 标签(如
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事件有三个传播阶段:捕获、目标和冒泡。
- 捕获阶段:事件从最外层的祖先元素开始,向下传播到目标元素。
- 目标阶段:事件到达目标元素(触发事件的元素)。
- 冒泡阶段:事件从目标元素开始,向上冒泡到最外层的祖先元素。
二、获取 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
使得代码看起来像同步代码,但它实际上是在等待异步操作完成后继续执行。