导图社区 前端跨平台开发
- 46
- 1
- 0
- 举报
前端跨平台开发
web、html、css：包含了html：超文本标记语言、版本、注释、页面结构、语法、标签、标签转换等内容。
编辑于2022-04-26 20:19:08- 跨平台开发
- 相似推荐
- 大纲
前端跨平台开发
web介绍
1990 蒂姆伯纳斯李
第一个网站
第一款浏览器
w3c联盟： 用于制定web开发标准
遵循w3c规范
web结构体系
http 超文本传输协议
url 统一资源定位符
html 超文本标记语言
用户在访问url时，会通过http向服务器发送请求，服务器返回响应的html页面，通过浏览器渲染引擎呈现在浏览器中，页面就可以呈现出来了
网站
多个网页组成
网页类型
静态网页
页面内容都是固定不变的，容许修改需要改代码：.html、.htm、.xml
动态网页
页面内容实时更新，链接服务器 【js、form】由数据库智齿，.jsp、.aspx.nat.php
网页结构
结构层html
表现层 css
行为层 javascipt
html
超文本标记语言
版本
html5
注释
<!--注释-->
ctrl+/
页面结构
！+tab或者！+回车
文档声明
页面根元素html
head头部
设置页面编码utf-8
设置视口
设置标题
引入css
引入js
设置站标
浏览器标题左边的图标，站标通常来说是正方形
link-favicon
.......
body内容主题
标签/w3c
语法
<开始标签 属性名="属性值">内容</结束标签>
<标签名 属性名="属性值">
标签
块元素
独占一行，可以设置宽高
p，pre，ul，li，ol，dl，dddt，table，iframe，form，div
【h5】header，footer，nav，aside，section，artical
行内元素
排列在一行显示，不可以设置宽高
b，strong，i，em，u，s，a，span，lable
【h5】meter、progress
行内块元素
排列在一行显示，可以设置宽高
img、input、select、textarea
【h5】video、audio
标签转换display
inline转换成行内元素
block 转换成块元素
inline-block 行内块元素
none隐藏不显示
table将元素与表格转化
flex弹性布局
html5
html5.0版本
h5
为什么要用？
页面结构更加清晰
有利于多人协同性开发
有利于seo优化，
html5与h4的区别
文档声明不同
新增了一些新特性
标签
结构性标签
块元素
aside 用以表达注记、贴士、侧栏、摘要、插入的引 用等作为补充主体的内容。从一个简单页面显示上，就是边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要
figure 标签规定独立的流内容，通常与figcaption联合使用。
code 表示一段代码块。
dialog 对话标签配合dt dd标签使用
行内元素
meter 表示特定范围内的数值， 可用于工资、数量、百分比等。max表示最大值，min表示最小值，value代表当前值。
time 表示时间值，属性datetime强调时间
progress 用来表示进度条
多媒体元素
video，视频标签
视频标签，用于支持和实现视频（含视频流）文件的直接 播放，支持缓冲预载和多种视频媒体格式如MPEG-4、OggV和WebM等。
src视频路径
controls视频播放按钮（属性名和属性值一样）
autoplay自动不放（浏览器会限制需要加加静音）
muted静音-->
视频封面设置poster=""
audio，音频标签
音频标签，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。
css
层叠样式表
版本
css1.0
css2.0
css3.0
后缀
.css
引入方式
行内样式
标签添加style属性
不建议用
嵌入式
title标签下面
<style></style>
外部样式表
<linnk rel="stylesheet" hearf="css路径">
导入样式
@import url("css路径")
语法
选择器{属性名：属性值}
选择器
css1.0
标签
类名
id
id在一个页面中名字不能重复
#id 名字{}
后代
父元素 子元素{}
伪类
：link
连接未被访问 【a】
：active
元素被激活，鼠标点住
：visited
连接已经被访问过了 【a】
：hover
鼠标移入
：focus
表单元（input、select、textarea）素获取焦点
伪元素
：：first-line{}
元素第一行样式
：：first-letter{}
语速的第一个文本样式
2.0
通配符
*{}
属性
[属性名]
[html属性名=html属性值]
标签名[标签属性名=标签属性值]
伪元素
：：befor{content:"";display:block}
：：after{}
子包含
父元素>子元素 {}
父元素下面的第一层子元素
相邻兄弟选择器
a+p{}
紧挨着的兄弟元素
css3.0
属性
[属性名^=属性值]
以...开头
[属性名$=属性值]
以...结尾
[属性名*=属性值]
包含属性值
结构伪类
：root{}
：first-child{}
：last-child{}
nth-child（）{}
2n
2n+1/2n-1
:nth-last-child（1） 从后往前的第一个
:first-of-type同类型的第一个
:last-of-type同类型的最后一个
:nth-of-type（2） 同类型的中间选择，同类型的第几个
:nth-last-of-type（2） 从后往前同类型的第几个
ui伪类
计算选择器优先级
id选择器 100
类名选择器 属性选择器 伪类选择器10
标签名选择器 伪元素选择器1
通用选择器 0
基本属性
宽
高
背景颜色
字体属性
color
font-size
text-align
写在行内元素不生效 ，给父元素设置
left/cengter/right
taxt-decoration
line-through
underline
overline
text-indent
首行缩进
letter-spacing
font-family
font-weight
100-900、normal、bold、bolder
font-style
是否倾斜normal
盒子模型
组成：内容、内填充、外边距、边框
padding
用法
padding-left
padding-right
padding-top
padding-bottom
padding：
px、%、不可以写负数
引发问题
会将元素撑大
行内元素作用于左右，不作用于上下
解决办法：
给元素 添加box-sizing：boder-box
margin
px、%、负数、auto
用法
margin-eft
margin-right
margin-top
margin-bottom
margin
margin：auto
margin：0 auto
子主题
引发的问题
子元素设置margin-top会作用于父元素
行内元素作用于左右，不做用于上下
兄弟元素上下边距重叠 ，大的间距为准
可以用padding代替
解决办法
给父元素设置overflow：hidden
border
用法
border-left
border-right
border-top
border-bottom
border
边框类型
solid
常用实线
dashed
常用虚线
dotted
常用原点虚线
double
ridge
...
元素按照从上到下，从左到右的方式进行排列，但是如果想让块元素排列在一行显示，需要用到的是浮动
浮动
为了让块元素排列在一行显示
float
none
left
right
文档流
脱离文档流
引发的问题
脱离文档流
子元素浮动，父元素的高度不会自动撑开
一个元素添加浮动后，该元素变成行内块元素 inline-block
行内元素与块元素、块元素与块元素、需要排列在一行显示，都需要加浮动元素
元素浮动之后脱离文档流，导致后面的内容顶上来
元素在右浮动之后，排列顺序会颠倒，（html调整顺序）
如果浮动元素高度币不一样，会导致放不下的元素卡住(高度保持一致)
子元素浮动，父元素的高度不会自动撑开
解决办法
给父元素添加overflow：hidden
overflow
overslow-x
hidden超出隐藏
auto内容超出出现滚动条，每超出不出现
sctoll不管超出没，都出现滚动条
overflow-y
在浮动元素后面添加空元素，设置clear：both
divstyle clear：both
伪元素选择器：：父元素after{content:"";display:block;clear:both}
如果出现了层叠样式，需要用定位
定位
出现层叠样式以及需要固定液页面摸个位置不变，需要用到定位
position
static
relative
参照物元素本身
脱离文档流，位置保留，设置在绝对定位父元素
absolute
参照物具有一个定位属性父元素，如果父元素没有定位，参照浏览器窗口
fixed
参展无浏览器窗口
设置定位方向
上下设置一个
左右设置一个
调整定位元素层级
z-index
默认值0
-1到无穷大
如果对于特殊布局，比如水平垂直居中，因此可以采用网格grid布局/flex布局
flex布局
弹性布局
diaplay：flex
如果不需要考虑兼容性问题，pc/移动端都可使用
css3新增
容器
容器的属性
项目排列方向： flex-direction
项目包裹的方式：（换行）flex-wrap
项目水平对齐方式：（居中，分散对齐） justify-content
项目垂直对齐方式：（弹性盒子必须要有高度） align-items
项目多行对齐方式：（多行条件-换行，内容多。 交叉轴对齐。容器要有高度）align-content
项目
项目的属性（单独控制我们的项目，单独选中要控制的项目）
项目自己对齐的方式align-self
flex-start，
flex-ecd，交叉轴结束的位置
center
项目排列顺序（默认值为0） order
order：-1；
写-1就会靠前，写正数靠后
flex-grow放大
flex-strink缩小
两根轴:
主轴
交叉轴
图片精灵技术
css3
属性选择器
[属性名^=b]属性以b开头的元素
[属性名$=b]属性以b结尾的元素
[属性名*=b]属性包含b的元素
结构伪类选择器：
:root {} 相当于html{}页面根元素
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child（2 ) 第二（几）个子元素
:nth-last-child（1） 从后往前的第一个
:first-of-type同类型的第一个
:last-of-type同类型的最后一个
:nth-of-type（2） 同类型的中间选择，同类型的第几个
:nth-last-of-type（2） 从后往前同类型的第几个
圆角
border-radius
阴影
文本阴影text-shadow
水平位移，垂直位移，模糊半径，阴影颜色
盒子阴影box-shadow
水平位移，垂直位移，模糊半径，阴影颜色
渐变
线性渐变
background: linear-gradient
改方向：background: linear-gradient(to right,red,yellow,green);
改占比：background: linear-gradient(to right,red80%,yellow,green);
改斜角：background: linear-gradient(45deg,red80%,yellow,green);
径向渐变
background: radial-gradient
/* 镜像渐变，以椭圆为基准变化 */ background: radial-gradient(red,yellow,green);
background: radial-gradient(circle,red,yellow,green); /* 改变图像为圆变化 */
颜色
rgba()
hsl()
hsla()
过渡
transition-property：过渡属性名
transition-duration：过渡时长
transition-timing-function：过渡速度曲线
transition-dalay：过渡延迟曲线
简写 ：transition：过渡属性名，过渡时长 过渡速度曲线 过渡延迟曲线
图标
iconfont
.2d
移动、translateX(100px)translateX(-100px) translate(-100px,100px)
缩放、scaleX(0.5) scaleY(0.5) transform: scale(1,1) transform: scale(1);
旋转、transform: rotate(30deg);
拉伸/斜切 transform:skewX(30deg) skewY(30deg); transform:skew(x,y);
transform-origin: center; /* 动画原点 left/right/center/% */
3d
transform-style: preserve-3d;
动画
/* animation-name动画名字
animation-duration动画时长
animation-timing-function速度曲线 ：linear、ease，贝塞尔
贝塞尔曲线 cubic-bezier(0.45, 1.98, 0.23, 0.33)
animation-delay延迟时间
animation-iteration-count执行次数
animation-direction对顶动画是否在下一周期逆向播放（normal alternate）
animation-fill-mode规定动画之外的状态
animation-animation-plat-state动画播放：running/暂停 paused; */
iconfont
@media
布局方式
终端
PC端
有内宽，固定布局
全品页面
实训平台 ：左边固定右边自适应
流式布局 /百分比
移动端
必须设置视口 meta
布局适配
固定布局
有内宽
移动端：750px=7.5rem
流式布局/百分比布局
width：100%，当前元素所占设计稿的比例，元素宽度/设计稿宽度。
移动端：建议采用流式布局
宽度百分比，高度该怎么写就怎么写
rem布局
为了让元素实现等比例缩放
原理
rem是一个单位，根据页面根元素（html）的字体大小（fontsize）来实现等比例缩放
实现
html{dont-size：calc（100vw/750*100%）}
引入重置样式表u-reset.css，在html根元素设置属性rem="750"
响应式布局
一个网站可以兼容多个终端、一套代码可以实现多个终端【pc 、移动端】
优点
适配能力好
用户体验好（根据不同的屏幕显示不同的大小）
缺点
适配多个终端--代码量比较大/效率低下
代码累赘
原理：采用css3的媒体查询技术，
媒体查询技术@media
响应式阈值：
>1200
992-1200
750-992
<750
12栅格技术：等分成12个格子100%/12
大屏：col-lg-1 .... col-lg-12
中col-md-1 ....col-md-12
小col-sm-1 .... col-sm-12
超小col-xs-1 ....col-xs-12
响应式框架：bootstrap
@mediascreen and (min-width:750px) and (max-width:1200px) {}
实现12栅格，从而实现响应式
框架：bootstrap
https://www.bootcss.com/
左边固定，右边自适应
左边加浮动，右边padding-left:200px,box-sizing:boder-box
左边加浮动，右边加margin-left：200px，box-sizing:boder-box
左边加浮动，右边加overflow：hidden（超出隐藏）
父元素加弹性布局，display：flex；justify-content：space-between右边：flex-grow：1（让项目沾满空白区域）
定位
calc----不建议在css中进行计算：左边加浮动，右边加浮动width：calc（100%-200px）
flex布局
不考虑兼容性问题，pc/用短都可以使用
圣杯布局
双飞翼布局
...
注意事项
元素高度由内容撑开
浮动撑开父元素
间距;margin/padding
设置固定高度
头部高度/底部高度/按钮高度
列表不要设置固定高度
协同开发
代码托管平台
codding、gitee、github...
协同开发工具
git、svn
cd 项目文件夹 （cd yy
将最新代码拉取到本地：git pull
将本地修改代码添加到本地仓库：git add *
将添加的代码提交到本地仓库：git commit -m "提交注释"
将提交到本地代码推送到托管平台：git push
浏览器
浏览器的发展史
1991年8月，Berners·Lee发明了WorldWideWeb万维网，同时也带来了世上第一款浏览器“Nexus”连接只能显示文字，不能显示图片
1993年，伊利诺大学的NCSA组织发明了第一款能显示图片的浏览器——“Mosaic”（马赛克）
1994年的Netscape Navigator（网景航海家）。花钱使用，击败了
1995年微软发布了一款和系统捆绑的浏览器——Internet Explorer（互联网探险家），简称IE。系统捆绑，不收费
1995年同期，一家挪威的公司也推出了一款浏览器，为以后标签式浏览器奠定了基础，它就是Opera（歌剧）。一个窗口，多个标签页
低落的网景公司，浴火重生，发明了FireFox（火狐）
1996年，发布linux 系统浏览器----konqueror（征服者）由于当时的html/css/js的新特性不能完美支持，
这时2008年Google旗下的浏览器Chrome闪亮登场，格局改变了。它界面简洁、UI明了、速度奇快、安全稳定，逼得IE节节败退、开始不断更新。
ie：6、7、8、9、10、11、
2015年，edge浏览器怀着救国之心诞生了---但不能完美适配
浏览器内核
Trident
微软开发 IE浏览器、360浏览器、猎豹浏览器、2345浏览器、搜狗高速浏览器、UC等
Gecko
火狐开发 Mozilla Firefox(火狐)、Mozilla SeaMonkey、waterfox、AOL for Mac OS X等
Webkit
苹果开发 Apple Safari、傲游浏览器3、360极速浏览器7.5以前、 360安全浏览器6.0、UC等
Blink
Google和Opera Software开发 谷歌、 360安全浏览器7.0、360极速浏览器7.5等
Presto
Opera开发 Opera前内核 (已废弃)
css3属性存在兼容性
浏览器内核的不同导致了CSS3的属性在不同的浏览器存在兼容性， 为了解决这个问题，我们需要在一些属性前面添加前缀。
ie Trident -ms-
火狐 Gecko -moz-
谷歌/safari WebKit内核 -webkit-
opera Presto -o-
web开发测试
用户界面测试
测试网页与设计稿还原度是否100%【设计测试】
功能测试
测试链接是否可以跳转，孤立页面，满足需求
兼容性测试
测试
pc
不同的 浏览器（谷歌、火狐、safari、360）、
分辨率（1024*768、1366*768、1920*1334）、
组合测试（不同的浏览器，不同的分辨率下进行测试）
移动端
安卓
ios
解决兼容性问题的原则
优雅降级/平稳退化
在低级浏览器能够保证其可⽤性和可访问性
渐进增强
在保证代码、⻚面在低级浏览器中的可⽤用性及可访问性的基础上，逐步增加功能及⽤用户体验。
如何解决
1. 确认触发场景，什么浏览器、版本、什么情况下会出现这个问题，做到稳定 复现。
2. 找到问题原因，为什么会出现这样的问题(⾃己琢磨、⽹上搜、问同事)。
3. 确定解决办法，参考现成的规范，⽐如某些属性不能使⽤以及一些hack的处理。
4. 积累兼容性处理⽅法。
性能测试
网页性能优化
网页加载时长
网页 性能优化
为什么要做？
用户页面加载更快，提高用户体验
服务商，减少请求次数，节省资源
查看网页性能：
控制台 -> network
网页加载时长
网页加载次数
怎么做？
减少请求次数
合并文件：
a.ccc+b.csss+c.sss=index.css
u-reset.css
public.css
index.css
合并图标：
图片精灵技术，雪碧图，css sprites，将很多张小图放在一张大图里面，采用 背景图片定位的方式，目的就是为了减少http请求次
iconfont字体图标
图片采用base64位技术（https://tool.chinaz.com/）
减少页面内容：
压缩css：
https://tool.lu/css
压缩就是将Javascript或CSS中的空格和注释全去掉
压缩js：
工具很多，百度搜索http://t.mb5u.co
合理使用图片
png/jpg
一般情况下不要使用gif图片
压缩图片
熊猫压缩
https://tinypng.com/，
，批量压缩很多出现问题
智图压缩，需要下载，课件里有官网
https://zhitu.isux.us/，
，高清无损压缩
内容优化
减少层级嵌套
属性简写
css颜色#999999==#999
尽量不要使用导入样式表
后代选择器层级不要过多<=5
0px --->0
pading-left/padding-right/padding-top/padding-bottom，可以简写padding
什么时候做性能优化？
项目交付最终版本
seo搜索引擎优化
提升网站的知名度，有利于用户搜索，提升网站的自然排名
如何做seo优化
站内seo：在代码中操作
1.设置标题 title标签
2.<title>IT培训班选优逸客,专注成为国内顶尖IT人才培训机构 - 优逸客教育官网</title>
3.设置关键字
<meta name="keywords" content="太原IT培训,太原电脑培训,太原UI培训,太原ui设计培训,太原平面设计培训,太原前端培训,太原web前端培训,太原大数据培训,太原python培训,太原人工智能培训,太原java培训，太原短视频制作，太原互联网运营">
4.设置描述
<meta name="description" content="太原IT培训选优逸客,山西专业IT培训机构,开设的IT培训班有UI设计、WEB前端、互联网运营、短视频制作、Java、大数据、人工智能、产品经理、跨境电商等IT培训课程，咨询电话：400-969-7660.">
5.内容优化
减少页面层级嵌套
6.合理使用标题以及一些强调性的标签
h1-h6、em倾斜strong加粗
7.img 标签设置alt属性 <imgsrc="图片路径"alt="ui培训">
8.网站url
9.减少使用iframe
站外seo：
加友情链接，营销方案，每日更新数据【运营】，和知名网站交换友情链接
接口测试
前端使用，后端提供
安全测试