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;
}
