当前位置：首页 > 行业知识 > 2024蓝旭春季第一次前端培训课

行业知识

2024蓝旭春季第一次前端培训课

2026-11-13 15:10:26 来源：互联网转载

一、一些写在前面的介绍们

1. 网页与浏览器

什么是网页呢？

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）。

网页生成制作：前端人员书写HTML文件，然后浏览器打开，就能看到了网页。

关于浏览器

浏览器是网页显示、运行的平台，用于显示网页服务器或者文件系统的 HTML 文件内容，将服务器上网页文件中的文字、图像及其他信息显示在网页页面上。

常用浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari以及Opera等。

不同的浏览器有不同的浏览器内核，浏览器内核也就是浏览器所采用的渲染引擎，负责对网页语法的解释（如 HTML、JavaScript）并渲染（显示）网页。它决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

IE内核 Trident
谷歌内核 Webkit/Blink
火狐内核 Gecko
Safari内核 Webkit
Edge内核 Chromium

正是因为内核不同，所以浏览器有兼容问题

2. Web标准

Web标准是由W3C组织和其他标准化组织提出的一系列的规范和指南，用于确保网页在不同的浏览器和设备上能够正确地显示和运行。包括html、css和javascript等技术的规范。

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为	行为指网页模型的定义与交互的编写，主要指JavaScript

最佳方案 => 结构、样式、行为相分离

3. VScode插件推荐

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code ：讲中文
Live Server：在线调试部署
open in browser：将页面在浏览器中打开
Auto Import：根据引入的组件，自动导入提示
Auto Rename Tag：修改标签时自动完成另一侧标签的同步修改
Auto Close Tag：自动闭合HTML/XML标签

二、讲讲HTML吧

1. 什么是HTML

HTML的全称为超文本标记语言(Hyper Text Markup Language)，它不是一种编程语言，而是一种标记语言。HTML文档也叫做web页面。
它包括一系列标签，使用标签来描述网页。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本。

HTML不是简单的纯文本，它可以说明文字，图形、动画、声音、表格、链接等。

2. 什么是标签

HTML标签是由尖括号包围的关键词，就像这样 =>

①标签的结构

标签由以及一些标签名构成
许多标签有两部分成对出现，我们称之为双标签。标签对中的第一个标签为开始标签，第二个标签为结束标签，两个标签中间包裹的内容即为显示内容。
部分特殊的标签只有单个标签自成一体，我们称之为单标签。就像
、
...

②标签之间的关系

包含关系（父子关系）

并列关系（兄弟关系）

3. HTML基本结构框架

            我是标题    我是一些内容

是文档说明，写在html标签外面的第一行，用于声明文档类型是符合HTML5标准的。（是声明，不是标签！）
其意义所在是告诉浏览器程序员所编写的代码是按照html的规范进行编写，浏览器也要按照html规范进行编译，防止浏览器在编译代码时出现乱码。
是页面中最大的标签、文档的根标签，所有的其他的标签都是写在HTML标签里边的。它是文档开始与结束的标记，其间包含head和body两大部分。
lang ：语言种类，用来定义当前文档显示的语言。（en=>英文，zh-CN=>中文）
是HTML头部标签，其间包含title标签及文档的元（meta）数据等，它编写的是不在浏览器的文档窗口中显示给用户的信息。
是HTML标签结构标签，它定义的网页标题在浏览器标题栏显示。
是HTML主体结构标签，它定义的是呈现在浏览器的文档窗口中的内容。

: 标签是网页代码中区的一个关键标签，其提供的信息虽然用户不可见，但却是文档的最基本的元信息（元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等）。它以定义文档的各种元数据，提供各种文档信息，通俗来说就是可以理解为提供了关于网站的各种信息。
一个标签就是一项元数据，网页可以有多个。

        标签约定放在内容的最前面。

        标签主要的属性有四种，分别是charset、name、http-equiv和content。下面来具体介绍一下吧~

①charset

charset 是标签的一个很重要的属性，是用来定义文档的字符编码。如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
“UTF-8” 是其中的一种字符编码，它被称为万国码，囊括所有国家所需字符。charset=”UTF-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。
常见的字符编码有：gb2312、gbk、unicode、utf-8。
②name和content

        name属性用来定义元数据的名称，与content属性包含的值相关联，主要用于描述网页，以便于搜索引擎的查找。它的格式是这样的

下面列举了几个常用的name值

Keyword（关键字）

作用：keywords可以为搜索引擎提供的关键字列表，可以提高被搜索到的几率

Description（简介）

作用：description用来告诉搜索引擎你的网站主要内容，它的内容应该简短精确。一些浏览器将其用作书签页面的默认描述。

viewport（视口标签）

作用：提供有关视口初始大小的提示，仅供移动设备使用。

值取值描述
width 一个正整数或者字符串device-width 以pixels(像素)为单位，定义viewport（视口）的宽度。
height 一个正整数或者字符串device-height 以pixels(像素)为单位，定义viewport（视口）的高度。
initial-scale 一个0.0到10.0之间的正数定义设备宽度与视口大小之间的缩放比率。
maximum-scale 一个0.0到10.0之间的正数定义缩放的最大值。
minimum-scale 一个0.0到10.0之间的正数定义缩放的最小值。
user-scalable 一个布尔值（yes或no） no为用户不能缩放网页，默认为yes
③http-equiv

http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确的精确的显示网页内容。与之对应的属性值为content,content中的内容就是各个参数的变量值。

4. HTML常用标签

①标题标签

标题标签，共有六级

这里是一级标题

这里是二级标题

这里是三级标题

这里是四级标题

这里是五级标题

这里是六级标题

②段落标签

用于定义段落
浏览器会自动在每个
元素前后添加一个空行。

我是一个段落标签

在源代码中，这一段包含很多行，但浏览器会忽略它。

  ③换行标签

标签可以简单地开始新的一行
而当浏览器遇到
标签时，通常会在相邻的段落之间插入一些垂直的间距。
请使用
标签来插入换行符，而不是用它来增加段落之间的空白。

我将在这里换行
我将在这里换行

我是第三行的内容

我是第四行的内容

④水平线标签

用于在 HTML 页面中分隔内容，或定义内容上的变化
⑤文本格式化标签

文字

这里给出加粗、倾斜、下划线、删除线的各两种表示方法

标签名效果
b、strong 加粗
i、em 倾斜
u、ins 下划线
s、del 删除线
列表

有序列表：
（可以是数字或者字母的顺序）
无序列表：
列表中的项目可以用
来设置（可嵌套）

HTML

CSS

JavaScript

aaa

bbb

ccc

1.1

2.1

2.2

2.3

3.1

表格

标签定义了 HTML 表格，可以包裹多个
一个 HTML 表格由一个
元素和一个或多个、定义表格行，可以包裹多个
和元素组成
定义表格单元格，可以包裹要展示的内容
定义表格标题
定义表格的大标题

2024蓝旭前端课程安排
课程授课人
HTML+CSS入门 lzn
CSS进阶+设计 syc
JS入门 cjy
JS进阶+复习 cj
DOM+BOM xds
网络请求 dp
表单

a. 标签定义输入字段，其元素可以通过去设置type属性值显示不同样式

type属性值显示效果
text 文本框，输入单行可直接查看的文本
password 密码框，输入不可直接查看的密码
radio 单选框，用于在多项元素中选择一项
checkbox 多选框，用于选择多项元素
file 文件选择，用于上传本地文件
submit 提交按钮
reset 重置按钮
button 普通按钮，默认无功能
b. 标签为 input 、select、textarea等元素定义标注，它的for属性应当与相关元素的 id 属性相同。

我要学...
HTML CSS JavaScript

c. 标签定义多行文本输入控件。

d .标签定义可点击的按钮。

控件与相比，提供了更为强大的功能和更丰富的内容。
与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容（以及像、、、
、等标签）。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
e. 标签配合标签可以创建下拉列表及其可用选项。

常用于表单中，在需要提交表单时，需要 name 属性引用表单数据（如果省略 name 属性，下拉列表中的数据将不会被提交）。
需要使用 id 属性将下拉列表与标签（label）相关联。
我是下拉列表第1个选项我是下拉列表第2个选项我是下拉列表第3个选项

f. 标签用于为接收用户输入创建 HTML 表单。

注意：form表单的action属性！

form标签的action属性是一个表单当中必须的属性，action属性规定当提交表单时，向何处发送表单数据。
action属性的值是表单提交给的url，如果我们没有设置action属性，那么默认的表单还是提交给当前页面。
  ⑥媒体标签

  图片

标签用于在 HTML 页面中嵌入图像。
从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。标签创建了一个容器，用于引用图像。
img有两个必须的属性

src 想引用的图像的地址（网上的图片路径or本地的图片路径）
alt 如果由于某种原因无法显示图像，则指定图像的替代文本

音频

标签可以用于在页面中插入音频
音频标签支持的三种格式：MP3，Wav，Ogg

属性功能
src 音频路径
controls 显示播放音频的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
视频

标签可以用于在页面中插入视频
视频标签支持的三种格式：MP4，WebM，Ogg

属性功能
src 视频路径
controls 显示播放视频的控件
autoplay 自动播放（谷歌浏览器中静音播放需要配合muted）
loop 循环播放
   ⑦超链接标签

标签定义超链接，用于从一个页面链接到另一个页面。
元素最重要的属性是 href 属性，它指示链接的目的地（可以是外部链接or内部链接）。
空链接：href=“#”
戳我跳转！！！去另一个页面看看吧~

target：链接窗口的打开方式

_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
⑧p标签和span标签

  p

p是pision的简写，pision意为分割、区域、分组。
标签定义 HTML 文档中的分割或部分，可以把文档分割为独立的、不同的部分。
标签可以包含段落，表格等内容，用于放置不同的内容。
一般我们在网页通过p来布局定位网页中的每个区块。
  span

标签是一个行内容器，用于标记文本的一部分，或文档的一部分。

p是pision的简写，pision意为分割、区域、分组。

p是块级元素，在浏览器显示时通常会以新行开始。
span是行内元素，一行可以有多个 span是行内元素，一行可以有多个

二者的共性

二者都是无语义的布局标签
二者的区别

p是块级元素。
span 是内联元素。
块级元素行内元素
总是在新一行开始，独占一行相邻的元素排在一行，直到一行排不下才会换行
高度、行高、内外边距均可设置高度、行高、内外边距不可改变
默认情况下，其宽度自动填满其父元素宽度其宽度由元素的内容撑开，不可改变
可以容纳内联元素和其他块元素只能容纳内联元素和其他块元素
p、ul、li、table、p、h1等 span、a、em、i、img、td、button等
5. HTML特殊字符编码

编码显示效果描述
< 大于号或显示标记
& & 可用于显示其它特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
   半个空白位
      一个空白位
      不断行的空白
6. HTML注释怎么写

注释快捷键：Ctrl + /
三、CSS基础

1. 什么是CSS

CSS 指的是层叠样式表 / 级联样式表 (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作，它可以同时控制多张网页的布局
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.为什么我们需要CSS

        从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
        随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

3.CSS发展史

CSS发展至今，已经出现了4个版本

1. CSS1.0

19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。

2. CSS2.0

1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。

3. CSS2.1

2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。

4. CSS3

早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。

4. CSS引用方式

①内嵌式

内嵌式即为在head标签中设置style标签，并在style标签中设置内容
基础CSS学习 h1{ color: blue; }
今天开始我要学习CSS！

②外联式

外联式即为将CSS样式写在一个单独的css文件里，并在head标签中以的方式引入它，使CSS文件对本网页的样式有效。
基础CSS学习
今天开始我要学习CSS！

注意：

多重样式可以重叠，覆盖。
这三种的优先级为——行内样式 > 内嵌样式 > 外部样式（就近原则）

5. CSS选择器

①标签选择器

使用HTML标签名称分类，为页面的某一中标签指定统一的CSS样式
快速统一设置一样的样式，不能差异化
h1{ color: blue; font-family: 'Courier New', Courier, monospace; }

②类选择器

想要单独选择某一些标签并为其设置属性
结构需要class属性来调用class类
在HTML标签中加入class=“自定义名称”设置类名
在CSS中用"."+自定义类名来设置这一类的css样式
可以设置多类名，用空格隔开

/* CSS部分 */.bg{ width: 400px; height: 200px; background-color: aliceblue; }

③id选择器

为标有特殊id的HTML元素添加样式
在HTML标签中加入class=“自定义id名”设置id选择器
在CSS中用"#"+自定义类名来设置它对应的css样式
id属性只能在每个HTML文档中出现一次，不可重复使用！
hahaha

/* CSS部分 */#text{ width: 400px; height: 200px; background-color: aliceblue; }

④通配符选择器

使用"*"来设置css样式，表示选取页面所有元素
通常用于清除页面默认样式
* { margin: 0; padding: 0; }

ps：一些稍微进阶一些的关系选择器会在下节课为大家讲解哦~

6. CSS三大特性

①层叠性

        相同选择器给设置相同的样式，此时一个相同的样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。

h1{ color: blue; } h1{ color: red; /* 显示的字体颜色为红色 */ }

②继承性

子标签会继承父标签的某些此样式，如文本的颜色和字号，简单理解：子承父业。
恰当的使用继承可以简化代码，降低CSS的复杂性。
子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）。

son of p

.father{ color: blueviolet;}

字体相关属性：font、font-size、font-style、font-weight、font-family、line-height等。

文本相关属性：color、text-align、text-indent、text-transform、text-decoration、letter-spacing、word-spacing等。

列表相关属性：list-style、list-style-type、list-style-position等。

边框相关属性：border、border-color、border-style、border-width等。

背景相关属性：background、background-color、background-image等。

表格相关属性：border-collapse、border-spacing、caption-side等。

其他属性：visibility、cursor等。

③优先级

当同一个元素指定多个选择器就会由优先级产生。
选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行。
！important > 内联样式（标签中的style）> ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

选择器选择器权重
继承或者* 0,0,0,0
标签选择器
0,0,0,1

类选择器，伪类选择器 0,0,1,0
Id选择器
0,1,0,0

行内选择器 style=“ ” 1,0,0,0
!important重要性无穷大
注：

权重是由四组数字组成，但不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器。
等级判断，从左向右，如果某一位数值相同，则判断下一位数值。
这里的0,1采用的进制并不是简单的十进制，也不是二进制。可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器10，id选择器为100，行类样式为1000，！important 无穷大。
继承的权重为0，如果该元素没有直接选中，不管父元素权重多高,子元素得到的权重都是0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重多高。

7. CSS常用属性

①字体属性

  字体大小 font-size

可以设置“数值+px”或者直接选择以下几种
字体粗细 font-weight

值效果
bold 粗体字符，效果相当于700
bolder 更粗的字符
lighter 更细的字符
normal 默认粗细，效果相当于400
100 ~ 900 设置数字，由细到粗
字体样式 font-style

值效果
normal 默认值
italic 斜体字
字体类型 font-family

将每个值用逗号分开
若字体名称中有空格，则必须将名称加上引号
多个字体的目的是给浏览器提供选择，如果某电脑缺少字体A，则会去使用字体B，以此类推，如果都没有则浏览器会找字体替代。
设置所有字体相关属性 font

这是一个复合属性，可以设置上述所有字体属性
如果给同一个标签设置了相同的属性，样式会层叠
font: 100 italic 32px '幼圆';

②文本属性

颜色 color

color的设置方式有以下几种

使用代表颜色的单词，如red，blue等
使用16进制颜色表示，#后面带着六个16进制数，两两一组，如#557722 = #572
使用rgb()函数，形如rgb（red,green,blue），取值0-255
使用rgba()函数，形如rgb（red,green,blue,alpha），其中alpha表示透明度，0为透明
文本对齐 text-align

用于设置文本的水平对齐方式
如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐
值效果
left 左对齐
right 右对齐
center 居中
文本装饰 text-decoration

用于设置或删除文本装饰
值效果
underline 下划线
line-through 删除线
overline 上划线
none 无文本装饰（常用于去掉a标签下划线）
文本缩进 text-indent

用于实现文本首行缩进
用法：数字+px / 数字+em（1em = 当前标签的font-size的大小）
文本间距 letter-spacing

用于实现文本中字符之间的间距的改变
用法：数字+px （正数增加间距，负数缩减间距）
行高 line-height

用于控制一行的上下行间距
用法：数字+px / 数字+em
可以用于让单行文本垂直居中，可以取消上下间距
③背景属性

背景颜色 background-color

指定元素的背景色，表示方法同设置字体的color
背景图片 background-image

指定用作元素背景的图像。
图片怎么引入？ => 使用url( )函数
默认情况下，图像会重复，以覆盖整个元素
background-image: url(./https://blog.csdn.net/m0_74242351/article/details/bears.jpg);

  背景平铺 background-repeat

值效果
repeat 水平方向和垂直方向都平铺（默认）
no-repeat 不重复
repeat-x 沿着水平方向平铺
repeat-y 沿着垂直方向平铺
   背景位置 background-position

可以理解为图片的裁剪
如果只指定了一个值，另一个默认为居中对齐
设置所有背景相关属性 background

复合属性，可以设置上述所有背景属性
④列表属性

列表项标记的类型 list-style-type

list-style-type：使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
       - none：无标记。（去除标记）
       - disc：默认。标记是实心圆。
       - circle：标记是空心圆。
       - square：标记是实心方块。
       - decimal：标记是数字。
       - decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
       - lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
       - upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
       - lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
       - upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

列表项图标 list-style-image

list-style-image：url(图片地址) 自己指定图标，这种不能控制图标的大小，如果图标过大，无法控制

⑤边框属性

  边框类型 border-style （必需！）

可以设置1~4个值，对应上、右、下、左边框
p { border-style: solid dotted dashed double;}

  边框宽度 border-width

指定四个边框的宽度
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick
  边框颜色 border-color

方法同设置color
  边框 border

复合属性可以设置以上三种
p { border: 5px solid red;}

  边框各边 border-top / left / bottom / right

p { border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double;}

  边框圆角 border-radius

可以用数值+px或者设置百分比的方式设置圆角
如何设置一个圆？=> 宽高相等的p设置border-radius: 50%；

上一篇：如何下载丝瓜视频

下一篇：魔兽哈卡服务器怎么下?

值	取值	描述
width	一个正整数或者字符串device-width	以pixels(像素)为单位，定义viewport（视口）的宽度。
height	一个正整数或者字符串device-height	以pixels(像素)为单位，定义viewport（视口）的高度。
initial-scale	一个0.0到10.0之间的正数	定义设备宽度与视口大小之间的缩放比率。
maximum-scale	一个0.0到10.0之间的正数	定义缩放的最大值。
minimum-scale	一个0.0到10.0之间的正数	定义缩放的最小值。
user-scalable	一个布尔值（yes或no）	no为用户不能缩放网页，默认为yes

标签名	效果
b、strong	加粗
i、em	倾斜
u、ins	下划线
s、del	删除线

行业知识

2024蓝旭春季第一次前端培训课

一、一些写在前面的介绍们

1. 网页与浏览器

2. Web标准

3. VScode插件推荐

二、讲讲HTML吧

1. 什么是HTML

2. 什么是标签

①标签的结构

②标签之间的关系

包含关系 （父子关系）

并列关系 （兄弟关系）

3. HTML基本结构框架

①charset

②name和content

③http-equiv

4. HTML常用标签

这里是一级标题

这里是二级标题

这里是三级标题

这里是四级标题

这里是五级标题

这里是六级标题

5. HTML特殊字符编码

6. HTML注释怎么写

三、CSS基础

1. 什么是CSS

2.为什么我们需要CSS

3.CSS发展史

4. CSS引用方式

①内嵌式

今天开始我要学习CSS！

②外联式

今天开始我要学习CSS！

5. CSS选择器

①标签选择器

②类选择器

③id选择器

④通配符选择器

6. CSS三大特性

①层叠性

②继承性

③优先级

7. CSS常用属性

①字体属性

②文本属性

③背景属性

④列表属性

⑤边框属性

最新文章

图文

热门标签

友情链接

包含关系（父子关系）

并列关系（兄弟关系）