KZero's Blog

Accumulation record

HTML标签

Posted on In Views: Valine:

整理html标签

常用标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!-- div和span盒子 -->
<!-- div 用来布局，一行只能放一个 大盒子 -->
<!-- 可设置宽高 -->
<div></div>
<!-- span用来布局，一行可以放多个 小盒子 -->
<!-- 宽高随内容大小改变 -->
<span></span>

<!-- 标题标签 h1～h6 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!-- 段落标签 -->
<p></p>

<!-- 换行标签 -->
<br>

<!-- 水平线标签 -->
<hr>

<!-- 图像标签 -->
<!--  alt替换文本 图片无法加载，代替图片显示的文字 -->
<img href="./logo.png" alt="logo"></img>
<!-- title提示文本 鼠标放在图像上，显示的文字 -->
<img src="./logo.png" title="logo">

<!-- 超链接标签 -->

<!-- target 网页打开方式 -->
<!-- self（默认）当前窗口打开 -->
<a href="https://www.baidu.com" target="_self">_self</a>
<!-- blank新窗口打开 -->
<a href="https://www.baidu.com" target="_blank">_blank</a>
<!-- 跳出框架 -->
<!-- <a href="https://www.baidu.com" target="_top">_top</a> -->

<!-- 外部链接 -->
<a href="https://www.baidu.com"></a>
<!-- 内部链接 -->
<a href="./1 HTML结构.html"></a>
<!-- 空链接：# -->
<a href="#"></a>
<!-- 下载链接：地址链接是 文件.exe 或者是 zip 等压缩包形式 -->
<a href="img.zip">下载文件</a>
<a href="https://www.baidu.com"><img src="img.jpg" alt=""></a>

<!-- 锚点定位 -->
<a href="#mao">锚点定位</a>
<h1 id="mao">mao</h1>

<a href="./3 文本格式化标签.html#code">跳转其他页面，再锚点定位</a>

<!-- 发送邮件 -->
<a href="mailto:收件人邮箱?Subject=发送邮件主题">发送邮件</a>
<a href="mailto:收件人邮箱?cc=邮箱抄送&bcc=邮箱密送&subject=邮件主题&body=邮件内容" target="_top">发送内容丰富的邮件</a>

文本格式化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- 文本格式化标签  -->
<b>粗体</b>
<strong>加粗（语义更强烈）</strong>
<i>斜体</i>
<em>斜体（语义更强烈）</em>
<u>下划线</u>
<ins>下划线（语义更强烈）</ins>
<s>删除线</s>
<del>删除字（语义更强烈）</del>
<sup>上标</sup>
<sub>下标</sub>
<small>小号字</small>

<!-- 预格式文本：可以对空格和空行进行控制 -->
<pre>
    for i = 1 to 10
        print i
    next i
</pre>

<!-- 计算机输出 -->
<code>计算机代码</code>
<kbd>键盘码</kbd>
<samp>计算机代码样本</samp>
<var>变量</var>

<!-- 定义地址 -->
<address>定义地址</address>

<!-- 缩写 -->
<abbr title="abbr标签是定义缩写">文字缩写</abbr>

<!-- 文本方向 -->
<bdo dir="rtl">文字方向</bdo>

<!-- 引用 -->
<blockquote>长引用</blockquote>
<q>短的引用语</q>

<!-- 定义作品的标题 -->
<cite>定义引用</cite>
<dfn>定义项目</dfn>

网站TDK三大标签SEO优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网站TDK三大标签SEO优化 -->
    <!-- SEO（search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。 -->
    <!-- SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。 -->
    <!-- 页面必须有三个标签用来复合SEO优化 -->
    <!-- 三大标：title、description、keyword -->

    <!-- 1、title 网站标题 -->
    <!-- title 具有不可替代性，是页内第一个重要标签，是搜索引擎了解网页的入口和网页主题归属的最佳判断点。 -->
    <!-- 建议：网站名（产品名）- 网站的介绍（尽量不要超过30个汉字） -->
    <!-- 例如： -->
    <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- - 小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站 -->

    <!-- 2、description 网站说明 -->
    <!-- 简要说明我们网站主要是做什么的。 -->
    <!-- 我们提倡，description作为网站的总体业务和主题概括，多采用"我们是..."、"我们提供..."、"xxx网作为"、"电话：010..." 之类语句。 -->
    <!-- 例如： -->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <!-- <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持." /> -->

    <!-- 3、Keywords 关键词 -->
    <!-- keywords 是页面里面的关键词，是搜索引擎的关注点之一。 -->
    <!-- keywords 最好限制为6～8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式。 -->
    <!-- 例如： -->
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
    <!-- <meta name="keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城" /> -->

    <!-- 所有链接默认的打开方式 -->
    <base href="" target="_blank">

    <!-- 定义文档与外部资源之间的关系 -->
    <link rel="stylesheet" href="">

    <!-- 定义内部样式 -->
    <style></style>

    <!-- meta标签：描述一些基本的元数据 -->
    <!-- 定义网页作者 -->
    <meta name="author" content="Runoob">
    <!-- 每30秒刷新当前页面 -->
    <meta http-equiv="refresh" content="30">
</head>

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<body>
    <!-- form表单域 -->
    <form action="url地址" method="提交方式" name="表单域名称">
        <!-- url地址：指定接收并处理表单数据的服务器程序的url地址 -->
        <!-- 提交方式：get/post 设置表单数据的提交方式，其取值为get或post -->
        <!-- name：表单域名称，区别每个不同的表单 -->

        <!-- 表单元素三大标签 input表单元素 select下拉表单元素 textarea文本域表单元素 -->

        <ul>
            <!-- input表单元素 -->
            <!-- 文本框 -->
            <li>用户名：<input type="text" name="username" value="username"></li>

            <!-- 密码框 -->
            <!-- maxlength 限制最大长度 -->
            <li>密码：<input type="password" name="psd" value="password" maxlength="6"></li>

            <!-- 单选按钮 -->
            <!-- checked="checked" 该选项默认选中 -->
            <li>性别：男<input type="radio" name="sex" value="man"> 女 <input type="radio" name="sex" value="woman"
                    checked="checked"></li>

            <!-- 复选框 -->
            <!-- checked="checked" 该选项默认选中 -->
            <li>爱好：游泳<input type="checkbox" name="hobby" value="swimming"> 户外<input type="checkbox" name="hobby"
                    value="outdoor"> 代码<input type="checkbox" name="hobby" value="code" checked="checked"></li>

            <!-- 提交按钮 -->
            <li><input type="submit" value="提交按钮"></li>

            <!-- 重置按钮 -->
            <li><input type="reset" value="重置按钮"></li>

            <!-- 定义按钮  结合js使用-->
            <li><input type="button" value="获取验证码"></li>

            <!-- 图片按钮 -->
            <li><input type="image" src="" alt="" value="图片按钮"></li>

            <!-- 文件域 -->
            <li>上传文件：<input type="file"></li>

            <!-- label标签 -->
            <li>
                <label for="username">用户名：</label><input type="text" id="username">
                <label for="man">男</label>
                <input type="radio" id="man">
                <label for="woman">女</label>
                <input type="radio" id="woman">
            </li>

            <!-- select下拉表单  -->
            <!-- optgroup 下拉列表选项 -->
            <!-- optgroup 定义选项组 -->
            <li>
                地区：
                <select name="" id="">
                    <optgroup label="福建">
                        <option value="fz">福州</option>
                        <option value="xm">厦门</option>
                        <option value="sm" selected="selected">三明</option>
                    </optgroup>
                    <optgroup label="行政特区">
                        <option value="am">澳门</option>
                        <option value="xg">香港</option>
                        <option value="tw">台湾</option>
                    </optgroup>
                </select>
            </li>

            <!-- textarea文本域 -->
            <!-- cols="30" 每行30个字符 rows="6" 显示6行 实际开发中不会使用，都是使用css来改变大小 -->
            <li><textarea name="" id="" cols="30" rows="6">这里是文本域</textarea></li>
        </ul>

        <!-- 从表单发送邮件 -->
        <form action="MAILTO:收件人邮箱" method="post" enctype="text/plain">
            Name: <input type="text" name="name"><br>
            E-mail: <input type="text" name="email"><br>
            <input type="submit" value="提交">
        </form>

        <!-- HTML5新增 -->

        <!-- 预先定义的输入控件选项列表 -->
        预先定义的输入控件选项列表
        <input list="关系名">
        <datalist id="关系名">
            <option value="1">
            <option value="2">
            <option value="3">
        </datalist>

        <!-- 带边框和标题的表单 -->
        <!-- fieldset 表单边框 -->
        <!-- legend 表单标题 -->
        <form action="">
            <fieldset>
                <legend>标题</legend>
                Name: <input type="text" size="10"><br>
                E-mail: <input type="text"><br>
            </fieldset>
        </form>

        <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
            <input type="range" id="a" value="50">+<input type="number" id="b" value="50">=<output name="x"
                for="a b"></output>
        </form>

        <form action="">
            <!-- HTML5新增input类型属性 -->
            <ul>
                <li>手机号码：<input type="tel" name="" id=""></li>
                <li>数字类型：<input type="number" name="" id=""></li>
                <li>颜色选择表单：<input type="color" name="" id=""></li>
                <li>搜索框：<input type="search"></li>
                <li>Email类型：<input type="email" name="" id=""></li>
                <li>URL类型：<input type="url" name="" id=""></li>
                <li>区域滑块<input type="range"></li>
                <li>日期（含年月日）类型：<input type="date" name="" id=""></li>
                <li>月类型：<input type="month" name="" id=""></li>
                <li>周类型：<input type="week" name="" id=""></li>
                <li>时间类型：<input type="time" name="" id=""></li>
                <li>时间类型：<input type="datetime" name="" id=""></li>
                <li> <input type="submit" value="提交"></li>
            </ul>
        </form>

        <form action="">
            <!-- HTML5新增input表单属性 -->
            
            <!-- required="required" 表单拥有该属性表示其内容不能为空，必填。 -->
            <!--  placeholder="提醒文本" 占位符，表单的提示信息，存在默认值将不显示。 -->
            <!-- autofocus="autofocus" 自动聚焦属性，页面加载完成自动聚焦到指定表单 -->
            <input type="search" name="" id="" required="required" placeholder="提示文本" autofocus="autofocus" require>

            <!-- 当用户在字段开始键入时，浏览器基于之前键入过当值，应该显示出在字段中填写当选项。 -->
            <!-- 简单来说：是否记录输入过的值 -->
            <!-- 默认已经打开，如autocomplete="on"，关闭autocomplete="off"需要放在表单内，同时加上name属性，同时提交。 -->
            <input type="text" autocomplete="on" name="conten">
            <input type="text" autocomplete="off" name="conten"">
    
            <!-- multiple=" multiple" 可以多选文件提交 -->
            <!-- 默认只能选一个文件 -->
            <input type="file" name="" id="">
            <!-- 可以多选文件提交 -->
            <input type="file" name="" id="" multiple="multiple">

            <input type="submit" value="提交">
        </form>
    </form>
</body>

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            /* 合并边框模型 */
            /* border-collapse: collapse; */
            /* 单元格与边框的距离 */
            /* border-spacing: 0; */
            border: 1px solid deeppink;
        }
        td {
            border: 1px solid deeppink;
        }
    </style>
</head>
<body>
    <!-- table表格标签 -->
    <!-- cellpadding：单元格内容与边框的距离 -->
    <!-- cellspacing：单元格直接的距离 -->
    <table cellpadding="10px" cellspacing="2px">
        <caption>表格标题</caption>
        <!-- 表格头部区域 -->
        <thead>
            <!-- tr表行 -->
            <tr>
                <!-- th 表头 -->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!-- 表格主体区域 -->
        <tbody>
            <tr>
                <!-- td 单元格 -->
                <td>xx</td>
                <td>女</td>
                <td>22</td>
            </tr>
            <tr>
                <td>xx</td>
                <td>男</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    <!-- 合并单元格 -->
    <!-- rowspan 跨行合并 -->
    <!-- colspan 跨列合并 -->
    <table>
        <caption>表格标题</caption>
        <tr>
            <td rowspan="2">demo</td>
            <td>demo</td>
            <td>demo</td>
        </tr>
        <tr>
            <td>demo</td>
            <td>demo</td>
        </tr>
        <tr>
            <td>demo</td>
            <td colspan="2">demo</td>
        </tr>
    </table>
</body>
</html>

列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            /* 圆点无序列表 */
            list-style-type: disc;
            /* 圆圈无序列表 */
            list-style-type: circle;
            /* 正方形无序列表 */
            list-style-type: square;
        }
    </style>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li>水果</li>
        <li>蔬菜</li>
    </ul>
    嵌套无序列表1
    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
            </ul>
        </li>
        <li>2</li>
    </ul>
    嵌套无序列表2
    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3
                    <ul>
                        <li>1.3.1</li>
                        <li>1.3.2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>2</li>
    </ul>
    <!-- 有序列表 -->
    默认有序列表
    <ol>
        <li>苹果</li>
        <li>梨子</li>
    </ol>
    大写字母列表
    <ol type="A">
        <li>苹果</li>
        <li>梨子</li>
    </ol>
    小写字母列表
    <ol type="a">
        <li>苹果</li>
        <li>梨子</li>
    </ol>
    罗马数字列表
    <ol type="I">
        <li>苹果</li>
        <li>梨子</li>
    </ol>
    小写罗马数字列表
    <ol type="i">
        <li>苹果</li>
        <li>梨子</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>福建</dt>
        <dd>福州</dd>
        <dd>厦门</dd>
    </dl>
    <!-- li和dt、dd里面可以放任何标签 -->
</body>
</html>

iframe框架

1
2
3
4
5
6
<!-- frameborder="0" 移除边框 -->
<iframe src="https://blog.kzero.vip" frameborder="0"></iframe>

<!-- 使用iframe来显示目标链接页面 -->
<iframe src="" frameborder="0" name="关系名"></iframe>
<a href="https://blog.kzero.vip" target="关系名">使用iframe来显示目标链接页面</a>

绝对路径/相对路径

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 相对路径：当前位置上一级或下一级 -->
<!-- 当前路径 -->
<img src="./" alt="">
<!-- 上级路径 -->
<img src="../" alt="">
<!-- 下级路径 -->
<img src="./xxx/xxx" alt="">

<!-- 绝对路径：是从根目录到当前目录全程路径 -->
<!-- 从盘符到当前位置  /Users/kzero/Pictures/Logo -->
<a href="/Users/kzero/Pictures/Logo/logo2.jpg"></a>
<!-- 网站 https://www.mi.com/index.html -->
<a href="https://www.mi.com/index.html"></a>

HTML5 语义化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<body>
    <!-- HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 -->
    <!-- 这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 -->
    <!-- 声明：新特性增加了很多，但是我们专注于开发常用的新特性。 -->

    <!-- 以前布局，基本用div来做。div对于搜索引擎来说，是没有语义化的。 -->
  
    <!-- 注意： -->
    <!-- - 这些语义化标准主要是针对搜索引擎的 -->
    <!-- - 正在这些新标签页面中可以使用多次 -->
    <!-- - 在IE9中，需要把这些元素转换为块级元素 -->
    <!-- - 其实，移动端更喜欢使用这些标签（因为移动端没有兼容性的问题） -->
    <!-- - HTML5还增加了很多其他标签 -->
  
    <!-- HTML5新增语义结构元素 -->
    <header>头部</header>
    <nav>导航</nav>
    <main>主体</main>
    <aside>侧边栏</aside>
    <section>定义文档某个区域</section>
    <article>定义文章</article>
    <footer>尾部区域</footer>
    <!-- HTML5新增语义元素 -->
    <figure>
        用于存放图像和代码等
        <img src="" alt="">
        <figcaption>元素标题</figcaption>
    </figure>
    <input type="">
    <div class="box1">
        <header>头部标签</header>
        <main>
            <nav>导航标签</nav>
            <aside>侧边栏标</aside>
            <article>内容标签
                <section>定义文档某个区域</section>
                <section>定义文档某个区域</section>
            </article>
        </main>
        <footer>尾部标签</footer>

    </div>
</body>

多媒标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<body>
    <div class="box1">
        <!-- HTML5新增的多媒体 -->


        <!-- 1、音频标签 -->
        <audio src="./media/灰澈 - 星萤火.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
        <!-- 音频属性 -->
        <!-- src="url" 音频地址 -->
        <!-- autoplay="autoplay 是否自动播放 -->
        <!-- controls="controls" 显示控件 -->
        <!-- loop="loop" 循环播放 -->

        <!-- 兼容性写法（了解下，一般使用mp4就可以了）：mp4格式>ogg格式>您的浏览器不支持Video标签。  -->
        <!-- <audio controls>
            <source src="music.mp4" type="audio/mpeg">
            <source src="music.ogg" type="audio/ogg">
            您的浏览器不支持audio标签。
        </audio> -->


        <!-- 2、视频标签 -->
        <!-- 视频标签只支持：mp4、webm、ogg -->
        <!-- 使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。 -->
        <!-- 视频标签 -->
        <!-- <video src="./media/mi10.mp4" controls="controls"></video> -->

        <!-- video属性 -->
        <!-- autoplay="autoplay" 是否自动播放 -->
        <!-- IE 和 新IE（Edge）可以直接使用autoplay="autoplay"播放，谷歌禁用了 -->
        <video src="./media/mi10.mp4" autoplay="autoplay"></video>
        <!-- 因为谷歌浏览器禁用了，谷歌考虑到用户使用手机打开网页，忽然播放比较大大视频会消耗大量大流量 -->
        <!-- 谷歌游览器 和 其他 浏览器需要添加 muted="muted" ，-->
        muted="muted" 静音播放
        <video src="./media/large.mp4" autoplay="autoplay" muted="muted"></video>

        controls="controls" 向用户显示播放
        控件
        <video src="./media/mi10.mp4" controls="controls"></video>

        loop="loop" 循环播放
        <!-- loop="1" 循环一次 -->
        <!-- loop="-1" 无限循环 -->
        <video src="./media/mi9.mp4" autoplay="autoplay" loop="loop" class="video-w-h"></video>

        poster="imgurl" 加载等待的画面图片
        <video src="./media/mi9.mp4" controls="controls" poster="./media/mi9.jpg" class="video-w-h"></video>

        设置宽高
        <video src="./media/mi9.mp4" controls="controls" class="video-w-h"></video>

        <!-- preload="auto" （预先加载视频） -->
        <!-- preload="none" （不应加载视频） -->
        <!-- 是否预先加载（如果有autoplay就可以忽略该属性） -->
        <video src="./media/mi9.mp4" preload="auto" loop="loop" class="video-w-h"></video>


        <!-- 兼容性写法（了解下，一般使用mp4就可以了）：mp4格式>ogg格式>您的浏览器不支持Video标签。  -->
        <!-- <video width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            您的浏览器不支持Video标签。
        </video> -->

        video总结：
        1、最好用mp4格式这样保证大部分浏览器都支持
        2、重点记住：
        - autoplay="autoplay" 是否自动播放
        - muted="muted" 静音播放
        - 设置宽高
        - loop="loop" 循环播放
        - src="url" 视频url地址

        多媒体标签总结：
        - 音频标签和视频标签使用方式基本一致
        - 浏览器支持情况不同
        - 谷歌浏览器把音频和视频自动播放禁止了，但是我们可以给视频标签添加muted属性来静音来自动播放视频，音频不可以（可以通过JavaScript解决）
        - 视频标签是重点，经常设置自动播放，不实用controls控件，循环和设置大小属性
</body>
CodeKZero WeChat Pay

WeChat Pay

CodeKZero Alipay

Alipay

  • Post author: CodeKZero
  • Post link: https://kzero.vip/2021/01/08/html/
  • Copyright Notice: All articles in this blog are licensed under BY-NC-SA unless stating additionally.