112.b标签与i标签
strong和em都是表示强调的标签，表现形态为文本加粗和斜体。bhei标签同样也表示文本加粗和斜体。
区别：strong和em是具备语义化的，而b和i是不具备语义化的。
<!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>
</head>
<body>
<strong>文本1</strong>
<b>文本2</b>
<em>文本3</em>
<i>文本4</i>
</body>
</html>
113.引用标签基本操作
blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题
<!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>
</head>
<body>
<p>
<abbr title="世界卫生组织（World Health Organization）">WHO</abbr>成立于1948年
</p>
</body>
</html>
114.iframe嵌套页面
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
可以引入其他的html到当前的html中显示。
主要是利用iframe的属性进行样式的调节。
应用场景：数据传输、共享代码、局部刷新、第三方介入等。
注：当srcdoc和src同时出现时src会失效，只会识别srcdoc。
<!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>
iframe{ width: 100%; height: 700px;}
</style>
</head>
<body>
<!-- <iframe src="https://www.bilibili.com/video/BV1p4411T765?p=114&vd_source=d259ff55b73a0483aef43c4ced382bdc" srcdoc="<h1>hello world</h1>" frameborder="1" scrolling="no" width="400" height="400"></iframe> -->
<iframe src="https://www.bilibili.com/video/BV1p4411T765?p=114&vd_source=d259ff55b73a0483aef43c4ced382bdc" frameborder="0" scrolling="no"></iframe>
</body>
</html>
115.br标签与wbr标签
br标签表示换行操作
wbr标签表示软换行操作
<!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>
</head>
<body>
<p>
I hope everything goes as I wish <br> I hope everything goes as I wish
abcdefghi<wbr>jk<wbr>lmnopqratuvwxyz
</p>
</body>
</html>
116.pre标签与code标签
pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本标成等宽字体，但它暗示着这段文本是源代码。
<!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>
</head>
<body>
<pre>
<code>
<!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>
</head>
<body>
hello world
</body>
</html>
</code>
</pre>
</body>
</html>
117.map标签与area标签
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。
给特殊图像添加链接
rect：矩形
circle：圆形
poly：多边形
<body>
<img src="（图片路径）" alt="" usemap="#tu">
（设置map对应的name记得加 # ）
<map name="tu">
（设置name）
<area shape="rect" coords="左上角坐标 右下角坐标" href="" alt="">
<area shape="circle" coords="圆心坐标 半径" href="" alt="">
<area shape="" coords="各个点坐标" href="" alt="">
</map>
</body>
118.embed标签与object标签
给flash和一些插件进行渲染操作的标签
embed 和 objcet 都表示能够嵌入一些多媒体，如 flash 动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已
object 元素需要配合 param 元素一起完成
<body>
<embed src="" type="">
<object data="" type="">
<param name="movie" value="">
</object>
</body>
119.video标签与audio标签
引入音频和视频的标签
audio 标签表示嵌入音频文件，video 标签表示嵌入视频文件。默认控件是不显示的，可通过 controls 属性来显示控件
为了能够支持多个备选文件的兼容，可以配合 source 标签
<body>
<audio src="引入地址.mp3" controls loop autoplay></audio>
（显示控件 循环 刷新自动播放）
<video src="引入地址.mp4" controls></video>
（显示控件）
.ogg 音频
.ogv 视频
<video src="">
<source src="引入地址.ogv">
<source src="引入地址.mp4">
（ 第一句识别后浏览器无法播放.ogv那么就会执行下一条，以此类推）
</video>
</body>
120.文字注解与文字方法
ruby 标签定义 ruby 注释（中文注音或者字符），rt 标签定义字符（中文注音或字符）的解释或发音
<body>
<ruby>好久不见<rt>hǎo jiǔ bú jiàn</rt></ruby>
</body>
bdo 标签可以覆盖默认的文本方向
<body>
<p>好久不见</p>
<p><bdo dir="rtl">好久不见</bdo></p>
</body>
这些也可以在 css 中实现：
好久不见好久不见
好久不见
好久不见好久不见 # 121.link标签扩展学习 添加网址标题栏前的小图标 在一个 html 页面中，header main footer 这些标签只能出现一次
<head>
<link rel="" type="" href="">
</head>
122.meta标签扩展学习
mate 添加一些辅助信息
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ，吃喝玩乐1折起。">
<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ，吃喝玩乐1折起。">
<meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="refresh" content="3" url="">
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">|
123-125.HTML5新语义化标签
在一个 html 页面中，header main footer 这些标签只能出现一次
header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
<body>
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
</body>
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
<body>
<main>
<article>
<section>
<ul>
<li>
<figure>
<img src="../img/en/是究极无敌巨TM可爱的琪亚娜.png" alt="">
<figcaption>
是究极无敌巨TM可爱的琪亚娜!
</figcaption>
</figure>
</li>
</ul>
</section>
</article>
</main>
</body>
datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本
<body>
<main>
<article>
<section>
<input type="text" list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="ab"></option>
<option value="abc"></option>
<option value="apple"></option>
<option value="abbr"></option>
<option value="around"></option>
</datalist>
<details>
<summary>HTML</summary>
<p>超文本</p>
</details>
<progress min="0" max="10" value="5"></progress>
<meter min="0" max="100" value="35" low="10" high="60"></meter>
<p>是<time title="12-25">圣诞节啊</time></p>
<p><mark>是圣诞节啊</mark></p>
</section>
<section>
<ul>
<li>
<figure>
<img src="../img/en/是究极无敌巨TM可爱的琪亚娜.png" alt="">
<figcaption>
是究极无敌巨TM可爱的琪亚娜!
</figcaption>
</figure>
</li>
</ul>
</section>
</article>
</main>
</body>
184-190._flex弹性布局
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
flex-direction
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
flex-wrap
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属性
191-197._grid网格布局
Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
1、grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
2、grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows ,grid-template-columns和grid-template-areas属性的缩写。
3、grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
4、justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
5、justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
6、justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
作用在grid子项上的CSS属性
2804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
