html学习3
- 二、HTML+CSS系列②之溯本求源
- （一）、strong与b、em与i
- （二）、引用标签
- （三）、iframe嵌套页面
- （四）、br与wbr
- （五）、 pre与code
- （六）、map与area
- （七）、embed与object
- （八）、audio与video
- （九）、文字注解和文字方向
- （十）、 扩展link标签
- （十一）、 扩展meta标签
- （十二）、html5新语义化标签
- （十三）、flex弹性盒模型布局
- 13.1作用在flex子项上的css属性
- （十四）、grid网格布局
- （十五）、多列布局
- （十六）、响应式布局
- （十七）、em与rem
- （十八）、vw和vh
- （十九）、渐变
- （二十）、transition
- （二十一）、transform
- （二十二）、关键帧动画
- （二十三）、3D
二、HTML+CSS系列②之溯本求源
（一）、strong与b、em与i
表现形态：都是 文本加粗 和 文本斜体
区别：strong和em具备语义化，b和i不具备语义化
当需要多个span标签时，可以代替，简化操作
（二）、引用标签
blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题
（三）、iframe嵌套页面
iframe元素会创建包含另外一个文档的内联框架（简单来说就是在一个已有的页面中再嵌套一个页面）
主要使用iframe的属性来进行样式的调节
应用场景：数据传输、共享代码、局部刷新、第三方介入等。
一些属性：
（四）、br与wbr
br标签表示换行（单标签），wbr标签表示软换行（一般用于比较长的单词）
（五）、 pre与code
针对网页中的程序代码的显示效果
pre：定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符
code：通常把文本变成等宽字体，但它暗示着这段文本是源程序代码
一般结合使用，用来显示代码
（六）、map与area
给特殊图形添加链接，area能添加的热区的形状：矩形（左上和右下坐标）、圆形（中心点坐标和半径）、多边形（如五角星需要十个尖的点坐标）。
area元素永远嵌套在map元素内部。
area的属性：
href：定义区域的URL
coords：定义热区的坐标
shape：定义区域的形状
（七）、embed与object
表示嵌入一些多媒体，如flash动画、插件等。基本没有太多区别，主要是为了兼容不同浏览器
object元素需要配合param元素一起完成
<embed src="./img.flash.swf" type="">
<object >
<param name="movie" value="./img/flash.swf">
</object>
（八）、audio与video
audio标签表示嵌入音频文件，video标签表示嵌入视频文件（属于H5的功能）。默认控件是不显示的，可通过controls属性来显示控件
为了能够支持多个备选文件的兼容支持，可以配合source标签使用（备选作用）
<audio src="./img/121.mp3" controls loop autoplay></audio>
controls：显示默认控件
loop：循环播放
autoplay：自动播放
<video src="./img/1.mp4" controls></video>
<video>
<source src="./img/23.ogv"></source>
<source src="./img/11.mp4"></source>
</video>
（九）、文字注解和文字方向
ruby、rt这样一个组合
bdo可覆盖默认的文本方向
<ruby>
寒<rt>hán</rt>
</ruby>
<p>
<bdo dir="ltr">爱神 </bdo>
</p>
（十）、 扩展link标签
添加网址标题栏前的小图标：
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
dns解析
<link rel="dns-prefetch" href="//static.360buyingimg.com">
（十一）、 扩展meta标签
meta添加一些辅助信息
description：描述网站信息
Keywords：关键词
refresh：刷新
renderer：针对内核
（十二）、html5新语义化标签
header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist:选项列表
details/summary:文档细节/文档标题
progress/meter:定义进度条/定义度量范围
time:定义日期或时间
mark:带有记号的文本
注：header、footer、main在一个网页中只能出现一次
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<ul>
<li>
<figure>
<img src="./img/1.png" alt="">
<figcaption>
水果篮子
</figcaption>
</figure>
</li>
</ul>
</section>
<section></section>
</article>
<aside></aside>
</main>
<footer></footer>
<input type="text" list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="a3"></option>
</datalist>
<details open>
<summary>HTML</summary>
<p>超文本标记语言</p>
</details>
<progress min="0" max="10" value="8"></progress>
<meter min="0" max="100" value="80" low="10" high="60"></meter>
value表示当前进度
<p>
今天是<time title="2-14">情人节</time>
</p>
<p>
今天是<mark>情人节</mark>
</p>
（十三）、flex弹性盒模型布局
flex-direction：控制子项整体布局方向
flex-wrap：控制子项整体单行显示还是换行显示
flex-flow：表示direction和wrap的缩写，第一个值表示方向，第二个值表示换行，中间用空格隔开
justify-content：决定了主轴方向上子项的对齐和分布方式
align-items：子项们相对于flex容器在侧轴方向上的对齐方式
algin-content：决定行方向上子项的对齐和分布方式，如果只有一行则没有任何效果
13.1作用在flex子项上的css属性
order:值越大越往后排
只用flex优先级高于默认宽，保留默认宽用flex-grow
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#fu{ width: 400px;height: 400px;background: white;flex-direction: row;flex-wrap: nowrap;}
#fu img{width: 43px;height: 43px;}
#first{display: flex;justify-content: space-around;}
#second{display: flex;justify-content: space-around;margin-top: 30px;}
#first p{text-align: center;line-height: 35px;}
#second p{text-align: center;line-height: 40px;}
</style>
</head>
<body>
<div id="fu">
<div id="first">
<div>
<img src="./images/1.png" alt="">
<p>新闻</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>视频</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>小说</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>图片</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>地图</p>
</div>
</div>
<div id="second">
<div>
<img src="./images/1.png" alt="">
<p>网站</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>贴吧</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>健康</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>营销</p>
</div>
<div>
<img src="./images/1.png" alt="">
<p>更多</p>
</div>
</div>
</div>
</body>
</html>
（十四）、grid网格布局
是一个二维的布局方法，横纵两个方向总是同时存在
grid-template-columns（列）和grid-template-rows（行）
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr（网格剩余空间比例单位）
如果需要添加多个横纵网格时，可以利用repeat(个数，大小)语法进行简化操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);}
.box div{background: red;border: 1px black solid;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
grid-template-areas:给网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于哪个区(不可以使用特殊图形，划分必须为矩形)
grid-template：是grid-template-rows，grid-template-columns，grid-template-areas属性的缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";}
.box div{background: red;border: 1px black solid;}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a2;}
.box div:nth-child(3){grid-area: a3;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
grid-colum-gap和grid-row-gap：用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-colum-gap和grid-row-gap的缩写（先写横再写纵）
justify-items：指定网格元素水平呈现方式
align-items：指定网格元素的垂直呈现方式
place-items可以让align-items和justify-items属性写在单个声明中（缩写）
justify-content：指定了网格的水平分布
align-content：指定了网格的垂直分布
place-content是两个的缩写
14.1作用在grid子项上的CSS属性
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 280px;height: 352px;margin: 20px auto;display: grid;
grid-template-columns: repeat(3.1fr);
grid-template-rows: repeat(4.1fr);
grid-template-areas:
"a1 a2 a2"
"a3 a2 a2"
"a4 a4 a5"
"a6 a7 a7";
grid-gap: 6px 6px;}
.box div{background: red;}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a2;}
.box div:nth-child(3){grid-area: a3;}
.box div:nth-child(4){grid-area: a4;}
.box div:nth-child(5){grid-area: a5;}
.box div:nth-child(6){grid-area: a6;}
.box div:nth-child(7){grid-area: a7;}
.box h2{font-weight: normal;color: white;font-size: 15px;text-align: right;margin-top: 5px;}
.box p{color: white;text-align: center;margin-top: 10px;}
</style>
</head>
<body>
<div class="box">
<div style="background-color: blue;">
<h2>七日关注</h2>
<p>高通技术授权</p>
</div>
<div style="background-color: blue;">
<h2>热门搜索</h2>
<p>美国中期选举</p>
</div>
<div style="background-color: pink;">
<h2>七日关注</h2>
<p>双11消费提醒</p>
</div>
<div style="background-color: blue;">
<h2>热门搜索</h2>
<p>迪士尼收购福克斯</p>
</div>
<div style="background-color: blue;">
<h2>体育热点</h2>
<p>上港首夺中超</p>
</div>
<div style="background-color: yellow;">
<h2>体育热点</h2>
<p>王思聪抽奖</p>
</div>
<div style="background-color: yellow;">
<h2>七日关注</h2>
<p>苹果遭起诉</p>
</div>
</div>
</body>
</html>
（十五）、多列布局
column-count：规定分割的列数
column-gap：调整列间距
coulum-rule：设置列与列之间的边框
coulum-rule-color：颜色
coulum-rule-style：样式
coulum-rule-width：宽度
列高度统一：
column-fill:
auto 把父盒子占满
balance 默认值
column-width：调整列宽
横跨所有的列（加给盒内元素）
column-span：all
（十六）、响应式布局
媒体查询：使用媒体查询，可以在不改变页面内容的情况下，为特定的输出设备定制显示效果
操作方式：
对设备提出询问，若为真，媒体查询中的CSS被应用。反之，不应用
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示问题
缺点：
兼容各种设备工作量大，效率低
代码累赘，出现隐藏无用的元素，加载时间长
语法：@media all and(判断条件){样式}
orientation:portrait 竖屏
orientation:landscape 横屏
（十七）、em与rem
em：相对单位，相对于父元素字体大小。
rem：相对单位，相对于根元素（html）字体大小
fontsize=当前设备的css布局宽度/物理分辨率（设计稿的宽度）*基准font-size
（十八）、vw和vh
vh：view-height 视口的高度
vw：view-width 视口的宽度
100vh=屏幕的高
100vw-=屏幕的宽（包括滚动条，100%不包括）
（十九）、渐变
支持多颜色渐变
to bootom right（往右下角渐变）
支持角度写法，度数deg
均匀分布：50% 50%，farthest-corner
不均匀分布：颜色 百分比
重复渐变（多加一个repeating）
（二十）、transition
display属性无法支持
过渡动画类型：
贝塞尔曲线，可以在网站自定义
（二十一）、transform
优点：独立图层
缩放属性：
负值是倒像
transform-origin：改变中心放大的位置，如 left top为左上角开始放大
旋转：
rotateZ等于中心旋转
多属性值：尽量将位移放在前面
倾斜：
复合写法：skew(x,y) 往右下拉
x：正值往右边拉动倾斜
（二十二）、关键帧动画
@keyframes 动画名称{
from{
初始状态
}
to{
结束状态
}
}
@keyframes 动画名称{
0%{
初始状态
}
100%{
结束状态
}
}
可以随意增加中间状态
infinite 无限次执行
单一属性：
animation-fill-mode 控制动画结束的状态
none(默认) forwards(保留最后一帧) backwards(保留第一帧)
steps（1，end）
1表示两帧之间一步到位
end（保留当前帧，看不到最后一帧，动画结束）
start（保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧）
（二十三）、3D
使用前添加transform-style：preserve-3d
rotate 旋转
缩放：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
