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