Web前端从入门到精通（第五周）

b标签和i标签
- strong和b、em和i？
引用标签基本操作
iframe嵌套页面
br标签与wbr标签
pre标签与code标签
map标签与area标签
embed标签与object标签
video标签与audio标签
文字注解与文字方向
扩展link标签
扩展meta标签
HTML5新语义化标签
flex弹性布局
- flex-flow
- justify-content
- align-items
- align-content
- 作用在flex子项上的CSS属性
Grid网格布局
- grid-template-columns和grid-template-rows
- grid-template-areas和grid-template
- grid-column-gap和grid-row-gap
- justify-items和align-items
- justify-content和align-content
- 作用在grid子项上的CSS属性

b标签和i标签

strong和b、em和i？

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别在于，strong和em是具备语义化的，而b和i是不具备语义化的。

引用标签基本操作

引用标签：

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

iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
可以引入其他的html到当前html中显示。
只要是利用iframe的属性进行样式的调节。

应用场景：数据传输、共享代码，局部刷新、第三方介入等。

br标签与wbr标签

br标签表示换行操作，而wbr标签表示软换行操作。
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word Break Opportunity（单词换行时机）

pre标签与code标签

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

map标签与area标签

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

embed标签与object标签

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
给flash和一些插件进行渲染操作的标签。
object元素需要配合param元素一起完成。

video标签与audio标签

audio标签表示嵌入音频文件， video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。

文字注解与文字方向

ruby标签定义ruby注释（中文注音或字符）， rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文字方向。

扩展link标签

用法：

< link rel = " stylesheet " type= “text/css” href=“theme.css” >
添加网址标题栏前的小图标：< link rel= “icon” type = " /image/x-icon" href= “http://www.mobiletrain.org/favicon.ico” >
< link rel= " dns-prefetch" href= “//static.360buyimg.com” >

扩展meta标签

meta添加一些辅助信息，防止乱码。

HTML5新语义化标签

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
注：header、footer、main在一个网页中只能出现一次。
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有标记的文本

flex弹性布局

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

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
flex-wrap用来控制子项整体单行显示还是换行显示。

flex-flow

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

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。

align-items

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

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有如何效果的。

作用在flex子项上的CSS属性

Grid网格布局

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

grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

grid-template-areas和grid-template

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

grid-column-gap和grid-row-gap

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

justify-items和align-items

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

justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。

作用在grid子项上的CSS属性

https://www.csdn.net/?spm=1011.2124.3001.4476