【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
学习视频来源：哔哩哔哩弹幕网（https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click）
1. 课程介绍
客户端形式：图形化界面C/S(client/server)、网页B/S(browser/server）
网页相比具有如下优点：不需要安装、无需更新、跨平台
网页中所需语言：HTML、CSS、JavaScript
2. 网页简史
蒂姆·伯纳斯·李–万维网的发明人
第一个网站：http://info.cern.ch/hypertext/WWW/TheProject.html
前端工程师负责编写网页源代码，而浏览器负责将网页渲染成我们想要的样子
万维网联盟（W3C）的出现为了制订网页开发标准，以使同一个网页在不同的浏览器中有相同的效果
W3C标准：结构（HTML）：描述页面的结构、表现（CSS）：控制页面中元素的样式、行为（JavaScript）：响应用户操作
3. HTML简介
HTML（Hypertext Markup Language）超文本标记语言，HTML使用标签的形式来标识网页中的不同组成部分，所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
新建一个网页：用左下角小娜搜索notepad，在里面任意添加内容，另存为index.html，这样在桌面上打开就是一个网页。index.html
注意：暂时不要从桌面右键新建记事本，因为这样可能会出现问题。因为这样创建的话，会附带拓展名，并且有的时候拓展名不可见
4. 编写你的第一个网站
在网页中添加标签，而标签的作用就是标识出网页中不同的内容。
标签有开始<…>，有结束</…>，开始与结束之间放的是标签体
<html>
<head>
<title>哈哈，我在哪出现？</title>
</head>
<body>
<h1>回乡偶书（二首）</h1>
<h2>其一</h2>
<h2>贺知章</h2>
<p>少小离家老大回，</p>
<p>乡音无改鬓毛衰。</p>
<p>儿童相见不相识，</p>
<p>笑问客从何处来。</p>
</body>
</html>
5. 安装notepad++
并没有找到视频当中的官网，只找到这样一个下载地址：https://notepad-plus.en.softonic.com
李立超老师的个人主页：https://lilichao.com
6. 自结束标签和注释
创建一个source（源码）的文件夹
自结束标签： or 、 or
HTML的注释：
开发中一定要养成良好的注释的编写注释的习惯，注释要求简单明了
HTML中的注释是多行注释，注释不能嵌套
7. 标签中的属性
在标签（开始标签或者自结束标签）中设置属性，属性是一个键值对结构（x=y），但是有的属性没有属性值。如果有属性值，属性值应该用引号引起来。
属性用来设置标签中的内容如何显示
属性和标签名或者其他属性应该使用空格隔开
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<h1>这是我的<font color="red" size='9'>第三个</font>网页!</h1>
</body>
</html>
8. 文档声明
文档声明（doctype）：用来告诉浏览器当前网页的版本
html5的文档声明：<!doctype html> or <!Doctype HTML>
<!doctype html>
<html>
</html>
9. 关于进制
十进制：
-特点：满10进1
-计数：0 1 2 3 ... 9 10 ...
-单位数字：10个（0 1 2 3 4 5 6 7 8 9）
二进制：(计算机底层的进制）
-特点：满2进1
-计数：0 1 10 11 100 101 ...
-单位数字：2个（0 1）
-扩展：所有数据在计算机底层都会以二进制的形式保存，可以将内存想象为一个由多个小格子组成的容器，每个小格子中可以存储一个0或者一个1，这一个小格子在内存中被称为1位（bit）
8 bit = 1byte（字节）
1024 byte = 1 Kb（千字节）
1024 kb = 1 Mb（兆字节）
1024 Mb = 1 Gb
1024 Gb = 1 Tb
1024 Tb = 1 Pb
八进制：（很少用）
-特点：满8进1
-计数：0 1 2 3 4 5 6 7 10 11 12 ... 17 20
-单位数字：8个（0 1 2 3 4 5 6 7）
十六进制：（一般显示一个二进制数字时，都会转换为十六进制）
-特点：满16进1
-计数：0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 ... 1F 20 ...
-单位数字：16个（0 1 2 3 4 5 6 7 8 9 A B C D E F)
10. 字符编码
编码：将字符转换为二进制码的过程
解码：将二进制码转换为字符的过程
字符集：编码和解码所采用的规则
乱码问题：编码和解码所采用的字符集不同
常见的字符集：
ASCII：7位、128个
ISO88591：8位、256个
GB2312：
GBK：
UTF-8：万国码
可以通过meta标签来设置网页的字符集，避免乱码问题
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
</body>
</html>
11. 文档的使用
<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>
<!-- html的根标签（元素），网页中的所有内容都要写在根元素的里面 -->
<html>
<!-- head是网页的头部，内容一般不会在网页中直接出现，主要用来帮助浏览器或搜索引擎解析网页 -->
<head>
<!-- meta用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset='utf-8'>
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>
</head>
<!-- body是html的子元素，表示网页的主体，网页中的所有内容都应该写在body里面 -->
<body>
<!-- h1是网页的一级标题 -->
<h1>网页的一级标题</h1>
</body>
</html>
视频十四分钟之后的过程稍显复杂，且最终取得的内容为英文，建议直接访问：HTML元素参考（https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element）
12. VSCode的安装
在左侧第五个Extensions里面搜索Chinese，install微软的官方汉化包，重启就可以显示汉语。
在…html的文件中，！+tab，可以快速生成最完整的HTML格式
<!DOCTYPE html>
<!-- 这个的意思是我们最后写出来的英文网站，同样是给浏览器看得，比如说如果在Chrome中打开，lang="en"的网页就会显示”是否翻译“
如果不需要的话，就改写成
<html lang="zh">
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
注释的快捷键：Ctrl+/
13. 配置liveServer
在Extensions中搜索liveServer并安装，在代码界面右键选择open with Live Server，就可以实时看到网页的变动，只需要Ctrl+S保存即可。
打开设置，将autoSave调至afterdelay，时长可以选择500ms
14. 实体
在HTML中，有时一些特殊的显示会被浏览器错误解析，比如说多个空格解析为一个空格，比如字母两侧的大于和小于号。如果我们需要在网页中书写这些特殊符号，则需要使用HTML中的实体（转义字符）。
实体的语法：&实体的名字;
空格
>> 大于号
<< 小于号
©© 版权符号
更多实体表示获取方法：W3school https://www.w3school.com.cn/html/html_entities.asp
15. meta标签
<meta charset="UTF-8">
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
keywords表示网页的关键字，可以同时指定多个关键字，关键字之间使用","隔开
description用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
http-equiv="refresh"将页面重定向到另外一个网站，例子中的意思就是三秒后跳转到百度
16. 语义化标签
在网页中，HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式
标题标签：h1~ h6 一共有六级标题，从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1，一般情况下标题标签只会使用到h1~h3
在页面中独占一行的元素称为块元素（block element）
p标签表示页面中的一个段落，p也是一个块元素
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中
<hgroup>
<h1>回乡偶书（二首）</h1>
<h2>其一</h2>
</hgroup>
em标签用于表示语音语调的一个加重
strong标签表示强调重要内容
br标签表示页面中的换行
<p>今天天气<em>真</en>不错!</p>
<p>你今天必须<strong>完成作业</strong>!</p>
<br>
在页面中不会独占一行的元素称为行内元素（inline element）
17. 块和行内
块元素（block element）：在网页中一般通过块元素来对页面进行布局
行内元素（inline element）：行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，而p元素中不能放任何的块元素
浏览器在解析网页时，会自动的对网页中不符合规范的内容进行修正，比如：
-标签写在了根元素的外部
-p元素中嵌套了块元素
-根元素中出现了除head和body以外的子元素
... ...
可以使用F12后选择Elements检查代码在内存中的运行状况
18. 语义化标签
布局标签（结构化语义标签）
header表示网页的头部
main表示网页的主体部分（一个页面只会有一个main）
footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span是一个行内元素，没有任何的语义，一般用在网页中选中文字
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section>,</section>
<div></div>
<span></span>
19. 列表
在HTML中也可以创建列表，HTML列表一共有三种：1.有序列表 2.无序列表 3.定义列表，且列表之间可以互相嵌套
有序列表：使用ol标签来创建有序列表，使用li表示列表项
<ol>
<li>行为</li>
<li>表现</li>
<li>结构</li>
</ol>
无序列表：使用ul标签来创建无序列表，使用li表示列表项
<ul>
<li>行为</li>
<li>表现</li>
<li>结构</li>
</ul>
定义列表：使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中那里是标题，哪里是段落</dd>
<dd>... ...</dd>
<dd>... ...</dd>
</dl>
20.超链接简介
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
使用a标签来定义超链接，同时a标签也是一个行内元素，但是在a标签中可以嵌套除它自身外任何的元素
a标签的属性：
-href 指定跳转的目标路径
-值可以是一个外部网站的地址
-也可以写一个内部页面的地址（如果与当前.html文件在同一个目录下可以直接用命名来查找）
<a href="https://www.baidu.com">超链接</a>
21. 相对路径
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，而相对路径都会使用.或…开头
./表示当前文件所在目录
…/表示当前文件所在目录的上一级目录，并且可以多次使用，…/…/表示返回上上一级目录
./可以省略不写，如果不写./也不写…/则就相当于写了./
22. 超链接的其他用法
目标：不覆盖原网页，在新的标签页中打开超链接中的网页
target属性：用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
可以直接将超链接的href属性设置为# ，这样点击超链接以后，页面不会发生跳转，而是转到当前页面顶部的位置。在开发中可以将# 作为超链接的展位符号使用。
也可以使用javascript:;来作为href的属性值，此时点击这个超链接什么也不会发生。
也可以跳转到页面的指定位置，只需将href属性设置为 # 目标元素的id属性值
id属性：唯一不重复的。每一个标签都可以添加一个id属性，id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
<a href="https://www.baidu.com" target="_self">超链接</a>
<a href="https://www.baidu.com" target="_blank">超链接</a>
<a href="#bottom">go to the bottom</a>
<a id="bottom" href="#">return to the top</a>
<a href="javascript:;">this is a new hyperlink</a>
23. 图片标签
图片标签用于向当前页面中引入一个外部图片。使用img标签来引入外部图片，同时img标签是一个自结束标签。img这种元素属于替换元素（介于块元素和行内元素之间），具有两种元素的特点。
属性：
src属性指定的是外部图片的路径（相对路径，绝对路径皆可）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示。但是更重要的作用是，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。
width 图片的宽度（单位是像素），宽度和高度中如果只修改了一个，另外一个会等比例缩放
height 图片的高度（单位是像素）
24. 图片的格式
jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
gif：支持的颜色比较少，支持简单透明，支持动图。适合表示颜色单一图片和动图。
png：支持的颜色丰富，支持复杂透明，不支持动图。表示颜色丰富，复杂透明的图片。
webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。它具备其他图片格式的所有优点，而且文件还特别小。缺点：兼容性不好
base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片。一般都是一些需要和网页一起加载的图片才会使用。
效果一样，用小的；效果不一样，用效果好的。
25. 内联框架
内联框架（iframe）：用于向当前页面中引入一个其他页面
src：指定要引入的网页的路径
frameborder：指定内联框架的边框
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
26. 音视频播放
audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时，默认情况下是不允许用户自己控制播放停止的。
属性：
controls--是否允许用户控制播放
autoplay--音频文件是否自动播放
loop--音频是否循环播放
<audio src="audio.mp3" controls autoplay></audio>
<!-- 或者 -->
<audio controls>
<!-- 对不起，您的浏览器不支持播放音频，请升级浏览器！ -->
<source src="audio.mp3">
<source src="audio.ogg">
<embed src="audio.mp3" type="audio/mp3" width="200" height="100">
</audio>
使用video标签来向网页中引入视频文件
<video controls>
<source src="video.webm">
<source src="video.mp4">
<embed src="video.mp4" type="video/mp4">
</video>
27. CSS简介
CSS：层叠样式表。网页实际上是一个多层的结构。通过CSS可以为网页的每一层来设置样式，而最终我们能看到的是网页最上边的一层。总之一句话，CSS可以用来设置网页中元素的样式。
使用CSS来修改元素的样式。
第一种方式（内联样式/行内样式）：在标签内部通过style属性来设置元素的样式
问题：使用内联样式只能对一个标签生效，如果希望影响到多个元素就必须在每个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，十分麻烦。
注意：开发时绝对不要使用内联样式
<p style="color: red;font-size: 30px;">少小离家老大回，乡音无改鬓毛衰</p>
28. CSS编写的位置
第二种方式（内部样式表）：将样式编写到head中的style标签里面。然后通过CSS选择器来选中元素并为其设置各种样式。可以同时为多个标签设置样式，并且修改时只需修改一处就可全部应用。内部样式表更加方便对样式进行复用。
问题：内部样式表只能对一个网页起作用，它里面的内容不能跨页面进行复用
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: purple;
font-size: 50px;
}
</style>
</head>
第三种方式（外部样式表）：可以将CSS样式编写到一个外部的CSS文件里，然后通过link标签来引入外部的CSS文件。
<link rel="stylesheet" href="style.css">
外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同的页面之间进行复用。
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
29. CSS的基本语法
在内部样式表中，style标签的区域是一个特殊的区域，是属于CSS的区域是与HTML隔离的，HTML的语法在这里不再适用，需要使用CSS的语法。
CSS中的注释：/* */
CSS的基本语法：选择器+声明块
选择器：通过选择器可以选择页面中的指定元素，比如p的作用就是选择页面中所有的p元素
声明块：通过声明块来制定要为元素设置的样式，声明块由一个个的声明组成，声明是一个键值对结构，一个样式名对应一个样式值，名和值之间用冒号连接，用分号结尾
30. 常用选择器
元素选择器：
作用：根据标签名来选中指定的元素
语法：标签名{ }
例子：p{ } h1{ } div{ }
id选择器：
作用：根据元素的id属性值选中一个元素
语法：# id属性值{ }
例子：#box{ }， #red{ }
class是一个标签的属性，它和id类似，不同的是class可以重复使用。还可以同时为一个元素指定多个class属性，多个class之间用空格隔开
类选择器（class选择器）：
作用：根据元素的class属性值选中一组元素
语法：.class属性值{ }
通配选择器：
作用：选中页面中的所有元素
语法：*{ }
31. 复合选择器
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2...选择器n{ }
注意：交集选择器如果有元素选择器，必须使用元素选择器开头
选择器分组（并集选择器）：
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，...，选择器n{ }
32. 关系选择器
父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是他的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，一个元素的子元素也是后代元素
兄弟元素：拥有相同父元素的元素称为兄弟元素
子元素选择器：
作用：选中指定父元素的指定子元素
语法：父元素>子元素{ }
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代{ }
兄弟元素选择器：
1.作用：选择下一个兄弟
语法：前一个 + 后一个
2.作用：选择下边所有的兄弟
语法：兄 ~ 弟
33. 属性选择器
[ 属性名 ]选择含有指定属性的元素
[ 属性名=属性值 ]选择含有指定属性且含有指定属性值的元素
[ 属性名^=属性值 ] 选择属性值以指定值开头的元素
[ 属性名$=属性值 ] 选择属性值以指定值结尾的元素
[ 属性名*=属性值 ] 选择属性值中含有指定值的元素
34. 伪类选择器
伪类（不存在的类，特殊的类）用来描述一个元素的特殊状态，比如：第一个元素，被点击的元素，鼠标移入的元素…
伪类一般情况下都是使用冒号：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上这些伪类是根据所有的子元素进行排序的。
:first-of-type
:last-of-type
:nth-of-type
这几个伪类的功能和上述的类似，不同点是他们在同类型元素中排序
:not( ) 否定伪类
将符合条件的元素从选择器中去除
35. 超链接的伪类
:link 用来表示没访问过的连接
:visited 用来表示访问过的连接，由于隐私的原因，所以visited这个伪类智能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
36. 伪元素
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
::first-letter 表示第一个字母
::first-line 表示第一行
::selction 表示选中的内容
::before 元素的开始
::after 元素的结束
-before和after必须结合content属性使用
div::before{
content:'abc';
color: red;
}
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
