web前端学习——5

59.strong与b、em与i

表现形态都是 文本加粗 和 文本斜体
strong 、em具备语义化
em 、i不具备语义化

60.引用标签

blockquote : 引用大段的段落解释
q：引用小段的短语解释
abbr : 缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

61.iframe嵌套页面

iframe元素会创建包含另一个文档的内联框架中（即行内框架）

可以引入其他html到当前的html中显示。
主要是利用iframe的属性进行样式的调节
应用场景：数据传输、共享代码、局部刷新、第三方介入等。

62.br与wbr

br:换行
wbr:软换行
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity(单词换行时机)

![实例](https://img-blog.csdnimg.cn/ffaf6033f6e54af0b735803031f39b98.png
换软行

62.pre与code

针对网页中程序代码的显示效果

pre 元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

63.map与area

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area 元素永远嵌套在map 元素内部。area元素可定义图像映射中的区域。
area 元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。
利用photoshop确定坐标位置

64.embed 与 object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基
本使用没有太多区别，主要是为了兼容不同的浏览器而已.

给 flash和一些插件进行渲染操作的标签
object元素需要配合param元素一起完成。

65.audio 与 video

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件
是不显示的，可通过controls属性来显示控件。

引入音频和视频的标签。属于H5的新功能
loop 重复播放
autoplay 自动播放

66.文字注解与文字方向

ruby 标签定义ruby注释（中文注音或字符)，rt标签定义字符（中文注音或字符)的解释或发音。
文字注解： ruby 、 rt 这样一个组合
文字方向：bdo

bdo标签可以覆盖默认文本方向

67.link标签扩展学习

添加网址标题栏前的小图标：

68.meta扩展学习

mata添加一些辅助信息：刷新、描述

69.HTML5新语义化标签（1）

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航

注： header 、footer 、main 在一个网页中只能出现一次。

70.HTML5新语义化标签（2）

article ：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaptio：描述图像或视频的标题部分

71.HTML5新语义化标签（3）

datalist ：选项列表
details / summary：文档细节 / 文档标题
progress / meter：定义进度条 / 定义度量范围
time：定义日期或时间
mark：带有记号的文本

72.flex弹性盒模型

flex布局（1）

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

flex-direction
用来控制子项整体布局方向，是从左往右还是从右往左，是从上到下还是从下到上。

flex-wrap
用来控制子项整体单行显示还是换行显示。
nowrap ：当宽度不够时会自动调节 直到超出最大限度才会溢出。

flex布局（2）

flex-flow
是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。
第一个值表示方向，第二个值表示换行，中间用空格隔开。

justigy-content
决定主轴方向上子项的对齐和分布方式。

flex布局（3）

align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

指的是flex子项们相对于flex容器在侧轴方向上的对齐方式。

align-content
如果flex子项只有一行，则align-content是没有任何效果的。

注：align-items是一行中每个子项的排列，align-content是多行之间的对齐方式。

flex弹性布局（4）

作用在flex子项上的CSS属性

flex-grow
优先级低于width


flex-basis
相当于给定宽度，但规定的宽度不能大于父容器的最大宽度，优先级比width高、


flex
优先级高于 flex-grow
flex-grow、 flex-shrink、flex-basis 的组合

73.Grid网格布局

Grid是一个二维的布局方法，纵横两个方向总是同时存在。

grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局，单位可以是像素、百分比、自适应以及fr单位（网格剩余空间比例单位）

grid-template-areas 和 grid-template

area是区域的意思，grid-template-areas给我们的网格划分区域的，此时grid子项只要使用grid-area属性指定其隶属于哪个区。
grid-template是grid-template-columns、grid-template-rows、grid-template-areas属性的缩写。

grid-column-gap 和 grid-row-gap
grid-column-gap 和 grid-row-gap用来定义网格中网格间隙的尺寸
grid-gap 是 grid-column-gap和 grid-row-gap的缩写


justify-items 和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐,place-items可以i让align-items和ju:tify-items属性写在单个声明中。

justify-items：水平拉伸、左中右对齐
align-items:垂直拉伸上中下对齐
place-items可以让 justify-items 和align-items属性写在单个声明中（ 纵、横）

justify-content和align-content
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对
齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-content可以让align-content和justify-content属性写在一个CSS声明中。

作用在grid子项上的CSS属性