web前端学习第五周

最新推荐文章于 2024-05-06 09:44:33 发布
最新推荐文章于 2024-05-06 09:44:33 发布
阅读量455 收藏
点赞数
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shelter_____/article/details/127991783
版权

一、标签

1、strong与b、em与i

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

2、引用标签

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

<p>
        <abbr title=""></abbr>
</p>

3、iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
在这里插入图片描述
应用场景：数据传输、共享代码、局部刷新、第三方介入等。

4、br与wbr标签

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

 <p>
        isuhfuiawhfwuifhuiahfuii suihfiu<wbr>hfwuihfui<wbr>hfviruh bhedfbnvfdbvkaeiuorawjkn
    </p>

5、pre标签与code标签

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

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

6、map标签与area标签

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

<img src="" alt="" usemap="#star">
    <map name="star">
        <area shape="rect" coords="123 123 321 321" href="#" alt="">矩形，coords左上角和右上角坐标
        <area shape="circ" coords="100 100 50" href="#" alt="">圆形，coords中心点坐标和半径
        <area shape="poly" coords="111 111 222 222 333 333 444 444 555 555" href="#" alt="">多边形，coords各点坐标
    </map>

7、embed与object标签

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

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

<body>
    <embed src="./" type="">
    <object>
        <param name="movie" value="./">
    </object>
</body>

8、audio与video标签

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

为了能够支持多个备选文件的兼容支持，可以配合source标签。
loop：循环
autoplay：自动播放

<body>
    <audio src="./" controls loop autoplay></audio>
    <video>
        <source src="./.mp4">
        <source src="./.ogv">
    </video>
    <div style="position: relative;height: 300px;overflow: hidden;">
        <video style="min-height: 100%;min-width: 100%;" loop>
            <source src="./mp4" type="video/mp4">
            <source src="./webm" type="video/webm">
        </video>
    </div>
</body>

9、文字注解与文字方法

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

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

<style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">创作中心</bdo>创作中心
    </p>
    <p>
        <span>创作中心</span>创作中心
    </p>
</body>

10、扩展link标签

1、添加网址标题栏前的小图标：

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

2、加快访问速度

<link rel="dns-prefetch" href="远程IP地址">

11、扩展meta标签

1、定义可描述的内容及辅助信息

 <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">

2、功能
渲染模式、刷新、缓存

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3" url="">
    <meta http-equiv="expires" content="">

二、HTML5新语义化标签

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

<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>

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

<article>
        <section>
            <figure>
                <img src="" alt="">
                <figcaption>标题</figcaption>
            </figure>
        </section>
        <section></section>
        <section></section>
    </article>
    <aside></aside>

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

        <section>
            <input type="text" list="elems">
            <datalist id="elems">
                <option value="a"></option>
                <option value="ab"></option>
                <option value="abc"></option>
                <option value="abbr"></option>
                <option value="apple"></option>
            </datalist>
            <details>
                <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="1-1">元旦</time>
            </p>
            <p>
                今天是<mark>元旦</mark>
            </p>
        </section>

三、Flex弹性盒模型

在这里插入图片描述

1、flex-direction

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

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-direction: row;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

2、flex-wrap

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

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;flex-wrap: wrap;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

3、flex-flow

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

4、justify-content

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

#box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;flex-wrap: wrap;}

5、align-items和align-content

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在测轴方向上的对齐方式。
在这里插入图片描述
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
在这里插入图片描述

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;justify-content: space-evenly;align-items: flex-start;align-content: flex-end;flex-wrap: wrap;}
        #box div{width: 50px;background: red;}
    </style>

6、作用在flex子项上的css属性

在这里插入图片描述

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px; background: red;}
        #box div:nth-child(2){order: 1;}
        #box div:nth-child(5){order: -1;}
    </style>

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px; background: red;}
        #box div:nth-child(2){background: yellow;color: black;flex-grow: 1;}
        #box div:nth-child(5){background: blue;color: black;flex-grow: 1;}
    </style>

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px; background: red;}
        #box div:nth-child(2){background: yellow;color: black;flex-shrink: 0;}
</style>

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px; background: red;}
        #box div:nth-child(2){background: yellow;color: black;width: 100px;flex-basis: 150px;}
</style>

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;align-items: center;}
        #box div{width: 50px;height: 50px; background: red;line-height: 50px;text-align: center;}
        #box div:nth-child(2){background: yellow;color: black;align-self: center;}
        #box div:nth-child(1){align-self: flex-end;}
    </style>

7、骰子

<!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>
        #box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 10px;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: 10px;display: flex;justify-content: space-evenly;align-items: center;}
        #box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}

        #box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 10px;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: 10px;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: 10px;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: 10px;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>
</body>
</html>

8、自适应

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

四、Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
在这里插入图片描述

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

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

<style>
        #box{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
        /* grid-template-columns: 100px auto 30%;
        grid-template-rows: 100px 100px 100px; */
        /* grid-template-columns:1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr; */
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
        
        }
        #box div{background: red ;border: 1px black solid;}
    </style>
</head>
<body id="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>
</body>

2、grid-template-areas和grid-template

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

grid-template是grid-template-columns、grid-template-rows和grid-template-areas属性的缩写。

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

grid-template: 
        "a1 a1 a1"1fr
        "a2 a2 a3"1fr
        "a2 a2 a3"1fr
        /1fr 1fr 1fr 
        ;

3、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;

4、justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。
在这里插入图片描述

 #box{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
        justify-items: end;
        align-items: end;

5、justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。

place-content可以让align-content和justify-content属性写在一个CSS声明中。
在这里插入图片描述

#box{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
        grid-template-columns:repeat(3,auto);
        grid-template-rows: repeat(3,auto);
        /* justify-content: space-between;
        align-content: space-between; */
        place-content: space-between space-between;

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

在这里插入图片描述

<style>
#box{width: 300px;height: 300px;border:1px gray dotted ;display: grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
        }
        #box div{background: red ;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 1;
        }
        </style>

grid-area: 2/3/4/4;/*第一个值是水平的起始位置，第二个值是垂直的起始位置，第三个值是水平的结束位置，第四个值是垂直的结束位置*/
        }

#box div:nth-child(2){justify-self: start;align-self: end;place-self: end start;}

7、grid案例：骰子

<!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: 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: a6}
        .box6 div:nth-child(6){grid-area: a4}
    </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>
</body>
</html>
Shelter_____
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端第三版习题参考答案_.docx.docx
04-04
web前端开发技术--HTML、CSS、JavaScript第三版聂常红编习题参考答案
【web前端开发】
m0_73747560的博客
11-25 286
定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的另一幅图像。area元素的href属性定义区域内的url，shape属性来定义区域的形状，coords属性定义热区的坐标。strong和em都是表示强调的标签，变现形态为文本加粗和斜体。wbekit 双内核渲染，让ie浏览器用更高级别进行渲染，规定时间刷新，规定时间缓存。shape（形状）：rect–矩形，circ–圆形，poly–多边形。区别：strong和em是具备语义化的，而b和i是不具备语义化的。
从零开始web前端（常用html标签）
wangfengqichen的博客
04-28 1424
从零开始web前端，入门html部分常用标签。
web大前端之旅Ⅴ
Sodapease的博客
11-23 619
填坑，HTML5新语义化标签、flex布局
Web前端4
m0_74232590的博客
11-18 766
Web前端学习
layer弹出层框架alert与msg详解
欲寄彩笺兼尺素，山高水阔知何处
09-18 4万+
layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。  键: 值 描述
web前端初级.pdf
05-23
Web 前端开发职业技能标准串讲教案初级，内共有四篇：第一篇web页面制作基础，第二篇html5和css3开发基础与应用，第三篇JavaScript程序设计，第四篇轻量级框架开发应用。
web前端实验一,第一次htmi5页面
12-22
hello hord页面，简易文字排版，meta标记、body标记属性使用，按钮加弹窗功能
web前端第一阶段视频教程
07-22
web前端第一阶段视频教程目录HTML 部分webstrom 的常用配置及快捷键什么是 HTML. DTD 文档声明基本标签行内元素与块元素请求响应模型Frameset 框架集表格布局页面中常见的图像格式HTML 实体字符表单HTML5 中的 ...
Web前端设计与开发技术课件第5章精美内容网页的制作.pptx
11-13
Web前端设计与开发技术课件第5章精美内容网页的制作.pptx
z-index的使用小结
runner_123的博客
10-23 3万+
1、z-index定义 z-index 属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 2、使用 （1）必须在定位元素（position:relative/absolute/fixed/sticky）上才有效 （2） 可以有负值 （3）不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染. 3、z-index不起作用的...
z-index不起作用的大坑
热门推荐
瞬间空白的博客
08-01 8万+
话说好久就没有更新博客了，今天为了装一把，差点没把自己装进去。。。以后还是低调一点好，哈哈，话不多说，直奔主题。 今天遇到的就是z-index不起作用的问题。一个后台小哥不知道抽什么疯，写元素覆盖偏不让用absolute，搞的我之后废了9牛二虎之力写了一下，问题描述是这样的，  一对兄弟节点,insert和parent，parent有两个子节点subtop和subbottom，展现的结果是想让
html的strong标签是什么意思,Strong标签和B标签怎么用?区别有哪些
weixin_30801745的博客
07-02 1万+
Strong和b是HTML里常见的标签，它们都有一个共同点就是加粗，但是用法缺是不相同的，在做网站的建设的时候，经常会遇到B标签和strong标签，而这两种标签的作用都是对自己加粗，起到一个强调性的作用，但是很多人都会将这两个标签看作为一个标签，那么B标签和strong标签有何区别?对优化有哪些影响?我们和德州SEO一起来了解下：Strong和b标签是什么Strong和b标签都是HTML的标签代码...
strong标签简介
qq_26473055的专栏
03-18 1516
标签和 标签" href="http://www.w3school.com.cn/tags/tag_em.asp"> 标签一样，用于强调文本，但它强调的程度更强一些。 浏览器通常会以不同于 标签的方式来显示 标签中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个标签区分开来了。 如果常识告诉我们应该较少使用 标签的话，那么 标签出现的次数应该更少。
Web前端开发——HTML之HTML标签（Ⅵ）语义化 em、strong、dl、dt、dd、
wq_ocean_的博客
02-01 842
目录 1. Web语义化 2. em和strong标签 2.1 测试代码 2.2 效果图 3. 自定义列表dl、列表项dt、 描述dd 3.1 测试代码 3.2 效果图 1. Web语义化 让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容 2. em和strong标签 2.1 测试代码 <!DOCTYPE html> <html la...
b和strong（i和em)标签的区别
qq_40944918的博客
07-11 1178
b和strong（i和em)标签的区别? b标签是一个实体标签，它所包围的字符被设为bold（粗体)，而strong标签是一个语义标签，作用是加强字符的语义 em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。 W3School 经常对重要的术语使用 em 标签。em 标签可以用来把这些名称和其他斜体字区别开来。 WEB标准提...
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1637
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1081
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
前端Vue 后端FastApi 跨域 CORS
最新发布
weixin_44656422的博客
05-06 278
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
web前端开发技术第二版代码
11-11
《Web前端开发技术第二版代码》是一本涵盖了前端开发领域的技术知识和实践经验的图书。该书包含了HTML、CSS、Javascript等前端开发的基础知识和最新的技术趋势。在书中，作者详细介绍了如何利用HTML5和CSS3创建响应...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值