爱站程序员基地1、HTML
2、开发环境
编辑器
vscode(sublime)
下载插件 open in browser
浏览器
firefox
服务器
阿里云，部署代码
3、开发流程
1.项目的原理
公司的UI负责（一个人）
2.根据原型编写代码
3.
4.将项目部署到服务器
5.访问
4、http请求
请求/相应模式
请求头、请求行、请求数据
请求数据
var obj={name:‘tom’,age:23}
请求头
content-type
设置数据格式
content-type:application/json
content-type:application/x-form-urlencoded
响应头、响应行、响应体
响应头（状态码：200、404、500、401）
if(res.status == ‘200’){
alert(\’登陆成功’)
}
swagger-ui.html接口登录 用户名+密码json字符串\"{\'name\':\'tom\';\'age\':\'23\'}
5、html结构
html 文件的主体(根元素)
head 文件的头部：引入样式表、引入js文件
title 浏览器选项卡的标题
body 所有需要显示在浏览器上的内容都写在此处
6、html标签的组成
开始标签、内容、结束标签
注意：结束标签不可省略
内容可以是字符，也可以是标签
7、块级元素和行内元素
块级元素
div、h1~h5、p、html…
1) 独占一行空间，不与其他元素共享空间
2) 宽度默认是100%，也就是占满整个屏幕，高度由内容撑开
3) 可以设置宽高
行内元素
span、i、bold…
1) 可以与其他元素共享一行空间
2) 宽度由内容决定
3) 默认情况下不可以设置宽高
8、元素属性
<div 属性名=属性值 属性名=属性值>
1) 核心属性【绝大多数标签都可以使用的属性】
id 唯一标识
title 标题提示
style 样式
class 类名
2) 特有属性【某些标签才具有的属性】
img
src 加载的图片的地址
alt 图片无法加载时的文本提示
a
href 访问的链接
target 设置打方式
_self 在当前选项卡打开链接
_blank 新建选项卡打开链接
3) 自定义属性
除了html中已有的属性，用户可以自定义属性
太原
9、html语法
1) 注释 ctrl + /
在css中的注释 /* 注释 */
在html中的注释
提高代码的阅读效率2) 实体空格 3) 空白在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白
1、html
超文本标记语言
浏览器时从上往下解析html文件
语法错误不会被报出
后缀.html或.htm
2、http协议
请求/响应模式
请求头、请求体、请求数据
响应头、响应体、响应行
3、开发流程
1) 本地测试
2) 部署
4、html语法结构
1) 注释
html中
css中 /* 注释 */
2) 实体
空格
3) 块级元素和行内元素
元素的组成
外边距margin + 边框border + 内边距padding + 内容
块级元素
div、html
没有margin、padding、border
body
有margin
p
有上下margin
h1~h5
有上下margin、有font-size、font-weight
ul li 无序列表
ol li 有序列表
ul 有上下maigin、padding-left、黑色圆点
行内元素
span
a
img
i
strong
如何给行内元素设置宽高？
先将行内元素设置为块级元素或者是行内块元素，再设置宽高
5、表格
table【用于展示数据】
属性:border、bgcolor、cellspacing、cellpadding、width
thead 表头
tr
th
tbody 表体
tr
td
合并单元格跨行合并rowspan跨列合并colspan
6、表单
form
作用：用于数据的交互
组成：输入框、选择框、下拉框、多行文本框、按钮
action 访问接口的地址method 表单提交的方式postgetputdeletepost和get方式的区别？get1. 会将请求的数据拼接再浏览器的地址栏上www.baidu.com?name=tom&age=12，不安全2. 请求数据的大小有限制post1. 会将数据放在请求体中，比较安全2. 对于请求数据的大小一般没有限制表单组件inputtypetext 单行文本框password 密码框radio 单选按钮checkbox 复选框reset 重置表单submit 提交表单file 文件按钮上传图片、上传附件文件服务器(图片服务器、文件服务器)selectoptiontextareabuttonlabel提交表单的流程用户点击新增按钮 --> 弹出模态框(包含表单) --> 输入内容 --> 点击确认 --> 调用reset重置表单 --> 下一次点击显示模态框的时候，表单内容为空
1、html结构
2、html元素
1) 块级元素
2) 行内元素
3) 功能元素
table
form
button、select、input
3、css3
1. css选择器
1) 基本选择器
2) 层次选择器
3) 属性选择器
4) 伪类
5) 伪元素
2. 样式如何导入html文件？
4、样式
1) 字体
font-
color
line-height
2) 文本
text-
3) 列表
list-style
5、布局
1. 浮动
float:left/right;
2. 定位
position
粘滞定位
3. 伸缩盒【响应式布局】
父元素
display:flex;
flex-direction
子元素
flex
flex-basis
flex-grow
flex-shrink
6、动画
animation
7、过渡
transition
8、变形
transform
9、媒体查询
1、动画
1) 定义
在style标签内部
在同一个文件中可以定义多个动画
@keyframes 动画名 {
from {
left:1%;
width:100px;
…
}
to {}
}
@keyframes 动画名 {
0% {}
12% {}
…
100% {}
}
2) 动画的使用
使用animation-name和animation-duration动画就可以执行起来
animation-nameanimation-durationanimation-directionreversealternateanimation-timing-functionease 【默认值】ease-inease-outease-in-outlinearstepsanimation-play-staterunning 【默认值】pausedanimation-fill-mode动画结束后元素停靠的位置forwardsbackwardsanimation-iteration-countninfinite
2、动画库animate.css
1) 下载
1. 通过npm【包管理机制】
> npm install –save animate.css
element-ui
axios
jQuery
boostrap
2. 通过cdn引入在线链接【使用需要联网】
bootcdn
xxxcdn
2) 在需要使用的标签上添加类名
3、过渡 transition
1) 介绍
1. transition始终需要触发，一般通过:hover
2. transition不需要设置关键帧
简单的动画效果一般采用过渡，复杂的动画效果一般采用动画2) 语法transition-property 过渡的属性名可以不设置属性名 none可以设置一个属性名 width可以设置多个属性名 width,height...可以设置所有的属性名 alltransition-duration 过渡的时间秒/毫秒1s / 1000mstransition-delay 过渡延迟的时间秒/毫秒1s / 1000mstransition-timing-function 过渡的速度曲线easeease-inease-outease-in-outlinear【默认值】stepstransition 速写transition-property transition-duration transition-timing-function transition-delay例如：transition: all 3s steps(8) 2s;
4、变形 transform
1) 语法
div {
transform:xxx();
transform-origin:center;
}
transform 对元素进行某种类型的变形
transform-origin 元素变形的原点
2) 分类
1. 旋转 rotate
rotateX(angle)
rotateY(angle)
rotateZ(angle)
rotate(angle)
2. 倾斜 skew
skewX(angle)
skewY(angle)
3. 缩放 scale
scale(2) x,y轴同时缩放
scale(x,y)
如果数值比1小，则缩小，如果比1大，则放大
4. 移动 translate
translate(x)
translate(x,y)
5、媒体查询
1) 同一个网页在不同的设备上如何显示？
1. 写多套网页
pc index_pc.html
pad index_pad.html
phone index_phone.html
2. 写成一套【媒体查询】
pc
pad -> index_all.html
phone
2) 栅格系统
boostrap
element-ui
5、boostrap
表格、模态框、按钮
后期开发的时候需要使用动画时
1. 自定义动画
2. 采用第三方库animate.css
简历
模板 word
代码写 部署到服务器 响应式
vue element-ui
