我是靠谱客的博主 缓慢乌冬面,这篇文章主要介绍HTML的简介、文档结构及基本标记,现在分享给大家,希望可以做个参考。

HTML的简介

  1. HTML是英文 HyperText Markup Language 的缩写,它的意思是"超文本标记语言",用它编写出文档的文件的扩展名是“.html”或“.htm”(微软的操作系统),他是可供浏览器解释浏览的文件格式。你可以使用记事本,写字板或者是专业的IDE如:Dreamweaver等等编辑工具来编写HTML文件。
  2. HTML标记两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的,比如“”和“”,前一个是开始标记,后面的是结束标记,在开始和结束标记之间的的文本是元素内容。html标记是与大小写无关的,“”和“”所表示的意思的一样的。标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。
  3. 语言特点:
    超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(www)盛行的原因之一,其主要特点如下:
    1、 简易性:超级文本标记语言版本升级采用超级方式,从而更加灵活方便。
    2 、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
    3 、平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(www)盛行的另一个原因。
  4. 发展历史:
    标记语言
    超文本标记语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准):
    HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
    HTML 3.2——1996年1月14日,W3C推荐标准
    HTML 4.0——1997年12月18日,W3C推荐标准
    HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
    HTML 5的第一份正式草案已于2008年1月22日公布,仍继续完善

HTML的文档结构

复制代码
1
2
3
4
5
6
7
8
html的文档结构主要是有3部分组成的: 1.<html></html> <html>标记用于html文件的最前面,用来表示html文件的开始。而</html>的标记则是放在html的最后面,用来表示html文件的结束,两个标记必须一起使用。 2.<head>和</head> <head>和</head>构成html文件的头部部分,在此标记对之间可以使用<title> </title>和<script> </script>等等标记对,这些标记都是描述html文档相关信息的标记对,<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。 3.<body>和</body> <body>和</body>是html文档的主体部分,在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记,他们所定义的文本,图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。
  • 案例演示:
复制代码
1
2
3
4
5
6
7
8
9
10
<html> <head> <title>html的结构</title> </head> <body> <h1>我们现在开始学习HTML!!</h1> </body> </html>

HTML的基本标记

META标记
  • META标记是html语言的head部分的一个辅助性的标记的,他位于head和title标记之间,他提供给用户不可见的信息。meta标记的用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;可以用于来鉴别作者,设置页面格式,标注内容提要和一些关键字,还可以设置页面的自动刷新以及等级等等。
  • 设定文件字符集
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1.Content-Type和Content-Language(设置文件字符集) 说明: 设定页面使用的字符集,用以说明主页制作所使用的文字以及语言,浏览器会根据此来调用相应的字符集显示page的内容。 用法: <meta http-equiv="Content-type" Content="text/html,Charset=gb2312"> <meta http-equiv="Content-Language" Content="zh-CN"> 注意: 该meta标记定义了html页面所使用的字符编码集是gb2312,就是国际汉字码。如果将其中“charset="gb2312"”替换成“BIG5”,则页面所使用的字符集就是繁体中文的编码(台湾)。 2、 <meta name=“Author” content=“作者"> <meta name=“Keywords” content=“关键字"> <meta name=“Description” content=“描述”>
TITLE标记
  • 在头部的中,有另一组标签。打在这里面的文字会出现在浏览器视窗最上面蓝色部分里,作为网页的主题。
  • 示例:
复制代码
1
2
<title>这是我的html页面</title>
文字上的分割标记
  • 或许你会发现这样一个问题:我们已经在记事本里排版排的很漂亮,为何通过浏览器查看是就变了样子,那是因为浏览器不像word,他不认识Enter键或者空格键,所以当你按多少次空格,浏览器都会当作没看见一样。
  • 常用的分隔标记:
复制代码
1
2
3
4
强制断行标记“<br>” 强制分段标记“<p>” 空格“&nbsp”
  • 案例演示
复制代码
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
例子1:<br>的使用 <html> <head> <title>文字上的分隔标记1</title> </head> <body> 为救李浪离家远。<br> //换行,谁料皇榜中状元 会在下一行写出 谁料皇榜中状元。 </body> </html> 例子2:<p>的使用 <html> <head> <title>文字上的分隔标记2</title> </head> <body> 为救李浪离家远。<p> //强制分段,谁料皇榜中状元 会在下一段写出 谁料皇榜中状元。</p> </body> </html> 例子3:空格的使用 <html> <head> <title></title> </head> <body> 为救李浪离家远。&nbsp&nbsp&nbsp谁料皇榜中状元。 //两句话之间会有3个空格 </body> </html>
排版的标记
复制代码
1
2
3
4
5
6
7
8
1.文字的置左,置右,置中 在分段标记“<p>”在加上一些简单的属性设定,就可以让其的文字置左,置右,置中。 2.置中标记 使用方法: <center>内容</center> 3.保持原始数 使用方法:<pre>内容<pre>据格式标记
  • 案例演示:
复制代码
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
文字的置左,置右,置中 例子: <html> <head> <title>排版不标记</title> </head> <body> <p align="left">为救李浪离家远。</p> //置左 <p align="center">谁料皇榜中状元。</p> //置中 <p align="right">女驸马</p> //置右 </body> </html> 说明:align是分段标记的属性之一,这个属性将来会常常在不同标记中出现,他的功能就是专门在设定“水平对齐的位置”,其常见的属性值有三个“align="left"”置左,“align=""center”置中,“align="right"”置右。 置中标记 例子: <html> <head> <title>置中标记</title> </head> <body> <center>为救李浪离家远</center> </body> </html> 说明: 这是一个经常用到的标记,除了文字外,还有图片,表格等等一些其他的标记,任何可以显示在网页中的东西他都可以置之中。 保持原始数 例子: <html> <head> <title>保持原始数据格式标记</title> </head> <body> <Pre> 为救李浪离家远 谁料皇榜中状元 </pre> </body> </html> 说明: 利用“<pre>”标记可以将排版和格式后的内容原封不动的呈现出来。
字体标记
复制代码
1
2
3
4
5
6
7
8
9
10
1.标题标记 使用方法:<h1>内容</h1> 2.设置字体标记 使用方法:<font size=“2” color=“red” face=“黑体”>内容</font> 3.字体变化标记 使用:在文字标记中,对于文字的格式也有相当多的变化,如加粗,斜体等等。 <b></b> 加粗 <i></i> 斜体 <u></u> 底线 <kbd>用粗体等宽字体显示文字</kbd> <var>用较小的固定宽度显示字体</var>
  • 案例演示:
复制代码
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
标题标记 例子: <html> <head> <title>标题标记</title> </head> <body> <h1>标题1</h1> <br> <h2>标题2</h2> <br> <h3>标题3</h3> <br> <h4>标题4</h4> <br> <h5>标题5</h5> <br> <h6>标题6</h6> <br> </body> </html> 说明:标题的大小一共有6中,也就是从<h1>到<h6>,<h1>最大,<h6>最小。使用该标记时字体会变成粗体,并自称一行。 设置字体标记 例子: <html> <head> <title>文字字体设定</title> </head> <body> <font size="4" face="黑体" color="red">为救李浪离家远</font> </body> </html>
字体变化标记
复制代码
1
2
3
4
5
6
7
8
9
10
字体变化标记 <b></b> 加粗 <i></i> 斜体 <u></u> 底线 <sup></sup> 上标 <sub></sub> 下标 <blink><blink> 闪烁(IE浏览器没有效果) <em></em> 强调 <strong></strong> 加强
分割线标记
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
分隔线标记 使用:上一部分<hr>下一部分 例子: <html> <head> <title>背景颜色</title> </head> <body> abcdefg。<br> <hr color="red" width="240" size="2" noshade> //红色分割线 higklmn。 </body> </html>
图片(img)标记
复制代码
1
2
使用:<img src="boy.jpg" alt="haha" align="left" border="0" height="56px" width="32px">
  • 案例演示:
复制代码
1
2
3
4
5
6
7
8
9
<html> <head> <title>图片</title> </head> <body> <img src="boy.jpg" alt="haha" align="left" border="0“ height="56px" width="32px"> //src需要图片的路径 </body> </html>
序列标记
复制代码
1
2
3
4
1.无序列表< ul> 2.有序列表 <ol> 3.自定义列表 <dl>
  • 案例演示:
复制代码
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
1.无序列表 例子: <html> <head> <title>无序列表</title> </head> <ul> <li>姓名:jock <li>生日:1989/4/9 <li>星座:天蝎座 </ul> </body> </html> 说明:其中<ul>就是无序列表,没增加一列内容,就需要加一个<li>; 可以为 <ul>添加属性type="disk"(实心点),type="square"(小正方形)type="circle"(空心点) 2.有序列表 例子: <html> <head> <title>有序列表</title> </head> <ol> <li>姓名:jock <li>生日:1989/4/9 <li>星座:天蝎座 </ol> </body> </html> 说明:其中<ol>就是无序列表,没增加一列内容,就需要加一个<li>; 可以为 <ol>添加属性type="1"(数字),type="A"(大写字母),type="a"(小写字母),type="I"(大写罗马),type="i"(小写罗马); 例子: 可以指定序列的开始数目。 <html> <head> <title>有序列表</title> </head> <ol start="8"> <li>姓名:jock <li>生日:1989/4/9 <li>星座:天蝎座 </ol> </body> </html> 3.自定义列表 例子: <html> <head> <title>有序列表</title> </head> <dt>咖啡</dt> <dd>黑色热饮</dd> <dt>牛奶</dt> <dd>白色冷饮</dd> </body> </html>
特殊字符
复制代码
1
2
3
4
html中有很多特殊的字符是需要特殊的处理。 转义字符 &lt:< &gt:> &amp:& &qout:“ &nbsp:空格
超链接
  • 1.连接到其他的文档
    2.网页的内部链接
    3.网页的外部链接
    4.图片的锚点链接
  • 案例演示
复制代码
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
1.连接到其他的文档 例子: <html> <head> <title>超链接1</title> </head> <body> <a href=“特殊字符.html“ target=”_blank”>连接其他文件</a> target=“_self” 在自身窗口打开 </body>_ </html> 这里需要注意的就是文件的路径,这里我用的是相对路径 绝对路径:是指从根目录到文件的完整路径。 相对路径:是指相对于当前文件的文件位置。 2.网页的内部链接 例子: <html> <head> <title>超链接2</title> </head> <body> <a href="#c7">查看章节7</a> <h2>章节1</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节2</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节3</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节4</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节5</h2> <p>该章节是关于。。。。。。。。。。</p> <h2>章节6</h2> <p>该章节是关于。。。。。。。。。。</p> <a name="c7"> <h2>章节7</h2> <p>该章节是关于。。。。。。。。。。</p> </a> <h2>章节8</h2> <p>该章节是关于。。。。。。。。。。</p> </body> </html> 3.网页的外部链接 例子: <html> <head> <title>链接的外部文件</title> </head> <body> <a href="http://www.baidu.com">链接的百度</a> </body> </html> 4,通过CSS去掉 超链接的下划线 <style> a:link{ color:red; text-decoration:none; } a:visited{ color:yellow; text-decoration:none; } a:hover{ color:green; text-decoration:none; } a:active{ color:#33ff33; text-decoration:none; } 五:图片的锚点链接 //给图片设置热点链接 <img src=“img/mainbg.jpg” width=“500px” height=“500px” align=“absmiddle” usemap=“#Map” />注意使用 usemap <map name="Map" id="Map"> <area shape=“rect” coords=“47,67,187,140” href=“http://www.baidu.com”/> 几个数字 代表矩形的 xy 坐标 以及矩形的长宽 <area shape=“circle” coords=“300,400,300” href=“http://www.baidu.com” target=“_blank”/> 几个数字代表 圆形的xy坐标 以及圆点半径 </map>
表格
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
表格的结构 1.<table> <table>...</table>是用来在html页面上创建表格的。 2.<th>代表列名一般放在第一行 3.<tr>代表格的一行。 4.<td>用来定义表格的一列。 在默认情况下,表格是没有边框的,如果想要出现边框,就是用border属性。 表格的设置 表格的合并 <td rowspan="5">商品图片</td> //纵向合并5个表格,包括自己 <td colspan="2">加入购物车</td> //横向合并2个表格,包括自己
  • 案例演示:
复制代码
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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" cellspacing="0" cellpadding="" align="center" height="500px" width="500px"> <tr> <td rowspan="5">商品图片</td> <td>商品名称</td> </tr> <tr> <td>商品价格</td> </tr> <tr> <td>商品描述</td> </tr> <tr> <td>商品规格</td> </tr> <tr> <td>购买数量</td> </tr> <tr> <td colspan="2"> <button type="button">加入购物车</button> </td> </tr> </table> </body> </html>
input标签
复制代码
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
<input />标签的 type分为: text -文本框 button -按钮 submit-提交 reset-重置 password -密码 checkbox-多选 radio-单选 file -上传文件 date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间(小时和分钟) datetime - 选取时间、日、月、年(UTC 时间) datetime-local - 选取时间、日、月、年(本地时间) 写法: 文本输入框 <input type = “text” value=“”/> 邮箱输入框 <input type="email" name="user_email" /> 数字输入框 <input type="number" name="points" min="1" max="10" /> 数字范围输入框(进度条) <input type="range" name="points" min="1" max="10" /> 颜色选择框 <input type="color" name="colortext"/><br> 注意:只有部分浏览器支持所有type类型 要想点击文字选中按钮要配合 label 标签 <input type="radio" id="sex" name="aa"/><label for="sex">男</label> <input type=“radio” id=“wm” name=“aa”/><label for=“wm”>女</label>
Select标签
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
<select> <option value="qxz" selected/>请选择 <option value=“A”/>苹果 <option value=“B”/>香蕉 <option value=“C”/>橘子 <option value=“D”/>西瓜 </select> TEXTAREA便签 <TEXTAREA ROWS="5" COLS="30" ></TEXTAREA >
表单
复制代码 NAME="yijian" 名称 ROWS="3" 行数 COLS="20" 列数 wrap="off" 该属性有三种取值off(输入文字不自动换行) virtual(输入文字自动换行,在用户没有自动按下回车,向后台发送时,视为没有换行) physical(输入文字自动换行,向后台发送时,视为有换行) (7).文件域 例子: 文件域
(8).图片域 例子: 图片域
(9).普通按钮 例子: 按钮
(10).提交按钮 例子: 提交按钮
(11).重置按钮 重置按钮
(12).隐藏域 例子: 隐藏域
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
1.表单的用途 表单在网页上用来给访问者填写信息的,从而获得用户信息,使用网页进行交互的功能。一般是将表单设计在一个html页面中,当用户填写信息后做提交操作,于是表单的内容就会从客户端的浏览器上发送给服务器,经过服务器上的jsp或者ASP或者Cgi等处理后,再将用户所需的信息传送给客户端的浏览器上,这样网页就具有交互性了。 2.表单构成 <form></form> <form></form>标记是用来创建一个表单,在标记之间一切都属于表单里的内容。 <from>标记具有action,metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法,通常有两种分别是GET和POST两种。 target属性用来制定目标窗口的。 3.表单的工作原理: 1.访问者填写表单,并提交给web服务器处理; 2.在web服务器上的后台处理程序对提交后的数据进行处理; 3.后台处理程序处理完成后,会重新生成一个新的html页面发给客户端。 4.表单中的各种组件 (1).文本框 例子: <html> <head> <title>表单中的文本框</title> </head> <body> <form> 姓名:<input name="username" type="text" size="20" maxlength="5" value="请输入"/> </form> </body> </html> name="username" 文本框的名称 type="text" 该属性是确定文本框的形态 size="20" 文本框的宽度 maxlength="5" 可输入的最大长度 value="请输入" 预设值 (2).密码框 例子: <html> <head> <title>表单中的密码框</title> </head> <body> <form> 密码:<input name="username" type="password" size="20" maxlength="5" value="123"/> </form> </body> </html> name="username" 密码框的名称 type="text" 该属性是确定密码框的形态 size="20" 密码框的宽度 maxlength="5" 可输入的最大长度 value="请输入" 预设值 (3).单选按钮 例子: <html> <head> <title>表单中的单选按钮</title> </head> <body> <form> 男<input name="sex" type="radio" value="boy"/> 女<input name="sex" type="radio" value="girl" checked/> </form> </body> </html> name="sex" 单选按钮的名称 value="boy" 单选按钮的值 type="radio" 该属性是确定单选按钮的形态 checked 设置选中 (4).复选框 例子: <html> <head> <title>表单中的复选框</title> </head> <body> <form> 爱好: <input name="storp" type="checkbox" value="movie" checked/>电影 <input name="storp" type="checkbox" value="book" /> 看书 </form> </body> </html> name="storp" 复选框的名称 type="checkbox" 该属性是确定复选框的形态 value="movie" 复选框的值 checked 设置选中 (5).下拉列表 例子: <html> <head> <title>表单中的下拉列表</title> </head> <body> <form> 请选择你最喜欢的种族: <select name="mx" multiple size="1"> <option value="qxz" selected/>请选择 <option value="sz"/>兽族 <option value="rz"/>人族 <option value="wlz"/>亡灵族 <option value="jlz"/>精灵族 </select> </form> </body> </html> name="mx" 复选框的名称 multiple 设置多选 size="1" 列显示几个选项 value="qxz" 复选框的值 selected 设置选中 (6).文本域 例子: <HTML> <HEAD> <TITLE> 文本域 </TITLE> </HEAD> <BODY> <form> 意见: <TEXTAREA NAME="yijian" ROWS="3" COLS="20" wrap="off"></TEXTAREA> </form> </BODY> </HTML> NAME="yijian" 名称 ROWS="3" 行数 COLS="20" 列数 wrap="off" 该属性有三种取值off(输入文字不自动换行) virtual(输入文字自动换行,在用户没有自动按下回车,向后台发送时,视为没有换行) physical(输入文字自动换行,向后台发送时,视为有换行) (7).文件域 例子: <HTML> <HEAD> <TITLE> 文件域 </TITLE> </HEAD> <BODY> <form> <input name="file" type="file"> </form> </BODY> </HTML> (8).图片域 例子: <HTML> <HEAD> <TITLE> 图片域 </TITLE> </HEAD> <BODY> <form> <input name="pt" type="image" src="F:图片刀刀刀刀狗1.jpg" width="300" height="400" border="1"> </form> </BODY> </HTML> (9).普通按钮 例子: <HTML> <HEAD> <TITLE> 按钮 </TITLE> </HEAD> <BODY> <form> <input name="anniu" type="button" value="send"> </form> </BODY> </HTML> (10).提交按钮 例子: <HTML> <HEAD> <TITLE> 提交按钮 </TITLE> </HEAD> <BODY> <form> <INPUT name="anniu" TYPE="submit" value="提交"> </form> </BODY> </HTML> (11).重置按钮 <HTML> <HEAD> <TITLE> 重置按钮</TITLE> </HEAD> <BODY> <form> <INPUT name="anniu" TYPE="reset" value="重置" > </form> </BODY> </HTML> (12).隐藏域 例子: <HTML> <HEAD> <TITLE> 隐藏域 </TITLE> </HEAD> <BODY> <form> <INPUT TYPE="hidden" NAME="H1" value="love"> </form> </BODY> </HTML>
框架
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
混合框架 <html> <head> <title>框架页示例</title> </head> <frameset rows="50%,50%"> <frame src="http://www.baidu.com"> <frameset cols="25%,75%"> <frame src="http://www.sina.com.cn"> <frame src="http://www.baidu.com"> </frameset> </frameset> </html>
多媒体标记音频
复制代码
1
2
3
4
5
6
7
8
9
10
11
1、HTML4多媒体 <embed src="文件源" width="宽度" autostart="true" loop="true"> src 设置文件源 width 设置宽度 autostart 设置是否自动播放,如果是true就是自动播放,是flase不自动播放 loop 设置是否循环播放true就是循环播放,false就是不自动播放 2、HTML5多媒体 <audio src="G:Media霍比特人3:五军之战.mp4" controls="controls"></audio> 3、添加背景音乐 <bgsound src="明月几时有.mp3" loop=5>
多媒体标记视频
复制代码
1
2
3
4
5
6
7
8
视频标签 <video src="G:Media霍比特人3:五军之战.mp4" width="320" height="240" controls="controls"> </video> control 属性供添加播放、暂停和音量控件。 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。 要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。

最后

以上就是缓慢乌冬面最近收集整理的关于HTML的简介、文档结构及基本标记的全部内容,更多相关HTML内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(44)

评论列表共有 0 条评论

立即
投稿
返回
顶部