前端概念：
广义：用户能看见并且交互的展示界面
狭义：运行在浏览器上的页面
学习的语言：
HTML5 =>（h5架构 + CSS布局 + JavaScript逻辑）
网页编写 | 移动端编写 | （客户端编写）
前后台分离 开发方式 =>通过接口完成数据交互 => 后台可以千千万，前端就是h5
一：HTML：超文本标记语言
学习HTML的目的：完成页面结构的搭建（什么时候用什么标签） HTML属于标记语言：标记语言为非编程语言，不具备编程语言具备的程序逻辑 HTML三大组成： 标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记 eg：系统标签，自定义标签 指令：被尖括号包裹，由！开头的标记。 eg:<!doctype html> <!-- --> 转义字符：被&与;包裹的特殊字母组合或#开头的的十进制数。 eg:< >
1.1标签
标签的概念：被<>包裹由字母开头，可以结合合法字符（-|数字），能被浏览器解析的特殊符号 标签具有特定的功能：换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频 注意：标签都有头有尾，用/来标识标签的结束（用来标识尾）
1.2页面
<!-- html的注释: 一个html页面有且只有一个页面模板 -->
<html>
<head>
<!-- 字符编码 -->
<meta charset="utf-8">
<!-- 页面标签的标题 -->
<title>页面</title>
<!-- 内部或外部的css样式 | js脚本 | 页面其他设置 -->
</head>
<body>
<!-- 所有页面显示的内容: 文本 | 图片 | 视频 | 超链接 | 表格 | 表单 ... -->
<!-- js脚本 -->
</body>
</html>
1.3常用标签
目的：使用标签的语义与功能 | 完成页面架构的搭建（div） 1.div：“三无”，无语义，无功能，无样式，完成页面架构的搭建 2.h1：页面总标题，代表页面“整体含义”，出现一次即可 3.列表：ul>li*5 4.p:段落标签 5.img：图片标签，src（数据源），alt（资源加载失败的文本提示） 6.a：超链接标签，href（超链接地址），target（跳转方式_self | _blank:_self是在本页面跳转，_blank是跳转打开新页面），锚点 7.常用的文本类标签：span ,i (斜体), b （加粗）
二：CSS层级样式表
学习CSS的目的：完成页面布局（还原设计稿）
三大组成部分：
选择器：由标签、类、ID 单独或组合出现
作用域：一组大括号包含的区域
样式块：满足CSS连接语法的众多样式
2.1选择器
用来将CSS与HTML建立关联的桥梁，称之为CSS选择器
将原来出现在标签内部的样式分离开来，可以用一个个选择器加以管理，达到页面与样式的解耦合目的，从而提高代码的复用性与开发效率
本质：就是页面标签的各种名字
2.2CSS三种引入方式
1.行间式 i)写在标签的style属性中 ii)属性与属性值间用：赋值 iii)属性与属性之间用;隔开 2.内联式 i)写在style标签中（style标签一般出现在head标签中） ii)用选择器与HTML建立连接 iii)样式块书写在作用域内 3.外联式 i)CSS样式完全与HTML文件脱稿，形成单独的.css文件，样式书写在.css文件中 ii)用选择器与HTML建立连接 iii)样式块书写在作用域内 iv)要将.css文件与.html文件建立关联 => <link rel="stylesheet" href="css文件的相对路径"> 注：选择器的应用场景在内联式与外联式 总结： 开发：最常用的是外联式，内联与行间辅助样式布局 测试：内联式，可读性最强，且解耦有复用性 行间的应用场景：最简单粗暴，js操作的样式都是行间式