一，.b标签和i标签
1.b标签和i标签
strong 和em 都是表示强调的标签，表现形式为文本的加粗和斜体。b和i标签同样也表现文本加粗和斜体。
区别在于,strong 和em是具备语义化的。然而b和i是不具备语义化的。
可以直接简化显示器的操作
二，引用标签的基本操作
1.引用标签的基本操作
blockquote引用打断的段落解释
q:引用小段的短语解释
abbr：缩写或首字母缩略词
address：
cite：引用著作的标题
这些分类，有利于计算机的解析，多人协作的开发
<strong>文本1</strong>
<b>文本2</b>
<em>文本3</em>
<i>文本4</i>
<i>暗杀教室客户</i>
三，iframe标签
iframe标签
可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
<iframe src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="300"></iframe>
四，br标签和wbr标签
br是强制换行，相当于C语言中“\n”
wbr是自适应换行，更具屏幕的大小进行调控
五，pre标签和code标签
pre元素可以定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符
针对网页中的程序代码的显示效果
<DOCTYPE html>
以这种方式来代替<> 以实现在网页中显示代码的效果
此处可以用md来进行格式的转换
六，map标签与are标签
1.给特殊图形添加链接，area能添加的热区的形状：矩形
<img src="./image/2.jpg" alt="" usemap="#star">
<map name="star">
<area shape="rect" coords="100 100 200 200" href="https://www.taobao.com" alt="">" alt="">
七，embed和object
embed和object都表示能够嵌入一些多媒体，比如flash动画，插件等。基本是由没有太多区别，主要是为了兼容不同的浏览器而已
给flash和一些插件
<embed src="" type="">
<object data="" type=""></object>
<object data="" type="">
<param name="" value="">
</object>
支持性非常的查，一般不适用
八，video标签和audio标签
audio标签表示嵌入的音频文件
引入音频和视频的新标签
<audio src="" controls></audio> 通过controls来加上控制器
通过loop来进行单曲循环
autoplay来进行自动播放
<video src=""></video> 视频播放的设置也同理
九、文字注解与文字方向
ruby，rt 这样的一个组合
<body>
<ruby>
寒 <rt>hán</rt>
冬</ruby>
</body>
效果展示：
寒
冬
用rt给ruby中的文字加上标拼音
rtl：表示从右往左读
ltr：表示从左往右读，一反一正
<p>
<bdo dir="rtl">很多时候</bdo>在一个地方我们可以看到
</p>
十、link标签扩展学习
1.添加网页标题栏前面的
<link rel="icon"type="/image/x-icon"href="http://www.baidu.com">
给标签栏的网页添加小图标
效果展示：
十一、mata扩展学习
meta是添加一些辅助信息，
给美团浏览器添加隐藏的介绍，使其容易被检索到：<meta name="description" content="大连美团集团精选大连美食餐厅，酒店预订，电影票，旅游景点">
<meta http-equiv="X-UA-Compatible" content="ie=edge">,浏览器自动生成的
，是不论是什么版本的浏览器都可以以Ie最高的版本进行渲染
<meta http-equiv="refresh" content="3" url="https://www.taobao.com">，
三秒后自动跳转到淘宝网站
十二、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弹性布局
用_flex来实现盒子模型的简单快捷的居中
<style>
#box{width: 300px;height:300px;border:1px black solid;margin: 20px auto;display: flex;flex-direction: column-reverse;}
#box div{width:50px;height: 50px;color: white;line-height: 50px;text-align:center;background: red;}
</style>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
1.flex-direction
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
取值 含义
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
2.flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。
取值 含义
nowrap 默认值，表示单行显示，不换行。
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。
3.flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
4.justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。
十四、grid网格布局
1.是一个二维的布局方法，横纵两个方向总是同时存在
grid-template-columns（列）和grid-template-rows（行）
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr（网格剩余空间比例单位）
如果需要添加多个横纵网格时，可以利用repeat(个数，大小)语法进行简化操作
grid-colum-gap和grid-row-gap：用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-colum-gap和grid-row-gap的缩写（先写横再写纵）
2.不同的类型
justify-items：指定网格元素水平呈现方式
align-items：指定网格元素的垂直呈现方式
place-items可以让align-items和justify-items属性写在单个声明中（缩写）
justify-content：指定了网格的水平分布
align-content：指定了网格的垂直分布
place-content是两个的缩写
取值 含义：
grid-column-start ：水平方向占据的起始位置。
grid-column-end： 水平方向上占据的结束位置。(span属性)
grid-row-start ：垂直方向上占据的起始位置。
grid-row-end ：垂直方向上占据的结束位置。(span属性 )
grid-row ：grid-row-start+grid-row-end的缩写。
grid-area ：表示当前网格所占用的区域，名字和位置两种表示方法。
justify-self： 单个网格元素的水平对齐方式。
align-self： 单个网格元素的垂直对齐方式。
place-self align-self和justify-self的缩写。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
