常见的浏览器：
lE：(早期windows自带的.现在已经变成edge)
chrome：(当前最牛逼的浏览器)
firefox：(也是一个很知名的浏览器,好用不火)
safari：(苹果系统上自带的浏览器)
Opera(相对小众的浏览器)
浏览器的功能就是解析运行网页（html+css+javascript）。
VScode安装：
安装后新建文件目录，目录中新建文件编写代码：
按下 "!" + Tab 代码补全后开始给出初始代码框架
head: 存放这个页面的属性；
body:存放页面的内容；
常用标签介绍：
1）注释标签
ctrl + / 快速注释，再按一次取消注释
2）标题标签h1-h6
h1 最大最粗 h6 最细最小
ctrl + 回车 代码换行
3）p标签
lorem 可以自动填充一些测试段落
4）换行标签br
5)格式化标签
6）图片标签img
src：属性中是图片的路径，可以是相对路径，也可以是绝对路径
alt：是当图片无法显示时显示alt的文本；
title：鼠标悬停在图片上时，显示的文本；
7）超链接标签a
href:超链接的地址
target：_blank 代表打开新的网页打开超链接而不是在当前页面打开
8）表格标签
table:表示整个表格
tr：表示一行
td:表示一个单元格
th：表示表头中的一个单元格
使用CSS对其样式进行更改：
上述代码是一个CSS样式表，用于创建一个简单的表格样式。
border-collapse: collapse;：这行代码用于指定边框合并的方式。设置为collapse表示相邻单元格的边框会合并为一个单一的边框。border-spacing: 0px;：这行代码用于指定相邻单元格之间的间距大小。设置为0px表示没有间距。table, th, td：这行代码用于指定所有表格、表头和表格数据单元格的样式。padding: 5px;：这行代码用于指定单元格内容与单元格边框之间的填充大小。border: 1px solid black;：这行代码用于指定单元格边框的样式。1px表示边框的宽度为1像素，solid表示边框样式为实线，black表示边框颜色为黑色。text-align: center;：这行代码用于指定单元格内容的水平对齐方式。设置为center表示内容居中对齐。
使用这些样式，创建的表格将拥有合并的边框、无间距的单元格、统一的填充和边框样式，以及居中对齐的单元格内容。
9）列表标签
ol 有序列表
ul 无序列表
li 列表项
10)表单标签
form标签，用于前后端交互
input标签：各种用户用来输入的标签
单行文本框：
专门用来输入密码的单行文本框：
单选框：对于单选框,需要加个name 属性.name 属性相同的单选框,值之间是互斥的.
复选框：可以使用checked属性来表示默认选中
按钮：
提交按钮：外表和按钮一样，会触发form和服务器进行交互
11）select下拉菜单
12）textaera多行编辑框
13)无语义标签
div 默认独占一行 块级元素
span 默认不独占一行 行内元素
实战练习：
1.个人简历
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<h1>陈欣予的个人简介</h1>
<h2>基本信息</h2>
<img src="陈欣予.jpg" width="400px"><br>
<div>
求职意向：国家一级演员
</div>
<div>
联系电话：1783748975
</div>
<div>
邮箱：123455646@qq.com
</div>
<div>
<a href="https://baike.baidu.com/item/%E9%99%88%E6%AC%A3%E4%BA%88/5669096" target="_blank">个人百度百科</a>
</div>
<h2>教育背景</h2>
<ol>
<li>
1997 - 2003 小葵花小学
</li>
<li>
2003 - 2009 小葵花中学
</li>
<li>
2009 - 2012 小葵花大学
</li>
<li>
2012 - 2015 中央戏剧学院
</li>
</ol>
<h2>经典剧集</h2>
<ul>
<li>
越漂亮的女人越会骗人---殷素素
</li>
<li>
我迷人的反派皇帝---主演
</li>
<li>
女版相柳
</li>
<li>
不知道了
</li>
</ul>
<h2>我的电视剧</h2>
<ol>
<li>
<h3> 倚天屠龙记</h3>
<p>
播出时间：2018 - 2019
</p>
<p>
剧情介绍：
</p>
<ul>
<li>和张翠山谈恋爱</li>
<li>被六大门派逼死了</li>
</ul>
</li>
<li>
<h3>长相思</h3>
<p>
播出时间：2023 - 2023
</p>
<p>
剧情介绍：
</p>
<ul>
<li>女版相柳我出来了</li>
<li>女版相柳我又走了</li>
<li>纯友情客串</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
<div>
<strong>家人们，谁懂啊，美死了！</strong>
</div>
</body>
</html>
案例2：填写简历信息
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简历填写</title>
</head>
<body>
<table width="500px" cellspacing="0">
<thead>
<h3>请填写简历信息</h3>
</thead>
<tbody>
<tr>
<td>
<label for="name">姓名</label>
</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<!-- label可以和input相关联 -->
<label for="male"><img src="男.png" alt="" width="20px">男</label>
<input type="radio" name="sex" id="female">
<label for="female"><img src="女.png" alt="" width="20px">女</label>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<select >
<option>--请选择年份--</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
<select >
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select >
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="school">就读学校</label>
</td>
<td>
<input type="text" name="school">
</td>
</tr>
<tr>
<td>
应聘岗位
</td>
<td>
<input type="checkbox" name="f" id="">
<label for="f">前端开发</label>
<input type="checkbox" name="h" id="">
<label for="h">后端开发</label>
<input type="checkbox" name="c" id="">
<label for="c">测试开发</label>
<input type="checkbox" name="y" id="">
<label for="y">运维开发</label>
</td>
</tr>
<tr>
<td>
掌握的技能
</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>
项目经历
</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="know" id="">
<label for="know">我已仔细阅读过公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">查看我的应聘状态</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>请应聘者确认：</h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽快去公司实习</li>
<li>能够接收公司的加班文化</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
其余标签详细内容请查看：HTML（超文本标记语言） | MDN (mozilla.org)
矢量图的下载请查看：iconfont-阿里巴巴矢量图标库
CSS介绍
CSS基本语法规则：选择器 + 若干属性声明
简单示例：
无CSS时：
添加CSS：
说明：
p 是标签名，也就是要给哪个标签设置样式
{}里面的CSS属性,是可以写一个或者多个，每个属性都是一个键值对，键和值之间使用:分割,键值对之间使用;分割.
每个键值对可以独占一行,也可以不独占。
CSS引用方式有三种：
1）内部样式：
2）内联样式：
3）外部样式：把CSS作为一个单独的文件，然后引入
CSS选择器：
1.标签选择器：形如上述的p{},这种选择器对所选定的所有指定标签的样式都做修改；
2.类选择器：更普遍的用法，通过手动指定哪些类应用该样式
定义类时，以.开头，使用时class = 类名，不需要.
一个类,可以被一个元素引用,也可以被多个元素引用.一个元素可以引用一个类,也可以引用多个类，引用多个类时中间用空格隔开。
3.id选择器：和类选择器使用类似，但是id选择器只针对唯一的元素发挥作用
4.后代选择器，可以是上述选择器的任意组合。（中间是空格隔开）
此处的后代，可以是子元素，也可以是孙子元素，只有是后代都可以。
5.子选择器：只针对子元素起作用（中间用>）
6.并集选择器：多组选择器使用相同的样式（中间用,）
7.伪类选择器：选中某个元素的某种状态
:hover 鼠标悬停时候的状态 :active 鼠标点击时候的状态
CSS常用属性
字体属性：
1.设置字体
font-family: '微软雅黑';
2.文字大小
font-size:40px;
3.文字粗细
font-weight
4.文字倾斜
font-style
文本属性：
1.文本颜色
2.文本对齐
3.文本装饰
text-decoration
4.文本缩进
5.行高 = 文本高度 + 行间距
背景属性：
1.背景颜色
background-color
2.背景图片
x y 可以是方位名词：top left center bottom,也可以是具体的像素（左上角为坐标原点）
圆角矩形：
生成圆形：
生成圆角矩阵：
元素的显示模式：
CSS盒子模型：
1.边框
border 设置四个方向的边框，也可以单独设置每个方向的边框； border-left/right/top/bottom
默认情况下，设置边框会撑大盒子，设置下面的属性就不再撑大盒子：
分别设置粗细，样式，颜色：
2.内边距
3.外边距 margin
用法和上述内边距一致
弹性布局：用来实现页面的布局
未使用弹性布局前：
1.开启弹性布局
在要水平布局元素的父元素中设置
2.设置这些元素水平方向的排列
justify-content：left/right/center/space-around/space-between
居左，居右，居中，等间距（两边有空白），等间距（两边无空白）
3.设置这些元素垂直方向的布局
align-items: center;
