HTML+CSS笔记5
HTML+CSS笔记5
- strong和b、em和i
- 优势：可以不用多个class进行区分，简化选择器操作
- 引用标签
- iframe标签
- br与wbr
- map与area
- embed与object
- audio和video
- 文字注解与文字方向
- link标签扩展学习
- audio与video
- 文字注解和文字方向
- 古诗排版练习：
- HTML5新语义化标签
- Flex弹性盒模型
- 作用在flex容器上的CSS属性
- grid网格布局
- 作用在grid子项上的CSS属性
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的缩写。 |
HTML+CSS笔记5相关推荐
- html5 居于页面中心,css笔记：如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
- CSS笔记-除了a标签外的hover属性的应用
CSS笔记-除了a标签外的hover属性的应用内容简介:以下写的可能对于大部分网友来说可能很简单,但是我自己确实是不知道的. 有一段这样的html: div a href=# img alt=i am ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- CSS 笔记（十二）：预处理器 —— Less
CSS 笔记(十二):预处理器 -- Less 什么是 CSS 预处理器 CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性,使用 CSS 预处理器可以使 CSS 具有简洁,适应性强 ...
- HTML与CSS笔记
HTML与CSS笔记 一.HTML: IDE快捷键: tab:补全标签 ctrl+/:快速注释 常用标签: <h1.h2--h6:六级标题 <p:段落 <strong:粗体 < ...
- 【CSS笔记】CSS文本颜色、字母大小写、文本对齐、文本装饰线、文本字体
目录 一.CSS笔记 1.1.CSS文本颜色 1.2.CSS字母大小写 1.3.CSS文本对齐 1.4.CSS文本缩进.间距.行高 (1)如何计算行高??? 1.5.CSS文本装饰线 1.6.CSS字 ...
- HTML+CSS笔记4
HTML+CSS笔记4 position定位 特性 取值 static(默认) relative(相对定位) absolute(绝对定位) fixed(固定定位 ) sticky(粘性定位) CSS添 ...
- Html 和 CSS笔记
html 和 css 原文链接:https://blog.csdn.net/Lin16819/article/details/102759862 不断学习,后期的新增笔记会继续加到文章上方 点击链接后 ...
- CSS尺寸与文本讲解。HTML、CSS笔记（四）。
文章目录 CSS尺寸(Dimention) 行高line-height属性 尺寸的其他属性 heigh.width属性 max-height.max-width属性 min-height.min-wi ...
最新文章
- 面试时与人事交谈时间_如何与您的技术负责人交谈并解决通讯故障
- 持续集成-软件和库的统一
- Java 多线程：synchronized 关键字用法（修饰类，方法，静态方法，代码块）
- 定期清理sql2005事务日志
- python安装在哪个盘比较好_python编写器用哪个比较好？
- 十年后，每天 24 小时离不开传感技术
- js接收php 回调,JS callback回调函数的使用（附代码）
- weblogic12C安装
- 模板Template 7
- 新唐M261M262M263系列芯片知识总结归纳（2）
- 使用盒式布局实现登录界面
- Java爬虫彼岸桌面壁纸(使用httpClient+Jsoup)
- 小姜的模拟学习日记_spectre使用
- 12星座绝情榜,你的绝情指数是多少呢?
- amd显卡测试大风车软件md,肉眼可见的撕裂 AMD将推出FreeSync2 HDR测试工具
- 计算机绘制函数的应用,信息技术应用用计算机绘制函数图象 (4).pptx
- Try-with-resources are not supported at language level ‘5‘ 报错
- json转对象（GsonFormatPlus）
- 人的大脑就是量子计算机吧,新发现！人类大脑其实就是台量子电脑
- 这所C9高校的8个CS院系，有你心仪的吗？