web大前端之旅Ⅴ
strong和b、em和i
strong 和 em 都是表示强调的标签，表现形态为文本加粗和斜体。
b 和 i 标签同样也表示文本加粗和斜体。
区别在于，strong和em 是具备语义化的，而b和i是不具备语义化的。
使用CSS样式也能呈现出加粗和斜体的表现形态。
- 优势：可以不用多个class进行区分，简化选择器操作
引用标签
blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr：缩写或首字母缩略词
address:引用文档地址信息
cite：引用著作的标题
iframe嵌套页面
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
| 属性 | 含义 |
|---|---|
| frameborder | 规定是否显示框架周围的边框 |
| width | 定义iframe的宽度 |
| height | 定义iframe的高度 |
| scrolling | 规定是否在iframe中显示滚动条 |
| src | 规定在iframe中引入URL |
| srcdoc | 规定在iframe中显示的页面内容 |
其中src与srcdoc（可渲染标签）同时存在时仅优先识别排在首位的
- 应用场景：
数据传输、共享代码、局部刷新、第三方介入等。
<iframe src="https://tpc.googlesyndication.com/simgad/16963815205208369299?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qkUzDBZJ_iXH93JlcZvAdlVYgnP5w" frameborder="0" width="160"></iframe>
br 与 wbr
- br标签表示换行操作
- wbr标签表示软换行操作
提示:如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr 元素来添加 Word BreakOpportunity(单词换行时机)
pre 与 code
- pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
- 只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code 标签。虽然 code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。
public class SystemDemo01 {
public static void main(String[] args) {
// 定义源数组
int[] srcArray = {23 , 45 , 67 , 89 , 14 , 56 } ;
// 定义目标数组
int[] desArray = new int[10] ;
// 进行数组元素的copy: 把srcArray数组中从0索引开始的3个元素，从desArray数组中的1索引开始复制过去
System.arraycopy(srcArray , 0 , desArray , 1 , 3);
// 遍历目标数组
for(int x = 0 ; x < desArray.length ; x++) {
if(x != desArray.length - 1) {
System.out.print(desArray[x] + ", ");
}else {
System.out.println(desArray[x]);
}
}
}
}
map 与 area
- 定义一个客户端图像映射
- 图像映射(image-map)指带有可点击区域的一幅图像。
- area 元素永远嵌套在map元素内部。
- area元素可定义图像映射中的区域。
给特殊图形加链接
href属性定义区域的URL
shape属性来定义区域的形状
coords属性定义热区的坐标
<img src="./R-C.jpg" alt="" usemap="#c">
<map name="c">
<area shape="circ" coords="970 465 93" href="" alt="">
</map>
embed 与 object
embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
object元素需要配合param元素一起完成
audio 与 video
- audio标签表示嵌入音频文件
- video标签表示嵌入视频文件
默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。
loop循环属性
autoplay自动播放
audio
<audio src="./554196940_nb2-1-30112.mp3" controls></audio>
video
<div style="position: relative;height: 250px;overflow:hidden">
<video style="min-width: 100%;min-height :100%;" loop="loop" muted="muted" playsinline="true"
webkit-playsinline="true" x-webkit-airplay="allow" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-video-player-type="h5">
<source src="https://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4" type="video/mp4">
</video>
</div>
文字注释与文字方向
ruby 标签定义
ruby 注释(中文注音或字符)，rt 标签定义字符(中文注音或字符)的解释或发音。
<ruby>
蹀<rt>dié</rt>躞<rt>xiè</rt>
</ruby>
bdo标签可覆盖默认的文本方向
<bdo dir="rtl">永恒荣耀</bdo>不灭星辰
- 通过CSS方式实现
<style>
span{
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>
<span>永恒荣耀</span>不灭星辰
</p>
</body>
练习：古诗排版
<!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>
湖月照我影，送我至剡溪。<br>
谢公宿处今尚在，渌水荡漾清猿啼。<br>
脚著谢公屐，身登青云梯。<br>
半壁见海日，空中闻天鸡。<br>
千岩万转路不定，迷花倚石忽已暝。<br>
熊咆龙吟殷岩泉，栗深林兮惊层巅。<br>
云青青兮欲雨，水澹澹兮生烟。<br>
列缺霹雳，丘峦崩摧。<br>
洞天石扉，訇然中开。<br>
青冥浩荡不见底，日月照耀金银台。<br>
霓为衣兮风为马，云之君兮纷纷而来下。<br>
虎鼓瑟兮鸾回车，仙之人兮列如麻。<br>
忽魂悸以魄动，恍惊起而长嗟。<br>
惟觉时之枕席，失向来之烟霞。<br>
世间行乐亦如此，古来万事东流水。<br>
别君去兮何时还？且放白鹿青崖间，须行即骑访名山。<br>
安能摧眉折腰事权贵，使我不得开心颜！</p></div>
<div class="author">李白 〔唐代〕</div>
<div><h1>梦游天姥吟留别</h1></div>
</body>
</html>
扩展link标签
定义文档与外部资源的关系
- 添加网址标题栏前的小图标
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
- DNS解析
把域名解析为IP地址，加快访问网站资源的速度
扩展meta标签
添加辅助信息、功能信息等
HTLM5新语义化标签
div的替代
- header：页眉
- footer：页脚
- main：主体
- hgroup：标题组合
- nav：导航
- arti：独立的内容
- aside：辅助信息的内容
- section：区域
- figure：描述图像或视频
- figcaption：描述图像或视频的标题部分
- datalist：选项列表
- details/summary：文档细节/文档标题
- progress/meter：定义进度条/定义度量范围
- time：定义日期或时间
- mark：带有记号的文本
flex布局
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。
常常用来代替float来改变页面的样式
| 两组成 | 两根轴 | 两根线 |
|---|---|---|
容器container | 主轴main-axis | 起始线main/cross-start |
项目item | 交叉轴cross-axis | 结束线main/cross-end |
文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器，我们把一个容器的 display 属性值改为 flex 或者 inline-flex。
display：flex/inline-flex;
完成这一步之后，容器中的直系子元素items就会变为 flex 元素。
设置在容器中的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
row：元素沿着行的方向显示
row-reverse：元素沿着行的方向显示，但是起始线和终止线位置会交换
column：主轴和交叉轴交换，元素沿着列的方向排列显示
column-reverse：主轴和交叉轴交换，起始线和终止线交换
.container{
display: flex;
flex-direction: row;
}
.container{
display: flex;
flex-direction: row-reverse;
}
.container{
display: flex;
flex-direction: column;
}
.container{
display: flex;
flex-direction: column-reverse;
}
flex-wrap
nowrap(默认)：不换行，压缩宽度
wrap：换行
wrap-reverses：反向换行
.container{
display: flex;
flex-wrap: nowrap;
}
.container{
display: flex;
flex-wrap: wrap;
}
.container{
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow
flex-flow: flex-direction + flex-wrap;
justify-content
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等
space-evenly：平均对齐，剩余空间平分
.container{
display: flex;
justify-content: flex-start;
}
.container{
display: flex;
justify-content: flex-end;
}
.container{
display: flex;
justify-content: center;
}
.container{
display: flex;
justify-content: space-between;
}
.container{
display: flex;
justify-content: space-around;
}
.container{
display: flex;
justify-content: space-evenly;
}
align-items
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
.container{
height: 600px;
display: flex;
align-items: flex-start;
}
.container{
height: 600px;
display: flex;
align-items: flex-end;
}
.container{
height: 600px;
display: flex;
align-items: center;
}
.container{
height: 600px;
display: flex;
align-items: baseline;
}
.container{
height: 600px;
display: flex;
align-items: stretch;
}
align-content
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
.container{
height: 900px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.container{
height: 900px;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.container{
height: 900px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.container{
height: 900px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.container{
height: 900px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.container{
height: 900px;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
item属性
order：排序
flex-grow：长大
flex-shrink：缩小
flex-basis：有效宽度
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：覆盖
.container{
height: 900px;
display: flex;
}
.item{
order: 0;
}
.item1{
order: 1;
}
.container{
height: 900px;
display: flex;
}
.item1{
flex-grow: 1;
}
.container{
height: 900px;
width: 500px;
display: flex;
}
.item1{
flex-shrink: 2;
}
.container{
height: 900px;
width: 500px;
display: flex;
}
.item1{
flex-basis: auto;
}
align-self：覆盖container align-items 属性
| 属性值 | 描述 |
|---|---|
auto默认 | 继承align-items属性值 |
flex-start | 与交叉轴起始线对齐 |
flex-end | 与交叉轴终止线对齐 |
center | 居中对齐 |
stretch | 在交叉轴方向上拉伸 |
baseline | 与基线对齐（与内容相关） |
.container{
height: 900px;
width: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.item1{
align-self: flex-end;
}
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
