网站页面完善

最新推荐文章于 2024-06-02 15:15:42 发布

GJ_straysoul

最新推荐文章于 2024-06-02 15:15:42 发布

阅读量275

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/GJ_straysoul/article/details/128114734

版权

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>

在这里插入图片描述

引用标签

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="">aaaaa</abbr>ccccc
    </p>
</body>
</html>

在这里插入图片描述

iframe嵌套页面

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

<!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>
        iframe{width: 100%;height: 500px;}
    </style>
</head>
<body>
    <iframe srcdoc="hello world" src="https://uland.taobao.com" frameborder="1" scrolling="no"></iframe>
</body>
</html>

br与wbr

br表示换行操作
wbr表示软换行操作
提示：如果单词太长，或者担心浏览器会在错误的位置换行，可以使用wbr元素添加Word Break Opportunity（单词换行时机）

<!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>
        aaaaaaaaaaaaaaa <br> bbbbbbbbbbbbbbb
    </p>
    <p>
        cccccccccccccc<wbr>eeeeeeeeee<wbr>ddddddddddd
    </p>
</body>
</html>

在这里插入图片描述

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>

在这里插入图片描述

map与area

定义一个客户端图像映射。图像映射（image-map）只带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
给特殊图形添加链接，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.csdn.net/?spm=1010.2135.3001.4477" alt="">
    </map>
</body>
</html>

在这里插入图片描述

embed与object

都表示能嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器
给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="01.jpg" type="">
        <object data="" type="">
            <param name="movie" value="01.jpg">
        </object>
</body>
</html>

在这里插入图片描述

audio与video

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

文字注解与文字方向

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

<!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"> 二的后五日</bdo>狗急跳墙
    </p>
    <p>
        <span>二的后五日</span>狗急跳墙
    </p>
</body>
</html>

在这里插入图片描述

扩展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”>

<!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>
    <link rel="icon"type="/image/x-icon"href="http://www.mobiletrain.org/favicon.ico">
    <link rel="dns-prefetch"href="//static.360buyimg.com">
</head>
<body>
    
</body>
</html>

在这里插入图片描述

扩展meta标签

添加辅助信息
< meta name="description"content=“大连美食网精选”>
< 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”>

<!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">
    <meta http-equiv="refresh"content="3"url="">
    <meta http-equiv="expires"content="Wed,20 Jun 2019 22:33:00 GMT">
    <title>Document</title>
    <link rel="icon"type="/image/x-icon"href="http://www.mobiletrain.org/favicon.ico">
    <link rel="dns-prefetch"href="//static.360buyimg.com">
</head>
<body>
    
</body>
</html>

HTML5新语义化标签

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
header、footer、main在一个网页中只能出现一次
artcle：独立的内容
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>
                                eeeeee
                                <br>
                                fffffff
                            </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>

在这里插入图片描述

flex弹性盒模型

在这里插入图片描述

flex-direction

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

flex-wrap

控制子项整体单行显示还是换行显示
在这里插入图片描述

flex-flow

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

justify-content

决定主轴方向上子项的对齐和分布方式
在这里插入图片描述

align-items

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

<!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>
        /*#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>
</head>
<body>
    <div id="parent">
        <div id="box"></div>

    <!--<div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    <div id="box2">
        <div>1111222</div>
        <div>2111222</div>
        <div>3111222</div>
        <div>1111222</div>
        <div>2111222</div>
        <div>3111222</div>
        <div>1111222</div>
        <div>2111222</div>
    </div>

    <div id="box3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>-->
    
    <div id="box4">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

作用在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: goldenrod;}
        /*#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: goldenrod;}
        #box2 div:nth-child(2){background: gold;color: black;
        /*flex: 0 1 auto;flex-shrink: 0;*/}
        #box2 div:nth-child(1){align-self: flex-end;}
    </style>
</head>
<body>
    <!--<div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>-->

    <div id="box2">
        <div>1</div>
        <div>测试文字</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

Grid网格布局

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

gird-template-columns和gird-template-rows

.box{width: 300px;height:500px;border: 1px gray dotted;display: grid;
grid-template-rows: 100px auto 25%;grid-template-columns: 100px 100px 200px 100px;
grid-template-rows: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(3,1fr);}
.box div{background: rebeccapurple;border: 1px black solid;}

gird-template-areas和gird-template

gird-template是gird-template-rows，gird-template-columns和gird-template-areas属性的缩写

.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"1fr
"a2 a2 a3"1fr
"a2 a2 a3"1fr
/1fr 1fr 1fr;}
.box2 div{background: rebeccapurple;border: 1px 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;}

grid-column-gap和grid-row-gap

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

justify-items和align-items

justify-items网格水平呈现方式
align-items网格垂直呈现方式
在这里插入图片描述
.box3{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(3,1fr);
justify-items: start;align-items: center;}
.box3 div{background: rebeccapurple;border: 1px black solid;}

justify-content和align-content

justify-content网格水平分布方式
align-content网格垂直分布方式
place-content是justify-content和align-content缩写
在这里插入图片描述

    .box3{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template-rows: repeat(3,auto);grid-template-columns: repeat(3,auto);
    /*justify-items: start;align-items: center;*/
    justify-content:space-around;
    align-content: space-around;}
    .box3 div{background: rebeccapurple;border: 1px black solid;}

作用在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>