Web前端从入门到放弃第五周学习笔记-CSDN博客

本文链接：https://blog.csdn.net/lm_216416/article/details/127991822

Web前端从入门到放弃第五周学习笔记

四十四、b 标签与 i 标签
四十五、引用标签
四十六、iframe嵌套页面
四十七、br 标签与 wbr 标签
四十八、pre 标签与 code 标签
四十九、map 标签与 area 标签
五十、embed 与 object
五十一、audio 与 video
五十二、文字注解与文字方向
五十三、扩展 link 标签
五十四、扩展 meta 标签
五十五、HTML5 新语义化标签
五十六、Flex弹性盒模型
五十七、Grid网格布局

声明：本学习内容来自于千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套）！

四十四、b 标签与 i 标签

strong和em 都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。

区别在于，strong 和em是具备语义化的，而b和i是不具备语义化的。

四十五、引用标签

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

四十六、iframe嵌套页面

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

可以引入其他的html到当前html中显示。

主要是利用iframe的属性进行样式的调节。

在这里插入图片描述
应用场景:数据传输、共享代码，局部刷新、第三方介入等。

注：当 src 和 srcdoc 同时存在时，src会失效

四十七、br 标签与 wbr 标签

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

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

四十八、pre 标签与 code 标签

针对网页中程序代码的显示效果

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。

四十九、map 标签与 area 标签

定义一个客户端图像映射。图像映射(image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。

area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标。
usemap与 map中的name 形成映射

<body>
    <img src="./img/star.jpg" alt="" usemap="#star">
    <map name="star">
        矩形（对角坐标：横，纵）<area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" 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>
</body>

在这里插入图片描述

五十、embed 与 object

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

 <embed src="./img/flash.swf" type="">
        

<object>
   <param name="movie" value="./img/flash.swf">
</object>

五十一、audio 与 video

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

loop为循环播放 autoplay 为自动播放
 <audio src="./img/johann_sebastian_bach_air.mp3" controls loop autoplay></audio>
 <video src="./img/Intermission-Walk-in_512kb.mp4" controls></video>
    


<video>
        <source src="./img/Intermission-Walk-in.ogv"></source>
        <source src="./img/Intermission-Walk-in_512kb.mp4"></source></video>

五十二、文字注解与文字方向

ruby 标签定义 ruby 注释(中文注音或字符）， rt 标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文本方向。

   <style>
    	用CSS也可做到该效果
    span{ direction: rtl; unicode-bidi:bidi-override; }
    </style>
    
<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>


默认方向为 ltr  逆向为rtl
    <p>
        <bdo dir="rtl">爱神的箭</bdo>卡后端框架爱迪生
    </p>
    <p>
        <span>爱神的箭</span>卡后端框架爱迪生
    </p>
    
</body>

在这里插入图片描述

五十三、扩展 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">

五十四、扩展 meta 标签

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



功能型
主要为 IE浏览器以最高模式进行渲染<meta http-equiv="X-UA-Compatible" content="ie=edge">
刷新 3为秒数<meta http-equiv="refresh" content="3" url="">
缓存<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

五十五、HTML5 新语义化标签

header：页眉
footer：页脚
main：主体
hgroup：标题组合（可嵌入在 header 里）
nav：导航

注:header、 footer. main在一个网页中只能出现一次。

article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption ：描述图像或视频的标题部分
datalist：选项列表
details / summary ：文档细节/文档标题
progress / meter ：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本

<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section>
                <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                    <option value="around"></option>
                </datalist>
                <details open>//默认为闭合//
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="8"></progress>
                <meter min="0" max="100" value="80" low="10" high="60"></meter>
                <p>
                    今天是<time title="2-14">情人节</time>，街上人很多。
                </p>
                <p>
                    今天是<mark>情人节</mark>，街上人很多。
                </p>
            </section>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                    新水果篮子❤️高甜   
                                    <br>
                                    十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section></section>
        </article>
        <aside>

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

五十六、Flex弹性盒模型

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

<style>
  #parent{width: 300px;height:300px ; border: 1px black solid ;margin: 20px auto;display: flex;}
  #box{width: 150px;height: 50px;background: red;margin: auto;}
<style>

在这里插入图片描述

1.flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

在这里插入图片描述

2.flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。

**注：默认值为 nowrap ，若元素多的情况下会发生压缩至内容最小值再溢出
在这里插入图片描述

3.flex-flow

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

4.justify-content

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

注：在使用有空隙的属性时，若某行元素过多，则会自适应压缩后溢出，而溢出部分会换行再进行空隙操作

在这里插入图片描述

5.align-items

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

6.align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
在这里插入图片描述

7.作用再flex子项上的css属性

在这里插入图片描述

8.flex案例

骰子的点数

<style>
    #box1{ width:100px; height:100px; border:1px black solid; border-radius: 5px; 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:black; border-radius: 50%;}
    #box2 div:last-child{ 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-self: 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>
</head>
<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 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>

两列固定，一列自适应

<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>

五十七、Grid网格布局

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

在这里插入图片描述

1.grid-template-columns和grid-template-rows

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

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-contentlalign-content

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

在这里插入图片描述

6.作用在grid子项上的CSS属性

在这里插入图片描述

7.Grid案例

骰子的点数

<style>
    .box{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box div:nth-child(1){ grid-area: 2 / 2 / 3 / 3; }

    .box2{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box2 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box2 div:nth-child(2){ grid-area: 3 / 3 / 4 / 4; }

    .box3{ width:100px; height:100px; border:1px 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";
    }
    .box3 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box3 div:nth-child(2){ grid-area: a5; }
    .box3 div:nth-child(3){ grid-area: a9; }

    .box4{ width:100px; height:100px; border:1px 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; }

    .box5{ width:100px; height:100px; border:1px 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";
    }
    .box5 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box5 div:nth-child(2){ grid-area: a3; }
    .box5 div:nth-child(3){ grid-area: a7; }
    .box5 div:nth-child(4){ grid-area: a9; }
    .box5 div:nth-child(5){ grid-area: a5; }

    .box6{ width:100px; height:100px; border:1px 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";
    }
    .box6 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box6 div:nth-child(2){ grid-area: a3; }
    .box6 div:nth-child(3){ grid-area: a7; }
    .box6 div:nth-child(4){ grid-area: a9; }
    .box6 div:nth-child(5){ grid-area: a4; }
    .box6 div:nth-child(6){ grid-area: a6; }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

百度搜索风云榜

<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>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>