一、前言
1、学习地址及使用vscode
2、教程简介
什么是前端开发：
网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端
学习路线：
HTML4——>CSS2——>HTML5——>CSS3
3、计算机基础
计算机硬件：中央处理器（运算器+控制器：cpu）、存储器（内存、硬盘）、输入设备（键盘、鼠标）、输出设备（音响、显示器）......
计算机软件：系统软件（Windows、Linux、Mac、Harmony......）、应用软件（微信、腾讯视频）
4、CS架构和BS架构
C:Client（客户端） B：Browser（浏览器） S:Server（服务器）
CS架构软件：需要安装后才能使用：弊端：1、需要安装，2、偶尔更新，3、不跨平台（Windows、mac....）
BS架构软件：借助浏览器打开网页就能用（eg：网页版csdn）：BS的优势：1、无需安装，2、无需更新，3、可跨平台
5、浏览器相关知识
五大主流浏览器：Chrome 、Safari、IE、Firefox、Opera
原因：市场份额大、有自己的内核
内核：用于处理浏览器所得的各种资源，以上五大主流浏览器所使用的内核分别为：Blink、webkit、Trident、Gecko、Blink
6、网页相关概念
输入网址打开网站可以看到网页、一个或多个网页构成网站。
网页的组成部分：结构（HTML）+ 表现（CSS）+ 行为（JavaScript）
1、HTML简介
全称：HyperText Markup Language 译为： 超文本标记语言
1996年W3C制定HTML规范，2014年HTML5由W3C正式发布
2、准备工作
如何让电脑无论开任何格式的图片都统一使用一个应用打开：
开始菜单——设置——默认应用——图片查看器——选择默认打开图片的应用
如何查看电脑是否为32位：
开始菜单——设置——系统——系统信息（或关于）
如何将Chrome浏览器设置为默认浏览器：
开始菜单——设置——默认应用——web浏览器设置
3、HTML标签（元素）
<h1>html</h1>
双标签：起始标签<h1>、结束标签</h1>、标签名h1、标签体html
单标签：<input/>
标签之间有嵌套关系和并列关系，注意换行
4、HTML标签属性
标签名和标签属性之间用英文空格隔开
eg: <marquee loop = "1" bgcolor="green">html</marquee1>
属性名loop、属性值1（名值对组合）
一个标签可以有多个属性，属性间用空格隔开,不同标签属性有相同有不同
标签中不要出现同名属性，否则后写的会失效
特殊属性没有属性名只有属性值eg : disabled
5、HTML基本结构
6、HTML注释
注意：不能嵌套，可让某段代码暂时不参与运行
vscode快捷键：ctrl+/
7、HTML文档声明
作用：告诉浏览器当前网页版本
写法：
8、HTML字符编码
原则1：存储时，必须采用合适的字符编码，否则无法存储，数据会丢失
原则2：存储时采用哪种方式编码，读取时必须采用相同的方式解码，否则数据能呈现，但会出现乱码
告诉浏览器解码方式：
9、HTML标准结构
快捷键：光标放在删除行+（Ctrl+Shift+K）
10、开发者文档
参考搬运翻译w3c官方网站的前端学习网站：
11、HTML排版标签
典型的应用排版标签的网站：
右键检查，ctrl+F可查找标签使用个数
注意：换行快捷键：Ctrl+Enter
12、HTML语义化标签
语义：含义：标题、段落...（用特定的标签表达特定的含义）
语义化：标签默认的效果（可通过css调整）不重要，语义最重要
语义化作用：
1、代码的可读性强清晰
2、有利于SEO（搜索引擎优化）
注意：百度搜索引擎利用爬虫技术看网页
3、方便设备解析，如：屏幕阅读器、盲人阅读器
13、块级元素与行内元素
使用规则：
1、块级元素中能写：行内元素、块级元素（几乎都能写）
2、行内元素中能写行内元素，但不能写块级元素
3、注意：h1-h6不能相互嵌套、
p标签中不能写块元素，如<ul></ul>块元素
14、HTML文本标签
注意：以下介绍标签均为双标签
用于包裹词汇、短语；
通常写在排版标签里（h1-h6、p、div）
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
文本标签通常都是行内元素
常用的文本标签：
em 双标签 要着重阅读的内容
strong 双 十分重要的的
span 双 无语义
不常用的文本标签：
cite 作品标题 samp 从上下文中提取内容，如标识设备输出
dfn 特殊术语或专属名词 kbd 键盘文本，经常用在与计算机相关的手册
del 删除的文本 abbr 缩写，最好配合上title属性
ins 插入的文本 bdo 更改文本方向，要配合dir属性，可选值：ltr(默认)、rtl
sub 下标文字 var 标记变量，可与code标签一起使用
sup 上标文字 small 附属细则，如：版权、法律文本
code 一段代码 b 摘要中的关键字、评论中的产品名称
i 人物思想活动、所说的话，现多用于呈现字体图标
u 与正常内容有反差文本如：错的词
q 短引用
blockquote 长引用
address 地址信息
注意：blockquote与address是块级元素，其他的文本标签是行内元素
记住语义感强重要的的标签：h1-h6、div、p、em、strong、span
代码：
效果：
15、HTML图片标签
16、相对路径和绝对路径
17、常见的图片格式
1、jpg格式
扩展名为：.jpg 或 .jpeg 有损的压缩格式
优点：支持颜色丰富、占用空间小
缺点：不支持透明背景和动态图
使用场景：对图片细节没有极高要求，如：网站的产品宣传图
2、png格式
扩展名为：.png 无损的压缩格式
优点: 支持颜色丰富，支持透明背景
缺点：占用空间略大，不支持动态图
使用场景：图片有透明背景、更高质量呈现图片，如：公司logo图、重要配图
3、bmp格式
扩展名为：.bmp 不进行压缩，保留图片更多的细节
优点: 支持颜色丰富，保留的细节更多
缺点：占用空间极大，不支持动态图，不支持透明背景
使用场景：对图片细节要求极高，如：一些大型游戏图片（网页中很少用）
4、gif格式
扩展名为：.gif 仅支持256种颜色，色彩呈现不是很完整
优点：支持简单透明背景，支持动态图
缺点：支持颜色较少
使用场景：网页中的动态图片
5、webp格式
扩展名为：.webp 谷歌推出的一种格式。专门用来在网页中呈现图片
优点：上述几种几种格式的优点
缺点：兼容性不太好，如IE浏览器无法呈现webp格式图片，一旦使用需要解决兼容性问题
使用场景：网页中的各种图片
6、base64格式
本质：一串特殊的文本，通过浏览器打开，传统看图应用通常无法打开
原理：要把图片进行base64编码，形成一串文本
如何生成：靠一些工具或网站如：菜鸟工具
使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响
使用场景：一些较小的图片或需要和网页一起加载的图片
18、超链接
1、跳转页面
2、跳转文件
超链接是浏览器可以直接打开的文件，如：.jpg/.mp4
若不是浏览器可以直接打开的文件，如：.zip，则浏览器触发下载
也可以写一个在线的
3、跳转锚点
锚点：网页中的一个标记点
注意：1、具有href属性的a标签是超链接，具有name属性的a标签是锚点
2、name和id都是区分大小写，且id最好别数字开头
其他页面：如路径.html
4、唤起指定应用
19、超文本含义
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。通过超链接将不同空间的文字图片等各种信息组织在一起，能够从当前内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）
20、列表
21、表格
1、表格基本结构与常用属性
2、表格的跨行与跨列
td 和 th 还有rowspan跨行属性和colspan跨列属性
效果图：
22、补充几个常用标签
23、表单
含义：网页中的交互区域，收集用户所提供的数据，如：用户名、密码......
表单控件
1、表单的基本结构
2、表单常用控件
3、禁用表单控件
使用场景：如：已填的用户名不能再改
4、表单label标签
实现提示文字真正和表单控件的关联
获取焦点，如：本节实现点击文字账户获取焦点，而不是点击输入框获取