Web前端笔记记录（四）

已于 2023-06-26 09:35:02 修改
阅读量448 收藏
点赞数
分类专栏： html 文章标签： 前端
于 2022-11-25 17:39:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjnlovepy/article/details/128024477
版权

Web前端笔记记录（四）

112~125
184~197

strong与b；em与i

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

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

语义化：

有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取
有利于页面在不同设备上显示尽可能相同
有利于构建清晰的机构，有利于团队的开发、维护

i与b的应用场景

简化span的class，简化语言

引用标签

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

blockquote

"死而后己"一词出自诸葛亮的《出师表》
<blockquote>“凡是如是，难可逆见，臣鞠躬尽瘁，死而后已，至于成败利钝，非臣之明所能逆睹也。”</blockquote>

请添加图片描述

q

WWF的目标是<q>构建人与自然和谐共存的世界</q>

请添加图片描述

abbr

<abbr title="World Health Organization">WHO</abbr>成立于1948年。

请添加图片描述

address

网易北京公司
<address>地址：北京市海淀区西北旺东路10号院</address>

请添加图片描述

cite

<cite>资治通鉴</cite>由北宋司马光主编的一部多卷本编年体史书

请添加图片描述

iframe嵌套页面

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

可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式调节。

应用场景：数据传输、代码共享、局部刷新、第三方介入、钓鱼网站（非法的！！）等

请添加图片描述

br与wbr

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

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

so <br>you will be like them <br>abandon me ？

请添加图片描述

 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa so you will be like them abandonme<wbr>aaaaaaaaaaaaaaaaaa

请添加图片描述
请添加图片描述

pre与code

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

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

map与area

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

给特殊图形添加链接，area能添加的热区的形状：矩形（左上角和右上角坐标）、圆形（圆心坐标和圆半径）、多边形（每一个角的坐标，首尾连接）。

area元素的href属性定义区域的URL，shape属性来定义区域的形状，coords属性定义热区的坐标

embed和object

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

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

audio与video

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

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

loop:循环播放
autoplay：自动播放，不需要人为的点击播放

文字注解与文字方向

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

拓展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.360buying.com">

meta拓展

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="">//刷新网页，三秒之后跳转到url网址
<meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT">

html5新语义化标签

header ： 页眉
footer ： 页脚
main ： 主体
hgroup ： 标题组合（主标题、副标题）
nav ： 导航

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

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

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

detalist

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

    </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="b"></option>
                    <option value="bc"></option>
                    <option value="bcd"></option>
                    <option value="e"></option>
                    <option value="h"></option>
            </section>
        </article>
    </main>
</body>
</html>

请添加图片描述

details与summary

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

    </header>
    <main>
        <article>
            <section>
                <details>//在里面设置open则是注释文本默认打开状态（不添加是关闭状态）
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
            </section>
        </article>
    </main>
</body>
</html>

请添加图片描述

progress与meter

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

    </header>
    <main>
        <article>
            <section>
            <progress min="0" max="10" value="8"></progress>
            <meter min="0" max="100" value="35"></meter>
            </section>
        </article>
    </main>
</body>
</html>

请添加图片描述

区别：
1、样式上的区别
2、progres表示进度（加载），meter表示测量
3、meter后面可以加low和high，若当前的值在low和high之间则是绿色，超过high值则是黄色

flex弹性盒模型184·197

能够比较方便的做出居中块

请添加图片描述

<!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: 150px;height: 50px;background-color: red;margin: auto;}
    </style>
</head>
<body>
    <div id="parent">
        <div id="box">

        </div>
    </div>
</body>
</html>

请添加图片描述

flex-direction

flex-direction（要写在父容器上）用来控制子项整体布局方向，是从左往右还是从右往左，是从上到下还是从下往上

请添加图片描述

row

默认值，显示为行，方向为当前文档水平流方向，默认情况下是从左往右。

<!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;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

请添加图片描述

row-reverse

显示为行，但方向和flow属性值是反的

<!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;flex-direction: row-reverse;}
        #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>
</html>

请添加图片描述

column

显示为列

<!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;flex-direction: column;}
        #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>
</html>

请添加图片描述

column-reverse

显示为列，但方向和column属性值是反的。

<!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;flex-direction: column-reverse;}
        #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>
</html>

请添加图片描述

flex-wrap

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

请添加图片描述

nowrap

默认值，表示单行显示，不换行
（当子元素的宽度大于整体会自己调节，而不会显示设定的宽值，宽度到达最小值（刚好能放得下里面的内容）就会溢出）

请添加图片描述

请添加图片描述

wrap

宽度不足换行显示

<!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;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>
</html>

请添加图片描述

wrap-reverse

宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

<!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;flex-wrap: wrap-reverse;}
        #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>
</html>

请添加图片描述

flex-flow

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

justify-content

justify-content属性决定二零主轴方向上子项的对齐和分布方式

请添加图片描述

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在策州方向上的对齐方式。

请添加图片描述

stretch

默认值，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>
       
        #box{width:300px;height:300px;border: 1px black solid ;margin: 20px auto;display: flex;}
        #box div{width: 50px;background:red;}
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本测试文本测试文本测试文本测试文本</div>
    </div>
</body>
</html>

请添加图片描述

flex-start

表现为容器顶部对齐

<!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;justify-content: space-evenly;align-items: flex-start;}
        #box div{width: 50px;background:red;}
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本测试文本测试文本测试文本测试文本</div>
    </div>
</body>
</html>

请添加图片描述

flex-end

表现为容器底部对齐

<!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;justify-content: space-evenly;align-items: flex-end;}
        #box div{width: 50px;background:red;}
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本测试文本测试文本测试文本测试文本</div>
    </div>
</body>
</html>

请添加图片描述

center

表现为垂直居中对齐

<!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;justify-content: space-evenly;align-items: center;}
        #box div{width: 50px;background:red;}
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本测试文本测试文本测试文本测试文本</div>
    </div>
</body>
</html>

请添加图片描述

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

请添加图片描述

作用在flex子项上的CSS属性

请添加图片描述

Grid网格布局

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

Grid-template-columns和grid-template-rows

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

<head>
    <style>
        #div1{width: 400px;height: 400px;border: 1px solid black;display: grid;
        grid-template-rows: 1fr 1fr 1fr 2fr;
        grid-template-columns: 1fr 1fr 2fr;
        }
    </style>
</head>
<body>
    <div id="div1">
        <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>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>

请添加图片描述

<head>
    <style>
        #div1{width: 400px;height: 400px;border: 1px solid black;display: grid;
        grid-template-rows: .1fr .1fr .1fr .2fr;
        grid-template-columns: 1fr 1fr 2fr;
        }
    </style>
</head>
<body>
    <div id="div1">
        <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>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>

请添加图片描述

repeat

<head>
    <style>
        #div1{width: 400px;height: 400px;border: 1px solid black;display: grid;
        grid-template-rows: repeat(3,1r);
        grid-template-columns: repeat(4,1fr);
        }
    </style>
</head>
<body>
    <div id="div1">
        <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>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>

grid-template-areas与grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时 grid 子项只要使用 grid-area 属性指定隶属哪个区
grid-template 是 grid-template-rows ，grid-template-columns 和 grid-template-areas 属性的缩写

<head>
    <style>
        #div1{width: 400px;height: 400px;border: 1px solid black;display: grid;
        /* grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(4,1fr);
        grid-template-areas: 
        "a1 a1 a1 a1"
        "a2 a2 a3 a4"
        "a2 a2 a3 a4" */
        grid-template: 
        "a1 a1 a1 a1"1fr
        "a2 a2 a3 a4"1fr
        "a2 a2 a3 a4"1fr
       /1fr 1fr 1fr 1fr 
        ;
        }
        #div1 div{background-color: pink;border: 1px solid black;}
        #div1 div:nth-child(1){grid-area: a1;}
        #div1 div:nth-child(2){grid-area: a2;}
        #div1 div:nth-child(3){grid-area: a3;}
        #div1 div:nth-child(4){grid-area: a4;}

    </style>
</head>
<body>
    <div id="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

请添加图片描述

grid-column-gap 与 grid-row-gap 与 grid-gap

grid-column-gapa 和 grid-row-gap 属性是用来定义网格中网格间隙的尺寸

CSS grid-gap 属性是 grid-column-gap 和 grid-row-gap 属性的缩写

<head>
    <style>
        #div1{width: 400px;height: 400px;border: 1px solid black;display: grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(4,1fr);
        grid-template-areas: 
        "a1 a1 a1 a1"
        "a2 a2 a3 a4"
        "a2 a2 a3 a4";
        /* grid-row-gap: 10px;
        grid-column-gap: 20px; */
        grid-gap: 10px 20px;
        }
        #div1 div{background-color: pink;border: 1px solid black;}
        #div1 div:nth-child(1){grid-area: a1;}
        #div1 div:nth-child(2){grid-area: a2;}
        #div1 div:nth-child(3){grid-area: a3;}
        #div1 div:nth-child(4){grid-area: a4;}
    </style>
</head>
<body>
    <div id="div1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

</body>

请添加图片描述

justify-items 与 align-items

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

place-items 可以让 align-items 和 justify-items 属性写在单个声明中。
请添加图片描述

<head>
    <style>
    #div1{width: 400px;height: 400px;border: 1px solid black;display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(4,1fr);
    /* justify-items: start;
    align-items: center; */
    place-items: center center;}
    #div1 div{background-color: aqua;border: 1px solid black;}

    </style>
</head>
<body>
    <div id="div1">
        <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>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>

请添加图片描述

justify-content 与 align-content

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

类似于flex中的justify-content和align-content

请添加图片描述

<head>
    <style>
    #div1{width: 500px;height: 500px;border: 1px solid black;display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(4,100px);
    justify-content: space-between;
    align-content: space-around;}
    #div1 div{background-color: aqua;border: 1px solid black;}
    </style>
</head>
<body>
    <div id="div1">
        <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>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>

请添加图片描述

作用在grid子项上

请添加图片描述

grid-column 与 grid-row

<head>
    <style>
    #div1{width: 500px;height: 500px;border: 1px solid black;display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(4,1fr);
    }
    #div1 div{background-color: aqua;
    /* grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: span 2; */
    grid-column: 2 / 5;
    grid-row: 2/span 2;
    }
    </style>
</head>
<body>
    <div id="div1">
        <div></div>
    </div>
</body>

请添加图片描述

grid-area

<head>
    <style>
    #div1{width: 500px;height: 500px;border: 1px solid black;display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(4,1fr);
    }
    #div1 div{background-color: aqua;
    grid-area: 2/2/3/5;
    }
    </style>
</head>
<body>
    <div id="div1">
        <div></div>
    </div>
</body>

请添加图片描述

justify-self 与 align-self 与 place-self

<head>
    <style>
    #div1{width: 500px;height: 500px;border: 1px solid black;display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(4,1fr);
    }
    #div1 div{background-color: aqua;border: 1px solid black;}
    #div1 div:nth-child(6){justify-self: center;align-self: center;place-self: center center;}
    </style>
</head>
<body>
    <div id="div1">
        <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>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

请添加图片描述

优降宁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
音视频 FLV格式解析
baiiu
09-07 1534
格式介绍 概览 FLV是流媒体封装格式，我们可以将其数据看为二进制字节流。 总体上看，FLV包括文件头（File Header）和文件体（File Body）两部分，其中文件体由一系列的Tag及Tag Size对组成。 用UltraEdit打开FLV文件，如下图 1. 文件头File Header 46 4C 56 01 05 00 00 00 09 头部分由一下几部分组成 Signature(3 Byte)+Version(1 Byte)+Flags(1 Bypte)+DataOffset(4 B
【前端知识点】HTML5 浅谈 媒体标签<video><audio>
chaunceyw的博客
07-21 4807
html5播放器细谈，从大众自带浏览器 到 wechat和QQ以x5内核的浏览器，以及UC其他特殊的浏览器在此不再细谈：）当然也会分析iphone ios系统和Android手机系统的差别。【基本属性】video标签属性：src ：视频的属性，url地址 poster：视频封面，没有播放时显示的图片 preload：预加载|none|metadata（部分预加载）|auto。默认为auto auto
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3565
Web前端学习笔记（1）
HTML5新增标签
qq_25178609的博客
08-04 1847
一 关于html5 目的：用更简洁的html代码创建更多功能的网页，并让网页结构变得更加清晰明了，增加语义化的标签 优势：结构清晰，为开发人员节约时间，解决HTML/XHTML在各大浏览器之间存在的兼容性问题，将音视频，图像，动画等国际标准化。二 新标签 1 .article元素 <article>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，可以是来
HTML系列之多媒体视频标签 video
老__L的博客
02-13 2万+
本文主要介绍track、video标签。 多媒体视频标签 video
Web前端JavaScript面向对象编程
09-27
这个笔记是我在B站根据Mosh的JavaScript面向对象编程教学视频中学习并记录的，里面有我记录的知识点，自己写的代码，还有小部分的截图。大家可以在学习这个内容的时候看一下我的笔记进行参考一下。 视频链接：...
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
笔记记录分享-笔记记录分享网站-笔记记录分享网站源码-笔记记录分享网站java代码-基于Web的笔记记录分享网站设计与实现-代码
最新发布
02-01
笔记记录分享-笔记记录分享网站-笔记记录分享网站源码-笔记记录分享网站java代码-笔记记录分享网站设计与实现-基于springboot的笔记记录分享网站-基于Web的笔记记录分享网站设计与实现-笔记记录分享项目-笔记记录...
前端入门知识笔记01
09-19
前端入门初级知识，入门记录笔记，分为一.基础概念，二.web标准的构成，三．HTML标签，四.html基础结构标签，五．常用标签（记住标签的语义）
前端每日记录第一天.md
07-23
本人听课整理出来的笔记，学习是一个分享的过程，希望前端小白使用愉快。 按照时间顺序多加练习，前端小白也可以入门，努力吧，整理了一些自己认为比较重要的，有什么问题可私聊。
关于前端video标签视频无法拖动进度条快进问题(Django)
骑着哈哥去取经！！！
07-23 6363
关于前端video标签视频无法拖动进度条快进问题(Django)
DirectShow下的MediaType与VideoInfoHeader问题
fan2273的博客
11-28 2051
DirectShow Filter开发，Pin上的CMediaType问题。 VideoInforHeader和VideoInforHeader2的不同，和开发中需要注意的问题。
第五篇 HTML页面基本组成之 标签元素大杂烩
m0_66451927的博客
01-28 1099
这篇文章将根据页面的基本组成，补充一些标签元素，由于这些标签元素都比较容易理解，有些地方就不多做解释。提前说明：下面给出的代码都是放在<body></body>标签里的。 二、<header> 标签 概念：<header>标签定义文档或者文档的一部分区域的页眉。<header> 元素作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个 <header> 元素。 注意：<header> 标签不能被...
【flv video】解析 VIDEO TAG HEADER 获取 avcHeader并解析
突围
10-08 413
拿到 TAG DATA 后，先解析11 个字节的 TAG HEADER , 读取第一个字节：获取frametype和codecid 读取第一个字节 VIDEO HEADER长度为1个字节 == | FrameType(4) | CodecID(4) | 根据codeid 判断是否为AVC类型的视频帧 avcVideoPacket struct { //本字段在codecID=7(AVCVIDEOPACKET)时有效 VideoCodec..
video标签_meta referrer与页面内video标签referrer
weixin_39822629的博客
11-24 1786
近在做一个播放抖音视频的网页中遇到一个问题,抖音视频的url直接在浏览器中打开是没有问题的,直接打开本地的.html文件也是可以正常播放视频的,但访问服务器上的请求过来的页面就无法播放视频，浏览器里按F12查看network发现video标签里的src请求视频资源时报403 Forbiddn 错误。直接访问链接的请求头：正确的请求头出错的请求头：错误的请求头经过对比发现错误的请求头中多了个Refe...
移动端H5的Video标签无法播放在线视频的问题
热门推荐
做GIS梦的人
10-11 3万+
在做一个视频项目时，在android和ios使用video标签播放视频，均失败。代码如下： 最后经过长时间测试终于解决 你的浏览器不支持H5播放器 这样之后，在ios和android都可以播放了
web前端零基础入门5
qq_62512326的博客
07-04 213
我们在这里写了六个标题，分为了不同级别。重要性递减，h1最重要，h6最不重要。h1的重要性仅次于title。所以一般情况下，页面只会出现一个h1.而且一般情况下，只会用到h1–h3，h4–h6很少用。hgroup标签就是用来给标题分组，可以将一组相关的标题分在一起。 em标签表示的是对语调的加重。是行内元素，不会独占一行。（inline element） 在这里我们将今天天气真不错里面的真强调，会发现，在网页中的真就有一点倾斜的角度。strong也是强调，但是它是强调内容的。也是行内元素在网页中HTML专门
web前端开发笔记vscode
10-26
Web前端开发笔记是一款VS Code插件，它提供了一些常用的Web前端开发知识点和技巧的笔记，包括HTML、CSS、JavaScript、React等。这个插件可以帮助开发者快速查找和学习Web前端开发的知识点，提高开发效率。 该插件的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优降宁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值