Web前端学习（第五周)

1.strong与b、em与i？

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

2.引用标签

• blockquote：引用大段的段落解释
  blockquote定义块引用，标记长的引用。
  在这个标签之间的所有文本都会从常规中抽离出，并且经常会在左右两边缩进增加外边距，且有时会用斜体，该块引用拥有它们自己的空间。
• q：引用小椴的段落解释
• abbr：缩写或首字母缩略词
• address：引用文档地址信息
• cite：引用著作的标题
  -
  

3.iframe嵌套页面

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

• 常见属性：
  -

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

• 注：
  srcdoc与src同时出现使，只能识别写在前面的一个。
  
  

4.br与wbr标签

• br标签表示换行操作，而wbr标签表示软换行操作。（单标签）
• 提示：
  若单词太长，或担心浏览器会在挫愈的位置换行，可使用wbr元素添加Word Break Opportunity（单词换行时机）

5.pre与cide?

• pre元素可定义预格式化的文本。被包围在pre元素的文本通常会保留空格和换行符。
• 之应该在表示计算机程序源代码或者其他机器可以圆度的文本内容上使用code标签。虽然code标签通常是把文本变成等宽字体，但他暗示着这段文字是源代码。
• pre作为容器，里面使用code。针对网页中的程序代码的显示效果。
• 若要在HTML里显示代码，要把变成&lthtml&gt，才可现实。

6.map与area

• 定义一个客户端图像映射。图像映射指代有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可以定义图像映射中的区域。
• area元素的href属性定义区域的url，shape属性来定义区域的形状，coords属性定义热区的坐标。
• 给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。
  

7.embed与object

• embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太大区别，是为了兼容不同浏览器。
• object元素需要配合param元素一起完成。
• 

8.audio与video

• audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
• 为了能够支持多个备选文件的兼容支持，可以配合source标签。
• loop：循环播放；autoplay：自动播放；
  
• 为了防止有些浏览器无法引入，常做一些备选方案：
  

9.文字注解与文字方向

• ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
• 文字方向：
  使用bdo标签： 默认：ltr，反向：rtl

使用style样式：

10.扩展link标签

• 添加网址标题栏的小图标：
  < link rel=“icon” type=“/image/x-icon” herf=“http://www.mobiletrain.org/favicon.ico”>
• 加快访问速度：
  < link rel="dns-prefetch"herf=“地址”>
• 引入文件
  < link rel=“stylesheet” type=“text/css” href=“theme.css”>

11.扩展meta标签

• 作用：帮助页面渲染

• 辅助信息：
  < meta name=“keywords” content=“a2e0b”>
  < meta name=“description” content=“美团网精选 美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,团购信息,您可查询商家评价店铺信息。生活,下载美团官方APP ,吃喝玩乐1折起。”>
  < meta name=“renderer” content=“webkit">

• 功能信息：
  < meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  < meta http-equiv=“freash” content=“i3” url=“”>(3秒后刷新)
  < meta http-equiv=“expires” content=“wed,20 jun 2019 22:33:00 gm”>（特定时间缓存）

12.HTML5新语化标签

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

• 注：每个网页只能出现一次
  

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

• datalist：选项列表
  

• details、summary：文档细节、文档标题
  
  

• progress、meter：定义进度条、定义度范围
  
  

• time：定义日期或时间
  

• mark：带有记号的文本
  
  

13.flex弹性盒模型

1.作用在父项上的css属性

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

• flex-wrap
  用来控制子项整体单行显示还是换行显示
  

• flex-flow
  使前俩个属性的缩写，表示flex布局的flow流动特性。一个值表示方向，第二个值表示换行，中间用空格隔开。
  display:flex-flow: column wrap（ flex;flex-direction: column;flex-wrap: wrap）

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

• align-items
  flex子项们相对于flex容器在侧轴方向上的对齐方式
  
  
• align-content
  与justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有效果的
  

2.作用在子项上的css属性

• 注：
  order：值越大，越往后排
  flex-grow：取值为1时，空空间沾满，为2时，空空间沾满；若俩个容器扩展，则数值大的站的空间大。
  flex-shrink：>=0；数值越大，收缩得越厉害。
  flex-basis：像素，优先级高于width。
  flex：复合写法,优先级高于flex-grow
  align-self:
  

14.grid网格布局

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

1.加在父盒子上

• grid-template-columns（行）和grid-template-rows（列）
  对网格进行纵横划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）
  添加多个纵横网格可用repeat（）语法
  
  
  

• grid-template-areas和grid-template
  grid-template-areas给网格划分区域，此时的子项用grid-area属性指定隶属于哪个区
  grid-template是其他三个的缩写
  
  

• grid-column-gap和grid-row-gap
  用于定义网格中网格间隙的尺寸
  css grid-gap是其上俩个的缩写（第一个是row，第二个是column）

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

• justify-content和 align-content
  justify-content网格水平分布方式。
  align-content垂直分布
  place-content可以让justify-content和 align-content写在单个声明中

2.子盒子上

• 注：
  grid-column与grid-row：起始位置/结束位置
  grid-area：横向起始/横向结束/纵向起始/纵向结束
  place-self：结束/起始