第五次双创-阿南达文事网

第五次双创

112strong和b、em和i

strong和em都是表示强调的标签,表现形态为文本加粗和斜体。
b和i标签同样也表示文本加粗和斜体。
区别在于, strong和em是具备语义化的,而b和i是不具备语义化的。简化选择器操作。

113引用标签

blockquote :引用大段的段落解释
q :引用小段的短语解释
abbr :缩写或首字母缩略词
address :引用文档地址信息
cite :引用著作的标题

案例：

<body>
<p>
<abbr title="World Health organization" >WHO</abbr>成立于1948年。
</p>
</body>

114iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
例如：

<body>
<iframe src="https://www:taobao" frameborder="0" scrolling="no" ></iframe>
</body>

应用场景:数据传输、共享代码,局部刷新、第三方介入等。

115 br与wbr

br标签表示换行操作,而wbr标签表示软换行操作。

提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用wbr元素来添加Word Break Opportunity (单词换行时机)。
软换行可以使换行不那么生硬

116 pre与code?

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。

<pre>
<code>
&lt; IDOCTYPE html &gt; 
&lt;html lang="en"&gt;
&lt;head&gt;
&lt ;meta charset="UTF-8"&gt;
<meta name="viewport" content="width=device -width, initial-scale=1.0">
<meta http- equiv="X-UA-Compatible"content="ie= edge">
<title >Document</title>
</head>
<body>
hello world
</body>
</html>
</code>
</pre>

在pre和code中需要通过<和>才能显示。

117map与area

定义一个客户端图像映射。图像映射( image-map )指带有可点击区域的一幅图像。area 元素永远嵌套在map元素内部。area 元素可定义图像映射中的区域。area元素的href属性定义区域的URL , shape属性来定义区域的形状，
coords属性定义热区的坐标。

<img src=" ./img/star. jpg" alt=" usemap=" #star" >
<map name=”star" >
<!-- <area shape="rect" coords="205 83 386 173” href= "https: //www. taobao" alt=""> -->
<!-- <area shape="circ" coords="300 130 50" href="" alt=""> -->
<area shape= "poly" coords="305 99 233 156 256 250 172 197” href="" alt="">
</map>

rect矩形
circ圆形
poly多边形

coords是坐标

118embed与object

embed和object都表示能够嵌入一些多媒体,如flash动画、插件等。基本使用没有太多区别,主要是为了兼容不同的浏览器而已。object元素需要配合param元素一起完成。

<body >
<!-- <embed src=" ./img/flash.swf" type=""> -->
<object>
<param name=” movie" value=" ./img/flash.swf">
</object>
</body>

这两个效果一致

119audio与video

audio标签表示嵌入音频文件, video标签表示嵌入视频文件。默认控件是不显示的,可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持,可以配合source标签。
引入音频与视频的标签。属于H5的功能。

<body>
<audio src=" ./img/johann_sebastian_bach_air.mp3" controls ></audio>
<video>
<source src=" ./ img/ Intermission-walk - in. ogv"></source>
<source src=" ./ img/ Intermission-walk-in 512kb . mp4"></source>
</video></body>

loop循环播放
autoplay自动播放

120文字注解与文字方向

ruby标签定义ruby注释(中文注音或字符) , rt标签定义字符(中文注音或字符)的解释或发音。

<body> 
<ruby>
寒<rt>han</rt>冬
</ruby>
</body>

bdo标签可覆盖默认的文本方向。

<p>
<bdo dir="rtl"></bdo>
</p>

如此文本会逆过来

121扩展link标签

<link rel= "icon" type="/image/x-icon"
href= ".ico" >
<link rel=" dns prefetch" href= "//static.360buyimg">

添加网址标题栏前的小图标:如下

<link rel="icon" type="/image/x-icon"
href= ".ico" >

其实就是引入一个外部的资源文件

122扩展meta标签

初始界面会有很多初始标签
例如<meta charset="UTF-8>"防止出现乱码。
meta辅助信息，做页面优化。

<meta name=description content=" ">

添加描述，有利于搜索引擎

<meta http-equiv="refresh" content="3" url="">

跳转页面，三秒跳转

123HTML 5新语义化标签

header页眉
footer页脚
main主体
hgroup标题组合
nav导航

<body>
<header>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<nav>
<ul>
<li>首页</li>
<li>论坛</li>
<li>关于</li>
</ul>
</nav>
</header>
<main><main>
<footer></footer>
</body>注: header、 footer、 main在一个网页中只能出现一次。

124HTML5新语义化标签

article:独立的内容
aside:辅助信息的内容
section:区域
figure:描述图像或视频
figcaption :描述图像或视频的标题部分

125 HTML5新语义化标签

datalist:选项列表
details / summary:文档细节/文档标题
progress / meter:定义进度条/定义度量范围
time:定义日期或时间
mark:带有记号的文本

184 Flex弹性盒模型

随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中。
2009年, W3C提出了一种新的方案—Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持，这意味着,现在就能很安全地使用这项功能。

flex- direction（写在父容器上）
flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。
flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。

flex-flow
flex- flow属性是flex- direction和flex wrap的缩写,表示flex布局的flow流动特性。第一个值表示方向,第二个值表示换行,中间用空格隔开。
(一个复合写法）

{flex-flow: column wrap;}

justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。

186 align-items

align- items中的items指的就是flex子项们,因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

align-content
align-content可以看成和justify- content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。

187作用在flex子项上的CSS属性

order

<style>
#box div:nth-child(2){ order:1;}
#box div:nth-child(3){ order:-1;}
</style>
<body>
<div id="box" >
<div>1< /div>
<div>2</div>
<div>3</divp
<div>4</div>
<div>5</div>
</div>
</body>

flew-grow对剩余空间的填充

<style>
#box div:nth-child(2){ background:  yellow; color:black; flex-grow: 0.2;}
#box div: nth-child(3){ background:  blue; color: black; flex-grow: 0.2;}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>

188

flex-shrink
属性中的shrink是“收缩"的意思，flex-shrink 主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。

#box2 div:nth-child(2){ background: yellow; color: black; flex-shrink:2;}

不想收缩设置0就可以了。

flex-basis
flex-basis定义了在分配剩余空间之前元素的默认大小。

#box2 div :nth-child(2){ background: yellow; color: black; width:100px; flex-basis: 250px;

align-items:针对父元素设置
align-self:针对单个元素进行微调

189Flex案例

1.骰子的点数。
2.两列固定,一列自适应。
3.百度弹性导航。

<style>
#box1{ w1dth: 100px; height : 100px; border:1px black sol1d; border-radius: Spx; display: flex; justify- content: center; align-items: center;}
#box1 div{ width:30%; height :30%; background:  black; border-radius: 50%;}
#box2{ width: 100px; height: 100px; border:1px  black solid; border-radius: 5px; display: flex; justify-content: space-between;}
#box2 div{ width:30%; height :30%; background: C Jblack; border-radius: 50%;}
#box2 div:last-chi1d{ align-self: flex-end #box3{ width:100px; height: 100px; border:1px black solid; border-radius: 5px; display: flex;
justify-content: space- between; align-items: center;}
#box3 div{ width:30%; height :30%; background: black; border-radius: 50%; }
#box3 div:first-child{ align-self: flex-start;}
#box3 div:last-child{ align-se1f: flex-end;}#box4{ width:100px; height: 100px; border:1px black solid; border-radius: 5px; display: flex; flex-wrap :wrap;}
#box4 div{ width:100%; display: flex; justify-content: space- between;}
#box4 div:last-child{ align-items: flex-end;}
#box4 i{ display: block; width:30%;
height : 60%; background: black; border-radius: 50%;}#box5{ width: 100px; height : 100px; border:1px black solid; border-radius: 5px; display: flex; flex-wrap: wrap;}
#box5 div{ width:100%; display: flex; justify-content :
center; align-items: center;}
#box5 div:first-child{ align-items: flex-start; justify-content: space- between;}
#box5 div:last-child{ align-items: flex-end; justify-content: space-between;} 
#box5 i{ display: block; width:30%; height:90%; background: black; border-radius: 50%;}#box6{ width:100px; height: 100px; border:1px black solid; border-radius: 5px; display: flex;
flex-wrap: wrap;}
#box6 div{ width:100%; display: flex; justify- content: space- between;}
#box6 div:first-child{ align-items: flex-start; }
#box6 div:last-child{ align-items: flex-end;}
#box6 i{ display: block; width :30%; height:90%; background: black; border-radius: 50%;} </style>
<body>
<div id="box1">
<div></div>
</div>
<div id="box2">
<div></div>
<div></div>
</div> 
<div id="box3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="box4">
<div>
<i></i>
<i></i>
</div> 
<div>
<i></i> 
<i></i >
</div>
</div>
<div id="box5">
<div>
<i></i>
<i></i>
</div> 
<div>
<i></i>
</div> 
<div>
<i></i> 
<i></i >
</div>
</div>
<div id="box6">
<div>
<i></i>
<i></i>
</div> 
<div>
<i></i>
<i></i>
</div> 
<div>
<i></i> 
<i></i >
</div>
</div>
</body>

190

两列固定,一列自适应。

<style>
*{ margin:0; padding:0;}
#main{ display: flex;}
#left{ width: 200px; height: 200px; background: red;}
#center{ flex:1; height: 300px; background: yellow;}
#right{ width: 150px; height: 200px; background: blue;}
</style>
</head>
<body>
<div id="main">
<div id="left">< /div> 
<div id= ”center"></div>
<div id=" right"></div>
</div>
</body>

弹性模型比浮动更灵活

191 Grid网格布局

Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。

grid-template- columns和grid-template-rows
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的，如果需要添加多个横纵网格时,可以利用repeat(语法进行简化操作。

<style>
.box{ width:500px; height: 500px; border:1px gray dotted; display: grid;
grid-template-rows: 100px auto 25%;
grid-template-columns: 100px 100px 200px 100px ;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>

fr是根据容器比例来进行分配
fr累加和大于一才会把剩余空间沾满。

grid-template-rows: 1fr 1fr 2fr ;
grid-template-columns: 1fr 1fr 1fr;

这是重复写法，简写

grid-template-rows: repeat(3,1fr);

192grid-template-areas和grid-template

area是区域的意思，grid template -areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid- template是grid-template- rows，grid-template -columns和grid-template areas属性的缩写。

<style>
.box div{ background: red; border:1px black solid;}
.box2{ width:300px; height :300px; border:1px gray dotted; display: grid;
grid-template-rows: repeat(3 ，1fr);
grid-template-columns: repeat(3 ，1fr);
grid-template-areas :
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
}
.box2 div{ background: red; border:1px C black solid;} 
.box2 div:nth-child(1){ grid-area: a1;}
.box2 div:nth-child(2){ grid-area: a2;}
.box2 div:nth-child(3){ grid-area: a3;}
</style>
<body>
<div class="box2">
<div>1</div>
<div>2</div>
<div>3</div>
</body>

这是简写grid-template

<style>
.box2{ width:300px; height :300px; border:1px gray dotted; display: grid;
grid-template :
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;}
</style>

grid-column-gap和grid-row-gap

grid-column-gap和grid-row- gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid-row -gap属性的缩写。

grid-column-gap: 10px;
grid-row-gap: 20px ;

grid- gap:20px 10px;

这是简写

193

justify-items和align-items

justify- items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示,还是上中下对齐。
place -items可以让align-items和justify -items属性写在单个声明中。

justify-items: end;
align-items: end;

简写：

place-items: end end;

(纵横）

justify-content和align- content

justify- content指定了网格元素的水平分布方式。align content指定了网格元素的水平分布方式。place-content可以让 align- content和justify-content属性写在一个CSS声明中。

这个是针对所有网格的排列，上一个是针对内容的排列

194作用在grid子项上的CSS属性

例：

注意：span

grid-row-end: span 1;

这里表示占的个数。

grid- column: 2 / 3;
grid-row: 2 /span 2;

此为简写，
/前表示起始，/后表示结束。

195

grid-area:

grid-area:3/2/4/4;

横始/纵始/横结束/纵结束

196Grid案例

1.骰子的点数。
2.百度搜索风云榜。

box4{ width: 100px; height:100px; border:1px D black solid; border- radius: 5px;
display:grid;
grid-template-columns: repeat(3 ，1fr);
grid-template-rows: repeat(3 , 1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
.box4 div{ width:20px; height: 20px; background: black; border-radius: 50%;}
.box4 div:nth-child(2){ grid-area: a3; }
.box4 div:nth-child(3){ grid-area: a7; }
.box4 div:nth-child(4){ grid-area: a9; }
<div classa="box4">
<div></div> 
<div></div>
<div></div> 
<div></div> 
</div>

四点数演示。

197

<style>
.box{ width: 280px; height:352px; margin:20px auto; display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,1fr);
grid-template-areas:
"a1 a2 a2"
"a3 a2 a2"
"a4 a4 a5"
"a6 a7 a7";
grid-gap: 6px 6px;
}
box
div{ background: red;} 
.box div:nth-child(1){ grid-area: a1;}
.box div:nth-child(2){ grid-area: a2;}
.box div:nth-child(3){ grid-area: a3;}
.box div:nth-child(4){ grid-area: a4;}
.box div:nth-child(5){ grid-area: a5;}
.box div:nth-child(6){ grid-area: a6;}
.box div:nth-child(7){ grid-area: a7;}</style>
<body>
<div class="box">
<div></div>
<div></div>
<div></div> 
<div></div>
<div></div> 
<div></div>
<div></div>
</div>
</body>