HTML5
基本了解：
HTML学习：
2.HTML 文档结构
！+Tab键快捷生成html结构 生成如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
在开发工具中（VS Code）安装LIve server，如图：
HTML 基础知识
- HTML 是超文本标记语言的缩写，用于创建网页的结构和内容。
- HTML 文件以
.html或.htm扩展名结尾。 - HTML 文件由标签组成，标签通常成对出现，有开始标签和结束标签。
- 标签由尖括号
<和>包围，开始标签以<后跟标签名开始，结束标签以</后跟标签名开始。
基本结构
一个基本的 HTML 文档结构如下：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
<!DOCTYPE html>声明了文档类型为 HTML5。<html>标签是 HTML 文档的根元素，包含了整个页面的内容。<head>标签用于定义文档的头部区域，包含了页面的元数据和引用的外部资源。<title>标签用于定义页面的标题，将显示在浏览器的标题栏或标签页上。<body>标签包含了页面的主要内容，例如文本、图像、链接等。
常用的 HTML 标签
下面是一些常用的 HTML 标签及其使用方法：
<h1> - <h6>：定义标题，从大到小表示不同级别的标题。<p>：定义段落。<a>：创建链接，用于跳转到其他页面或内部锚点。<img>：插入图像，通过src属性指定图像的 URL。<ul>和<li>：创建无序列表，<ul>定义列表，<li>定义列表项。<ol>和<li>：创建有序列表，<ol>定义列表，<li>定义列表项。<div>：定义文档中的一个分区或区块，用于组织页面结构。<span>：用于对文本的一部分进行标记或样式设置。<table>、<tr>、<td>：创建表格结构，<table>定义表格，<tr>定义行，<td>定义单元格。
标签属性
HTML 标签可以包含属性，用于提供更多的信息或控制元素的行为。常用的属性包括：
class：为元素指定一个或多个类
名，用于定义元素的样式。
id：为元素指定一个唯一的标识符。style：为元素指定内联样式，直接应用于该元素。src：用于图像、音频、视频等元素，指定资源的 URL。href：用于链接元素<a>，指定链接目标的 URL。target：用于链接元素<a>，指定链接在何处打开（当前窗口、新窗口等）。
注释
在 HTML 中，可以使用注释来添加对代码的说明，注释不会在页面中显示。注释以 <!-- 开始，以 --> 结束。例如：
<!-- 这是一个注释 -->
<section></section>
<section>标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
span标签
<p>hahaha <span style="color:blue">hhh</span>aaaa</p>
<span>用于对文档中的行内元素进行组合。
<span>标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span>应用样式，那么 <span>元素中的文本与其他文本不会任何视觉上的差异。
<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
4.元素
<p>XXXXXXX</p>
- 开始标签（Opening tag）：包含元素的名称（ p），被左、右角括号所包围（
）。表示元素从这里开始或者开始起作用
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠（/）。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
5.其他说明
元素属性
<!-- 带属性的段落输入框 -->
<p title="这是个title属性"></p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
="这里面的就是属性"
6.超链接
语法为：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
7.传送锚点
eg：
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
即用id生成元素锚点标注页面某个元素或位置，例子中的C4即为一个锚点，然后用超链接跳转到锚点
8.图片img
<img src="url" alt="logo"> //alt只是一个解释,图片注意不要变形
<img src="./xx.jpg" alt=""> // ”./”当前路径下
<img src="../xx.jpg" alt=""> // 再上一级
<img src="@/xx.jpg" alt=""> // 最上面的级
Index.html 会被默认访问到
<a herf=”./index.html”>go to index</a>
用图片构成超链接：<a herf=”./index.html”>
<img src="./xx.jpg "alt="">
</a>
图片格式：webp（极大压缩图片）小图片可以用编码形式嵌入html中
图片的简单用法： eg:
<div class="img-box">
<div class="info">
<h3>One click triple connection</h3>
</div>
<img src="./assets/image/1.png" alt="">
</div>
运行结果：
9.表格
<h3 align="center">桥梁定期检查记录表</h3>
<table border="1" height="400" width="1000" cellspacing="0" align="center">
<tr align="left">
<td style="width: 100%" colspan="12">
公路管理机构名称：<input
id="Highway_agency"
style="
width: 100%;
box-sizing: border-box;
padding: 5px;
outline: none;
border: none;
"
type="text"
/>
</td>
<!--
<td colspan="1">
                 
</td> -->
</tr>
<tr align="center">
<td style="width:250px" colspan="2">
路线编号
</td>
<td><input
id="Bridge_No"
type="text"
style="
outline: none;
border: none;
font-size: 17px;
text-align: center;
width: 100px;
" colspan="2"
/>
</td>
<td style="width:250px" colspan="2">
路线名称
</td>
<td style="width:800px" colsapn="2"><input
id="Road_Name"
type="text"
style="
outline: none;
border: none;
font-size: 17px;
text-align: center;
width: 150px;
"
/>
</td>
<td style="width:800px" colspan="2">
桥位班号
</td>
<td style="width:800px" colsapn="2">
<input
id="Bridge_No"
type="text"
style="
outline: none;
border: none;
font-size: 17px;
text-align: center;
"
/>
</td>
</tr>
运行结果：
代码解释： 这段代码是一个HTML表格，用于创建一个桥梁定期检查记录表的页面。下面是对代码的解释：
-
<h3 align="center">桥梁定期检查记录表</h3>：这是一个标题标签<h3>，用于显示标题文字"桥梁定期检查记录表"。align="center"属性用于将标题居中对齐。 -
<table border="1" height="400" width="1000" cellspacing="0" align="center">：这是一个表格标签<table>，用于创建一个包含数据的表格。border="1"属性设置表格边框的宽度为1像素，height="400"和width="1000"属性设置表格的高度和宽度，cellspacing="0"属性设置单元格之间的间距为0，align="center"属性将表格居中对齐。 -
<tr align="left">：这是一个表格行标签<tr>，用于创建表格中的行。align="left"属性将行中的内容左对齐。 -
<td style="width: 100%" colspan="12">：这是一个表格单元格标签<td>，用于创建表格中的单元格。style="width: 100%"属性设置单元格的宽度为100%，colspan="12"属性将单元格合并为12列。在该单元格中包含了一个输入框，用于输入公路管理机构名称。
该代码的作用是用于创建表格的行和单元格，并在单元格中放置各种元素，例如文本输入框等。整个代码片段的目的是创建一个格式化的表格，用于填写桥梁定期检查记录表的相关信息。
列表
HTML 中的列表有三种常见的类型：无序列表（<ul>）、有序列表（<ol>）和定义列表（<dl>）。
无序列表（<ul>）用于表示一个无序的项目列表，每个项目通常以一个圆点或其他符号进行标记。例如：
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
有序列表（<ol>）用于表示一个有序的项目列表，每个项目通常以数字或字母进行标记。例如：
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
定义列表（<dl>）用于表示一组术语和其对应的定义。每个术语使用 <dt> 标签表示，每个定义使用 <dd> 标签表示。例如：
<dl>
<dt>术语1</dt>
<dd>定义1</dd>
<dt>术语2</dt>
<dd>定义2</dd>
<dt>术语3</dt>
<dd>定义3</dd>
</dl>
例子：
<li>
<a href="taylor.html" data-page="dashboard">
<i class='bx bxs-book-heart bx-tada'></i>
<span class="links_name">Alumbs</span>
</a>
<span class="tooltip">Alumbs</span>
</li>
<li>
<a href="taylor.html" data-page="dashboard">
<i class='bx bxs-book-heart bx-tada' ></i>
<span class="links_name">Alumbs</span>
</a>
<span class="tooltip">Alumbs</span>
</li>
<li>
<a href="#" data-page="movie">
<i class='bx bx-video-recording bx-tada' ></i>
<span class="links_name">Movies</span>
</a>
<span class="tooltip">Movies</span>
</li>
<li>
<a href="#" data-page="Views">
<i class='bx bxs-cable-car bx-tada' ></i>
<span class="links_name">Views</span>
</a>
<span class="tooltip">Views</span>
</li>
它表示一个列表项，它包含一个链接（<a>）和一个图标（<i>），以及一个包含文本的容器（<span>）。下面是各个部分的解释：
<li>：表示一个列表项。<a>：表示一个链接，href="taylor.html"指定链接的目标为taylor.html文件。data-page="dashboard"是一个自定义属性，用于存储页面的相关信息。<i>：表示一个图标，使用了bx bxs-book-heart bx-tada类来指定图标的样式。这个图标是由第三方图标库提供的，类名用于引用相应的图标样式。<span class="links_name">：表示一个包含文本的容器，用于显示文本内容。<span class="tooltip">：表示一个包含提示信息的容器，用于显示鼠标悬停时的提示文本。后面的几个类似
实现效果：创建一个带有链接、图标和文本的列表项，并且提供了一个鼠标悬停时显示提示文本的功能。 运行结果图：
11.下载图片
HTML5中a标签给我们提供了download 属性,就是让我们用来下载的.下面我们将此属性加入进去.修改后的代码如下,其余部分同上面保持一致,这里就不写出来了.
代码如下：
<a href="../src/assets/logo.png" download>photo</a>
12.一些快捷键
输入link+回车 Ctrl + Shift + P 清空终端快捷键
CSS
CSS基本语句
CSS（层叠样式表）是用于描述网页上元素外观和样式的一种语言。它结合了HTML的结构和JavaScript的交互，用于美化和布局网页。下面是一些重要的CSS概念和常用的CSS属性的简要介绍：
- 选择器（Selectors）：
- 用于选择要应用样式的HTML元素。
- 常见的选择器有标签选择器、类选择器、ID选择器、属性选择器等。
- 选择器可以组合使用，以便更精确地选择目标元素。 eg
/* 标签选择器 */
p {
color: blue;
}
/* 类选择器 */
.my-class {
font-size: 16px;
}
/* ID选择器 */
#my-element {
background-color: yellow;
}
/* 属性选择器 */
input[type="text"] {
border: 1px solid gray;
}
-
属性（Properties）：
- CSS属性用于设置元素的样式和外观。
- 属性由属性名和属性值组成，中间使用冒号分隔。
- 常见的属性包括颜色、字体、边框、背景、尺寸等。
-
盒模型（Box Model）：
- 每个HTML元素都被视为一个矩形的盒子。
- 盒模型由内容、内边距、边框和外边距组成。
- 可以使用属性来控制盒模型的大小、边距和边框样式。
/* 设置元素的边框和内边距 */
.box {
border: 1px solid black;
padding: 20px;
}
/* 调整盒模型的尺寸 */
.box {
width: 200px;
height: 150px;
}
/* 设置元素的外边距 */
.box {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
}
- 布局（Layout）：
- CSS用于控制网页元素的位置和布局。
- 常用的布局属性有
display、position、float和flexbox等。 - 可以使用这些属性来实现页面的响应式布局和灵活的元素排列。
/* 使用浮动布局 */
.float-left {
float: left;
}
/* 使用弹性盒子布局 */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
/* 使用定位布局 */
.positioned-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 媒体查询（Media Queries）：
- 媒体查询允许根据设备的特性和屏幕大小应用不同的样式。
- 可以使用媒体查询来创建响应式设计，使网页在不同的设备上呈现出最佳的用户体验。
/* 应用于小屏幕设备 */
@media (max-width: 600px) {
.responsive-element {
font-size: 14px;
}
}
/* 应用于大屏幕设备 */
@media (min-width: 1200px) {
.responsive-element {
font-size: 18px;
}
}
- 动画和过渡（Animations and Transitions）：
- CSS提供了动画和过渡效果来增加网页的交互性和吸引力。
- 可以使用关键帧动画（
@keyframes）和过渡（transition）属性来实现元素的动态效果。
/* 定义关键帧动画 */
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
/* 应用过渡效果 */
.transition-element {
transition: width 1s ease;
}
/* 鼠标悬停时改变元素颜色 */
.hover-element:hover {
background-color: yellow;
}
代码更具可读性和可维护性。
这些只是CSS的基础知识，你可以通过学习和实践来逐渐掌握更多的CSS技巧和特性。建议你在编写CSS代码时保持良好的组织结构和注释，以便后续的维护和调整。同时，不断尝试各种效果和布局，通过查阅CSS文档和参考资料来扩展你的CSS技能。
css初始化（消除内外边距）
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
CSS弹性布局
--post-spacing: 1.78vw; 是一个 CSS 变量（Custom Property），用于设置帖子之间的间距。
该变量的值 1.78vw 表示间距大小为视口宽度的 1.78%。这意味着在使用该变量的地方，帖子之间会有一个相对于视口宽度的间距，该间距大小根据视口的大小而动态调整。
--post-size: 25vw; 是另一个 CSS 变量，用于设置帖子的大小。
--mask-size: 100vw; 是第三个 CSS 变量，用于设置遮罩的大小。(遮罩将覆盖整个视口宽度)
居中与对齐
父元素用： display:flex;(默认水平)
垂直居中align-items:center;
交叉轴拉伸 align-items: stretch;(items对盒子里所有元素生效)
align-self: center;(只对本个生效)
居中2：
.item {
margin: auto;
}
-
justify-content(主轴对齐) 没有这句默认在左边 -
justify-content:space-between;(分散对齐)也就是将剩余的空间均匀地分配给项目之间的间隔 -
flex-direction: column;主轴改成竖着的了content多余空间的分布 -
flex-basis: 0;设置弹性盒子项目的初始主轴尺寸。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
谷歌图标的使用
设置圆角
border-radius: 100%;
.container{
display:flex;
flex-direction: column;
justify-content: center;
height:100%;
}
height!
第几个子元素翻转
.profile:nth-child(2)
{
flex-direction: row-reverse;
}
.profile:nth-child(odd)
{
flex-direction: row-reverse;
}
.profile:nth-child(even)
{
flex-direction: row-reverse;
}
.profile:nth-child(3n+1)
{
flex-direction: row-reverse;
}
弹性布局-增长
flex-grow: 1;//允许增长
flex-grow: 2;//增长比例变大
设置过渡：
transition: flex;
transition-duration: 0.2s;
flex-basis: 50%;分配元素最初占比
网格布局
当涉及到创建复杂的布局时，CSS网格布局（Grid Layout）是一个强大而灵活的工具。它提供了一种简洁的方式来定义网格容器（grid container）和网格项（grid item），以实现多列和多行的布局。下面是一份适合前端小白阅读的CSS网格布局笔记：
1. 创建网格容器（Grid Container）
使用display: grid;来将一个容器元素定义为网格容器。
示例：
.container {
display: grid;
}
2. 定义网格列和行
使用grid-template-columns和grid-template-rows属性来定义网格容器中的列和行。
示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 定义3列等宽 */
grid-template-rows: 100px 200px; /* 定义2行高度 */
}
3. 网格项的放置
使用grid-column和grid-row属性来指定网格项在网格容器中的位置。
示例：
.item {
grid-column: 1 / 3; /* 横向占据1到3列 */
grid-row: 2; /* 纵向占据第2行 */
}
4. 网格行和列的缩写形式
使用grid-template属性可以简化定义网格容器的列和行。
示例：
.container {
display: grid;
grid-template: 1fr 2fr / 100px 200px; /* 定义1行2列 */
}
5. 网格项的自动放置
网格布局支持自动放置网格项，即根据空间自动调整网格项的位置。
示例：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充列，并限制最小和最大宽度 */
}
6. 网格间距和对齐方式
使用grid-gap属性来定义网格容器中网格项之间的间距。使用justify-items和align-items属性来设置网格项的对齐方式。
示例：
.container {
display: grid;
grid-gap: 10px; /* 网格项之间的间距为10px */
justify-items: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
}
7. 响应式布局
使用媒体查询（Media Queries）结合网格布局可以创建响应式布局，以适应不同的屏幕尺寸。
示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 默认2列布局 */
}
@media screen and
(max-width: 768px) {
.container {
grid-template-columns: 1fr; /* 在小屏幕上变为1列布局 */
}
}
动画效果
下面的样式必须在屏幕宽度767px以下生效（比如缩放窗口大小的时候）
@media screen and (max-width: 767px) {
//样式
}
动画例子
@-webkit-keyframes admission {
0% {
-webkit-transform: translate(140vw, 0);
transform: translate(140vw, 0);
}
100% {
-webkit-transform: translate(13.39vw, 0);
transform: translate(13.39vw, 0);
}
}
@keyframes admission {
0% {
-webkit-transform: translate(140vw, 0);
transform: translate(140vw, 0);
}
100% {
-webkit-transform: translate(13.39vw, 0);
transform: translate(13.39vw, 0);
}
}
0%：动画开始时的状态。在这个状态下，元素被平移至视口右侧之外（距离为 140vw）。
100%：动画结束时的状态。在这个状态下，元素被平移至视口内的位置（距离为 13.39vw）。
运行结果如下：
css的一些细节总结
margin: 0 15px;
第一个0表示上下外边距为0，第二个15px表示左右外边距为15px
margin-left: auto;
flex-wrap: wrap;折行
content 元素间的空间
items 对齐
display: inline-flex;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("https://images.pexels.com/photos/271639/pexels-photo-271639.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=300");
设置了背景图片
grid-template-columns: 22rem 1fr;
// 1fr:占剩余空间
grid-template-columns: repeat(3,1fr);==grid-template-columns: 1fr 1fr 1fr;
这段代码涉及到CSS的网格布局（Grid Layout）。
grid-template-columns: 22rem 1fr; 表示定义一个网格容器（grid container）的列（columns）布局。其中，第一列的宽度为22rem，第二列使用1fr来表示，表示占据剩余的空间。这意味着第一列的宽度是一个固定的尺寸（22rem），而第二列会根据剩余的空间自动调整宽度。
grid-template-columns: repeat(3, 1fr); 是一个使用了CSS函数的缩写形式。它表示将网格容器的列分割成3个等宽的部分，每个部分都占据剩余的空间，相当于1fr 1fr 1fr。这样的定义将使得网格容器中的三列等宽，并且每列都会自动调整宽度以适应容器的大小。
这段代码通过不同的列布局方式来控制网格容器中列的宽度分配。第一个示例中，第一列固定宽度为22rem，第二列占据剩余的空间。而第二个示例中，使用了repeat函数将网格容器的列分割成3个等宽的部分。这样的技巧可以用于创建灵活的网格布局，以适应不同的设计需求和屏幕尺寸。
@media screen and (min-width: 540px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
响应式布局
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-template-columns 属性定义了网格布局中的列样式，auto-fit 参数表示自动适应，根据容器的可用空间自动调整列的数量，创建一个具有弹性列的网格布局，它会自动适应可用空间，每列的最小宽度为 16rem，最大宽度为 1fr（平均分配可用空间）。
@media screen and (min-width: 530px) {
form {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"name message"
"email message"
" . button";
}
}
媒体查询 @media screen and (min-width: 530px) 中，针对最小宽度为 530 像素的屏幕调整表单的布局
这种布局调整使得当屏幕宽度大于 530 像素时，表单元素以两列布局显示
