前端概述
一、什么是前端
前端即网络站前台部分，运行在pc端，移动端等浏览器上展现给用户浏览的页面。随着互联网技术的发展，HTML5,CSS3,前端框架的应用，跨平台响应式网页的设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript
1.广义前端：所有的用户可以直接看见并交互的界面
2.侠义前端：浏览器上运行的用户交互界面
二、前端开发技术栈
HTML
1.超文本标记语言 Hyper Text Markup Language2.负责完成页面的结构3.文件后缀： .html.htmlv_hint: "超文本"就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素
CSS
1.级联样式表 Cascading style Sheet2. 负责页面的风格设计，样式、美观3.文件后缀：.css
1. 浏览器脚本语言，可以编写运行在浏览器上的程序2. 负责编写页面特效，调用浏览器上的API（BOM ),操作改变页面内容（BOM），从后端获取数据(Ajax) 渲染页面等。3. 文件后缀.jsv_eg: big house , live people
前端三剑客
一、HTML
1、标记语言
标记语言为非标记语言，不具备编程语言具备的程序逻辑
2、html 为前端页面的主体，有标签、指令与转义字符等组成。
标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。eg:系统的标签，自定义标签指令：别尖括号包裹，由！开头的标记。 eg:< !doctype html> 转义字符： 被&与；包裹的特殊字母组合或#开头的十进制数。eg: <；>；&你不是怕；
v_hint：转义字符
3、html 发展史代表版本
① html1：在1993年6⽉作为互联⽹⼯程⼯作⼩组（IETF）⼯作草案发布（并⾮标准）② html2：1995年11⽉作为RFC 1866发布，在RFC 2854于2000年6⽉发布之后被宣布已经过时③ html3.2：1997年1⽉14⽇，W3C推荐标准④ html4.0：1997年12⽉18⽇，W3C推荐标准⑤ html4.01(微⼩改进)：1999年12⽉24⽇，W3C推荐标准⑤ html5：2014年10⽉28⽇，W3C推荐标准(h5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成⽴了新的HTML⼯作团队。在2008年1⽉22⽇，第⼀份正式草案发布。)
4、文档类型
二、CSS
-
标记语言
标记语言为非标记语言，不具备编程语言具备的程序逻辑
-
css为前端页面的样式，由选择器，作用域与样式块组成
选择器：由标签，类，id单独或组合出现 作用域：一组大括号包含的区域 样式块：满足css连接语法的众多样式
三、JavaScript
1.编程语言
实实在在的编程语言，完善的语法，可以完成复杂的程序逻辑
2.js为前端页面的脚步，由DOM，BOM与ES组成
DOM：⽂档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语⾔的标准编程接⼝。BOM：浏览器对象模型(Browser Object Model)，是⽤于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独⽴于内容的、可以与浏览器窗⼝进⾏互动的对象结构。BOM由多个对象组成，其中代表浏览器窗⼝的Window对象是BOM的顶层对象，其他对象都是该对象的⼦对象。ES：ES是⼀种开放的、国际上⼴为接受的脚本语⾔规范(ECMAScript)，正式名称为 ECMA 262 和ISO/IEC 16262，是宿主环境中脚本语⾔的国际 Web 标准。
3.js框架
Angular,React与Vue等均是JavaScript
第一个页面
一、基础模板
第一个页面
二、模板的解读
DOCTYPE：指定⽂档类型，规定html标签语法 html：⽂档根标签，标注着⽂档(⻚⾯)的开始与结束 head：⽂档头标签，可以引⽤脚步⽂件、指定样式表、书写代码逻辑块、提供元信息 body：⽂档主体标签，包含⽂档所有⽂本与超⽂本内容 title：⽂档tag标题标签，设置⽂档tag的标题内容
三、其他核心模块标签
1、meta（元标签）
字符编码 SEO 移动适配
2、link(链接标签)
外联样式表 文档标签
3、script(脚步标签)
html常用标签
1.无语义标签
2.常用语义标签
标题 段落 原文本 换行
分割线
3.文本标签
斜体字 斜体字，表示强调 粗体字 粗体字，表示强调(语⽓更强)删除的⽂本 插⼊的⽂本 下标字 上标字 拼⾳ 中⽂注⾳，h5新增
4.其他标签
块 小号字体
标签的分类
1.单|双标签
单标签：在自身标签标识结束，主要应用场景为功能性标签
双标签：有成对的结束标识，主要应用场景为内容性标签
2.行|块标签
行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
快标签：又名块级标签，拥有自身宽高，通常独自占一行
3.单一|组合标签
单一标签：单独出现，表示具体的功能或展示具体的内容 组合标签：配合使用，才能产生相应的内容与效果
CSS三种引入方式
一、三种方式的书写规范
1、行间式
2、内联式
3、外联式
file: zero.cssdiv { width: 100px; height: 100px; }file:zero.html
二、三种方式间的“优先级”
与样式表的解析顺序有关
样式与长度颜色
1、基本样式
2、长度
px:像素，屏膜上显示的最小单位，用于网页设计mm:毫米cm:厘米in:英寸pt:点（point），一个标准的长度单位，1pt=1/72 in,用于印刷业em:相当长度，通常1em=16px,应用于流式布局
3、颜色
rgb():三个值可为[0-255]数值或百分比，以 ， 相隔（r:red g:green b:blue)fgba():前三个值可为像素或百分比，最后一个为[0,1]数值，以 ，隔开 （a:Alpha)hsl():第一个值为[0-360]数值，后两个值可为百分比，以，隔开（h:Hue s:Saturationl:Lightness）hsla()：第⼀个值为[0,360]数值，中间⼆个值可为百分⽐，最后⼀个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）#AABBCC：六个⼗六进制位，每两位⼀整体，分别代表Red、Green、Blue，可以简写#abc
常用样式
1、字体样式
font-family:字体族科，多值用于备用，以，隔开font-family:"STSong","Arial";font-size:字体的大小font-style: 字体风格 normal | italic |obliquefont-weight:字体重量 normal | bold | lighter | 100-900font-height:行高font:字重 风格 大小/行高 字族
2、文本样式
color：文本颜色text-align:横向排列 left 居左 | center 居中 | right 居右vertical-align:纵向排列baseline: 将支持valign特性的对象的内容与基线对齐sub:垂直对齐文本的下标super：垂直对齐文本的上标top:将支持valign特性的对象的内容与对象顶端对齐text-top:将支持valign特性的对象的文本与对象顶端对齐middle：将支持valign特性的对象的内容与对象中部对齐bottom：将支持valign特性的对象的文本与对象底端对齐text-bottom：将支持valign特性的对象的文本与对象顶端对齐text-indent：字体缩减 text-decoration：字划线 letter-spacing：字间距 word-spacing：词间距 word-break：⾃动换⾏normal：默认换行规则break-all:允许在单词内换行
3、背景样式
background-color:颜色
background-image:图片
background-image:url(bg.png);
background-repeat:重复
repeat | no-repeat | repeat-x | repeat-y
background-position:定位
top | bottom |left | right | center
v_hint:定位值可时为方位词，百分比及固定值，值个数默认为两位（水平/垂直），一个值 垂直默认center
backgrount-attachment:滚动模式
background-attachment:fixed;
CSS选择器
一、基础选择器
1、通配选择器
*{ border:solid;}匹配文档中所有标签：通常指html、body及body中所有显示类的标签
2、标签选择器
div{ background-color:yellow;}匹配文档中所有与标签名匹配的标签：如div{}匹配文档中全部div,span{}会匹配文档中所有的span
3、类选择器
.red{ color:red; } 匹配文档中所有拥有class属性且属性值为red的标签：如 均会被匹配 4、id选择器
#div{ text-align:center; } 匹配文档中所有拥有id属性值为div的标签：如 均会被匹配 二、基础选择器优先级
1.基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
2.与匹配精度成正比，精度越高，优先级与润膏
3.优先级：id优先级>类选择器>标签选择器>通配选择器
v_hint:id选择器必须保证单文档的唯一性
三、组合选择器
1、群选择器
div,span, .red, #div{color:red;}
一次性控制多个选择器
选择器之间以 ， 隔开，每一个选择器均可以为任意合法的选择器或选择器组合
2、子代（后代）选择器
子代选择器用>连接body > div{ color:red;}后代选择器用空格连接.sup.sub{ color:red;} 1.一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
2.每一个选择器位均可以为任意合法选择器或选择器组合
3.子代选择器必须为一级父子嵌套关系，后代选择器可以为子一级及多级父子嵌套关系
四、组合选择器优先级
-
组合选择器优先级与权值相关，权值为权重和
-
权重对应关系
| 选择器 | 权重 |
|---|---|
| 通配 | 1 |
| 标签 | 10 |
| 类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
选择器权值比较，只关心权重和，不更新选择器位置
不同级别的选择器间不具备可比性：一个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器
-
[attr]：匹配拥有attr属性的标签
-
[attr=val]：匹配拥有attr属性，属性值为val的标签
-
[attr^=val]：匹配拥有attr属性，属性值以val开头的标签
-
[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
-
[attr*=val]：匹配拥有attr属性，属性值包含val的标签
v_hint：属性选择器权重等价于类
v_test：掌握所有选择器，并熟知选择器优先级