HTML112-125， 184-197-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128401930

1、strong和b、em和i?

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

<!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>Document</title>
</head>
<body>
    <strong>aaaaaaaa</strong>
    <b>bbbbbbbbbb</b>
    <em>cccccccc</em>
    <i>ddddddddd</i>
    <span>eeeeeeeeee</span>
</body>
</html>

2、引用标签

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

<!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>Document</title>
</head>
<body>
    <p>
        <abbr title="World Health Organization">WHO</abbr>成立
    </p>
</body>
</html>

3、iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。
应用场景∶数据传输、共享代码，局部刷新、第三方介入等在这里插入图片描述
取消滚动条：scrolling=no

<iframe srcdoc="hello world" src="https : / / www.tapbao.com"frameborder="0" scrolling="no" width="400"height="400"></iframe>    srcdoc 与src同时出现只会srcdoc

4、br与wbr

br标签表示换行操作，而wbr标签表示软换行操作。
注：比较长的单词可以wbr换行
用法：

<!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>Document</title>
</head>
<body>
     <p>
        aaa<br> bbb
    </p>
    <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<wbr>ccc
    </p>
</body>
</html>

在这里插入图片描述

5、pre 与 code

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

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

在这里插入图片描述

6、map 与area

定义一个客户端图像映射。图像映射(image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。
给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形

<!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>Document</title>
</head>
<body>
    <img src="01.jpg" alt="" usemap="#young">
    <map name="young">
        <area shape="rect" coords="100 50 300 180" href="https://blog.youkuaiyun.com/?spm=1010.2135.3001.4477" alt="">    矩形坐标 ：  左上角   右下角（五角星是每个角坐标）
    </map>
</body>
</html>

7、embed 与 object

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

object元素需要配合param元素一起完成。

<!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>Document</title>
</head>
<body>
    <embed src="xxxxx" type="">
        <object data="" type="">
            <param name="movie" value="01.jpg">
        </object>
</body>
</html>

8、audio 与video

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。

为了能够支持多个备选文件的兼容支持，可以配合source标签。

<audio src="./img/johann_sebastian_bach_air.mp3></ audio>

9、文字注解与文字方向

ruby标签定义ruby注释(中文注音或字符），标签定义字符（中文注音或字符)的解释或发音。

<!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>Document</title>
    <style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">  撒旦阿萨德as哇</bdo>as点开链接阿萨德
    </p>
    <p>
        <span>撒旦阿萨德as哇</span>as点开链接阿萨德
    </p>
</body>
</html>

在这里插入图片描述

10、扩展link标签

<link rel="stylesheet" type="text/css" href="theme.css">

<link rel="icon" type="/image/x-icon"href="http://www.mobiletrain.org/favicon.ico" >

<link rel="dns-prefetch" href=" //static.360buyimg.com">

11、扩展meta标签

meta 添加一些辅助信息

<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<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" >

12、HTML5新语义化标签

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航
注:header、 footer. main在一个网页中只能出现一次。

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

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

<!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>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="01.jpg" alt="">
                            <figcaption>
                               aaaaaa
                                <br>
                                bbbbbb
                            </figcaption>
                        </figure>
                    </li>
                </ul>
                <ul>
                    <li>
                        <figure>
                            <img src="03.jpg" alt="">
                            <figcaption>
                               ccccccc
                                <br>
                                ddddddd
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section>
                <input type="text"list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="ac"></option>
                    <option value="ad"></option>
                    <option value="ae"></option>
                </datalist>
                <details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="5"></progress>
                <meter min="0" max="100" value="35" low="10" high="60"></meter>
                <p>
                    今天是<time title="2-14">情人节</time>，街上人很多
                </p>
                <p>
                    今天是<mark>情人节</mark>，街上人很多
                </p>
            </section>
            <section></section>
        </article>
        <aside>

        </aside>
    </main>
    <footer></footer>
</body>
</html>

13、Flex弹性盒模型

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

1、flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。在这里插入图片描述

2、flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。在这里插入图片描述

3、flex-flow

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

4、justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。
在这里插入图片描述

5、align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。在这里插入图片描述

<style>
        /*#parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box{width: 100px;height: 100px;background: chocolate;margin: auto;}

        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse ;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: goldenrod;}
    
        #box2{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse;
        flex-wrap: wrap;flex-direction: column;flex-flow: column wrap;}
        #box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: goldenrod;}
    
        #box3{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse;
        justify-content: space-evenly;flex-wrap: wrap;}
        #box3 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: goldenrod;}*/
    
        #box4{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row-reverse;
        justify-content: space-evenly; align-items: flex-start;align-content: space-around;}
        #box4 div{width: 50px;background: goldenrod;}
    </style>

14、作用在flex子项上的CSS属性

在这里插入图片描述

<!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>Document</title>
    <style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
        /*#box div:nth-child(2){order: 1;}
        #box div:nth-child(3){order: -1;}*/
        #box div:nth-child(2){background: yellowgreen;color: black;flex-grow: 1;}
        #box div:nth-child(3){background: rgb(81, 108, 28);color: black;flex-grow: 2;}

        #box2{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box2 div{width: 50px;;color: white;line-height: 50px;text-align: center;background: red;}
        #box2 div:nth-child(2){background: red;color: black;
        /*flex: 0 1 auto;flex-shrink: 0;*/}
        #box2 div:nth-child(1){align-self: flex-end;}
    </style>
</head>
<body>
   
    <div id="box2">
        <div>1</div>
        <div>测试文字</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

15、Flex案例

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

#box2div(width:30%;height:30%:background:black;border-radius:50%:)
#box2 div:last-child( align-self:flex-end;)
#box3( width:1oopx; height:1oopx;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%;)
#box3div:first-child( align-self:flex-start;)
#box3 div:last-child(align-self:flex-end;)
#box4 width:1oepx; height:1oopx; border:1px black solid; border-radius: 5px; display: flex;
justify-content:space-between;align-items:center:)
#box4 i( width:30%;height:30%; background:black; border-radius:50%;}
#box4( width:1oopx;height:1oopx;border:1px black solid;border-radius:5px; display:flex;
flex-wrap:wrap;}
#box4 div( width:1ee%;display:flex;justify-content: space-between;)
#box4 div:last-child( align-items: flex-end;)
#box4 i(display:block;width:30%;height:6%;background:black;border-radius:5o%;]
#box5{ width:1oopx; height:1oopx; border:1px black solid; border-radius:5px; display: flex;
flex-wrap:wrap;}
#box5 div width:ieo%; 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;}
#box5idisplay:block;width:30%;height:9o%;background:black;border-radius:50%;]
#box6( width:1oopx; height:1oepx; border:1px black solid; border-radius: 5px; display:flex;
flex-wrap:wrap}
#box6 divwidth:1oo%;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%；}

在这里插入图片描述



快捷识图 2022-12-24 20:39:28

<style>
*（margin:o;padding::}
#main( display:flex;]
#left(width:2o0px;height:2oepx;background:red;)
#center(flex:1;height:3oopx;background:yellow;)
#right(width:150px;height:2oopx;background:blue;}
</style>
</head>
<body>
<divid="main"
<divid="left"></div>
<divid="center"></div>
<divid="right"></div>
R/div
</body>

在这里插入图片描述

16、Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。（比表格功能强大）
在这里插入图片描述

1、grid-template-columns和grid-template-rows

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

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属性写在单个声明中。在这里插入图片描述

5、justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。在这里插入图片描述

6、justify-items和align-items

17、作用在grid子项上的CSS属性

在这里插入图片描述

<!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>Document</title>
    <style>
        .box{width: 300px;height:500px;border: 1px gray dotted;display: grid;
        grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(3,1fr);}
        
        .box div{background: rebeccapurple;border: 1px black solid;
        /*grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;grid-row-end: span 2;
        grid-column: 2/3;grid-row: 2/span 2;*/
        grid-area: 3/2/4/4;}/*第一个值是水平起始位置，第二个值是垂直起始位置，第三个值是水平结束位置，第四个值是垂直结束位置*/

        .box{width: 300px;height:500px;border: 1px gray dotted;display: grid;
        grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(3,1fr);}
        .box2 div{background: rebeccapurple;border: 1px black solid;}
        .box2 div:nth-child(2){justify-self: start;align-self: end;place-self: end start;}
    </style>
</head>
<body>
    <!--<div class="box">
        <div></div>
    </div>-->
    
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>