html5的定义
狭义:HTML发展到了第五代版本,出现了很多新的功能标签,新的语义化标签
广义:出现了新的开发体系,直播,玩游戏,各种功能,3d
- HTML5是一个完备的全新的网站开发的解决方案. canvas标签(画布)进行渲染式的开发,
- 脱离了div盒子的浮动,定位等等.
语义化标签:
- 理论上任何标签的效果都可以用div实现,但是我们肯定是想让网站变得更好遵守语义化的特点.
- 所谓语义化就是写出这个标签名字我们就知道这个标签的作用和存在的意义,更有利于seo搜索引擎的优化.
语义化标签的优点
- 比div标签有着更加丰富的含义,方便开发和维护.
- 搜索引擎能更方便的识别页面的每个部分,
- 方便其他设备的解析.(如移动设备,盲人设备).
header标签存放网站公共头部分的标签,通常被放置在页面或者页面中某个区块的顶部，包含整个页面或者块级的标题、简介等信息，起到引导与导航的作用。我们不但可以放置页面或者页面中某个区级的标题，还可以放置搜索表单、logo图片等元素
标签的位置没有太大限制,不一定非得网站顶部,也可以是一个区域的顶部
/*网站头部实例*/
<header>
<img src="" alt="">
<h1>小米</h1>
</header>
nav元素,表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分.nav不但可以作为页面独立的导航区域存在，我们还可以在
header标签中使用
nav标签还可以显示在侧边栏中,由此可见一个页面可以有多个nav元素.我们可以将主要的,基本的链接组放进nav标签内即可.
/*nav示例*/
<header>
<img src="" alt="">
<h1>小米</h1>
<nav>
<a href="">小米手机</a>
<a href="">小米家具</a>
<a href="">小米家电</a>
</nav>
</header>
aside标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。
<div>
<aside>
<h2>小米家电的优势</h2>
<p>优势是.....</p>
</aside>
</div>
footer一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式,公司介绍等信息。
<div>
<aside>
<h2>小米家电的优势</h2>
<p>优势是.....</p>
</aside>
</div>
article标签应该使用在相对比较独立、完整的的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它,一个article元素包括标题,正文和脚注.
article标签还可以嵌套使用
<article>
<h1>HTML5学习之语义化标签</h1>
<p>....正文.....</p>
<footer>版权所有*伪版必究</footer>
</article>
section是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段.
<section>
<h1>前端</h1>
<p>前端大致包含HTML、CSS和JavaScript三个部分</p>
<article>
<h2>HTML<h2>
<p>内容</p>
</article>
<article>
<h2>CSS<h2>
<p>样式</p>
</article>
<article>
<h2>JavaScript<h2>
<p>行为</p>
</article>
</section>
/*在这个例子中，<section>标签代表一段内容
在这段内容中，HTML、CSS、Javascript是三个完全独立的部分.
因而我们为这三个不同的部分分别使用<article>标签*/
div section article三者的比较：
- div应用广泛，只要我们想为一个区域定义一个样式或者为其添加JS行为，就可以使用div标签
section：包含的内容是一个明确的主题，通常有标题区域.- 如果我们的页面中需要一个单独的模块来实现一个单独的功能就用article,其他的时候都用section
响应式和自适应
不同的设备展示效果不一致 ,为了方便用户的使用游览
怎么针对不同设置?让显示效果不一致?
- 自适应(通过js来识别 )
为一个网站开发多个不同的页面,针对不同的设备用户返回不同的页面
- 响应式
做一个网站,能够自动的响应不同设备的变化,出现不同的效果
响应式本质是根据设备(游览器的宽度)展示不同的页面效果(修改样式去进行样式覆盖),这里用到的核心就是媒体查询.
媒体查询
基本概念
- 不同的设备有不同的尺寸 ,使用一套可能不适用所有的情况。
- 简单来说就是针对不同的媒体类型（比如屏幕、打印机或者屏幕阅读器）定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式（比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小).
- 应用了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的，或者说不至于出现样式的错乱。
媒体:设备信息(查询设备的显示宽度),根据不同的条件应用不同的CSS
@media 定义媒体查询 查询设备宽度
当设备的宽度满足一定条件的时候,样式会生效
:max-width 最大宽度
min=width 最小宽度
大于使用min-width 媒体类型大于或等于指定宽度时，样式生效
小于使用max-width 媒体类型小于或等于指定的宽度时，样式生效
小于max-width-------并且大于*min-width 媒体类型小于并且大于指定宽度时,样式生效,中间用and连接
给一个范围 而不是固定的值
媒体特性
1）(width:700px)
2）(max-width:700px) 最大值的600 (x<=700)
3)(min-width:700px) 最小值的600 (x>=700)
4)(min-width:200px) and (max-width:600px) (200<=x<=600)
5)(orientation:portrait) 竖屏
6)(orientation:landscape) 横屏
p{
display: none;
}
@media all and (min-width:800px){
.info{
display: block;
}
}
<p>现在页面宽度大于800px</p>
/*显示将不显示的样式覆盖了*/
p{
width: 80%;
background-color: skyblue;
}
@media all and (min-width:1000px){
p{
width: 300px;
}
}
<p>现在页面宽度大于1000px</p>
- 小于1000px,大于800px生效 用and连接
ul{
display: flex;
}
ul>li{
flex-grow: 1;
width:400px;
height: 300px;
box-shadow: 0 0 20px purple inset;
}
@media all and (max-width:1000px) and (min-width:800px){
.list{
flex-direction: column;
}
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- , 表示或的意思
@media all and (max-width: 600px) , (min-width: 800px) {
.list{
flex-direction: column;
}
}
/*多列布局*/
<ul class="wrap">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
.wrap>li {
border: 2px solid red;
font-size: 50px;
margin: 20px;
}
@media screen and (min-width:924px) {
.wrap>li {
float: left;
width: 20%;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
.wrap>li {
float: left;
width: 25%;
}
}
@media screen and (max-width:768px) {
.wrap>li {
float: left;
width: 30%;
}
}
- 写很多分界点:你的开发成本也很高.
了解常见的网站宽度几个分界点
-
断点什么合适 没有标准答案
-
一般1440 1366 1024 768px
更详细 市场调研
怎么引入响应式
1.内联样式
2.外部样式引入
1）link
2)@import @import url(“1.css”) screen and (max-width:600px);
写style标签里面的第一排
- 总结一句
- 优点：
1.面对不同分辨率设备 灵活性强 能够快捷适应问题
缺点
1.工作量很大 代码累赘
2.使加载时间延长
媒体查询好用,但不是万能,并且现在开发也不是纯响应式
自适应+响应式
判断设备:发给你不同的页面,页面具体响应式的能力.
viewport
移动端适配 viewport 元标签,可以结合比例控制大小来完成移动端适配
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
统一手机端设备的分辨率比例,不允许缩放.
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。禁止缩放 因为缩放 页面布局会乱
user-scalable：用户是否可以手动缩放 yes /no
rem :布局思想
rem单位:字体大小单位
和我们的em单位很像1em =16px
假如给一个div标签设置字体大小为20px,里面的子元素字体大小就是20px,里面的1em也就是20px;
rem（root elemnet em根元素）是相对于根元素,如果html元素没有设置font-size,则默认1rem=16px.
<section class="wrap">
我要忘了你的样子1
<div>
我要忘了你的样子2
<div>
我要忘了你的样子3
</div>
</div>
</section>
.wrap{
font-size: 30px;
}
div{
font-size:.8em;/*字体大小会依次减小*/
}
div{
font-size: .8rem;/*字体大小完全统一*/
}
html{
font-size: 40px;
}
rem:html根标签的字体大小的倍数,值是完全统一的,标准的衡量单位,通常用于移动端开发
不同设备中默认字体大小不一致,但是,看上去是一样大的,和页面成比例.
根据不同设备设计的字体大小,来统一页面的大小
html标签的字体大小可以关联当前的设备大小
html字体大小,就可以用来进行页面开发布局
同样的内容,使用rem进行布局,如果我在一个较小的设备A上显示为宽度的一半,那换到较大的设备B之后同样也会是宽度的一半.
rem统一了不同设备的分辨率,使得同一个rem在不同设备占比一致
- 上面说HTML标签大小可以关联到当前设备大小,怎么关联的呢?
Js控制查询设备宽度,提供js获取的屏幕宽度,设置html标签的字体大小,让页面效果统一.
学会获取屏幕宽度,就可以设置Html的字体大小了.
rem适配
<script>
var html = document.querySelector('html');
function changeRem() {
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 10 + "px"
}
changeRem();
window.addEventListener('resize', changeRem)
</script>
css新增单位
- VW/VH
1VW = 设备视口1%宽度
1VH = 设备视口1%高度
div{ width: 50vw; height: 50vh; background-color:green; } <div></div> /*相对于视口的50%宽高,视口也就是游览器你能够看到的区域*/1vmin 视口宽度和高度之间的最小值的1/100
1vmax 视口高度和宽度之间最大值的1/100
div{ width: 50vmin; height: 50vmin; background-color:green; } /*视口宽度和视口高度相比较,视口宽度少于高度,相对于视口宽度的50%,谁小跟谁*/div{ width: 50vmax; height: 50vmax; background-color:green; } /*视口宽度和视口高度谁大相对于谁*/和百分比的区别
百分比会受父级元素的限制
vw和vh不会受到父级元素的限制
visibility
现在我有一个需求,想鼠标放在这个盒子右边出现另外一个盒子.
<div class="wrap">
<div class="content"></div>
</div>
.wrap{
width: 200px;
height: 200px;
background-color:pink;
}
/*是不是需要在盒子里面去写上另外一个盒子用hover*/
.wrap{
position: relative;
width: 100px;
height: 100px;
background-color:pink;
}
.content{
display: none;
position: absolute;
left: 100px;
width:300px;
height: 300px;
background-color: skyblue;
}
.wrap:hover > .content{
display: block;
}
/*现在鼠标放在左边,右边会显示,放在右边,右边不会消失.*/
.content{
transition: .6s;
opacity: 0;
}
.wrap:hover > .content{
display: block;
opacity: 1;
}
/*依然不会支持.*/
这个代码没有生效是因为display不支持transition;
.content{
animation:show .6s;
}
@keyframes show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
/*现在这个淡入淡出的效果也能实现.
但是我个人觉得这样的实现效果优点差强人意*/
.content{
visibility: hidden;
position: absolute;
left: 100px;
width:200px;
height: 200px;
background-color: skyblue;
transition: .6s;
opacity: 0;
}
.wrap:hover > .content{
visibility:visible;
opacity: 1;
}
/*现在鼠标无论是离开还是移入都有淡入淡出的效果.
不同于上面我们鼠标移开的时候整个元素的display设置为了none而导致没有移开的效果了
*/
- visibility和display的区别
display:none;不显示,不渲染,没有交互; 产生reflow和repaint(回流与重绘) 开关状态只有真或者假,不存在状态的改变过程,
display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。
visibility:hidden;不显示,渲染占据空间,有交互; 存在一个改变过程,上面透明度就像是0慢慢变到1的过程;
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然(无渲染与回流)。
opacity:会显示渲染.为0的话在页面显示为透明,可以触发交互.
设置了display：none之后，元素相当于从页面中被踢出去了，transition效果就不生效了，绑定在这个元素上的效果也就不存在了。
而设置了opacity：0之后，元素位置依然被保留，所以transition效果依然存在，绑定在这个元素上的效果也存在。
但是设置了visibility:hidden之后，元素位置依然被保留，但是元素的transition效果就不会生效了，绑定在这个元素上的事件也不会被触发。
很多时候，我们要让一个元素保留位置的同时不触发绑定在这个元素上的事件，此时要结合visibility、opacity、transition一起用才能实现这样的效果。（不得不说opacity和visibility结合了使用，使得同一个元素产生淡进淡出的效果很好用）
- visibility: hidden不会影响计数器的计数
<ol>
<li style="visibility:hidden;">元素一</li>
<li>元素二</li>
<li>元素三</li>
</ol>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
