1 html
1.1 列表
01.总结
<ol> 定义有序列表
<ul> 定义无序列表 u拼音"无"
---------------------------------------------------------------------------------------------------------
<li> 定义列表项
---------------------------------------------------------------------------------------------------------
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
02.样式
<!-- 有序列表 -->
<h2>有序列表（<ol>）</h2>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
---------------------------------------------------------------------------------------------------------
<!-- 无序列表 -->
<h2>无序列表（<ul>）</h2>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
---------------------------------------------------------------------------------------------------------
<!-- 自定义列表 -->
<h2>定义列表（<dl>）</h2>
<dl>
<dt>术语一</dt>
<dd>术语一的定义描述。</dd>
<dt>术语二</dt>
<dd>术语二的定义描述。</dd>
<dt>术语三</dt>
<dd>术语三的定义描述。</dd>
</dl>
1.2 表格
00.标签
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
01.总结
HTML 表格由 <table> 标签来定义。
tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
---------------------------------------------------------------------------------------------------------
边框 border="1px"
水平移动 align="left|centerlright"
垂直移动 valign="toplmiddlelbottom"
跨行 rowspan="n"
跨列 colspan="n"
02.样式
<table border="1">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>45</td>
</tr>
</tbody>
</table>
---------------------------------------------------------------------------------------------------------
<table>元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
<thead>用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody>用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
03.样式
<html>
<head>
<title>表格</title>
<meta charset="utf-8">
</head>
<body>
<table border="1px" >
<caption> 标题 </caption>
<tr>
<th> 表头1 </th>
<th> 表头2 </th>
<th> 表头3 </th>
</tr>
<tr align="right">
<td rowspan="2">1-1</td>
<td colspan="2" align="center">a</td>
</tr>
<tr>
<td valign="middle">2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td align="center">c</td>
</tr>
</table>
</body>
</html>
1.3 表单
00.标签
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
01.总结
<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。
02.样式
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
03.样式
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<!-- action="result.html"：跳转页面
method="get/post"：get（地址栏显示参数值，默认）, post（不显示，推荐）
enctype="multipart/form-data"：上传文件到服务器时，防止乱码
-->
<form action="result.html" method="post" enctype="multipart/form-data">
<!-- 文本字段type="text"
密码字段type="password"
size: 文本框/密码显示的长度
maxlength:实际能够输入内容的长度
-->
认证名：<input name="realname" value="汐炎" type="text" size="100" maxlength="5" readonly="readonly"/><br/>
用户名：<input name="username" value="默认值" type="text" size="100" maxlength="5"/><br/>
密码： <input name="pwd" value="默认值" type="password" size="50" maxlength="5"/>
<br/>
<br/>
<!-- 复选框type="checkbox" 默认checked="checked"-->
兴趣爱好：<br/>
足球<input name="hobby" type="checkbox" checked="checked">
篮球<input name="hobby" type="checkbox">
排球<input name="hobby" type="checkbox" checked="checked">
<br/>
<br/>
<!-- 复选框type="checkbox" 默认checked="checked"-->
计划旅游的城市：<br/>
西安<input name="city" type="checkbox">
北京<input name="city" type="checkbox" checked="checked" >
上海<input name="city" type="checkbox">
<br/>
<br/>
<!-- 单选框type="radio" 默认checked="checked"-->
性别：<br/>
男<input name="sex" type="radio" checked="checked"/>
女<input name="sex" type="radio" />
<br/>
<br/>
<!-- 下拉框select+option 默认selected="selected"-->
城市：<br/>
<select>
<option>西安</option>
<option selected="selected">成都</option>
<option>深圳</option>
</select>
<br/>
<br/>
<!-- 提交type="submit" 默认“提交”，可以通过value修改为“注册” -->
<!-- 重置type="reset" 默认“重置”，可以通过value修改为“清空” -->
<input value="注册" type="submit"/>
<input value="清空" type="reset"/>
<!-- 普通type="button"，用于事件触发，禁用disabled="disabled"-->
<input value="按钮" type="button" disabled="disabled"/>
<br/>
<br/>
<!-- 文本域（Textarea）-->
个人说明:<br/>
<textarea cols="50" rows="5">
这是编写默认值的地方！
</textarea>
<br/>
<br/>
<!-- 上传文件：type="file"
下面两个一起写：①input type="file"
②<form enctype="multipart/form-data">：防止乱码
-->
<input type="file" name="file1"/>
<br/>
<br/>
<!-- 隐藏域：type="hidden"。前台不显示，但真实存在，供后台使用-->
<input type="hidden" value="1">
<br/>
<br/>
<!-- 语义化表单fieldset+legend-->
<fieldset>
<legend>用户信息</legend>
认证名：<input name="realname" value="汐炎" type="text" size="100" maxlength="5" readonly="readonly"/><br/>
用户名：<input name="username" value="默认值" type="text" size="100" maxlength="5"/><br/>
密码： <input name="pwd" value="默认值" type="password" size="50" maxlength="5"/>
</fieldset>
<br/>
<br/>
<!-- 表单元素的标注label + for + id-->
<label for="xa">西安</label>
<input id="xa" type="checkbox" />
</form>
</body>
</html>
1.4 表单校验
01.HTML5内置表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Validation</title>
</head>
<body>
<h1>HTML5 Form Validation</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name must contain only letters and spaces."><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="6"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
02.JavaScript 自定义表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Custom Form Validation</title>
<script>
function validateForm(event) {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const age = document.getElementById('age').value;
if (!name.match(/^[A-Za-z\s]+$/)) {
alert('Name must contain only letters and spaces.');
event.preventDefault();
return false;
}
if (!email.includes('@')) {
alert('Please enter a valid email address.');
event.preventDefault();
return false;
}
if (password.length < 6) {
alert('Password must be at least 6 characters long.');
event.preventDefault();
return false;
}
if (age < 18 || age > 99) {
alert('Age must be between 18 and 99.');
event.preventDefault();
return false;
}
return true;
}
</script>
</head>
<body>
<h1>JavaScript Custom Form Validation</h1>
<form action="/submit" method="post" onsubmit="return validateForm(event)">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
1.5 布局
00.汇总
a.总结
<div id="container" style="width:500px">：500px是绝对单位
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">：100px是绝对单位
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">：400px是绝对单位
b.样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里、
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com
</div>
</div>
</body>
</html>
01.header、section、article、aside、nav、footer，它们在语义上有不同的用途
a.header
功能: 用于定义页面或部分的头部区域，通常包含网站的标题、导航菜单或其他介绍性内容。
CSS 样式: 通常设置为页面顶部的容器，可以包括背景颜色、内边距、边框等。
header {
background-color: #f4f4f4;
padding: 20px;
border-bottom: 1px solid #ddd;
}
b.section
功能: 用于定义文档中的一个独立的区段或部分，通常包括标题和相关内容。适用于将页面内容分成逻辑上的部分。
CSS 样式: 用于创建分隔不同内容区域的样式，可以设置边距、填充、背景色等。
section {
margin: 20px 0;
padding: 20px;
background-color: #f9f9f9;
}
c.article
功能: 用于定义独立的内容块，通常可以独立存在并与其他内容分开，例如博客文章、新闻报道等。
CSS 样式: 可以设置独立块的样式，例如背景色、边框、阴影等，以便区分不同的文章内容。
article {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
background-color: #fff;
}
d.aside
功能: 用于定义与主内容相关但不直接属于主内容的部分，如侧边栏、补充信息或广告。
CSS 样式: 常用于创建侧边栏或浮动的补充内容区域，可以使用浮动、背景色和边距来设置样式。
aside {
background-color: #f0f0f0;
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
float: right; /* 例子: 侧边栏通常浮动在右侧 */
}
e.nav
功能: 用于定义导航链接区域，通常包含网站的主要导航菜单。
CSS 样式: 常用于设置导航条的样式，包括布局、背景色、字体等。
nav {
background-color: #333;
padding: 10px;
color: #fff;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
f.footer
功能: 用于定义页面或部分的底部区域，通常包含版权信息、联系信息或页脚链接。
CSS 样式: 常用于设置页脚的样式，例如背景颜色、内边距、边界等。
footer {
background-color: #f4f4f4;
padding: 20px;
border-top: 1px solid #ddd;
text-align: center;
}
g.共同点
header {
display: block;
unicode-bidi: isolate;
}
header、section、article、aside、nav 和 footer 都是 HTML5 的语义化标签，它们在默认情况下具有类似的样式，但具体的 CSS 属性可能会有所不同。
-----------------------------------------------------------------------------------------------------
display: block;：这些标签默认都是块级元素。块级元素的特点是会占据整行的宽度，换行显示。
unicode-bidi: isolate;：这个属性用于处理双向文本（如英文和阿拉伯文混排）。
它在大多数情况下可能不对这些元素产生实际影响，因为默认情况下，unicode-bidi 的值是 normal，
而 isolate 用于确保文本的双向处理是独立的，主要用于更复杂的双向文本情况。
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 结构标签示例</title>
<style>
header {
background-color: #f4f4f4;
padding: 20px;
border-bottom: 1px solid #ddd;
}
section {
margin: 20px 0;
padding: 20px;
background-color: #f9f9f9;
}
article {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
background-color: #fff;
}
aside {
background-color: #f0f0f0;
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
float: right;
width: 200px;
}
nav {
background-color: #333;
padding: 10px;
color: #fff;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
footer {
background-color: #f4f4f4;
padding: 20px;
border-top: 1px solid #ddd;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
</header>
<section>
<article>
<h2>文章标题</h2>
<p>这是文章的内容部分。</p>
</article>
<aside>
<h3>侧边栏标题</h3>
<p>这是侧边栏的内容。</p>
</aside>
</section>
<footer>
<p>版权所有 © 2024</p>
</footer>
</body>
</html>
1.6 框架
00.总结
<iframe> 元素用于在当前页面中嵌入另一个 HTML 页面。这对于展示外部内容（例如，嵌入视频、展示第三方内容等）非常有用
01.iframe常用属性
src: 指定要嵌入的页面的 URL。
title: 提供有关 <iframe> 内容的描述。
width 和 height: 设置 <iframe> 的宽度和高度。
frameborder: 设置是否显示边框，0 表示无边框。
scrolling: 设置是否显示滚动条。取值可以是 "yes"、"no" 或 "auto"。
allowfullscreen: 允许全屏模式。
sandbox: 应用沙箱模式以限制 <iframe> 内容的行为和功能。可以设置多个空格分隔的标志。
02.基本示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Iframe Example</title>
<style>
iframe {
border: 2px solid #ccc;
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h1>Basic Iframe Example</h1>
<iframe src="https://www.example.com" title="Example Website"></iframe>
</body>
</html>
03.带有属性的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe with Attributes</title>
<style>
iframe {
border: 2px solid #000;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<h1>Iframe with Attributes</h1>
<iframe
src="https://www.wikipedia.org"
title="Wikipedia"
width="600"
height="300"
frameborder="0"
scrolling="yes"
allowfullscreen
></iframe>
</body>
</html>
04.嵌入YouTube视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Iframe Example</title>
<style>
iframe {
border: none;
width: 560px;
height: 315px;
}
</style>
</head>
<body>
<h1>Embedded YouTube Video</h1>
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
allowfullscreen
></iframe>
</body>
</html>
1.7 [新]视频
01.总结
a.HTML5 Video 标签
标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹
b.视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频示例</title>
</head>
<body>
<h1>HTML5 视频示例</h1>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频标签。
</video>
</body>
</html>
1.8 [新]音频
01.总结
a.HTML5 Audio 标签
标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用
b.音频格式的MIME类型
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 音频示例</title>
</head>
<body>
<h1>HTML5 音频示例</h1>
<audio controls>
<source src="sample.mp3" type="audio/mp3">
您的浏览器不支持 HTML5 音频标签。
</audio>
</body>
</html>
1.9 [新]表单
00.总结
a.HTML5 新表单元素
<datalist>: 提供一个下拉列表供用户选择。用户可以从列表中选择一个选项或输入其他值。
<keygen>: 用于生成密钥对（已弃用）。现代浏览器不再支持此元素。
<output>: 用于显示计算或其他动态内容的结果。
b.HTML5 新表单属性
autocomplete: 控制浏览器是否启用自动填充功能。设置为 "off" 禁用自动填充。
novalidate: 在 <form> 标签上使用时，禁用表单验证。
autofocus: 当页面加载时，自动将焦点设置到该输入字段。
form: 指定 <input> 元素属于哪个表单。
formaction: 指定表单提交时的 URL。
formenctype: 指定表单提交的编码类型。
formmethod: 指定表单提交时使用的 HTTP 方法（如 "get" 或 "post"）。
formnovalidate: 指定在提交时禁用表单验证。
formtarget: 指定表单提交的目标窗口。
list: 与 <datalist> 元素结合使用，提供预定义的选项列表。
min 和 max: 用于 <input> 元素指定允许的最小值和最大值。
multiple: 允许选择多个文件或多个值（适用于文件和选择输入）。
pattern: 用于正则表达式验证输入的值。
placeholder: 提供输入字段的提示文本。
required: 指定该字段为必填项。
step: 指定合法的数字步长（适用于 <input type="number"> 和 <input type="range">）。
01.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 表单元素和属性示例</title>
</head>
<body>
<h1>HTML5 表单元素和属性示例</h1>
<!-- 使用 <datalist> 元素 -->
<h2><datalist> 元素</h2>
<label for="fruit">选择一个水果:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="苹果">
<option value="香蕉">
<option value="橙子">
<option value="葡萄">
</datalist>
<br><br>
<!-- 使用 <keygen> 元素 -->
<h2><keygen> 元素 (注意: keygen 元素在现代浏览器中已被弃用)</h2>
<form action="#">
<label for="keygen">生成密钥:</label>
<keygen id="keygen" name="keygen">
</form>
<br><br>
<!-- 使用 <output> 元素 -->
<h2><output> 元素</h2>
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<label for="a">数字 A:</label>
<input type="number" id="a" name="a">
<label for="b">数字 B:</label>
<input type="number" id="b" name="b">
<output name="result" for="a b">0</output>
</form>
<br><br>
<!-- 使用 <form> 新属性 -->
<h2><form> 新属性</h2>
<form action="#" method="post" autocomplete="off" novalidate>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" placeholder="请输入姓名" required autofocus>
<br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
<br><br>
<input type="submit" value="提交">
</form>
<br><br>
<!-- 使用 <input> 新属性 -->
<h2><input> 新属性</h2>
<form action="#" method="post">
<label for="number">选择一个数字 (1-100):</label>
<input type="number" id="number" name="number" min="1" max="100" step="1" required>
<br><br>
<label for="range">选择范围 (0-100):</label>
<input type="range" id="range" name="range" min="0" max="100" step="1">
<br><br>
<label for="url">输入网址:</label>
<input type="url" id="url" name="url" placeholder="https://example.com" required>
<br><br>
<label for="file">选择文件:</label>
<input type="file" id="file" name="file" multiple>
<br><br>
<label for="search">搜索:</label>
<input type="search" id="search" name="search">
<br><br>
<label for="tel">输入电话号码:</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
1.10 [新]输入框
00.总结
Color Input (<input type="color">): 允许用户选择颜色。
Date Input (<input type="date">): 允许用户选择日期。
Datetime Input (<input type="datetime-local">): 允许用户选择本地日期和时间。
Email Input (<input type="email">): 允许用户输入电子邮件地址，并进行基本的验证。
Month Input (<input type="month">): 允许用户选择月份和年份。
Number Input (<input type="number">): 允许用户输入数字，并可以设置最小值、最大值和步长。
Range Input (<input type="range">): 允许用户选择一个范围值。
Search Input (<input type="search">): 允许用户输入搜索查询。
Tel Input (<input type="tel">): 允许用户输入电话号码。
Time Input (<input type="time">): 允许用户选择时间。
URL Input (<input type="url">): 允许用户输入网址，并进行基本的验证。
Week Input (<input type="week">): 允许用户选择年份和周数。
01.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 表单输入类型示例</title>
</head>
<body>
<h1>HTML5 表单输入类型示例</h1>
<form action="#" method="post">
<!-- Color Input -->
<label for="color">选择颜色:</label>
<input type="color" id="color" name="color">
<br><br>
<!-- Date Input -->
<label for="date">选择日期:</label>
<input type="date" id="date" name="date">
<br><br>
<!-- Datetime Input -->
<label for="datetime">选择日期和时间:</label>
<input type="datetime-local" id="datetime" name="datetime-local">
<br><br>
<!-- Email Input -->
<label for="email">输入邮箱:</label>
<input type="email" id="email" name="email">
<br><br>
<!-- Month Input -->
<label for="month">选择月份:</label>
<input type="month" id="month" name="month">
<br><br>
<!-- Number Input -->
<label for="number">输入数字:</label>
<input type="number" id="number" name="number" min="1" max="100" step="1">
<br><br>
<!-- Range Input -->
<label for="range">选择范围:</label>
<input type="range" id="range" name="range" min="0" max="100" step="1">
<br><br>
<!-- Search Input -->
<label for="search">搜索:</label>
<input type="search" id="search" name="search">
<br><br>
<!-- Tel Input -->
<label for="tel">输入电话:</label>
<input type="tel" id="tel" name="tel">
<br><br>
<!-- Time Input -->
<label for="time">选择时间:</label>
<input type="time" id="time" name="time">
<br><br>
<!-- URL Input -->
<label for="url">输入网址:</label>
<input type="url" id="url" name="url">
<br><br>
<!-- Week Input -->
<label for="week">选择周:</label>
<input type="week" id="week" name="week">
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
1.11 附：html标签
00.汇总
a.分类1
01.列表
02.表格
03.表单
04.表单校验
05.布局
06.框架常用属性
07.[新]视频
08.[新]音频
09.[新]表单
10.[新]输入框
b.分类2
01.普通文本和pre标签
02.常用标签1
03.常用标签2
01.列表
<ol> 定义有序列表
<ul> 定义无序列表 u拼音"无"
---------------------------------------------------------------------------------------------------------
<li> 定义列表项
---------------------------------------------------------------------------------------------------------
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
02.表格
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
03.表单
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 定义一个计算结果
04.表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Validation</title>
</head>
<body>
<h1>HTML5 Form Validation</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]+" title="Name must contain only letters and spaces."><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required minlength="6"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="99" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
05.布局
<div id="container" style="width:500px">：500px是绝对单位
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">：100px是绝对单位
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">：400px是绝对单位
header、section、article、aside、nav、footer，它们在语义上有不同的用途
06.框架常用属性
src: 指定要嵌入的页面的 URL。
title: 提供有关 <iframe> 内容的描述。
width 和 height: 设置 <iframe> 的宽度和高度。
frameborder: 设置是否显示边框，0 表示无边框。
scrolling: 设置是否显示滚动条。取值可以是 "yes"、"no" 或 "auto"。
allowfullscreen: 允许全屏模式。
sandbox: 应用沙箱模式以限制 <iframe> 内容的行为和功能。可以设置多个空格分隔的标志。
07.[新]视频
a.HTML5 Video 标签
标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹
b.视频格式
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
08.[新]音频
a.HTML5 Audio 标签
标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用
b.音频格式的MIME类型
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
09.[新]表单
a.HTML5 新表单元素
<datalist>: 提供一个下拉列表供用户选择。用户可以从列表中选择一个选项或输入其他值。
<keygen>: 用于生成密钥对（已弃用）。现代浏览器不再支持此元素。
<output>: 用于显示计算或其他动态内容的结果。
b.HTML5 新表单属性
autocomplete: 控制浏览器是否启用自动填充功能。设置为 "off" 禁用自动填充。
novalidate: 在 <form> 标签上使用时，禁用表单验证。
autofocus: 当页面加载时，自动将焦点设置到该输入字段。
form: 指定 <input> 元素属于哪个表单。
formaction: 指定表单提交时的 URL。
formenctype: 指定表单提交的编码类型。
formmethod: 指定表单提交时使用的 HTTP 方法（如 "get" 或 "post"）。
formnovalidate: 指定在提交时禁用表单验证。
formtarget: 指定表单提交的目标窗口。
list: 与 <datalist> 元素结合使用，提供预定义的选项列表。
min 和 max: 用于 <input> 元素指定允许的最小值和最大值。
multiple: 允许选择多个文件或多个值（适用于文件和选择输入）。
pattern: 用于正则表达式验证输入的值。
placeholder: 提供输入字段的提示文本。
required: 指定该字段为必填项。
step: 指定合法的数字步长（适用于 <input type="number"> 和 <input type="range">）。
10.[新]输入框
Color Input (<input type="color">): 允许用户选择颜色。
Date Input (<input type="date">): 允许用户选择日期。
Datetime Input (<input type="datetime-local">): 允许用户选择本地日期和时间。
Email Input (<input type="email">): 允许用户输入电子邮件地址，并进行基本的验证。
Month Input (<input type="month">): 允许用户选择月份和年份。
Number Input (<input type="number">): 允许用户输入数字，并可以设置最小值、最大值和步长。
Range Input (<input type="range">): 允许用户选择一个范围值。
Search Input (<input type="search">): 允许用户输入搜索查询。
Tel Input (<input type="tel">): 允许用户输入电话号码。
Time Input (<input type="time">): 允许用户选择时间。
URL Input (<input type="url">): 允许用户输入网址，并进行基本的验证。
Week Input (<input type="week">): 允许用户选择年份和周数。
11.普通文本和pre标签
a.格式化
a.<pre> 标签
表示“预格式化文本”。文本在 <pre> 标签中的格式会被保留，包括空格、换行和制表符。
浏览器会以原样显示文本，保留所有的空格和换行符
-----------------------------------------------------------------------------------------------------
<pre>
Line 1
Line 2
Line 3
</pre>
-----------------------------------------------------------------------------------------------------
以上代码会在浏览器中显示为：
Line 1
Line 2
Line 3
b.普通文本
在 HTML 中，普通文本（如 <p>、<div>、<span> 等标签内的文本）会忽略多余的空格和换行，只保留一个空格，并自动换行。
文本会根据浏览器的默认格式来显示
-----------------------------------------------------------------------------------------------------
<p>
Line 1
Line 2
Line 3
</p>
-----------------------------------------------------------------------------------------------------
以上代码在浏览器中显示为：
Line 1 Line 2 Line 3
c.用途
<pre> 标签：通常用于显示代码或需要保留特定格式的文本，如诗歌、表格等。它适合那些格式和布局非常重要的内容。
普通文本：更常用于一般的内容展示，如段落、文章等，不需要保留特定的格式。
c.默认样式
<pre> 标签：文本通常会以固定宽度字体（如 Courier）显示，并保留输入的空格和换行。
普通文本：字体和显示样式通常会根据浏览器的默认样式或 CSS 样式进行调整。
d.CSS影响
<pre> 标签：可以通过 CSS 调整字体、颜色、背景等，但格式化特性（如空格和换行）不会被 CSS 影响。
普通文本：可以使用 CSS 控制显示方式，包括文本对齐、行高、字体大小等。
12.常用标签1
a.头部
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
b.常见
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br> 换行
-----------------------------------------------------------------------------------------------------
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!--...--> 定义注释
-----------------------------------------------------------------------------------------------------
<p> 定义一个段落
<br> 插入单个折行（换行）
c.文本格式化标签
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
d.计算机输出标签
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
e.HTML引文,引用及标签定义
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目
13.常用标签2
a.链接
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:[email protected]">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
b.图片
<img src="URL" alt="替换文本" height="42" width="42">
c.样式/区块
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
d.无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
e.有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
f.定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
g.表格
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
h.框架
<iframe src="demo_iframe.htm"></iframe>
i.表单
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
j.实体
< 等同于 <
> 等同于 >
" 等同于 引号
等同于 空格
©
2 html汇总
2.1 html语义化
01.总结
1.用正确的标签做正确的事情；
2.html语义化让页面的内容结构化，结构更加清晰，便于对浏览器、搜索引擎解析；
3.即使在没有CSS样式的情况下也以一种文档格式显示，并且是更容易阅读的；
4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2.2 html5新特性
01.总结
语义标签，例如：<header><header/>、<nav></nav>、<footer></footer>；
多媒体，视频video、音频audio；
图像效果，canvas元素、svg元素；
新的表单控件，比如 color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week；
02.总结
HTML5 表单属性， input 属性，比如height 和 width、min和max 、placeholder；form属性，autocomplete、novalidate；
HTML5 Web 存储，对本地存储的更好的支持，localStorage — 没有时间限制的数据存储、sessionStorage — 针对一个 session 的数据存储；
HTML5 拖放，设置元素为可托放；
HTML5 地理定位，获取用户地理位置；
HTML5 Web Workers（多线程并发）；
2.3 html5新增标签
01.结构标签
<section>独立内容区块</section>
<article>上下文不相关的独立内容</article>
<aside>这是边栏</aside>
<header>头</header>
<nav>导航</nav>
<footer>脚</footer>
<figure>表示一段独立的流内容</figure>
02.表单标签
email邮箱、url地址、number数值、range一定范围的数值、date日期选择器（火狐不支持）、search搜索域、color颜色、
03.媒体标签
<video>视频</video>
<audio>音频</audio>
<embed/> 定义外部的可交互的内容或插件 格式可以是Midi、Wav、AIFF、AU、MP3、flash
04.其他功能标签
<mark>高亮</mark>
<command>命令按钮</command>
<progress>状态标签</progress>
<details>用于描述文档或文档的某个细节</details>
<time>标记时间</time>
<datalist>为input标签定义一个下拉列表，配合option使用</datalist>
<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
<output>定义不同类型的输出</output>
<canvas>画布</canvas>
<menu>定义菜单列表</menu>
<dialog>定义对话框或窗口</dialog>
<meter>用于表示一个范围内的值</meter>
05.删除的标签
纯表现的元素：basefont、big、center、font、s、strike、tt、u；
对可用性产生负面影响的元素：frame、frameset、noframes；
2.4 html和html5区分
00.总结
取消了一些过时的 HTML4的标签；
添加了一些新的元素；
新的全局属性：id、tabindex、repeat；
新的JS API：HTML5 ≈ HTML+CSS3+JS+API
01.文档类型声明
html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
html5:<!doctype html>
02.在结构语义上
html:没有体现结构语义化的标签，我们通常都是这样来命名的<id="header">这样表示网站的头部。
html5:在语义上却有很大的优势。提供了一些新的标签，比如:<header>、<articale>、<footer>
04.对 <!DOCTYPE html> 与其他 HTML 版本的区别
a.HTML5 的 <!DOCTYPE html>
语法简洁：<!DOCTYPE html> 是 HTML5 中唯一的文档类型声明，简单明了，易于使用。
向后兼容性：这种声明告诉浏览器使用 HTML5 标准来解析文档，确保了浏览器以标准模式呈现页面。
现代特性：HTML5 引入了许多新特性，比如新的语义元素（如 <article>、<section>）、API（如 Web Storage、Canvas）和更好的多媒体支持（如 <audio> 和 <video>）。
b.其他 HTML 版本的 <!DOCTYPE> 声明
a.HTML 4.01
严格模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">)
过渡模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">)
框架集模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">)
b.XHTML 1.0
严格模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">)
过渡模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)
框架集模式 (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">)
c.区别总结
简洁性：<!DOCTYPE html> 是 HTML5 的标准声明，去掉了旧版本中的复杂性和冗余，简化了文档类型声明。
兼容性：HTML5 的 <!DOCTYPE html> 旨在确保浏览器使用标准模式渲染页面，不再需要浏览器的怪异模式。
特性支持：HTML5 引入了新的特性和 API，因此使用 <!DOCTYPE html> 可以启用这些现代功能，而旧版的 DOCTYPE 声明则不支持这些特性。
2.5 html5写!DOCTYPE html
00.总结
HTML5 不基于 SGML（标准通用标记语言），因此不需要对DTD（文档类型定义）进行引用，但是需要 doctype 来规范浏览器的行为。
HTML 4.01 中的 doctype 需要对DTD（文档类型定义）进行引用，因为 HTML 4.01 基于 SGML。
Doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。
01.区别
标准模式（也就是严格呈现模式）用于呈现遵循最新标准的网页；
兼容模式（也就是松散呈现模式或者怪异模式）用于呈现为传统浏览器而设计的网页；
---------------------------------------------------------------------------------------------------------
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行；
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看；
02.具体区别
盒模型
兼容模式下可设置百分比的高度和行内元素的高宽
用margin:0 auto设置水平居中在IE下会失效
兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
2.6 html5新标签的浏览器兼容
01.方法1：实现标签被识别
通过document.createElement(tagName)方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式
02.方法2：JavaScript解决方案
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
03.方法3：使用kill IE6
在</body>之前调用
<!--if lte IE 6]>
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
2.7 前端优化
01.前端页面有哪三层
结构层、表示层、行为层
02.前端性能优化
1.减少HTTP请求
2.使用浏览器缓存
3.服务端启用压缩（HTML、CSS、JavaScript）
4.CSS放在页面最上面、JavaScript放在页面最下面
5.精简CSS和JS文件 （避免CSS表达式）
6.减少对DOM的操作
7.使用JSON格式进行数据交换
8.避免重定向
2.8 浏览器构成
01.主流浏览器内核
1.Trident：俗称 IE 内核
2.Gecko：俗称 Firefox 内核
3.Presto：Opera 前内核
4.Webkit：Safari 内核
5.Blink：由 Google 和 Opera Software 开发，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
02.浏览器的主要构成
1.用户界面：包括地址栏、后退/前进按钮、书签目录等
2.浏览器引擎：用来查询及操作渲染引擎的接口
3.渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来
4.网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
5.UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
6.JS解释器：用来解释执行JS代码
7.数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
2.9 iframe优缺点
01.iframe的优点
iframe能够原封不动的把嵌入的网页展现出来
如果有多个网页引用iframe，那么你只需要修改一个iframe的内容，每一个页面的内容都能进行更改，方便快捷
统一风格，公用的部分可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
02.iframe的缺点
会产生很多页面，不容易管理
影响用户体验性
代码复杂，无法被一些搜索引擎索引到，不利于搜索引擎优化
设备兼容性差，很多的移动设备（PDA 手机）无法完全显示框架
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的
3 html布局
3.1 布局选择
01.决策树
a.汇总
├─ 一维排列（行或列）？
│ └─ 使用 Flexbox
│
├─ 二维布局（行和列）？
│ └─ 使用 Grid
│
├─ 浮层/覆盖？
│ └─ 使用 Position (absolute/fixed)
│
└─ 滚动到顶部固定？
└─ 使用 Position (sticky)
b.代码
/* Grid 控制页面布局 */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 80px 1fr 60px;
}
/* Flexbox 控制组件内部 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* 定位用于浮层 */
.dropdown {
position: absolute;
top: 100%;
left: 0;
}
02.布局选择指南
a.何时使用 Flexbox
a.适合场景
一维布局（单行或单列）
导航栏、工具栏
按钮组、表单控件对齐
卡片内部的元素排列
需要动态调整大小的元素
垂直/水平居中
b.不适合
复杂的二维布局
需要精确控制行和列的场景
b.何时使用 Grid
a.适合场景
二维布局（行和列）
页面整体布局
图片画廊
复杂的响应式布局
需要对齐到网格的设计
不规则布局（元素跨行/列）
b.不适合
简单的一维排列
需要 IE 10 及以下支持的场景
c.何时使用定位
a.适合场景：
浮层、提示框、下拉菜单
固定头部/底部
覆盖层、遮罩
绝对居中
角标、徽章
b.不适合：
主要的页面布局
需要响应式的复杂排列
03.常见布局模式
a.水平垂直居中
a.方法 1：Flexbox（推荐）
.center {
display: flex;
justify-content: center;
align-items: center;
}
b.方法 2：Grid
.center {
display: grid;
place-items: center;
}
c.方法 3：绝对定位
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
d.方法 4：Grid + margin auto
.parent {
display: grid;
}
.child {
margin: auto;
}
b.两栏布局（侧边栏 + 主内容）
a.方法 1：Flexbox
.layout {
display: flex;
}
.sidebar {
width: 250px;
flex-shrink: 0;
}
.content {
flex: 1;
}
b.方法 2：Grid
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
}
c.三栏布局
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 1rem;
}
/* 响应式 */
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}
d.等高列
/* Flexbox 自动等高 */
.row {
display: flex;
gap: 1rem;
}
.column {
flex: 1;
/* 所有列自动等高 */
}
/* Grid 也自动等高 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
e.卡片叠加布局
.card {
position: relative;
}
.card-image {
width: 100%;
display: block;
}
.card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 2rem 1rem 1rem;
}
f.Sidebar Layout（侧边栏推开布局）
.container {
display: grid;
grid-template-columns:
minmax(150px, 25%) /* 侧边栏：最小 150px，最大 25% */
1fr; /* 内容区：占据剩余空间 */
gap: 1rem;
}
g.Pancake Stack（垂直三分布局）
.layout {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header {
/* 自适应高度 */
}
.main {
/* 占据所有剩余空间 */
}
.footer {
/* 自适应高度 */
}
h.Holy Grail Layout（圣杯布局）
.container {
display: grid;
grid-template:
"header header header" auto
"nav main aside" 1fr
"footer footer footer" auto
/ 200px 1fr 200px;
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
i.12-Span Grid（12 列网格系统）
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
j.RAM（Repeat, Auto, Minmax）
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
3.2 [1]flexbox弹性布局
01.常见信息
a.概述
Flexbox 是一维布局模型，主要用于在一个方向（行或列）上排列元素。适合组件级布局。
b.基础概念
┌─────────────────────────────────────┐
│ Flex Container (容器) │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ Flex │ │ Flex │ │ Flex │ │
│ │ Item 1 │ │ Item 2 │ │ Item 3 │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
│ 主轴 (Main Axis) ───────────────→ │
│ 交叉轴 (Cross Axis) ↓ │
└─────────────────────────────────────┘
02.容器属性
a.display
.container {
display: flex; /* 块级 flex 容器 */
display: inline-flex; /* 行内 flex 容器 */
}
b.flex-direction（主轴方向）
.container {
flex-direction: row; /* 默认，水平从左到右 */
flex-direction: row-reverse; /* 水平从右到左 */
flex-direction: column; /* 垂直从上到下 */
flex-direction: column-reverse; /* 垂直从下到上 */
}
-------------------------------------------------------------------------------------------------
row:
┌───┐ ┌───┐ ┌───┐
│ 1 │ │ 2 │ │ 3 │
└───┘ └───┘ └───┘
column:
┌───┐
│ 1 │
├───┤
│ 2 │
├───┤
│ 3 │
└───┘
c.justify-content（主轴对齐）
.container {
justify-content: flex-start; /* 默认，起点对齐 */
justify-content: flex-end; /* 终点对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐，项目间等距 */
justify-content: space-around; /* 每个项目两侧等距 */
justify-content: space-evenly; /* 所有间距相等 */
}
-------------------------------------------------------------------------------------------------
flex-start:
┌─┐ ┌─┐ ┌─┐
center:
┌─┐ ┌─┐ ┌─┐
space-between:
┌─┐ ┌─┐ ┌─┐
space-evenly:
┌─┐ ┌─┐ ┌─┐
d.align-items（交叉轴对齐）
.container {
align-items: stretch; /* 默认，拉伸填满 */
align-items: flex-start; /* 起点对齐 */
align-items: flex-end; /* 终点对齐 */
align-items: center; /* 居中对齐 */
align-items: baseline; /* 基线对齐 */
}
e.flex-wrap（换行）
.container {
flex-wrap: nowrap; /* 默认，不换行 */
flex-wrap: wrap; /* 换行，第一行在上 */
flex-wrap: wrap-reverse; /* 换行，第一行在下 */
}
f.gap（间距）
.container {
gap: 16px; /* 行列间距都是 16px */
gap: 16px 24px; /* 行间距 16px，列间距 24px */
row-gap: 16px; /* 仅行间距 */
column-gap: 24px; /* 仅列间距 */
}
03.项目属性
a.flex-grow（放大比例）
.item {
flex-grow: 0; /* 默认，不放大 */
flex-grow: 1; /* 平分剩余空间 */
flex-grow: 2; /* 获得 2 倍剩余空间 */
}
b.flex-shrink（缩小比例）
.item {
flex-shrink: 1; /* 默认，等比缩小 */
flex-shrink: 0; /* 不缩小 */
}
c.flex-basis（基础尺寸）
.item {
flex-basis: auto; /* 默认，根据内容 */
flex-basis: 200px; /* 固定基础宽度 */
flex-basis: 30%; /* 百分比宽度 */
}
d.flex（简写）
.item {
flex: 1; /* flex: 1 1 0% */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto */
flex: 0 0 200px; /* 不放大不缩小，固定 200px */
}
e.align-self（单独对齐）
.item {
align-self: auto; /* 默认，继承容器 align-items */
align-self: flex-start;
align-self: center;
align-self: flex-end;
align-self: stretch;
}
04.实战案例
a.案例1：导航栏布局
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li>首页</li>
<li>产品</li>
<li>关于</li>
</ul>
<button class="btn">登录</button>
</nav>
-----------------------------------------------------------------------------------------------------
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.btn {
padding: 0.5rem 1.5rem;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
b.案例2：卡片网格（自适应）
<div class="card-grid">
<div class="card">卡片 1</div>
<div class="card">卡片 2</div>
<div class="card">卡片 3</div>
<div class="card">卡片 4</div>
</div>
-----------------------------------------------------------------------------------------------------
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 calc(25% - 1rem); /* 4 列布局 */
min-width: 250px; /* 最小宽度，自动换行 */
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 响应式调整 */
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 1rem); /* 小屏 2 列 */
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%; /* 移动端 1 列 */
}
}
c.案例3：垂直居中
<div class="center-container">
<div class="content">完美居中的内容</div>
</div>
-----------------------------------------------------------------------------------------------------
.center-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.content {
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
---
3.3 [2]grid网格布局
01.常见信息
a.概述
Grid 是二维布局系统，可以同时处理行和列。适合页面级布局和复杂的二维排列。
b.基础概念
┌─────────────────────────────────────┐
│ Grid Container │
│ ┌──────┬──────┬──────┐ │
│ │ 1,1 │ 1,2 │ 1,3 │ ← Grid Row │
│ ├──────┼──────┼──────┤ │
│ │ 2,1 │ 2,2 │ 2,3 │ │
│ └──────┴──────┴──────┘ │
│ ↑ │
│ Grid Column │
└─────────────────────────────────────┘
02.容器属性
a.display
.container {
display: grid; /* 块级网格 */
display: inline-grid; /* 行内网格 */
}
b.grid-template-columns / rows（定义列和行）
.container {
/* 固定宽度 */
grid-template-columns: 200px 200px 200px;
/* 百分比 */
grid-template-columns: 33.33% 33.33% 33.33%;
/* fr 单位（fraction，比例） */
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 比例 */
/* repeat() 函数 */
grid-template-columns: repeat(3, 1fr); /* 3 个等宽列 */
/* 混合使用 */
grid-template-columns: 200px 1fr 2fr;
/* auto-fill（自动填充） */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* auto-fit（自动适应） */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
-----------------------------------------------------------------------------------------------------
auto-fill vs auto-fit
auto-fill: 填充空轨道
┌────┐ ┌────┐ ┌────┐ [空] [空]
auto-fit: 拉伸填满
┌─────┐ ┌─────┐ ┌─────┐
c.gap（间距）
.container {
gap: 20px; /* 行列间距都是 20px */
gap: 20px 30px; /* 行间距 20px，列间距 30px */
row-gap: 20px;
column-gap: 30px;
}
d.grid-template-areas（区域命名）
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
-----------------------------------------------------------------------------------------------------z
┌─────────────────────────────────┐
│ header (80px) │
├──────┬────────────────┬─────────┤
│ │ │ │
│ side │ content │ aside │
│ bar │ (1fr) │ (200px) │
│(200) │ │ │
├──────┴────────────────┴─────────┤
│ footer (60px) │
└─────────────────────────────────┘
e.justify-items / align-items（项目对齐）
.container {
/* 水平对齐 */
justify-items: start | end | center | stretch;
/* 垂直对齐 */
align-items: start | end | center | stretch;
/* 简写 */
place-items: center center; /* align-items justify-items */
}
f.justify-content / align-content（内容对齐）
.container {
/* 整个网格在容器中的水平对齐 */
justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
/* 整个网格在容器中的垂直对齐 */
align-content: start | end | center | stretch | space-between | space-around | space-evenly;
/* 简写 */
place-content: center center;
}
03.项目属性
a.grid-column / grid-row（跨列/行）
.item {
/* 占据第 1 到第 3 列（2 列） */
grid-column: 1 / 3;
grid-column-start: 1;
grid-column-end: 3;
/* 简写：跨 2 列 */
grid-column: span 2;
/* 占据第 1 到第 2 行 */
grid-row: 1 / 2;
grid-row: span 2; /* 跨 2 行 */
}
-----------------------------------------------------------------------------------------------------
.item-1 {
grid-column: 1 / 3; /* 跨 2 列 */
grid-row: 1 / 3; /* 跨 2 行 */
}
-----------------------------------------------------------------------------------------------------
┌──────────────┬──────┐
│ │ │
│ item-1 │ 2 │
│ (跨 2x2) ├──────┤
│ │ 3 │
├──────┬───────┼──────┤
│ 4 │ 5 │ 6 │
└──────┴───────┴──────┘
b.grid-area（区域简写）
.item {
/* 完整写法 */
grid-area: row-start / col-start / row-end / col-end;
grid-area: 1 / 1 / 3 / 3;
/* 或使用命名区域 */
grid-area: header;
}
c.justify-self / align-self（单独对齐）
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: center center;
}
04.实战案例
a.案例1：经典圣杯布局
<div class="layout">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="content">Main Content</main>
<aside class="aside">Aside</aside>
<footer class="footer">Footer</footer>
</div>
-----------------------------------------------------------------------------------------------------
.layout {
display: grid;
grid-template-columns: 250px 1fr 200px;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
min-height: 100vh;
gap: 1rem;
}
.header {
grid-area: header;
background: #3498db;
color: white;
display: flex;
align-items: center;
padding: 0 2rem;
}
.sidebar {
grid-area: sidebar;
background: #ecf0f1;
padding: 1rem;
}
.content {
grid-area: content;
background: white;
padding: 2rem;
}
.aside {
grid-area: aside;
background: #ecf0f1;
padding: 1rem;
}
.footer {
grid-area: footer;
background: #34495e;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* 响应式 */
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"aside"
"footer";
}
}
b.案例2：响应式图片画廊
<div class="gallery">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
</div>
-----------------------------------------------------------------------------------------------------
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: 200px;
gap: 1rem;
padding: 1rem;
}
.item {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: bold;
}
/* 特殊布局 */
.item-1 {
grid-column: span 2;
grid-row: span 2;
}
.item-4 {
grid-column: span 2;
}
c.案例3：12 列栅格系统
<div class="grid-12">
<div class="col-8">主要内容（8/12）</div>
<div class="col-4">侧边栏（4/12）</div>
<div class="col-4">卡片 1</div>
<div class="col-4">卡片 2</div>
<div class="col-4">卡片 3</div>
</div>
-----------------------------------------------------------------------------------------------------
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
/* 工具类 */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
3.4 [3]position定位布局
01.z-index层级管理
a.代码
/* 建议使用统一的 z-index 规范 */
:root {
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
.dropdown { z-index: var(--z-dropdown); }
.modal-backdrop { z-index: var(--z-modal-backdrop); }
.modal { z-index: var(--z-modal); }
b.说明
z-index 控制元素在同一堆叠上下文（stacking context）中的层叠顺序。
每个上下文内的元素根据 z-index 排序，不同上下文之间互不影响。
c.说明
z-index 数值越大，元素越在上面（越靠前），覆盖数值小的元素。
相同上下文内，z-index 大的会遮住小的。z-index 可以为负数，但只影响本层上下文，不会盖过父上下文。
d.渲染优先级
先比较上下文层级
同级才比较 z-index 数字大小
后出现的元素在 z-index 相同的情况下位于上方（HTML 流顺序）
02.position属性：static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）
a.static（默认）
.element {
position: static; /* 正常文档流，top/right/bottom/left 无效 */
}
b.relative（相对定位）
a.代码
.element {
position: relative;
top: 20px; /* 相对于原位置向下偏移 20px */
left: 30px; /* 相对于原位置向右偏移 30px */
}
b.特点
相对于自身原位置偏移
原来的空间仍然保留
常作为绝对定位的参照物
c.absolute（绝对定位）
a.代码
.parent {
position: relative; /* 作为定位参考 */
}
.child {
position: absolute;
top: 0;
right: 0;
/* 相对于最近的非 static 父元素定位 */
}
b.特点
脱离文档流
相对于最近的定位祖先元素
如果没有定位祖先，则相对于 <html>
c.常见用法
/* 居中对齐 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 覆盖整个父元素 */
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
d.fixed（固定定位）
a.代码
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* 相对于视口定位 */
}
b.特点
脱离文档流
相对于浏览器窗口定位
滚动时保持位置不变
c.常见用法
/* 固定顶部导航 */
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 999;
}
/* 遮罩层 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
e.sticky（粘性定位）
a.代码
.sticky-header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
b.特点
相对定位和固定定位的混合
滚动到阈值前是相对定位
超过阈值后变为固定定位
c.实战案例
<div class="container">
<h2 class="sticky-title">分类 A</h2>
<ul>
<li>项目 1</li>
<li>项目 2</li>
<!-- 更多项目 -->
</ul>
<h2 class="sticky-title">分类 B</h2>
<ul>
<li>项目 1</li>
<li>项目 2</li>
</ul>
</div>
-------------------------------------------------------------------------------------------------
.container {
max-height: 500px;
overflow-y: auto;
}
.sticky-title {
position: sticky;
top: 0;
background: #f8f9fa;
padding: 1rem;
margin: 0;
border-bottom: 2px solid #dee2e6;
z-index: 1;
}
3.5 [4]响应式布局
00.汇总
01.媒体查询（Media Queries）
02.容器查询（Container Queries）
03.响应式单位
04.流式布局技巧
01.媒体查询（Media Queries）
a.基础语法
/* 移动优先（推荐） */
.container {
padding: 1rem; /* 默认移动端 */
}
@media (min-width: 768px) {
.container {
padding: 2rem; /* 平板 */
}
}
@media (min-width: 1024px) {
.container {
padding: 3rem; /* 桌面 */
}
}
b.常用断点
/* Extra Small devices (手机，竖屏) */
@media (max-width: 575.98px) { }
/* Small devices (手机，横屏) */
@media (min-width: 576px) and (max-width: 767.98px) { }
/* Medium devices (平板) */
@media (min-width: 768px) and (max-width: 991.98px) { }
/* Large devices (桌面) */
@media (min-width: 992px) and (max-width: 1199.98px) { }
/* Extra large devices (大屏桌面) */
@media (min-width: 1200px) { }
c.方向查询
/* 横屏 */
@media (orientation: landscape) {
.video-player {
width: 100vw;
height: 100vh;
}
}
/* 竖屏 */
@media (orientation: portrait) {
.video-player {
width: 100vw;
height: auto;
}
}
d.设备特性查询
/* 触摸设备 */
@media (hover: none) and (pointer: coarse) {
.button {
padding: 1rem; /* 更大的触摸区域 */
}
}
/* 鼠标设备 */
@media (hover: hover) and (pointer: fine) {
.button:hover {
background-color: #0056b3;
}
}
/* 暗黑模式 */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #ffffff;
}
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
02.容器查询（Container Queries）
/* 定义容器 */
.card-container {
container-type: inline-size;
container-name: card;
}
/* 基于容器宽度的样式 */
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
@container card (min-width: 600px) {
.card {
grid-template-columns: 1fr 1fr;
}
}
03.响应式单位
.element {
/* 相对于视口 */
width: 100vw; /* 视口宽度的 100% */
height: 100vh; /* 视口高度的 100% */
font-size: 5vw; /* 视口宽度的 5% */
/* 相对于父元素 */
width: 50%;
/* 相对于根元素字体大小 */
padding: 2rem; /* 通常 1rem = 16px */
/* 相对于当前元素字体大小 */
margin: 1em;
/* 混合使用 */
font-size: clamp(1rem, 2vw, 2rem); /* 最小 1rem，理想 2vw，最大 2rem */
width: min(90%, 1200px); /* 取较小值 */
width: max(50%, 300px); /* 取较大值 */
}
04.流式布局技巧
/* 流式网格 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 1rem;
}
/* 流式字体 */
:root {
font-size: clamp(14px, 2vw, 18px);
}
/* 流式间距 */
.section {
padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem);
}
3.6 附：css单位
01.字体大小一致性
a.核心问题：视觉不一致
在不同页面或组件中（例如 Vue 应用与原生 HTML 页面），即使应用了相似的 font-size 规则，渲染出的字体在视觉上大小也可能存在差异。
b.根本原因：字体度量 (Font Metrics)
这是最主要的原因：即使 font-size 值完全相同（如 16px），不同的 font-family（字体族）因其内部设计（字形高度、间距等）不同，会导致最终渲染的视觉大小产生差异。
次要原因：复杂的 CSS 继承链也可能在不同 DOM 结构中产生微小的计算偏差。
c.最佳实践：确保一致性的三步法
a.统一基准：设置根字号
在全局 CSS 中为根元素 :root 设置一个明确的 font-size，作为整个应用的计算基准。
:root {
font-size: 16px; /* 为 1rem 定义了基准值 */
}
b.统一单位：优先使用 rem
对于布局和字体大小，rem 是最佳选择。因为它只相对于根元素的字号，计算简单、全局可控，避免了 em 因嵌套带来的复杂性。
c.显式声明：消除不确定性
在需要确保字体大小严格一致的关键容器或组件上，显式设置 font-size。这会覆盖因字体度量或继承差异带来的潜在问题。
/* 强制组件使用与根元素一致的基础字号 */
.my-component-container {
font-size: 1rem; /* 1rem = 16px (基于 :root 设置) */
}
02.CSS单位速查
a.px (像素)
特点：绝对单位，大小固定。
缺点：不随用户设置或页面缩放而改变，不利于可访问性（Accessibility）。
b.em (相对单位)
特点：相对于父元素的 font-size。
陷阱：在多层嵌套下，计算会变得复杂且不可预测（例如 1.2em 的 1.2em...）。
c.rem (Root EM - 根相对单位)
特点：只相对于根元素 (:root) 的 font-size。
优势：强烈推荐！ 全局只有一个参照物，计算简单，预测性强，是现代 Web 开发中实现响应式和可维护布局的首选单位。
3.7 附：css父子传递
01.基本信息
a.核心机制
父组件样式能影响子组件的根元素，依赖于【组件渲染结构 + CSS 选择器匹配】
b.关键点
父组件在模板中直接使用 <content-area>。
渲染后，子组件的根节点 <div class="layout-content"> 被插入父组件 DOM 结构中。
父组件样式文件中的 .root-container .layout-content 选择器成功匹配该元素。
c.JS与渲染逻辑知识点
a.渲染过程
Vue 遇到 <content-area> 时，会渲染子组件并将子组件的模板结果插入父组件 DOM 中。
b.DOM 层级
子组件根元素是父组件 .root-container 的后代，因此可被父组件 CSS 选择器匹配。
c.作用域说明
父组件使用非 scoped 样式时，其选择器能跨组件作用。
若子组件使用 scoped 样式，不会影响父组件样式匹配其根节点。
d.常见用途
父组件控制子组件布局（尺寸、间距、Flex 行为）。
子组件控制内部表现（内容、排版、颜色等）。
02.示例场景
a.场景
本篇解释 `src/views/demo3/css/index.css` 中关于 `.layout-content` 的样式，
是如何作用于子组件 `src/views/demo3/components/ContentArea.vue` 的根元素的。
b.父组件 (`index.vue`) 模板结构
a.说明
父组件在其模板中直接使用了子组件标签
b.示例
<!-- src/views/demo3/index.vue -->
<template>
<div class="root-container">
<!-- ... 其他布局 ... -->
<!-- 布局 2: 内容区域 (使用子组件) -->
<content-area :data-list="dataList"></content-area>
<!-- ... 其他布局 ... -->
</div>
</template>
<style scoped src="./css/index.css"></style>
c.子组件 (`ContentArea.vue`) 模板结构
a.说明
子组件的模板根元素被赋予了目标 class
b.示例
<!-- src/views/demo3/components/ContentArea.vue -->
<template>
<div class="layout-content" ref="contentRoot">
<!-- 子组件内部的其他内容 -->
</div>
</template>
<style scoped> /* 子组件内部样式 */ </style>
c.关键点
关键在于子组件的最外层 `div` 拥有 `class="layout-content"`。
d.父组件 CSS (`index.css`) 选择器
a.说明
父组件引入的 CSS 文件中包含以下规则
b.示例
/* src/views/demo3/css/index.css */
.root-container .layout-content {
/* 关键样式，例如: */
flex-grow: 1; /* 在 Flex 布局中伸展以填充剩余空间 */
overflow: hidden; /* 隐藏自身可能产生的滚动条 */
min-height: 0; /* 允许在 Flex 布局中正确收缩 */
margin-bottom: 15px; /* 与下方元素的间距 */
}
c.关键点
这个选择器 `.root-container .layout-content` 意为：
选中所有同时是 `.root-container` 的后代并且拥有 `layout-content` 类的元素
e.匹配过程
当 Vue 渲染父组件时，遇到 `<content-area>`，开始渲染子组件。
子组件渲染出的最外层 HTML 是 `<div class="layout-content" ...>`。
这个 `div` 位于父组件的 `<div class="root-container">` 内部。
因此，这个由子组件渲染出的 `div` **完全匹配**了父组件 CSS 中的 `.root-container .layout-content` 选择器。
结果：父组件 CSS 中定义的样式（`flex-grow`, `overflow`, `min-height`, `margin-bottom` 等）被成功应用到了子组件的**根元素**上。
父组件的 CSS 可以通过后代选择器精确地选中并影响子组件的根元素（如果子组件根元素具有匹配的 class 或其他属性）。
这使得父组件能够控制子组件作为一个整体在页面布局中的表现（如尺寸、定位、间距等），而子组件的 `scoped` 样式则负责其内部元素的样式。