前端学习（复习）

三池丶

已于 2022-12-28 12:42:20 修改

阅读量1.6k

点赞数 2

文章标签：前端学习 css 1024程序员节

于 2022-10-19 18:53:15 首次发布

本文链接：https://blog.csdn.net/qq_72343101/article/details/127334150

版权

一.HTML、CSS系列导学
- 1.1风生水起
- 1.2溯本求源
- 1.3拨云见日
- 1.4巧夺天工
二.什么是HTML和CSS
- 2.1了解什么是html、css？
三.宇宙第一编译器VS code
- 3.1VS code简介
- 3.2VS code下载地址
- 3.3需要下载的插件
- 3.4编译器的基本快捷键
四.chrome浏览器
- 4.1为何使用chrome？
五.深度了解网站开发
- 5.1开发网站的职位
六.web前端三大核心技术
- 6.1HTML
- 6.2CSS
- 6.3JavaScript
七. HTML的基本结构与属性
- 7.1HTML的详细解释
八.HTML初始代码
- 8.1简介
- 8.2初始代码
- 8.3详细解释初始代码
九.HTML的注释
- 9.1注释的含义
- 9.2注释的语法：
- 9.3注释的意义
- 9.4 快捷添加注释和删除注释
十.HTML语义化
- 10.1语义化的好处
十一.标题和段落
- 11.1标题
- 11.2段落
十二.文本修饰标签
- 12.1强调
- 12.2上标和下标
- 12.3删除和插入
十三 .图片标签与图片属性
- 13.1图片标签
- 13.2图片标签的属性
十四.引入文件的路径地址
- 14.1相对路径
- 14.2绝对路径
十五.跳转链接
- 15.1a标签
- - 15.1.1href属性
  - 15.1.2target属性
- 15.2base标签
十六.跳转锚点
- 16.1实现的方式一
- 16.2实现的方式二
十七.特殊符号
- 17.1常见特殊符号表
- 17.2语法
- 17.3作用
十八.列表
- 18.1无序列表
- 18.2有序列表（简单了解）
- 18.3定义列表
- - 18.3.1练习
十九.表格
- 19.1表格标签
- 19.2表格属性
二十.表单
- 20.1表单标签
- 20.2表格和表单的综合使用
二十一.``<div>``和``<span>``
- 21.1``<div>（块）``标签
- 21.2``span（内联）``标签
- 21.3实例
二十二.CSS基础语法
- 22.1格式
- 22.2基本样式
- 22.3长度单位
- 22.4CSS注释
二十三.内联样式与内部样式
- 23.1内联（行内、行间）样式
- 23.2内部样式
- 23.3内部样式与内联样式的区别
二十四.外部样式及两种写法
- 24.1``<link>``标签
- - 24.1.1rel属性
  - 24.1.2``<href>``属性

一.HTML、CSS系列导学

课程分为四个阶段

1.1风生水起

主要有html、css、切图流程、PC企业站布局、PC游戏站布局。

1.2溯本求源

有html和css的扩展知识点，html5的新语法，css3的新语法，浏览器兼容问题与hack（解决方案）。

1.3拨云见日

有现在流行的一些布局。弹性布局（flex）、网格布局（grid）、移动端布局（流式布局，rem布局等等）、响应式布局（用一套代码适应多种设备）、Boots tarp（基于响应式布局的框架）。

1.4巧夺天工

预编译css（less，sass）、postcss、css架构、高级功能、css与js交互。

二.什么是HTML和CSS

2.1了解什么是html、css？

他们是两种编程语言，一般情况下需要配合使用，是作为网站开发的基础语言。
通过用他们写出的代码经过浏览器的解析就成为了网站。
例如：csdn网站的源代码

csdn的源代码

一个网站由多个网页组成，每一个网页都是.html的文件

三.宇宙第一编译器VS code

3.1VS code简介

VS code全称Visual Studio code，来自微软，是一个开源的、基于Electron的轻量化代码编译器。

3.2VS code下载地址

https://code.visualstudio.com/

3.3需要下载的插件

中文语言包、open in browser、view in browser

3.4编译器的基本快捷键

ctrl+s：保存
ctrl+a：全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab：向后缩进
tab+shift：向前缩进
alt+鼠标左键：多光标
ctrl+d：选择同样元素

四.chrome浏览器

4.1为何使用chrome？

因为chrome浏览器所占据的市场份额最大，超出了市场份额的50%。

五.深度了解网站开发

一个大型网站的开发需要团队配合，各个岗位不可或缺。

5.1开发网站的职位

根据职位可分为：
UI设计师：设计稿（网站的图片，风格，按键等）
web前端开发工程师（H5开发）
- 将设计稿转换成代码
  将数据库里的数据显示到页面
- HTML+CSS
  - HTML:结构
  - CSS：样式
web后端开发工程师

六.web前端三大核心技术

三大核心技术分别是html、css、JavaScript。

6.1HTML

主要负责网站的基本结构，就如同盖房子的地基。

6.2CSS

主要是网站的样式，外观，使网站看上去更美观。

6.3JavaScript

使网站与用户可以产生交互，方便用户的使用。

七. HTML的基本结构与属性

超文本语言（HyperText Markup Language）简称为HTML，标准通用标记语言下的一个应用，是网页制作的必备编程语言。

7.1HTML的详细解释

html是一种超文本标记语言，下面以三个方面来说明

7.1.1超文本

文本内容+非文本内容（视频、音频、图片等）

7.1.2语言

一种编程语言，可以简单的理解为一种计算机和人都能识别的语言

7.1.3标记（标签）

<单词>（也叫做标签）
例:<header><footer>
标签分为两类：
- 单标签：<header>
- 双标签 : <header></header>
创建标签的快捷键：单词+tab键 --> < 单词 >（单标签生成单标签的单词，双标签生成双标签的单词）
标签可以上下排列，也可以相互嵌套
- 例：

<header>hello world</header>
<footer>hi html</footer>
<header>
hello world
<div>a</div>
<div>a</div>
<div>a</div>
<div>a</div>
</header>

html的常见标签：标签元素周期表
标签的属性：来修饰标签的，设置当前标签的一些功能。
- 属性的语法：< 标签（空格）属性=“值”（空格）属性2=“值2”… >
- 例:<header title="hello">hello world</header>(将header标签赋予title（标题）的属性）

八.HTML初始代码

8.1简介

每一个html文件都需要添加初始代码，初始代码就是无论你写什么的网页，这些代码都是要有的，这就是初始代码。

8.2初始代码

初始代码的快捷键：!+tab（可快速生成初始代码）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="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>

8.3详细解释初始代码

<!DOCTYPE html> :文档声明：告诉浏览器这是一个html文件。
<html lang="en">：整个html文件最外层标签：包裹着所有html标签代码。
<head>：头文件：是网页上面部分的内容:
<meta charest="UTF-8">：元信息：编写网页中的一些赋值信息。

<title>Document</title>：设置网页的标题。
</head>

<body>：显示网页内容的区域。

< /body >

注：lang=“en”表示一个英文网站，lang=“zh-CN”表示一个中文网站，charest="UTF-8"国际编码：表示国际规范，让网页不出现乱码的情况。

九.HTML的注释

9.1注释的含义

注释的代码，只能在文件中看到，在浏览器中显示不出来

9.2注释的语法：

<! --注释的内容 -->

9.3注释的意义

把暂时不用的代码注释起来，方便以后使用。
对开发人员进行提示。

9.4 快捷添加注释和删除注释

ctrl+/或shift+alt+a

十.HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择适合的html标签进行编写。

10.1语义化的好处

在没有css的情况下，页面也能呈现出很好的网页内容结构。
有利于SEO（搜索引擎优化），让搜索引擎爬虫更好的理解网页。
方便其他设备解析（如屏幕阅读器，盲人阅读器等）。
便于团队开发和维护。

十一.标题和段落

11.1标题

网页中的标题，与上述<title>不同
是双标签
分等级<h1></h1>...<h6></h6>(<h1>最重要且一个html文件只能存在一个<h1>标签）
h5、h6不经常使用

11.2段落

也是双标签
语法：<p>内容</p>

十二.文本修饰标签

12.1强调

1.<strong>双标签，<strong></strong>会对文本进行加粗。
例：<strong>这是一行文字</strong>
显示为：这是一行文字
2.<em>双标签，<em></em>会对文本进行斜体。
例：<em>这是一行文字</em>
显示为：这是一行文字

注：strong强调的效果更强，em强调的效果稍弱。

12.2上标和下标

1.下标<sub>双标签，<sub></sub>会显示数或文字的下标
例：H<sub>2</sub>0
显示为H₂O
上标<sup>双标签，<sup></sup>会显示数或文字的上标
例：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
显示为a²+b²=c²

12.3删除和插入

删除<del>双标签，<del></del>会划掉数或文字
例：<del>369</del>
显示为~~369~~
插入<ins>双标签，<ins></ins>会把下划线加在数和文字下
例：<ins>369</ins>
显示为369

注：插入和删除文本在一般情况下都是配合使用的

十三 .图片标签与图片属性

13.1图片标签

<img>单标签

13.2图片标签的属性

src：引入图片的地址
alt：当图片出现问题时，可以显示一段友好的提示文字。（只有当图片显示不出来时，才会显示alt的提示内容）
title：提示信息（html所有标签都具备的一个属性）
widgh、height：控制图片的大小

十四.引入文件的路径地址

引入文件的路径地址分为两种，一种是相对路径，另一种是绝对路径，从网络中引入的图片的地址是绝对路径。

14.1相对路径

.在路径中表示当前路径
例：./图片/OIP-C.jfif(表示在这一路径里的文件）
. .在路径中表示上一级路径
例：. ./C/01(表示在此路经外的文件）

14.2绝对路径

1.“C:/Users/86158/Pictures/Saved Pictures/OIP-C.jfif”（这是在电脑html文件夹之外的一个路径）
2.https://dl.bobopic.com/small/88096620.jpg（这是在网络上的一个地址）

注意：斜线全部用这个（/）不要用这个（\）

十五.跳转链接

15.1a标签

链接标签
a标签是双标签<a></a>
常用属性

15.1.1href属性

作用：：链接的地址（可以是文字也可以是图片）

文字型：

<body>
    <a href="https://www.mihoyo.com/">米哈游</a>
	</body>

显示为：米哈游

图片型：

<body>
    <a href="https://www.mihoyo.com/">
<img src="https://bkimg.cdn.bcebos.com/pic/902397dda144ad34fd2608e5dfa20cf431ad8533?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5" alt="米哈游" width="500" height="500">
    </a>
</body>

显示为：

15.1.2target属性

链接默认情况下在当前页面打开

作用：改变链接打开的方式
在当前页面打开：target="_self"
在新窗口打开：target="blank"
例：
<a href="https://www.4399.com/" target="blank">4399小游戏</a>
显示为
4399小游戏

15.2base标签

通常写在<head>标签中。

base标签是单标签<base>
作用：改变链接的默认行为

属性：也有href和target

十六.跳转锚点

跳转链接是从当前页跳转到另一个页。而跳转锚点则是从当前页内进行跳转，类似于markdown中的目录。

16.1实现的方式一

用#和id属性，语法为：

<a href="#+id">
<h_ id=""></h2>

例:

<a href="#c">1.文字</a>
    <h2 id="c">文字</h2>
    <p>这是一段文字</p>

显示为：
1.文字

文字

这是一段文字

16.2实现的方式二

用#和name属性，语法为：

<a href="#+name></a>
<a name="值"></a>
<h_></h_>

例：

<a href="#c">1</a>
   <a name="c"></a>
   <h2>1</h2>
   <p>文字</p>

显示为：
文字

文字

这是一段文字

十七.特殊符号

简介：在编写一些文本时，经常会遇到无法输入的字符，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在html中，为这些特殊字符准备了专门的代码。

17.1常见特殊符号表

请添加图片描述

这里的空格为&nbsp

17.2语法

&+字符+；

17.3作用

解决冲突，像左右尖括号（<>)、添加多个空格的实现

十八.列表

html中的列表分为三类，无序列表、有序列表和定义列表

18.1无序列表

18.1.1标签

无序列表采用的标签为<ul>和<li>

注意：ul和li必须是组合出现的，他们之间是不能有其他标签的。

ul和li都是双标签，且符合嵌套规则
例：

<ul>
        <li>
            第一项
        </li>
    </ul>

显示为：

第一项

18.1.2属性

type属性：改变前边标记的形式（一般用css去控制）

18.1.3练习

18.2有序列表（简单了解）

有序列表采用的标签为<ol>和<li>

注意：有序列表用的很少，通常用无序列表，可以用无序列表来代替有序列表，且他们之间也是不能有其他标签的

语法和属性与无序列表是相同的。

18.3定义列表

<dl>:定义列表
<dt>:定义专业名词或术语
<dd>:对名词进行解释和描述

18.3.1练习

<dl>
   <dt>
       英雄联盟
   </dt>
   <dd>
       2009年美国拳头游戏开发的MOBA竞技网游
   </dd>
</dl>

显示为

英雄联盟

2009年美国拳头游戏开发的MOBA竞技网游

注：列表之间可以相互嵌套，形成多级列表

十九.表格

通过代码的编写可以在浏览器上实现表格

19.1表格标签

都是双标签，有嵌套关系，要严格符合嵌套规范。

1. `<table>`:表格的最外层容器

2. `<tr>`：定义表格行

3. `<th>`：定义表头

4. `<td>`：定义表格单元

5. `<caption>`：定义表格标题

例：

<table>
        <tr>
            <caption>原神角色</caption>
            <th>胡桃</th>
            <th>行秋</th>
            <th>草神</th>
        </tr>
        <tr>
            <td>火</td>
            <td>水</td>
            <td>草</td>
        </tr>
    </table>

显示为

原神角色
胡桃	行秋	草神
火	水	草

语义化标签

<tHead>：表示头部，即<th>部分。
用法：<thead>
        <tr>
            <caption>原神角色</caption>
            <th>胡桃</th>
            <th>行秋</th>
            <th>草神</th>
        </tr>
        </thead>
<tBody>：表示身体，即<td>部分。
用法：  <tbody>
        <tr>
            <td>3.2或更后面</td>
            <td>无所谓</td>
            <td>3.2上半</td>
        </tr>
        </tbody>
<tFood>：表示尾部，用法同上。

无实际意义，相当于一种标准，优化浏览器此这程序的运行，尽量使用。

注：在一个table中tbody可以出现多次，但thead、tfood只能出现一次。

19.2表格属性

用于<table>的属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
例：<table border="1" cellpadding="20" cellspacing="20">
用于<td>的属性
rowspan:合并行
例：<td rowspan="2">额</td>
用于<th>的属性
colspan:合并列
例： <th colspan="2">胡桃</th>
用于<tr>的属性
align:左右对齐方式
valign:上下对齐方式
align：left（左）、center（中）、right（右）
valign：top（上）、middle（中）、bottom（下）
例
<tr valign="top"> <tr align="right">

二十.表单

就是一些输入框，文本框等

20.1表单标签

下面是一些常见的表单标签

1.<form>表单的最外层容器
2.<input>(单标签)用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
3.<textarea>多行文本框
4.<select>、<option>下拉菜单
5.<label>辅助表单

表格标签的通用属性：checked、disabled、name、for…

20.1.1`<input>`标签的常用属性

请添加图片描述

text属性：文本输入框

placeholder属性是一个提示语，<input type="text" placeholder="请输入账号">显示为

 <h2>账号</h2>
 <input type="text">

显示出一个账号框

password属性：密码输入框

 <h2>密码</h2>
 <input type="password">

显示出一个密码框

checkbox属性：复选框（checked）

checked属性会让后面的元素默认被选中，disabled属性会让后面的元素无法被选中。

 <input type="checkbox" checked>a
 <input type="checkbox" disabled>b
 <input type="checkbox">c

会出来三个选项，可进行选择

radio属性：单选框

name属性让他们成为一组，让浏览器识别，从而可以单选。

<input type="radio" name="1">men
<input type="radio" name="1">women

进行单选

file属性：上传文件

<h2></h2>
<input type="file">

submit属性:提交（把用户输入的信息提交给form的action属性中的网址，以便后续操作）
reset属性：重置（重置输入信息）

 <form action="https://www.baidu.com/"> 
 <h2></h2>
        <input type="submit">
        <input type="reset">
 </form>

multiple属性：多选

<input type="file" multiple>

可以进行文件的多选

20.1.2多行文本框

<textarea>标签
作用：在网页上显示一个多行文本框，可以进行文字的输入。

<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>

cols属性表示列数，rows属性表示行数

20.1.3菜单

<select>、<option>标签
作用：在网页上显示一个菜单，可以进行选择。

<form>
<h2>下拉菜单</h2>
<select size="3">
    <option selected disabled>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
</select>
<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
</form>

<select>是外层标签，<option>是内层标签。

selected属性：这个项被选中
disabled属性：这个项无法被选中
size属性：显示多个项
multiple属性：可以选中多个项

20.1.4辅助表格的功能

<label>标签
作用：辅助表格的功能

<input type="radio" name="1" id="2"><label for="2">man</label>
<input type="radio" name="1" id="3"><label for="3">women</label>

for属性
与id属性对应，使label标签中的文字也能作为选项使用，从而提升用户的体验
id属性
与for属性对应

20.2表格和表单的综合使用

因为表格要符合嵌套规范，所以把表格放外层，而表单不需要嵌套规范，所以用在里面。

二十一.`<div>`和`<span>`

21.1`<div>（块）`标签

div全称为division，“分割、分区”的意思， div标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即html中的大多数标签都可以嵌套在div标签中，div中还可以嵌套多层div，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

21.2`span（内联）`标签

用来修饰文字的，div和span都是没有任何默认样式的，需要配合css才行。

21.3实例

 <div>
        <h2><a href="ys.mihoyo.com/" target="blank">《原神》官方网站-全新3.1版本「赤土之王与三朝圣者」上线!</a></h2>
        <p><span>《原神》<span>3.1版本「赤土之王与三朝圣者」现已推出!《原神》是由米哈游自研的一款开放世界冒险RPG。你将在游戏中探索一个被称作「提瓦特」的幻想世界。在这广阔的世界中,你可以踏遍七国,邂逅性格各...</p>      <imgsrc="https://gimg3.baidu.com/search/" alt="一张图片">
        <a href="ys.mihoyo.com/" target="_blank">1</a>
    </div>

html到这里暂时告一段落，下面开始学习css。

二十二.CSS基础语法

<style>（双标签）标签属于html，作用就是给页面添加样式，写在<head>标签内。

22.1格式

选择器{属性一:值一;属性二:值二}
这里的选择器就是<div> 这种标签，可以用<style>来选中，进行属性的添加。
例：

<head>
...
<style>
    div{width: 100%;height: 100px;background-color: red;}
    span{width:100%;hegit:100px }
</style>
</head>
<body>
    <div>这是一个块</div>
    <div>这又是一个块</div>
    <span>这是一个内联</span>
</body>

22.2基本样式

1.width：宽
2.height：高
3.background-color：背景颜色

22.3长度单位

1.px：像素
2.%：百分比（百分比的填充选择器的外层容器）

22.4CSS注释

1.语法
/*注释的内容*/
快捷键与html相同

二十三.内联样式与内部样式

行为、样式、结构尽量分离，形成良好的习惯。

23.1内联（行内、行间）样式

在html标签上通过添加style属性来实现的
例

<head>
...(没有style)
</head>
<body>
    <div style="width: 100%;height: 100px;background-color: red;">这是一个块</div>
</body>

23.2内部样式

注：内部样式的优点，可以复用代码

在<style>标签内添加的样式
例

<head>
...
<style>
    div{width: 100%;height: 100px;background-color: red;}
    span{width:100%;hegit:100px }
</style>
</head>
<body>
    <div>这是一个块</div>
    <div>这又是一个块</div>
    <span>这是一个内联</span>
</body>

23.3内部样式与内联样式的区别

内部样式的代码可以复用、且符合W3C的规范标准，让结构和样式分开处理

二十四.外部样式及两种写法

通过引入一个单独的css文件（例：name.css)来实现样式。有两种引的方法，一种是通过<link>标签，一种是通过@import引入（注：这种引入存在很多问题，不推荐使用）

24.1`<link>`标签

是当前页面与外部资源的一个映射关系，<link> 标签定义文档与外部资源的关系。

<link>标签通常写在初始代码的<meta>和<title>标签之间

24.1.1rel属性

表示引入外部资源的类型，资源与页面的关系。

常用的rel属性值：点击这里

主要还是引入文档的外部样式表（文档的外部样式表的值为：stylesheet）

例

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./库.css">
    <title>Document</title>	
</head>
<body>
<div>这是一个块</div>
</body>