本文详细介绍了HTML和CSS中的语义化标签，如strong、em、b、i的用法与区别，以及引用、iframe、br、wbr、map、area等标签的应用。此外，还探讨了audio和video标签在多媒体集成中的作用，以及文字注解、文字方向的实现。进一步，文章深入讲解了Flex弹性盒模型和Grid网格布局，包括相关CSS属性的使用，帮助读者掌握现代网页布局技术。
HTML+CSS笔记5
strong和b、em和i
strong 和 em 都是表示强调的标签，表现形态为文本加粗和斜体。
b 和 i 标签同样也表示文本加粗和斜体。
区别在于，strong和em 是具备语义化的，而b和i是不具备语义化的。
使用CSS样式也能呈现出加粗和斜体的表现形态。
优势：可以不用多个class进行区分，简化选择器操作
引用标签
blockquote:引用大段的段落解释
lockquote:引用大段的段落解释
q:引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题
iframe标签
| 项目 | 含义 |
|---|---|
| frameborder | 规定是否显示框架周围的边框 |
| width | 定义iframe的宽度 |
| height | 定义iframe的高度 |
| scrolling | 规定是否在iframe中显示滚动条 |
| src | 规定在iframe中引入的URL |
| srcdoc | 规定在iframe中显示的页面内容 |
br与wbr
br标签表示换行（单标签），wbr标签表示软换行（一般用于比较长的单词）
pre与code
针对网页中的程序代码的显示效果
pre：定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符
code：通常把文本变成等宽字体，但它暗示着这段文本是源程序代码
一般结合使用，用来显示代码
map与area
给特殊图形添加链接，area能添加的热区的形状：矩形（左上和右下坐标）、圆形（中心点坐标和半径）、多边形（如五角星需要十个尖的点坐标）。
area元素永远嵌套在map元素内部。
area的属性：
href：定义区域的URL
coords：定义热区的坐标
shape：定义区域的形状
embed与object
表示嵌入一些多媒体，如flash动画、插件等。基本没有太多区别，主要是为了兼容不同浏览器
object元素需要配合param元素一起完成
audio和video
引入音频与视频的标签，属于H5的功能
audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。
文字注解与文字方向
ruby、rt这样一个组合
ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文本方向。
link标签扩展学习
# link标签扩展学习<meta name="keywords" content="大连美食，大连酒店，大连团购">
<meta name="renderer" content= "webkit">
<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">
audio与video
audio标签表示嵌入音频文件，video标签表示嵌入视频文件（属于H5的功能）。默认控件是不显示的，可通过controls属性来显示控件
为了能够支持多个备选文件的兼容支持，可以配合source标签使用（备选作用）
文字注解和文字方向
ruby、rt这样一个组合
bdo可覆盖默认的文本方向
<ruby>
寒<rt>hán</rt>
</ruby>
<p>
<bdo dir="ltr">爱神 </bdo>
</p>
古诗排版练习：
<!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>诗经·郑风·子衿</title>
<style>
h1{
float: left;
writing-mode: vertical-rl;
}
.author{
float: left;
height: 140px;
writing-mode: vertical-rl;
writing-mode: tb-rl;
color: gray;
}
.p{
float: left;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="p"><p>青青子衿，悠悠我心。<br>
纵我不往，子宁不嗣音？<br>
青青子佩，悠悠我思。<br>
纵我不往，子宁不来？<br>
挑兮达兮，在城阙兮。<br>
一日不见，如三月兮。</p></div>
<div class="author">《诗经》</div>
<div><h1>诗经·郑风·子衿</h1></div>
</body>
</html>
展示效果：
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子项上 |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
作用在flex容器上的CSS属性
（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属性决定了主轴方向上子项的对齐和分布方式。
| 取值 | 含义 |
|---|---|
| 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 | 每一行元素都完全上下等分。 |
2.作用在flex子项上的CSS属性
| 取值 | 含义 |
|---|---|
| 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，flex-shrink和flex-basis的缩写。 |
| align-self | align-self指控制单独某一个flex子项的垂直对齐方式。 |
grid网格布局
是一个二维的布局方法，横纵两个方向总是同时存在
grid-template-columns（列）和grid-template-rows（行）
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr（网格剩余空间比例单位）
如果需要添加多个横纵网格时，可以利用repeat(个数，大小)语法进行简化操作
grid-colum-gap和grid-row-gap：用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-colum-gap和grid-row-gap的缩写（先写横再写纵）
justify-items：指定网格元素水平呈现方式
align-items：指定网格元素的垂直呈现方式
place-items可以让align-items和justify-items属性写在单个声明中（缩写）
justify-content：指定了网格的水平分布
align-content：指定了网格的垂直分布
place-content是两个的缩写
作用在grid子项上的CSS属性
| 取值 | 含义 |
|---|---|
| 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的缩写。 |
扫一扫
4515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
