前端入门
前端开发介绍
前端开发概念：船舰web页面或app等前端界面呈现给用户的过程
核心技术：HTML、CSS、JavaScript以及衍生出的各种技术、架构。
发展：
早期前端：功能少、速度慢、不美观
现在前端：内容丰富、功能强大、用户体验更好
前端开发应用场景：
PC端、移动App、小程序、（小）游戏、服务端
前端就业方向
Web前端开发工程师、小程序开发工程师、移动Web开发工程师、前端架构师/专家
（从左到右薪资递增）
前端学习路线
前置知识：计算机基本认识、应用的概念、前端和后端
细化：HTML要掌握 语法、语义化、SEO基础；CSS要掌握 语法、页面布局、媒体查询、CSS3
进阶：JavaScript
细化：Javascript语法、基础数据结构、Web APIs、ES6+、模块化、TypeScript
工具：npm、yarn=>这些都是包管理工具
CSS
细化：CSS预处理、CSS框架、CSS架构规范
构建工具
类型：代码校验工具、模块打包工具、任务运行器
流行框架
Vue.js、React.js、Angular
深入：Node.js、渐进式Web应用、服务器渲染、静态站点生成器、桌面应用、移动应用、桌面应用
编译器
主流编译器：WebStorm、HBuilder、VScode
导师推荐：VScode
- 免费
- 可以加入其他插件满足编译需求
- 支持中文
推荐插件（VScode中使用ctrl+shift+X打开插件商）
| 插件名 | 作用 |
|---|---|
| Chinese(Simplified) Language Pack for Visual Studio Code | 中文界面 |
| Auto Rename Tag | 修改html标签，自动帮你同步闭合标签 |
| open in browser | 右键设置中可以打开网页（在默认浏览器中） |
| Mithril Emmet | 快速编写工具 |
使用步骤：
- 新建文件，
ctrl+N - 保存对应的文件
ctrl+S - 使用快捷键快速编写程序
HTML
HTML用于制作网页文件，文件尾缀.html或者.htm，英文全称为：Hypertext Markup Language
主要组成：结构层、样式层、行为层 ===> HTML、CSS、JavaScript
其他结构：通过标签导入/注入多媒体结构，如图片、音频、视频、超级链接等
基本结构
html文件四个最基本标签：html、head、title、body
html标签
作用：定义HTML文件的根元素，表示整个HTML文档，所有的标签要书写在 html 标签内部。
head标签
作用：存放title、meta、base、style、script、link等标签，其中title表示页面标题
title标签作用：
- 让页面拥有一个属于自己的标题
- title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
- 内部的内容会显示在搜索结果的标题部分
- 作为浏览器收藏夹默认的网页标题
body标签
作用：定义网页的主体部分，存放所有能显示标签（title标签除外）
DTD
一般出现在完整html文件第一行，用于告诉浏览器网页html规范版本，方便浏览器解析。
英文全称为DocType Definition，文档声明类型。
<!-- XHTML1.0版本 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- HTML5版本 -->
<!DOCTYPE html>
命名空间
html元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。
XHTML1.0版本
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>
HTML5版本
<html lang="en">
</html>
属性
xml：可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，是html的补充。
xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。
xml:lang="en"、lang="en" 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的。
lang="zh-cn" 表示中文（中国）
字符集
meta标签通过http-equiv属性来定义当前网页字符码
属性：char，字符；set：集合
XHTML1.0版本
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5版本
<meta charset="UTF-8">
常用字符集编码：
国际通用字库：UTF-8=>涵盖人类所有语言文字
中文国标字库：gb2312、gbk
建议：
没有加载速度要求，或者有国外访客，推荐UTF-8
有大量中文汉字，且要求加载速度，推荐gbk
路径
寻找文件时所历经的线路，分为相对路径和绝对路径
一般用src属性定位文件
相对路径
以本文件为坐标，寻找对应文件
<img src="../../smile04.jpg" />
../：寻找上一级目录
./XXXX/……：进入XXX目录寻找
./XXX.jpg：定位XXX.jpg文件
绝对路径：
从盘符号出发，找到目标文件；或者是服务器地址
<img src="E:\b笔记\l拉钩教育笔记\课程\前端零基础录播课程\1-1.png" />
缺点：
路径不可移植，不可移动
常用标签
注释
标签：<!-- 内容 -->
VScode快捷键：ctrl+/ WS快捷键：ctrl+/
特点：只在源码可见，浏览器不可见
作用：1. 添加注释信息，便于理解代码
2. 纠错 = > bug出现时可以通过注释来定位bug
3. 停用暂时不用代码，便于后期处理操作
标题
标签：<h1>~<h6>
特点： h后面数字递增，标题大小越小
样式由CSS设定，且可以改变
双标签
容器级标签
不可相互嵌套
权重：标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推。
段落
标签：<p>
特点： 双标签
本文标签
可以放置文本、图片、表单元素
作用：给标签内部的内容添加一个完整段落的语义
换行
标签<br/>
特点：单表签
作用：强制换行
文本格式化
标签b、big、em、i、sup、sub等标签
特点： 双标签
文本标签，只能输入文本
作用：通过标签形式改变文本文字样式类型。
| 标签 | 描述 |
|---|---|
| b | 加粗 |
| big | 加粗加大 |
| em | 标记，斜体 |
| i | 变斜体字 |
| small | 缩小 |
| strong | 加粗加重 |
| sub | 下角标文字 |
| sup | 上角标文字 |
| ins | 插入字，下滑线 |
| del | 删除字 |
| s、strike | 建议使用del代替 |
| u | 下划线 |
图片
内容：<img />
特点：单表签
需要定位文件src
作用：插入图片，图片格式一般为：.jpg、.png、.gif
属性：
| 属性名 | 描述 |
|---|---|
| src | 图片路径（绝对路径或相对路径） |
| width | 图片宽度 |
| height | 图片高度 |
| border | 边框属性，可以设置边框粗细、颜色、类型 |
| title | 提示文本 |
| alt | 没寻找到图片时替换文本 |
多媒体(音频视频)
标签：<audio> ==> 音频、<video> ==> 视频
特点：双标签
需要定位文件src
需要controls="controls"属性设置控制条
作用：在页面中显示多媒体
超(级)链接
标签：<a>
特点：双标签
作用：与网络/本地的另一个文件相连。
作为锚点跳转 ==>类似于书签
属性：href(hypertext reference)用于定位目标地址
target跳转后显示方式（_self=>当前窗口显示，_blank新建页面显示）
title 提示文本
高级使用：
锚点使用方式：
内部锚点
第一步：定位标签位置
<a href="#mubiao">跳转</a>
第二部：设置标签
<h2 id="mubiao">目标位置</h2>
或者
<a name="test"></a>
外部锚点
定位外部路径
<a href="new.html#mubiao">点击文本</a>
列表
无序列表和有序列表：
标签：<ul>、<li>=>无序列表、<ol>、<li>=>有序列表
使用方式：
<!--无序列表-->
<ul>
<li>hhhh</li>
<li>jjjj</li>
<li>kkkk</li>
</ul>
<!--有序列表-->
<ol>
<li>hhhh</li>
<li>jjjj</li>
<li>kkkk</li>
</ol>
二者特点：双标签
ul、ol标签内部只能嵌套li标签
li标签内可以**嵌套其他标签**，包括ul>li、ol>li
列表展示顺序与li排列顺序有关
定义列表：
标签：dl、dt、dd
使用方式：
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>
特点：dl内部只能嵌套dt、dd，数量不限
dt、dd标签是容器标签，可以放置任意内容
布局
标签：div、span
特点：双标签
容器标签
作用：划分网页区域，进行布局。
划分时以div为主，span为辅
表格
标签：table、tr、td
特点：双标签
使用方式：
<table>
<tr>
<th>表头、自带特效</th>
…… …… ……
<th>XXXX</th>
</tr>
<tr>
<td>表格内容</td>
…… …… ……
<td>XXXX</td>
</tr>
</table>
部分属性：
| 标签>属性 | 作用 |
|---|---|
| table | |
| border | 边框属性：像素值、颜色、边框线类型 |
| border-collapse | 让表格内th、td标签之间间隙塌陷 |
| th+td | |
| rowspan | 跨行(上下)合并，可设置合并行数 |
| colspan | 跨列(左右)合并，可设置合并列数 |
<!--样式，方便查看-->
<style>
table{
border: 1px black solid;
border-collapse: collapse;
}
td{
border: 1px black solid;
width: 50px;
height: 50px;
text-align: center;
}
</style>
<table>
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
<td rowspan="2">7</td>
</tr>
<tr>
<td rowspan="2">8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td colspan="2">12</td>
<td>13</td>
</tr>
</table>
表单
标签：form
特点：双标签
容器级标签
属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接受表单数据的服务器程序url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
元素：
| 元素标签 | 内部属性名 | 属性值 | 描述 |
|---|---|---|---|
| input | type | text | 文本输入 |
| password | 密码输入(会隐藏文本) | ||
| radio | 单选框(同一name下面使用) | ||
| checkbox | 复选框(同上) | ||
| button | 普通按钮 | ||
| reset | 重置按钮 | ||
| submit | 提交按钮 | ||
| image | 图片形式按钮 | ||
| file | 定义输入字段和“浏览”按钮，供文件上传 | ||
| hidden | 隐藏 | ||
| name | 自定义 | 定义控件名称 | |
| value | 自定义 | 定义输入框默认文本 | |
| size | 数字 | 定义控件宽度 | |
| checked | checked | 被选定状态 | |
| maxlength | 数字 | 设置输入上限 | |
| textarea | |||
| rows | 数字 | 设置文本宽度 | |
| cols | 数字 | 设置文本高度 | |
| select | 下拉菜单整体结构，里面只能嵌套optgroup、option | ||
| option | 嵌套在select、optgroup里面，用于定义菜单内每一项选项 | ||
| selected | selected | 更改菜单默认选择 | |
| optgroup | 分组标签，内部嵌套option，不能被选择 | ||
| label | 辅助聚焦相关标签(通俗说就是将某些标签填满容器空白，方便点击) | ||
| for | 绑定标签id属性 | 绑定对应标签 |
字符实体
内容： HTML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
使用规则：如 、 以 & 开头，内容是名称(nbsp)或编号(#160)， ; 结尾；
使用建议：不需要记住所有字符实体类，只需要记住几个常用的即可
使用时注意大小写
CSS
产生背景：为了优化臃肿的html页面，CSS出现了。
概念：CSS全称为cascading style sheets ，层叠式样式表，是一种用于表现HTML的文本样式的计算机语言
作用：静态地修饰网页，并且可以配合各种脚本语言地对网页各种元素进行格式化
加载特性：层叠性、继承性；
样式范围：文本文字、背景、盒模型、浮动、定位、其他
书写方式
CSS构造：选择器+一条及以上样式声明 详细
重复样式解决方案：根据加载先后覆盖 详细
加载顺序： 1、(内嵌式+外联式)>内联式>导入式
2、内嵌式、外联式都是标签形式注入，所以说以标签顺序决定加载先后顺序
3、样式声明加载顺序：标签、伪元素声明>类、伪类、属性声明>ID声明
内联式(行内式)
书写习惯：在HTML标签内写入css样式
<div style="width:100px;height:100px;font-size:14px;">222</div>
缺点：
1. 必须写在标签上
2. 由于写在标签内，会让标签臃肿，不利于修改维护
3. 复用性差
内嵌式
书写习惯：在head标签内的**style标签**内写入
<!--
标签属性名：type
属性值：text/css
-->
<style type="text/css">
div{
width:100px;
height:100px;
backgroud-color:pink;
}
.box{
height:100px;
width:100px;
}
#h1{
height:100px;
width:100px;
}
</style>
优点： 1、初步实现了结构样式分离
2、页面内复用性增强
缺点： 1、样式代码任在html文件内
2、只能在文件内使用，不能外用
3、增加文件代码量，增加阅读难度和维护难度
外联式
书写习惯：在单独css文件内写入样式，之后再导入html文件内
/*注意，内部不用写 style 属性或标签*/
.box{
height:100px;
width:100px;
}
div{
height:100px;
width:100px;
}
#h1{
height:100px;
width:100px;
}
引入方法：在html文件的head标签内，用link标签
<link rel="stylesheet" href="XXX/XXX/xxx.css">
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rel | stylesheet | 表明引入外部文件与html文件的关系 => 样式表 |
| href | css文件路径 | 超文本引用 |
| type | text/css | 加载文本类型，H5中可以省略 |
优点： 1、实现结构层与样式层分离
2、独立出来，方便html文件修改维护
3、独立文件，方便其他html引入
4、html文件可以继承多个css文件
导入式
书写原则：同外联式
引入方法：在style标签中用@import url()导入
<style>
@import url("XXX.css");
…………
</style>
缺点： 导入式在浏览器加载时，会在html结构加载完成后再编译，会出现因网速问题无法加载
语法规则
构造
/*选择器*/
p{
width:300px; /*声明一*/
font-size:14px; /*声明二*/
border:1px red solid; /*声明三*/
}
规则
1、必须在style标签/属性/文件内
2、必须使用选择器选中目标标签，通过**id值、class名、标签名**方式选中
3、声明必须按照**属性名:属性值;**方式声明，不然声明无效且可能影响其他标签，尤其是;
4、声明必须再选择器给定的{}内才能实现
5、所有需要样式都要写在选择器内部
6、当声明重复或者样式冲突时，以最后声明的样式进行覆盖
格式
展开格式：便于开发人员识别
/* 一般在选择器和'{'之间加空格 */
div {
/* 一般在':'和属性值之间加空格 */
width: 100px;
border: 10px #eeeeee solid;
}
#div1 {
height: 100px
}
紧凑格式：便于上传服务器
div{width:100px;border:10px #eeeeee solid;}#div1{height:100px}
常用样式
文字三属性
颜色：
作用：**设置/改变**文字颜色
属性名：color
属性值：颜色名或者颜色值
p {
color: red; /*颜色名*/
color: #eeeeee; /*十六进制*/
color: #808 /*十六进制简写*/
color: rgb(255,255,255); /*rgb模式*/
}
字体：
作用：定义元素内文字的字体
属性名：font-family => 字体属于font综合属性中的单一属性
属性值："字体名称" 可以设多个值 => 例 中文字体：宋体、微软雅黑 英文字体：Arial、consolas
p {
font-family: "arial","宋体";
}
备注： 1、多个字体加载原则：按书写顺序进行，找到第一个能支持的字体
换句话说，浏览器不能使用第一个字体，则会尝试下一个，直到找到第一个能用字体。
2、浏览器所加载字体为用户电脑自带字体
3、为了避免对英文字体影响，一般将英文字体写在中文字体前面，防止中文字体加载英文字体
字号：
作用：设置文字大小
属性名：font-size => 字号属于 font 综合属性的一个单一属性
属性值：数字+单位 => 可以使用相对长度单位，也可以使用绝对长度单位，推荐相对
| 相对长度单位 | 说明 |
|---|---|
| px | 像素值，做常用的单位 |
| em | 倍数，继承祖先元素设置的字号倍数 |
| % | 百分比，继承祖先元素设置的字号百分比 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注：一般浏览器默认字号为16px
盒子实体化三属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| width | 一般用 数字+px | 定义元素占有宽度 |
| height | 一般用 数字+px | 定义元素占有高度 |
| background-color | 颜色名或颜色值 | 定义元素背景颜色 |
div {
width: 100px;
height: 100cm;
background-color: red;
}
选择器
选择要对html标签添加样式的一种方式/模式
选择器分类
分为两大类：
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器：后代选择器、交集选择器、并集选择器。
基础选择器
标签选择器
原理：通过标签名来选择标签
书写： 标签名 + {}
范围： 文件内所有同名标签
备注：被选中的标签无论嵌套几层或者被嵌套几层，都会被选中
优点：可以设置同名标签的公共样式
缺点：只能全局实现，不能针对性选择
div{
color:red;
}
id选择器
原理：选择对应标签上的id属性
书写：#id属性值
范围：同一网页只能选择一个标签 => id属性值的唯一性
补充：id属性命名规则 => 必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分 大小写
每个 id 属性值必须是唯一的，不能与其他的 id 同名
缺点：只能单选
#div1{
XXXXXX:XXXX;
}
类选择器
原理：选取对应标签上的class属性
书写：.class属性值
范围：页面中所有相同class属性值的标签
补充：class 命名规则 => 必须以字母开头，后面可以有字母、数字、下划线、横线，严格 区分大小写
class 属性值可以与其他的class相同
特点： 1、class属性值相同就可以被选中
2、一个标签class可以有多个属性值 ，如<div class="div1 div2 div3">（空格隔开）
3、可以提前设置样式，在后期使用时在class中加入即可 => 原子类
优点： 1、一个类可以选择多个/组标签，方便添加公共样式
2、一个标签可以被多个类选择器选中，能分别提取公共/单独样式
.div1{
XXXXXX:XXXX;
}
通配符选择器
原理：通过一个特殊符号选择页面上所有标签
书写：*
范围：html文件内所有标签，包括html
优点：便于设定网页默认样式
缺点：选择效率低，且会让所有标签加载一次后再加载其他样式
注意：实际上线的网站不允许使用 * 去清除默认内外边距
*{
XXXXX:XXXX;
}
高级选择器
后代选择器(包含选择器)
原理：通过标签之间存的嵌套关系（族谱关系）去选择元素
书写：空格后面表示后代，前面表示祖先级
范围：在祖先级标签内选取目标标签
备注：后代标签不仅仅指父子关系
优点：减少class属性定义使用，选择效率更高
ul li{
XXXX:XXXX;
}
交集选择器
原理：通过一个标签之上满足所有的基础选择器的需求去选择标签
书写：基础选择器连续书写(不能有空格)，若有标签选择器则标签选择器开头
范围：满足所有基础选择器的标签
备注：IE6不支持类名连续写
p.demo{
XXXXX:XXXX;
}
p#id{
XXXXX:XXXX;
}
#id.demo{
XXXXX:XXXX;
}
并集选择器
原理：将不同选择器选中的元素设置相同的样式
书写：连续书写多个选择器并用逗号隔开(不能有空格)
范围：满足任意条件的标签
备注： 1、便于设置多标签公共样式
2、便于清除部分样式
层叠式
继承性
原理：继承祖先级文字相关样式属性
层叠性
原理：同一样式重复时，后来样式会覆盖之前样式
问题：标签某一样式被重复加载，如何解决？
方案：最后加载样式会覆盖之前加载样式
优先级
权重：用于决定最后样式的概念
权重比较：
1、不同选择器比较：
基础选择器
范围越大，权重越小 => 通配符选择器 < 标签选择器 < 类选择器 < id选择器
高级选择器
划分成基础选择器，再依次比较基础选择器数量
2、权重相同时比较选择器位置
权重大的选择器越靠前，权重越大
3、若出现!important默认权重>id选择器
div.div1 {
color:red !important;
}
个人总结：
优先级与加载顺序有关，加载越快的优先级越低，反之亦然。
涉及优先级时将先比较样式书写方式，在比较权重
笔记整理者： 拉钩教育大前端就业1期
