学习链接：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
学习文档：
Web 开发技术 | MDN (mozilla.org)
一、前后端工作流程
WEB模型：前端用于采集和展示信息，中间的数据请求由后端负责
CS架构：客服端-服务器，通过APP/软件访问
BS架构：浏览器-服务器，通过网站访问
浏览器内核用来解析前端代码
二、HTML5+CSS+JS
1.语言功能
HTML用来搭建页面内容和结构
CSS用来添加样式，比如字体颜色大小、背景颜色、字体间距等
JS用来实现网页的行为，让页面动起来
2.前端开发工具
常用vscode来开发
3.插件
vscode中可安装一些插件：Auto Rename Tag（自动修改尾标签），会了吧（翻译单词）
Live Server插件工作原理：html文件要放到文件夹里，用vscode打开文件夹，右键
可以在vscode中打开页面，修改内容之后保存会在页面实时更新
三、HTML5
1.HTML和XHTML
具有根结构、头结构、体结构标签
HTML的语法较松散，可以没有根结构，XHTML的语法很严格，现有绝大多数还是用HTML
2.注释：快捷键ctrl+/
<!--注释-->3.标签
（1）语法
所有的指令都需要标签（开始标签，内容/标签体，结束标签，元素），标签不区分大小写，推荐使用小写
（2）分类
按照标签的结构来分：①围堵标签，如段落<p></p>②自闭合标签，如水平分割线<hr>
按照标签效果来分：①行内（内联）标签：不会独占一行，会和其他标签共享一行。表示斜体
我是<em>第一名</em>②块级标签：会独立成为一行，不和其他标签共享一行。
（3）嵌套
一个标签中可以写另一个标签：行内嵌套行内，块级嵌套行内，块级嵌套块级
行内不可以嵌套块级，行内会失效
<!--行内嵌套行内-->
我是<em><strong>第一名<strong/></em>（4）常见标签
标题标签：<h1></h1> <h2></h2>.........字体大小不同
段落标签：<p></p>
4.常规属性（有值）
（1）单引号/双引号
属性是作用在标签上的，属性不会直接作用在内容上，属性值的引号可以省略，但不建议
属性的值可以用单引号或者双引号，但同类型的引号是不能嵌套的
（2）以超链接标签为例
href属性：表示跳转到哪个网址
title属性：给元素添加提示信息，鼠标悬停时可以提示内容
target属性：_blank 让页面在新的窗口打开，_self在当前页面加载（默认）
可以给图片、标题添加超链接
<a href="https://developer.mozilla.org/zh-CN/docs/Web" title="这是web开发文档" target="_blank">这是链接</a>5. 布尔属性（无值）
是属性的一种简化写法，常见于表单标签中，没有值，比如下面的disabled
<!--表示输入框不可用-->
<input type="text" disabled> 请输入名字6.实体字符
如何表示html语法中的字符
7.空格的处理
无论写多个空格，都会只展示一个空格，所以需要用实体字符
<p>My cat is very grumpy</p>8.HTML结构
<!--<!DOCTYPE html> 是最短的有效文档声明-->
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的测试站点</title></head><body><p>这是我的页面</p></body>
</html>meta标签（元标签）：用于指定元数据，即网页的描述，关键词，文件的最后修改时间，作者及其他元数据，不会显示在客户端。
字符集：字符和二进制在计算机中的存储关系，英文用ascii，中文用gbk，通用用utf-8
9.列表（可以嵌套）
（1）无序列表
通过属性可以更换前面圆圈的样式，嵌套时自动更换图标
（2）有序列表
通过属性可以更换前面序号的样式，嵌套时不会自动更换图标
10.语义化
语义：表示该标签的意义，比如h1表示一级标题
标签效果：给用户看到的效果，可以通过css控制样式
任何效果都可以通过控制标签实现，所以语义是最重要的
<em>和<i>标签都可以表示斜体，更推荐使用<em>，因为不止有斜体效果
<strong>和<b>标签都可以表示加粗，更推荐使用<strong>，因为不止有加粗效果
11.插入图片
插入本地图片或链接指向的图片，推荐本地图片
一般不会直接修改图片的大小，会糊
12.相对路径和绝对路径
./当前路径 可省略
../上一级路径
13.表格
（1）结构
（2）属性与样式
cellspacing：设置每个数据边框之间的距离
cellpadding：设置数据与边框之间的距离
表头改为<th>：对数据加粗居中
align属性：数据居中
bgcolor属性：设置背景颜色
（3）跨行跨列（单元格合并）
跨列操作
跨行操作
14.表单
作用：采集信息
![[数据结构] 基于交换的排序 冒泡排序快速排序](https://i-blog.csdnimg.cn/direct/d161f49391554c979a7e8ea3d51a7085.png)
