第七十五节 strong和b、em和i
strong 和 em 都是表示强调的标签 表现形态为文本加粗和斜体
b 和 i 同样也表示文本加粗和斜体
区别：strong和em 是具备语义化的，而b和i是不具备语义化的
使用CSS样式也能呈现出加粗和斜体的表现形态
优势：可以不用多个class进行区分，简化选择器操作
第七十六节 引用标签
blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题
第七十七节 iframe嵌套页面(属于inline-block)
| 属性 | 含义 |
|---|---|
| frameborder | 规定是否显示框架周围的边框 |
| width | 定义iframe的宽度 |
| height | 定义iframe的高度 |
| scrolling | 规定是否在iframe中显示滚动条 |
| src | 规定在iframe中引入URL |
| srcdoc | 规定在iframe中显示的页面内容 |
其中src与srcdoc（可渲染标签）同时存在时仅优先识别排在首位的
应用场景：数据传输、共享代码，局部刷新、第三方介入
第七十八节 br与wbr标签
br标签表示换行操作
wbr标签表示软换行操作(适当时机换行)
<body>
<p>这是一篇文章 只有aaaaaaa<br> aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p>
<p>这是一篇文章只有bbbbbbbbbb bbbbbb bbbbbbbb bbbbbb</p>
<p>这是一篇文章只有c cccccc ccccccccc cccccc ccccccccc<wbr>bbbbbbbbbb<wbr>aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p>
</body>
第七十九节 pre 与 cod（针对网页中的程序代码显示效果）
pre元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码
第八十节 map 与 area（给特殊图像添加链接）
area能添加的热区形状有：矩形、圆形、多边形
定义一个客户端图像映射。图像（image-map）指带有可点区域的一副图像。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
area 元素的 href 属性定义区域的 URL ，shape属性来定义区域的形状，coords 属性定义热区的坐标
rect：矩形
circle：圆形
poly：多边形
<body>
<img src="./images/矢量图形.jpg" alt="" usemap="#star">
<map name="star">
<!-- <area shape="" coords="100 50 200 130" href="https://www.taobao.com" alt=""> -->
<area shape="circle" coords="100 60 100 " href="https://www.taobao.com" alt="">
</map>
</body>
第八十一节 embed 与 object（给flash和一些插件进行渲染操作的标签）
embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。
基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
object元素需要配合param 元素一起完成。
第八十二节 audio 与 video（引入音频和视频的标签）
audio 标签表示嵌入音频文件
video 标签表示嵌入视频文件。
默认控件是不显示的，可通过 controls 属性来显示控件
为了能够支持多个备选文件的兼容，可以配合 source 标签
loop循环属性 autoplay自动播放
<audio src="./img/1.mp3" controls loop autoplay=""></audio>
<video src="./img/2.mp4" controls></video>
第八十三节 文字注解与文本方向
ruby 标签定义
ruby 注释（中文注音或者字符），rt 标签定义字符（中文注音或字符）的解释或发音
bdo标签可覆盖默认的文本方向
第八十四节 扩展link标签
添加网址标题栏前的小图标
<head>
<link rel="icon" type="/image/icon" href="http://www.glsaone.xyz/favicon.ico">
</head>
把域名解析为IP地址，加快访问网站资源的速度
<head>
<link rel="dns-prefetch" href="地址">
</head>
第八十五节 扩展meta标签
添加辅助信息、功能信息等
<meta name="description" content="大连美团网精选大连美食餐
厅,酒店预订,电影票,旅游景点外，卖订餐,大连团购信息，您可查询商家评价店铺
信息。大连生活，下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食，大连酒店，大连团建">
<meta name="randerer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
让ie浏览器更高级渲染
<meta http-equiv="refresh" content="3" url="">
刷新，三秒后跳转对应网址
<meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT">
缓存
第八十六节 HTML5新语义化标签
header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
arti：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本
注：header，fooer，main在网页中只能出现一次
第八十七节 Flex弹性布局
简介：随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对
于实现特殊布局非常不方便,比如垂直居中。
2009年，W3C提出了一种新的方案—Flex布局,可以简便、完整、响应式地实
现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着，现在就能很安
全地使用这项功能。
| 作用在flex容器上 | 作用在flex子项上 |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
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：lex-flow 属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性 第一个值表示方向第二值表示换行，中间用空格隔开 flew-flow:colummn wrap
4.justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。
| 取值 | 含义 |
|---|---|
| flex-start | 默认值，表现为起始位置对齐 |
| flex-end | 表现为结束位置对齐 |
| center | 表现为居中对齐 |
| space-between | 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配 |
| space-around around | 是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半 |
| space-evenly | evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等 |
5.align-items
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
| 取值 | 含义 |
|---|---|
| stretch | 默认值，flex子项拉伸 |
| flex-start | 表现为容器顶部对齐 |
| flex-end | 表现为容器底部对齐 |
| center | 表现为垂直居中对齐 |
6.align-content
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
| 取值 | 含义 |
|---|---|
| stretch | 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50% |
| flex-start | 表现为起始位置对齐 |
| flex-end | 表现为结束位置对齐 |
| center | 表现为居中对齐 |
| space-between | 表现为两端对齐 |
| space-around | 每一行元素上下都享有独立不重叠的空白空间 |
| space-evenly | 每一行元素都完全上下等分 |
第八十八节 作用在flex子项上的css属性
align-items表示子元素对其方式，而align-items表示多行的对其方式
| 取值 | 含义 |
|---|---|
| order | 可以通过设置order改变某一个flex 子项的排序位置。所有flex 子项的默认order属性值为0 |
| flex-grow | 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0 |
| flex-shrink | 属性中的shrink是“收缩”的意思，flex- shrink主要处理当flex容器空间不足时候，单个元素的收缩比例 默认值是1 |
| flex-basis | flex-basis定义了在分配剩余空间之前元素的默认大小 |
| flex | flex属性是flex-grow, flexrshrink 和flex-basis的缩写 |
| align-self | align-self指控制单独某-个flex 子项的垂直对齐方式 |
第八十九节 Grid网络布局
Grid布局使一个二维布局方法,纵横两个方向总是同时存在
| 作用在grid容器上 | 作用在grid子项上 |
|---|---|
| grid-template-columns | grid-column-start |
| grid-template-rows | grid-column-end |
| grid-template-areas | grid-row-start |
| grid-template | grid-row-end |
| grid-column-gap | grid-column |
| grid-row-gap | grid-row |
| grid-gap | grid-area |
| justify-items | justify-self |
| align-items | align-self |
| place-items | place-self |
| justify-content | |
| align-content | |
| place-content |
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属性写在单个声明中
| 取值 | 含义 |
|---|---|
| stretch | 默认值，拉伸。表现为水平或垂直填充 |
| start | 表现为容器左侧或顶部对齐 |
| end | 表现为容器右侧或底部对齐 |
| center | 表现为水平或垂直居中对齐 |
5.justify-content 与 align-content
justify-coontent 指定了网格元素的水平分布方式。align-content 指定了网格元素的垂直分布方式。place-content 可以让 align-coontent 属性写在一个CSS声明当中
| 取值 | 含义 |
|---|---|
| stretch | 默认值，拉伸。表现为水平或垂直填充 |
| start | 表现为容器左侧或顶部对齐 |
| end | 表现为容器右侧或底部对齐 |
| center | 表现为水平或垂直居中对齐 |
| space-between | 表现为两端对齐 |
| space-around | 享有独立不重叠的空白空间 |
| space-evenly | 平均分配空白空间 |
第九十节 作用在Grid子项上
| 取值 | 含义 |
|---|---|
| grid-column-start | 水平方向占据的起始位置 |
| grid-column-end | 水平方向上占据的结束位置。(span属性) |
| grid-row-start | 垂直方向上占据的起始位置 |
| grid-row-end | 垂直方向上占据的结束位置。(span属性 ) |
| grid-column | grid-column-start+grid-column-end的缩写 |
| grid-row | grid-row-start+grid-row-end的缩写 |
| grid-area | 表示当前网格所占用的区域，名字和位置两种表示方法 |
| justify-self | 单个网格元素的水平对齐方式 |
| align-self | 单个网格元素的垂直对齐方式 |
| place-self | align-self和justify-self的缩写 |
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
