HTML+CSS+JS

一.Web前端与网页的关系

前端是构建网页的一部分，负责用户在浏览器中看到和与之交互的内容，而网页是在浏览器中呈现内容的文档或页面。（网页通常是使用HTML+CSS+JavaScript组成）

HTML：定义了页面的结构和内容，包括文本、图像、链接等
CSS：定义页面的布局和样式
JS：用于添加交互性和动态功能作用

二.HTML

1.HTML概念

全称是Hypertext Markup Language(超文本标记语l言) 主要告诉浏览器哪些是段落、标题、列表等

HTML，通过一系列的标签（也称为元素）来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。

标签通常成对出现，包括开始标签和结束标签（也称为双标签），内容位于这两个标签之间，例如：

1
2
3

<p>这是一个段落</p>
<h1>这是一个一级标题</h1>/*h1-h6是标题的字号大小从高到低*/
<a href="#">这是一个超链接</a>

除了双标签，也有单标签，例如：

1
2
3

<input type="text">
<br>
<hr>

区别:单标签用于没有内容的元素，双标签用于有内容的元素

HTML文件结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 这里放置文档的元信息 -->
		<title>文档标题</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
		<script src="script.js"></script>
	</head>
	<body>
	<h1>这是一个标题</h1>
	<p>这是一个段落</p>
	<a href="https://www.example.com>这是一个链接</a>
	</body>
</html>

[!TIP]

在VSCode中，输入“！”即可自动生成以上基础框架

鼠标右键“Open with live server”

2.常用的文本标签

h1-h6:标题标签
p;段落标签
b标签/strong标签：字体加粗
i标签：斜体
u标签：下划线
s标签：删除线
ul:无序列表，ol有序列表（里面包含li标签）
table标签：表格标签（table row:表格行/table header:表格列）

/*行标题*/
<table>
    <tr>
        <td>行标题1</td>
    </tr>
</table>

/*列标题*/
<table>
    <tr>
        <th>列标题1</th>
    </tr>
</table>

3.标签属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素之间的关系。

基本语法：

1	<开始标签属性名="属性值">

每个HTML元素可以具有不同的属性

1 2	<p id="describe"class="section">这是一个段落标签</p> <a href="https://www.baidu.com">这是一个超链接</a>

属性名称不区分大小写，属性值对大小写敏感

<img src="example.jpg"alt="">
<img SRC="example.jpg"alt="">
<img src="EXAMPLE.JPG"alt="">
/*前两者相同，第三个与前两个不一样*/

:用于指定链接页面的URL，当为标签设置href属性时，标签就具有了链接的功能。

:用于指定链接页面的打开方式，其中：

_self:为默认值，表示在原窗口打开链接页面
_blank:表示在新窗口中打开链接页面
_parent:表示会在父窗口或父框架中打开
_top:在顶层窗口或顶层框架中打开

br:换行/hr:水平分割线

img:图片标签（alt:用于定义图像的这个替代文本，如果图像无法加载，浏览器就会显示alt属性中指定的文本）其中，设置图像的宽高：

width:宽度
height:高度

4.HTML区块—块元素与行内元素

1.块元素（block）

块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
可以包含其他块级元素和行内元素
常见的块级元素包括：div,p,h1-h6,ul,ol,li,table,form等

2.行内元素（inline）

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行呈现，不会独占一行
它们只占据其内容所需的宽度，而不是整行的宽度
行内元素不能包含块级元素，但可以包含其他行内元素
常见的行内元素包括：span（无任何语意，经常用于创建页面的布局结构，其主要作用是把一小部分文本包装起来，以便对它们使用样式、css或使用js行为）,a,strong(加粗),em(斜体),img,br,input(输入标签)等

div标签的类：”.”+类名：普通 /“#”+类名：div标签初始附带一个id /div.nav(根据定义的名字)

div标签通常用于创建块级容器，以便于组织页面的结构和布局，而span标签用于内联样式化文本，给文本的一部分应用样式或标记。使用这两个标签时，通常与CSS和JS一起使用的，这样就能实现更复杂的页面布局和样式化。

3.行内块元素（lnline-block）

水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性
行内块元素可以包含其他行内元素或块级元素
1
2
3
.inline-block{
width:blue;
}
[!CAUTION]

以上三种元素可以互相转换，需要用到display属性
1
2
3
4
5
*{
//清除浏览器之间不同的差异
nargin:0;
padding:0;
}

5.HTML表单

表单中的标签:

form标签：是表单的容器（如想要制作表单，就需要把表单中所需的所有元素必须包含在form标签内部即可）
1
2
3
<form>
<input type="text">//type属性规定了input元素的类型
</form>

placeholder属性:填写文本框的显示内容(给用户填写这个字段的一个提示)

value属性：规定input元素的值

[!CAUTION]

label:专门为input元素做标记的标签，作用与span标签类似(仅限于与input对应使用)

label会自动生成for属性:其for的作用是把label标签绑定到input元素，但是for一般与input标签中的id所对应。(id对于每个标签、元素而言都是唯一的)

input标签还能变成单选框:

        <label for="">性别</label>
        <input type="radio"name="gender">男
        <input type="radio"name="gender">女
        <input type="radio"name="gender">其他
//如果想要单选的效果，那么需要在标签内加入name属性

其中，submi提交按钮：把表单中所填写的这些内容提交到：

[!TIP]

form标签的两个属性:

①action:表示提交标签时向何处发送所填写的数据，所以该属性值就是URL(该URL需要服务器，也就是后端提供给我们的API，若设置为空以及”#”默认提交当前页面的数据)

②method:提交表单数据的方式，分别为get和post两种。(get方式获取地址栏可见/post提交数据时地址栏隐藏，可以提交大量的数据)

![78f92b5ccdb17d32b160ced7c795ff32](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-06\Ori\78f92b5ccdb17d32b160ced7c795ff32.jpeg)

三.CSS

CSS全名：Cascading Style Steets,中文名：层叠样式表。用于定义网页样式和布局的样式表语言。

通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

[!TIP]

HTML相当于房子的框架，定义了房子的基本结构，而CSS相当于是房子的装修。

1.CSS语法

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式。

选择器{   //选择器可以是所有元素或特定元素、特定类、特定id
属性1：属性值1；
属性2：属性值2；
}

选择器的声明中可以写无数条属性；
声明的每一行属性都需要以英文分号结尾；

声明中的所有属性和值都是以键值对这种形式出现的；

示例：

   
   p{
   
   color:blue;
   
   font-size:16px;
   
   }
   
   

### 2.CSS三种导入方式

1. 内联样式（Inline Styles）//直接放在html标签中，可以直接定义样式。

2. 内部样式表（Internal Stylesheet）//在html文档的head标签中来定义。

3. 外部样式表(External Stylesheet)  //把css样式单独放在css文件中，然后在head标签中使用另一个标签把它链接到这个html文档中，其好处是可以在多个页面上重复使用相同的样式。

   三种导入方式的优先级:内联样式>内部样式表>外部样式表

> [!NOTE]
>
> > [!NOTE]
> >
> > 应用外部样式时，需在css文件夹下先创建一个css文件，然后在html的head属性中使用<link rel="stylesheet" href="填入css文件的路径">//实例中可以直接输入相对路径（./css/style.css）
>
> 

### 3.css选择器

选择器是css中常见的部分，它允许你针对特定元素或一组元素定义样式

- 元素选择器

- 类选择器

- ID选择器：“#”

- 通用选择器：实现所有元素，“*”

- 子元素选择器：“.”例如 .father>p{}

- 后代选择器（包含选择器）:例如 .father p{}

- 并集选择器（兄弟选择器）:例 h3+p{}  选择在同一级别下的元素中的紧跟在选中元素之后的一个p标签

- 伪元素选择器：”：：“生成虚拟内容

- 伪类选择器：①用户交互 /②可以选择父元素中的第一个子元素选中

  快捷方法：想输入什么选择器直接加上相关选择器的符号+类名
  
  ```html
  ①
  #element:hover{
  color:blue;
  }
  <body>
      <h3 id="element">这是一个伪类选择器</h3>
  </body>

1
2
3

选中第一个子元素 :first-child
                :nth-child//第n个子元素
                :active//连接的一个状态

4.css常用属性

字体（font）复合属性

line-height:行间距

5.盒子模型

6.浮动

除此之外还有浮动和定位两种方式（自适应布局）

本质是摆盒子。

浮动：元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向。，用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

语法：

1
2
3

选择器{
float:left/right/none;
}

注：浮动是相对于父元素浮动，只会在父元素的内部移动。

[!NOTE]

浮动与行内块区别：浮动的元素贴靠在一起，不会有空隙，如果父元素装不下这些浮动的盒子，多出去的盒子就会另起一行。

而行内块彼此之间有缝隙，不如浮动方便。

浮动的三大特性：

脱标：脱离标准流
一行显示，顶部对齐
具备行内块元素特性

7.定位

![7b08dc643741650f8c303f1d5983f1b7_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\7b08dc643741650f8c303f1d5983f1b7_720.png)

四.JS

1.了解js

![ed09f5513d83fce9cd9e6a1d7b058b26_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\ed09f5513d83fce9cd9e6a1d7b058b26_720.png)

作用：

客户端开发：用于在用户浏览器中执行，实现动态效果和用户交互
网页开发：与HTML和CSS协同工作，使得网页具有更强的交互性和动态性
后端开发：使用Node.js也可以在服务器端运行，实现服务端应用的开发。

[!TIP]

js在服务器端运行，笔记本“Fn+F12”中的“Console”（控制台）即可查看结果。

console.log();//在控制台里面打印日志内容

2.js的接触语法

<script>
    var x;//变量
    let y=5;//常量（比起var更安全更灵活）
    const PI=3.14;
    </script>

[!NOTE]

null和undefined区别：

undefiend表示一个变量已被声明，但尚未被赋值，或是一个对象属性不存在，当函数无返回值时，默认返回的也是undefined；（表示对象可能在将来被赋值/某个值还未被计算）

null表示一个对象被明确赋值为空或不存在，它是一个被赋予的值，表示一个空对象引用或没有对象值；（明确表示无对象值）

3.js的控制语句

条件语句是编程中常见的结构，用于基于不同的条件执行不同的代码块。

if语句

if(condition)
{
    //如果条件为真，执行这里的代码
}

else

if(condition)
{
    //如果条件为真，执行这里的代码
}
else{
//如果条件为假，执行这里的代码块
}

else if

if(condition1)
{
    //如果条件1为真，执行这里的代码
}
else if(condition2){
    //如果条件2为真，执行这里的代码
}
else{
    //如果以上条件都为假，执行这里的代码块
}

for

for(初始化表达式；循环条件；迭代器)
    {
        //循环体，执行这里的代码
}

while

while(循环条件)
{
    //循环体，执行这里的代码
}

break和continue(循环关键字)

break:用于跳出循环，结束循环的执行
continue:用于跳过当前循环中的剩余代码，继续下一次循环

4.函数

函数是一段可重复使用的代码块，它接受输入（参数）、执行特定任务，并返回输出。

function function_name(参数1，参数2，参数3，...)//参数可不写，表示传参
{
    //函数体，执行这里的代码
    return 返回值；//可选，返回值
}

1.作用域

全局作用域：在函数内部声明的变量就具有局部作用域（函数作用域）

局部作用域：在函数外部声明的变量具有全局作用域

打印局部变量时报错了，报错的这个地方表示local_var这个变量没有定义，因为它是在函数的局部作用域里，在外部访问不到。

5.js的事件处理

![cab4f3d20e67abf6f3f05a96f9625b65_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\cab4f3d20e67abf6f3f05a96f9625b65_720.png)

事件绑定：

HTML属性
DOM属性
addEventListener方法（后两种与DOM相关）

事件绑定成功

6.DOM

![ca6c6f30e83d5c62b1f810f805c48465_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\ca6c6f30e83d5c62b1f810f805c48465_720.png)

文档树（节点树）：整个文档层次结构的表示（DOM的一切都是节点）HTML中的元素节点都是根节点，属性就是属性节点，还有文本节点

![fb23e5e3f06635c57285a1491ed04d3b_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\fb23e5e3f06635c57285a1491ed04d3b_720.png)

1.在js中获取元素节点需要使用DOM API提供的方法来获取文档中的元素

getElementByid(通过ID获取)注：ID通常是唯一的，因此获得的元素也是唯一的，除此以下四种获取的都是数组。
getElementsByClassName(通过类名获取)
getElementsByName(通过标签名获取)
getElementsByTagName(通过ID获取)
getElementsByTagNameNS(通过ID获取)

[!IMPORTANT]

如果想获取这数组中的某一个元素，就需要给一个索引值

因为box2是一个数组，因此需要加上一个[0];

而下面这个例子需要通过索引值，加上[2];就有三个节点了

[!WARNING]

innerHTML不是函数，它是一个属性，不可能把一个变量当成方法使用。

[!CAUTION]

innerHTML和innerText的区别：前者不仅会返回一个纯文本，还可以解析文本中的语意；后者会得到一个完整的文本，不会解析

与此同时还能修改颜色字体大小等：

匿名函数无函数名。

2.以下是DOM对象的常用方法

![47d617583fa0052753c80901389a3f50_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\47d617583fa0052753c80901389a3f50_720.png)

对子节点进行增删改查，或者创建这个属性节点、元素节点、文本节点以及设置和获取指定的这个属性值等等。

五.练习-表格的增删改查

[!CAUTION]

this在JS中是关键字，它指向当前的上下文的对象，可以在这个删除数据函数中打印一下this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td{
            border: 1px solid gray;
            text-align: center;
            padding: 8px;
        }
        th{
            background-color: rgb(134, 134, 242);
        }
        button{
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">表格的增删改查</h1>
    <button onclick="addRow()">新增数据</button>
    <table id="table">
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>猪猪侠</td>
            <td>123456789</td>
            <td>
                <button onclick="editRow(this)">编辑</button>
                <button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    <script src="/js/table.js"></script>
</body>
</html>

//新增数据函数
function addRow(){
    var table=document.getElementById('table');
   // console.log(table);
    //获取插入的位置
    var length=table.rows.length;
    //console.log(length);
    //插入行节点
    var newRow=table.insertRow(length);
    console.log(newRow);
   // newRow.innerHTML='123456';

   //插入链接点对象
   var nameCol=newRow.insertCell(0);
   var phoneCol=newRow.insertCell(1);
   var actionCol=newRow.insertCell(2);

   //console.log(newRow);
   //修改节点文本内容
   nameCol.innerHTML='未命名';
   phoneCol.innerHTML='无联系方式';
   actionCol.innerHTML='<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>';
}
//删除数据函数
function deleteRow(button){
   // console.log(button);
   var row=button.parentNode.parentNode;
   console.log(row);
   row.parentNode.removeChild(row);
}

//编辑数据函数
function editRow(button){
   // console.log(button);
   var row=button.parentNode.parentNode;
   var name=row.cells[0];
   var phone=row.cells[1];

   var inputName=prompt('请输入姓名');
   var inputphone=prompt('请输入联系方式');

   name.innerHTML=inputName;
   phone.innerHTML=inputphone;
}

六.移动端适配及rem

移动页面的开发需要具备响应式的设计，来适应不同大小和分辨率的移动设备屏幕，采用适合移动设备的布局方式。（确保用户在小屏幕上浏览时获得良好的用户体验）

1.响应式布局实现方法

通过rem,vh/vh等单位，实现在不同设备上显示相同比例进而实现适配。
响应式布局，通过媒体查询@media实现一套HTML配合多套CSS实现适配；

![04a981c5f36953cdb0763738cadefec6_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\04a981c5f36953cdb0763738cadefec6_720.png)

![9b719826aa3b93bcb4c5b445c9a92517_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\9b719826aa3b93bcb4c5b445c9a92517_720.png)

我们在改变这个html标签的font-size的时候，这个box-rem使用rem定位的这个盒子，它的大小也发生了变化，但因为这个font-size是一个死数，所以无论换什么平台它的显示长度不会改变，因为在不同设备中，显示屏幕不同。故我们只要在不同的设备上设置一个合适的初始值，当设备发生变化时，这个这个font-size就会自动等比的适配大小，从而在不同的设备上表现统一。这个值是动态改变的。

七.Flex弹性盒子

被称为弹性盒子布局，是一种用于在容器中进行布局的模型，它使得容器的子元素能够以弹性的形式排列，可以配合rem处理尺寸，来适应不同屏幕尺寸和设备（在前端应用广泛）

![b8fba7d1ca4532a5931c261ffb3880fd_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\b8fba7d1ca4532a5931c261ffb3880fd_720.png)

容器有两条轴，水平轴称为主轴（开始的地方叫main start,结束的叫main end），竖直部分成为交叉轴（开始的地方叫cross start,结束的叫cross end）。

单个的项目占据的主轴空间被称为main size,交叉轴占据的空间被称为cross size.(Flex布局主要设置Flex容器的对齐方式以及Flex item的大小形态)

![531f7e92f1e4567dec48b2ecaca85dce_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\531f7e92f1e4567dec48b2ecaca85dce_720.png)

![80e51ba49b8adeaf99bd59866349b39d_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\80e51ba49b8adeaf99bd59866349b39d_720.png)

如果一条轴线排不下的话：

![16dcde6f015bafd21485aaff8c0329d6_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\16dcde6f015bafd21485aaff8c0329d6_720.png)

定义项目在主轴的对齐方式：

![d4b553a6163079943d7bb2db76a890d4_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\d4b553a6163079943d7bb2db76a890d4_720.png)

[!CAUTION]

其中，space-between与space-around的区别就是：一个与两端对齐，一个与两端有间隔

![cf32ef814ee98aa8f1f432dfb1c9df5d_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\cf32ef814ee98aa8f1f432dfb1c9df5d_720.png)

![1086151a3d1886afed88e72d9055ac61_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\1086151a3d1886afed88e72d9055ac61_720.png)

[!IMPORTANT]

快捷方式

PS:在vc-code中，ctrl+”/“等于注释

如果浏览器的宽度不够，但是flex-wrap默认是nowrap,所以就不会切换到下一行，而是会压缩这个盒子的宽度。

[!CAUTION]

space-evenly表示每个项目之间的间隔完全相等，包括项目与边框之间的间隔，而space-around是两侧间隔相等，所以中间是两边的两倍。

多个轴线并不是说一个主轴和一个交叉轴，一个主轴和一个交叉轴只能算一个轴线，多个轴线是在开启这个flex-wrap之后会出现的行数，这个时候就是多个轴线。

八.进阶

![3ba73ab50dd9a3cc3b1dc9fc1e456e1b_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\3ba73ab50dd9a3cc3b1dc9fc1e456e1b_720.png)

九.JQ

1.JQ的作用

消除各个浏览器之间的差异问题
提供了简单的DOM操作
轻松实现各种动画
集成了大量的功能

理念:提升开发效率，写更少的代码做更多的事情。

JQ可以直接引用

只有JQ对象才能使用JQ方法

$(“#id属性值”)

如果用原生的JS去获取DOM对象，这个元素不存在的时候，它返回的是null.

如果用JQ去获取：还是会返回一个集合，只是这个集合中没有数据而已。(JQ获取元素时返回的是jq这种包装集合，而原生JS获取的是一个DOM对象，如果返回多个html集合的DOM对象)

2JQ与DOM互转

![5756ac20f5a78fe5df53b7e8de3f1f15_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\5756ac20f5a78fe5df53b7e8de3f1f15_720.png)

DOM转JQ

JQ转DOM

总结:通过JS获取到的对象全部是DOM对象，通过JQ获取到的对象是JQ包装以及对象，如果DOM专JQ，只需要通过${}（把DOM对象括起来即可）；如果JQ转DOM，只需要取JQ包装集对象的下标即可。

3.JQ-基础选择器

JQ选择器的用法与HTML类似，只不过需要要“${ }”

![d2075bcd6d998023fd79134836372b57_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\d2075bcd6d998023fd79134836372b57_720.png)

![d70468f4d65b6629c7d7d9edb23def66_720](C:\Users\16482\Documents\Tencent Files\3380872650\nt_qq\nt_data\Pic\2024-07\Thumb\d70468f4d65b6629c7d7d9edb23def66_720.png)

[!NOTE]

id选择器中，如果有多个同名id,则以第一个为准。