D01:
课程介绍
Html
WEB环境搭建
Html 语法规范
标签
属性
Ajax (amber-web 视屏号-简单的前后台交互原理)
Ajax介绍
http协议
请求和响应（报文）
Ajax 请求
Ajax 参数设置
Ajax 的post请求
服务器端响应JSON数据
Javascript动态插入数据
实战1：
Mysql + node.js+html+ajax+js
Css
Css的基本语法
Css 的选择器
页面元素的基本样式
Css 页面的文字美化样式
页面元素的动态动画效果
css的优化
Bootstrap
响应式页面的代表框架
前端UI框架的使用
Boot的基本样式
Boot 的组件
实战
Boot+scss(css预处理器)
云服务器
新浪云部署
Ajax (amber-web 视屏号-新浪云部署 新浪云备案)
备案需提前，整体约20天
新浪云有地域限制，先进入新浪云的客服群，问客户居住地，户口所在地是否可以备案；
二，web环境准备
浏览器
1：世界五大主流浏览器
Cooglechrome 谷歌 快速，安全，稳定，程序的最爱
IE 微软旗下 主推 EDGE
Firefox 火狐
Safari 苹果公司默认 浏览器，不支持windows系统
Opera 欧朋
2：浏览器兼容
在开发中前端人员面临的最大问题–浏览器的兼容问题。保证所有浏览器下的样式统一，需要避免兼容问题，保证用户体验
Css样式兼容，加私有前缀
Js用判断写兼容
事件还有兼容
3：浏览器安装
http://06_2ND_READY—tool 浏览器
4：编辑器的下载和安装：
Vscode使用原因：大部分公司都用，很多插件，广受欢迎，插件是很多开发者免费提供，可能有插件冲突
官网下载：http://
html代码高亮，代码补全
css代码高亮，代码补全
直接打开浏览器
中文插件
C:\Users\Administrator\Desktop\web前端\js\函数\02_return.js
美化文件图标
插件有相互影响的问题，可以禁用暂时不用的插件，有需要时再启用
插件安装失败，可以选择其他版本，在插件设置小齿轮里，选择另一个版本
5：全局代码片段的配置
三：HTML
1：HTML概述
HTML: 超文本标记语言 Hyper Text Markuop Language
简单理解为我们常见的网页，HTML也被叫做网页
Html是一种语言，由大量的标签组成，文件的后缀名是XX.html
Html文件运行在浏览器上，
超文本：文本，图片，视频，音频。流媒体等等、
标记：html语法标签<标签>
2：html与其他语言之间的关系
前端开发流程：创建web页面或者一个app应用过程
涉及三个基础语言
Html：内容层
Css：样式层
Js：行为层
四：html基础：
1：标签书写
<标签名>用尖括号包裹标签名
1：双标签：成对出现的标签<标签名></标签名> 开始标签和结束标签组成
2：单标签：只有一个标签<标签名> html5版本之后单标签可以不加斜线
单标签需要标签属性搭配完成的功能，个别可以单独使用
2：页面的创建规则：
3：html文件中的注释
既可以注释单一标签，又可以注释很多标签
在vscode中提供了快捷注释方法 ctrl+? 第一次可以注释，第二次消除注释
4：标签和元素
标签：<标签名></标签名>
元素：增加了功能属性或者内容的标签就是元素
5：元素的分类
内联元素
内联元素也叫行内元素，如：span，b，i，a…
特点：依靠标签中的内容撑开，内容为文字，从左向右横着排，内容多时，浏览器宽度不足，换行展示
内联中的特殊元素
内联块也可以叫行内块，也是从左向右横向排列，内容宽度不够浏览器宽度时换行展示
具有自己默认的宽度高度，还可以设置，不依靠内容展开，如：img,button,input
块级元素
本来就是从上向下排列，自己占父级元素的一行（有宽度）
宽度高度可以设置，也可以依靠内容撑开
如：div,h1~h6元素，p,ul,ol,li
5:基础标签
1：标题标签
H1~h6分为六级标题标签，双标签可以放内容，自己有一个默认加粗
级别h1最大是一级标签，逐级递减，数字越小标题越小
标题标签不能嵌套其他块级元素，可以包裹文字和内联元素
2：段落标签
p标签，块级标签，一般用于书写大段文字或者段落文章，p标签和h相关标签有外间距
p标签不介意做布局的分块，就包裹文字最好，不能包裹其他块级元素，可以放内联元素
3：换行标签br
在编辑器里，回车换行，空格多少个在页面中都只能显示一个而已
在p标签中如果需要换行显示文字，用br标签是明智的
注意：换行标签一般就用于p标签的内部换行，不用于布局增加距离
4：按钮标签button
行内块级元素，标签里要写按钮的文字，属于行内块元素，有自己的默认样式
可以用于“事件”的触发
5：div标签
块级元素的代表，常用于各种功能，没有任何默认样式，最常用排版布局，当分区标签使用
Div标签没有任何语义，在页面的编写时要考虑语义
6：span标签
Span没有任何样式，是内联元素，只能包文字，和div一样没有语义
常用于段落中的特殊文字样式
7：加粗和斜体
B , i都是内联元素，里面只能放文字
8:html的其他规则
1：原则上，块级元素可以包裹文字和内联元素，有特例：h1~h6，p，dt…
2: 缩进在编辑器中，出现嵌套元素，子元素在父级元素内缩进，vscode有格式化方式
3：在编辑器上书写多个空格或者回车，都代表页面上的一个空格，因此，需使用转移字符串表示被占用的符号，也叫做html实体符号
空格 全角空格
小于 < 大于 >
五：html标签属性
一个元素是由标签+属性+内容组成的
属性分为全局属性，特殊属性，自定义属性
1：全局属性值-----style 样式属性
相同的属性名在一个标签中只能出现一次，但是他可以是多个值，值要写在=后面的双引号中，需要写css属性
Color：色值；字体颜色
Background-color：色值; 元素的背景色
Font-size:数字 px； 文字的大小，字号
谷歌浏览器默认字号16px;最小显示字号12px；默认文字黑色，默认背景白色
2：id属性
Id属性在一个页面中（html文件）一个元素，只能有唯一一个id属性和属性值，该表示在当前文件中不能重复，命名尽量有意义，值不能以数字开头
3：class类属性
类属性的值，可以很多元素共用，共用的元素具有相同的类属性
一个元素可以有多个类，class属性后引号里可以放置多个类名，用空格分开
类名不允许数字开头
类属性常用于css样式获取元素使用
六：功能标签和URL
1：超链接标签
a标签：是内联元素，双标签内放需要跳转的文字
a标签：超链接专门用于跳转的标签，有默认跳转功能
跳转的文字
绝对路径：如：www.baidu.com
相对路径：
相对当前html文件要跳转的文件路径
同级目录下：./或者什么都不写 只写文件名加后缀
不同级
下级
上级
不同级：（上级）: …/向上一层
2：锚点：
通过a标签的href，在同一个页面上找元素
要找一个元素，需要通过元素的ID属性找
通过锚点找id必须在id前加#
a
锚点
3：空连接
a标签存在默认事件就是跳转，如果不想让a标签出现默认跳转，必须写空连接阻止跳转事件
void(0)返回值是undefined，不会发生跳转连接
执行空语句
4：新建窗口
a标签默认在跳转时，在当前页面打开新页面，用户体验较差
<!-- 打开新窗口 -->
<a href="03_attr.html" target = "_blank">新窗口打开</a>
七：
图像嵌入标签
Src：图片文件的路径,img,png,gif,jpeg…
路径和a标签路径一样可以使用绝对路径和相对路径
Alt属性是对图片的描述，该属性便于图片的抓取，可以不写
Img属于行内块元素，可以通过独立的宽度属性来设置自己的图片宽度，设置宽度后，高度会自动按比例放大缩小
八：列表标签
列表标签应用非常广泛
分为三种：有序，无序，自定义
1：有序列表
2：无序列表
-
标题智能放文字
标题
- 1 列表项
- 2
- 3
嵌套列表
列表的嵌套使用，使用ul和ol都可以，没规定谁先谁后
九：表格
Table 表格：常用pc端界面，多种表的展示，如：购物车，后台人员名单，后台商品管理
Table 标签内部有自己的组合方式
1：简单组合
表格中只分行tr和列td
行是包着列的
Table>tr>td 实际的内容写在列里面
2：带表头的表格
table border = “1px”
边框：数字代表像素
Table中有间隙，因此在table中使用
style = “border-collapse:collapse”
可以去除间隙
| 序号 | 鱼的类型 | 价格 |
|---|---|---|
| 1 | 草鱼 | 100 |
| 2 | 浆水鱼鱼 | 200 |
| 3 | 食人草鱼 | 1000 |
| 4 | 青斑鱼 | 2000 |
| 5 | 老虎鱼 | 3000 |
可以合并的表格：
| 讲台 | |||||||
| 2-1 | 2-2 | 过道 | 2-4 | 2-5 | 过道 | 2-6 | 2-7 |
| 2-1 | 2-2 | 2-4 | 2-5 | 2-6 | 2-7 | ||
| 3-1 | 3-2 | 3-4 | 3-5 | 3-6 | 3-7 | ||
| 4-1 | 4-2 | 4-4 | 4-5 | 4-6 | 4-7 | ||
| 老师就是资本家!!! | |||||||
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
