AllinToyou

这个屌丝很懒，什么也没留下！

热门标签

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

作者：AllinToyou | 2024-04-06 00:26:50

踩

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

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

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标签是由尖括号包围的关键词，就像这样 => < html >

①标签的结构

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

②标签之间的关系

包含关系（父子关系）


<head>
    <title></title>
</head>

并列关系（兄弟关系）


<head></head>
<body></body>

3. HTML基本结构框架


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是标题</title>
</head>
<body>
    我是一些内容
</body>
</html>

<!DOCTYPE html> 是文档说明，写在html标签外面的第一行，用于声明文档类型是符合HTML5标准的。（是声明，不是标签！）
其意义所在是告诉浏览器程序员所编写的代码是按照html的规范进行编写，浏览器也要按照html规范进行编译，防止浏览器在编译代码时出现乱码。
<html> </html> 是页面中最大的标签、文档的根标签，所有的其他的标签都是写在HTML标签里边的。它是文档开始与结束的标记，其间包含head和body两大部分。
lang ：语言种类，用来定义当前文档显示的语言。（en=>英文，zh-CN=>中文）
<head> </head> 是HTML头部标签，其间包含title标签及文档的元（meta）数据等，它编写的是不在浏览器的文档窗口中显示给用户的信息。
<title> </title> 是HTML标签结构标签，它定义的网页标题在浏览器标题栏显示。
<body> </body> 是HTML主体结构标签，它定义的是呈现在浏览器的文档窗口中的内容。
<meta> : <meta>标签是网页代码中<head>区的一个关键标签，其提供的信息虽然用户不可见，但却是文档的最基本的元信息（元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等）。它以定义文档的各种元数据，提供各种文档信息，通俗来说就是可以理解为提供了关于网站的各种信息。

一个<meta>标签就是一项元数据，网页可以有多个<meta>。

①charset

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

②name和content

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

<meta name="元数据的名称" content="具体的值">

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

Keyword（关键字）

<meta name="keywords" content="meta, html, 标签" />

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

Description（简介）

<meta name="description" content="meta标签的介绍和使用讲解" />

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

viewport（视口标签）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

值	取值	描述
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中的内容就是各个参数的变量值。

<meta http-equit="参数" content="参数值" />

4. HTML常用标签

①标题标签<h1 ~ h6>

标题标签，共有六级


    <h1>这里是一级标题</h1>
    <h2>这里是二级标题</h2>
    <h3>这里是三级标题</h3>
    <h4>这里是四级标题</h4>
    <h5>这里是五级标题</h5>
    <h6>这里是六级标题</h6>

②段落标签<p>

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


    <p>我是一个段落标签</p>
    <p>
        在源代码中，
        这一段
        包含很多行，
        但浏览器
        会忽略它。
    </p>

③换行标签<br/>

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


    <p>我将在这里换行<br/>我将在这里换行</p>
    <p>我是第三行的内容</p><br/>
    <p>我是第四行的内容</p>

④水平线标签<hr/>

用于在 HTML 页面中分隔内容，或定义内容上的变化

⑤文本格式化标签

文字

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

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

列表

有序列表：<ol>（可以是数字或者字母的顺序）

无序列表：<ul>
列表中的项目可以用<li>来设置（可嵌套）


    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <!-- 可以设置从第几个序号开始 -->
    <ol start="500">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
    <ul>
        <li>1.1</li>
        <li>
            <ul>
                <li>2.1</li>
                <li>2.2</li>
                <li>2.3</li>
            </ul>
        </li>
        <li>3.1</li>
    </ul>

表格

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


    <table border="1" width="200px" height="200px">
        <caption>2024蓝旭前端课程安排</caption>
        <tr>
            <th>课程</th>
            <th>授课人</th>
        </tr>
        <tr align="center">
            <td>HTML+CSS入门</td>
            <td>lzn</td>
        </tr>
        <tr align="center">
            <td>CSS进阶+设计</td>
            <td>syc</td>
        </tr>
        <tr align="center">
            <td>JS入门</td>
            <td>cjy</td>
        </tr>
        <tr align="center">
            <td>JS进阶+复习</td>
            <td>cj</td>
        </tr>
        <tr align="center">
            <td>DOM+BOM</td>
            <td>xds</td>
        </tr>
        <tr align="center">
            <td>网络请求</td>
            <td>dp</td>
        </tr>
    </table>

表单

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

type属性值	显示效果
text	文本框，输入单行可直接查看的文本
password	密码框，输入不可直接查看的密码
radio	单选框，用于在多项元素中选择一项
checkbox	多选框，用于选择多项元素
file	文件选择，用于上传本地文件
submit	提交按钮
reset	重置按钮
button	普通按钮，默认无功能

b. <label>标签为 input 、select、textarea等元素定义标注，它的for属性应当与相关元素的 id 属性相同。


    <p>我要学...</p>
    <input type="checkbox" id="html"/>
    <label for="html">HTML</label>
    <input type="checkbox" id="css"/>
    <label for="css">CSS</label>
    <input type="checkbox" id="js"/>
    <label for="js">JavaScript</label>

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

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

<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。
<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容（以及像 <i>、<b>、<strong>、<br>、<img> 等标签）。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

e. <select> 标签配合<option>标签可以创建下拉列表及其可用选项。

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


    <select>
        <option>我是下拉列表第1个选项</option>
        <option>我是下拉列表第2个选项</option>
        <option>我是下拉列表第3个选项</option>
    </select>

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

注意：form表单的action属性！

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

⑥媒体标签

图片

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

img有两个必须的属性

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


    <img src="bears.jpg" alt="we bare bears" />
    <img src="http://spider.ws.126.net/194ab048eac55aec9952499378437b23.jpeg" alt="小猪佩奇" />

音频

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

    <audio src="音频地址" controls></audio>

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

视频

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

    <video src="视频地址" controls></video>

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

⑦超链接标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目的地（可以是外部链接or内部链接）。
空链接：href=“#”


    <a href="http://www.baidu.com">戳我跳转！！！</a>
    <a href="http://www.bilibili.com">
        <img src="bears.jpg" alt="we bare bears" style="width: 200px; height: 100px;" title="去b站观看吧~" />
    </a>
    <a href="./turnTo.html">去另一个页面看看吧~</a>

target：链接窗口的打开方式

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

⑧div标签和span标签

div

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

span

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


    <div>
        <p>div是division的简写，division意为分割、区域、分组。</p>
    </div>
    <div>
        <p>div是块级元素，在浏览器显示时通常会以新行开始。</p>
    </div>
    <span>span是行内元素，一行可以有多个</span>
    <span>span是行内元素，一行可以有多个</span>

二者的共性

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

二者的区别

div是块级元素。
span 是内联元素。

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

5. HTML特殊字符编码

编码	显示效果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

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标签中设置内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础CSS学习</title>
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>今天开始我要学习CSS！</h1>
</body>
</html>

②外联式

外联式即为将CSS样式写在一个单独的css文件里，并在head标签中以<link rel="stylesheet" href="路径">的方式引入它，使CSS文件对本网页的样式有效。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础CSS学习</title>
    <link rel="stylesheet" href="./myCSS.css" />
</head>
<body>
    <h1>今天开始我要学习CSS！</h1>
</body>
</html>

③行内式

行内式即为将CSS样式写在标签的style属性中

    <h1 style="color: blueviolet;">今天开始我要学习CSS！</h1>

注意：

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

5. CSS选择器

①标签选择器

使用HTML标签名称分类，为页面的某一中标签指定统一的CSS样式
快速统一设置一样的样式，不能差异化


h1{
       color: blue;
       font-family: 'Courier New', Courier, monospace;
   }

②类选择器

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


<!-- HTML部分 -->
<div class="bg"></div>


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

③id选择器

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


<!-- HTML部分 -->
<p id="text">hahaha</p>


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

④通配符选择器

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


* {
        margin: 0;
        padding: 0; 
   }

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

6. CSS三大特性

①层叠性

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


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

②继承性

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


<div class="father">
    <p>son of div</p>
</div>


.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(./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或者设置百分比的方式设置圆角
如何设置一个圆？=> 宽高相等的div设置border-radius: 50%；

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

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引用方式

①内嵌式

②外联式

③行内式

5. CSS选择器

①标签选择器

②类选择器

③id选择器

④通配符选择器

6. CSS三大特性

①层叠性

②继承性

③优先级

7. CSS常用属性

①字体属性

②文本属性

③背景属性

④列表属性

⑤边框属性

包含关系（父子关系）

并列关系（兄弟关系）