HTML编码规范

法

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
不要忽略可选的关闭标签，例:

<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；虽然doctype不区分大小写，但是按照惯例，doctype大写（关于html属性，大写还是小写）。<!DOCTYPE html> <html> ... </html> lang属性根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里；在sitepoint上可以查到语言列表；
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表.aspx)，其中细分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符编码通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。HTML5 规范链接使用link
使用style
使用script <link rel="stylesheet" href="code_guide.css">  <style> ... </style>  <script src="code_guide.js"></script>  <script> ... </script> 属性顺序属性应该按照特定的顺序出现以保证易读性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
更多内容可以参考 WhatWG section on boolean attributes：
boolean属性的存在表示取值为true，不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成标签

在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

实用高于完美

尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

、html概述

1、html标签是用来给文本添加语义的，而不是用来修饰文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一样，才不会乱码；

3、<!DOCTYPE html> DTD文档申明告诉浏览器我用的什么协议来写的，不是html标签；

4、webstorm快捷键大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基础标签

1、h、p 和 hr 标签

三个标签都是占一行

2、注释：

3、图片：<img src=" ">

不会独占一行；
保证不变形，指定宽或者高即可；
title 和 alt 属性；
src 可以是相对路径（../ 上一级）和绝对路径，路径中尽量不含中文，相对路径不可跨盘符，路径分隔统一写 / ，绝对路径的可移植性不好；

4、换行：<br> 用于内容未完的换行

5、跳转：<a href=" "></a>

支持文字和图片的跳转；
地址必须加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）属性控制跳转是否打开新的选项卡；
title 提示作用；

6、base 标签：<base target="_self ">

统一指定 a 标签怎么打开，写在 head 中

7、假链接：点击不会跳转

a 标签的 href 属性值为 # 或者 javascript
# 会跳转到页面的顶部，而 js 不会

8、锚点：<a href="#id值"><\a>

可以跳转到页面的指定位置
可以跳转到其他页面的指定位置，只需在 # 前面加上页面的路径即可
跳转无过度动画

三、列表标签

1、无序列表（!）

<ul><li><\li><\ul>；
整体不可分割；
ul 除了 li 不建议再加其他的标签，li 标签中可以放其他标签来丰富内容；
li 中还可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（*）

<ol><li><\li><\ol>；

3、定义列表

dt 是标题，dd 是具体的描述；
推荐一个 dt 一个 dd ，也可以一个 dt 对多个 dd 或者没有 dd；
dl 中不建议加其他标签，二 dt 和 dd 可以加；
应用：网站尾部，图文混排（仿京东做个网站的尾部）；

四、表格标签

1、格式

表格的边框默认不显示（border）

2、属性

（1）宽高

table 和 td 可用；
默认高宽根据内容调整；
td 设置高宽只会改变当前单元格的状态，而不会改变 table 的高宽；

（2）水平和垂直对齐（align 和 valign）

水平对齐三个都可以用，而垂直对齐针对 tr 和 td；
table 设置 align 控制表格在水平方向的对齐，给 tr 和 td 设置都是控制单元格里的内容的对齐方式，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；
tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐，不过 tr 影响一行，td 影响一个，tr 和 td 都设置 td 会覆盖 tr 的效果；

（3）内边距和外边距（cellpadding 和 cellspacing）

两个属性都是 table 的；
外边距是指格子与格子之间的空隙，而内边距是指格子与文字之间的间隙；

（4）细线表格

先给 table 设置 bgcolor；
再给 tr 设置 bgcolor；
最后 table 设置 cellspacing；

3、表格的其他标签

（1）caption：表格的标题标签，必须写在 table 内而且需紧跟 table

（2）th：th 和 td 同级，th 有加粗的效果

4、表格的结构

（1）组成：caption 标题、thead 表头、tbody 主体、tfoot 尾部

（2）说明：

浏览器自动添加 tbody；
table 设置高度后，tfoot 和 thead 的高度是不会变化的；

5、单元格的合并

（1）水平方向：td 属性 colspan = "2"；

（2）垂直方向：td 属性 rowspan = "2"；

五、表单标签

1、格式

2、input 标签

（1）type = text：

（2）password：

（3）radio：互斥要设置 name 相同；默认选中 checked

（4）checkbox：选中 checked

（5）button：

（6）image：

（7）reset：value 修改标题

（8）submit：

form 的 action 确定提交的地址
提交数据加 name 属性

（9）hidden：

-----------------------------------------------------------------------------------------------------------------------

*相关标签：

label 标签：让文字与 input 标签绑定；两种绑定的方式：

datalist 标签：给输入框绑定输入的提示：<datalist><option>haha</option></datalist>
h5 中新增的 input 标签：email 、url 、number 、color、date（浏览器的支持不好）

3、非 input 标签

（1）select

（2）textarea

cols 和 rows 指定输入的行列，但是还是可以无限输入
默认可拉伸，也可通过 css 固定大小

4、练习

（1）表单标签除了 button 外都可以用 value 来指定提交的值

（2）表单添加边框可以在 form 中添加 fieldset 来实现

六、多媒体标签

1、video 标签

（1）格式：<video src=" " autoplay="autoplay"></video>；

（2）属性：controls（控制条）poster（海报）loop（循环）preload（预加载，与autoplay冲突）muted（静音）width/height；

（3）另一种 video 格式：解决浏览器的兼容

（4）让所有的浏览器支持 video 标签：通过 js 框架来实现

2、audio 标签

（1）使用基本和 video 一样，属性只有宽高和 poster 不能用，也是两种格式

3、details 和 summary 标签

（1）格式：

4、marquee标签（跑马灯效果）

（1）w3c 不推荐，但是浏览器的支持好

（2）属性：direction（方向）scrollamount（滚动的速度）loop（滚动次数，默认-1）behavior（滚动类型 slide）

（3）废弃的标签：<br><hr><font><b>加粗<u>下划线<i>斜体<s>删除线（无语义）

替代的标签：<strong><ins><em><del>（加入了语义）

5、字符实体

（1）&nbsp；空格 &lt；&gt； &copy；版权符号

（2）理解：html 占用了的不显示的特殊字符用另外的代替符号表示，使他们正常在 html 页面上显示

用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签	英文全拼	作用	特点
<html></html>	html	网页的根标签	所有的标签都要写在这一对根标签里面
<head></head>	head	网页的头标签	包括完档的属性和信息
<body></body>	body	网页的主题	包含文档的所有内容
<div></div>	division	定义一个区域	浏览器通常会在<div>前后放置一个换行符
<!-- 注释 -->	-	注释	单标签
<br>或<br/>	break	换行	单标签，不会在其前后创建空白行
<hr>或<hr/>	horizontal rule	添加水平线	单标签
<img src="">	image	添加图片	单标签
<embed src="">	embed	嵌入外部应用	单标签
<meta>	meta	提供有关页面的元信息	单标签，<meta>标签通常位于<head>区域内
<link>	link	定义文档与外部资源的关系	单标签，<link>标签只能存在于<head>区域内，不过它可出现任何次数。
<p></p>	paragraph	定义段落	自动在其前后创建空白行
<h1> to <h6>	Header 1 to Header 6	定义标题	h1在一个页面里只能出现一次
<strong></strong>	strong	文本加粗	加粗标记该文本
<b></b>	bold	文本加粗	加粗显示文本，不推荐使用
<em></em>	emphasize	文本倾斜	倾斜标记文本
<i></i>	italic	文本倾斜	倾斜显示文本，不推荐使用
<del></del>	delete	文本添加删除线	-
<s></s>	strike	文本添加删除线	不推荐使用
<ins></ins>	insert	文本添加下划线	-
<u></u>	underline	文本添加下划线	不推荐使用
<a href="">填写内容</a>	anchor	添加超链接	最好使用CSS来改变链接的样式
<ul></ul>	unordered list	定义无序列表	通常与<li>标签一起使用
<ol></ol>	ordered list	定义有序列表	通常与<li>标签一起使用
<li></li>	list item	创建列表项	可与各种列表定义标签一起使用
<dl></dl>	definition list	定义描述列表	通常与<dt>和<dd>一起使用
<dt></dt>	definition term	定义条目	定义描述列表的项目
<dd></dd>	definition description	定义描述	对描述列表中的项目进行描述
<table></table>	table	定义HTML表格	尽可能通过样式改变表格外观
<tr></tr>	table row	定义表格的行	一个<tr>标签包含一个或多个<th>或<td>标签
<th></th>	table headline	定义表格每一列的标题	该标签的文本通常呈现为粗体且居中
<td></td>	table data	定义表格中的单元格数据	该标签的文本呈现为普通且左对齐
<caption>表格标题</caption>	caption	定义整个表格的标题	<caption>标签必须直接放在<table>标签后
<input type="">	input	定义输入控件	输入字段可通过多种方式改变，取决于type属性
select	select	定义下拉列表	<select>中的<option>标签定义了列表中的可用选项
<option></option>	option	定义下拉列表中的可用项	<option>标签不可自由定义宽高
<optgroup></optgroup>	options group	定义选项组	<optgroup>标签用于把相关的选项组合在一起
<textarea></textarea>	textarea	定义多行的文本输入控件	文本的默认字体是等宽字体
<form></form>	form	定义表单	<form>可以包含多个元素
<fieldset></fieldset>	field set	定义围绕表单中元素的边框	<legend>为<fieldset>定义标题
<legend></legend>	legend	为<fieldset>定义标题	<legend>通过css设定样式
<progress></progress>	progress	定义运行中的任务进度	<progress>是HTML5中的新标签，<progress>标签不适合用来表示度量衡
<meter></meter>	meter	度量衡	<meter>是HTML5的新标签，<meter>标签不适合用来表示进度条
<audio></audio>	audio	添加音频	<audio>标签是HTML5的新标签
<video></video>	video	添加视频	<video>标签是HTML5的新标签
<source>	source	定义媒介资源	<source>标签是HTML5中的新标签

常用标签使用说明

常用写法：<img src="" alt="" title=""width="" height="">
src：图片的来源（必写属性）
alt：图像不显示时的替代文本
title：鼠标在移动到元素上的文本提示
width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

常用写法：<a href="" title="" target="">填写内容</a>
href：去往的路径（必写属性）
title：鼠标在移动到元素上的文本提示
target：规定在何处打开路径

_blank：新页面打开
_parent：在父窗口中打开链接
_self：当前页面跳转（默认值）
_top：在当前窗体打开链接，并替换当前的整个窗体

当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

给目标元素设置id值，如<p id="id1"></p>
设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如<a href="#id1"></a>

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

常用写法： <meta charset="UTF-8">
charset：定义文档的字符编码

ASCII/ANSI/Unicode：英语
GBK：亚洲通用字符集
GB2312：中文简体
Big5：台澳港繁体
UTF-8：世界通用字符集

name

关键字

常用写法： <meta name="keywords" content="">
描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面

网页描述

常用写法： <meta name="keywords" content="">
描述：告诉搜索引擎网页的主要内容

作者

常用写法： <meta name="author" content="">
描述：告诉搜索引擎网页的作者

文件检索

常用写法： <meta name="robots" content="all | none | index | noindex | follow | nofollow">
描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
content: 文件检索方式

all：文件将被检索，且页面上的链接可以被查询（默认值）
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索；
noindex：文件将不被检索，但页面上的链接可以被查询
follow：页面上的链接可以被查询
nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

常用写法： <meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />
描述：网页5秒后自动跳转到谷歌主页
url：为空则刷新本页
常用写法：
描述：规定当前文档与被链接文档/资源之间的关系
rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
type：规定被链接文档的类型
href：链接的文件路径
示例：

链接外部样式表：<link rel="stylesheet" type="text/css" href="a.css">
设置网页icon图标：<link rel="icon" href="a.ico">

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

常用写法：<table width="" height="" border="" cellspacing="" cellpadding=""></table>
width：表格宽度
height：表格高度
border：边框宽度
cellspacing：单元格间距
cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

常用写法：<td colspan=“” rowspan=“”></td>
描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于<input>不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

常用写法：<input type="text" name="" maxlength="" readonly="" disabled="" value="">
type：规定输入字段的类型
name：输入框的名字
maxlength：输入文本长度
readonly：输入框是否只读
disabled：输入框是否未激活
value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

常用写法：<input type="password" name="">
type：规定输入字段的类型
name：输入框的名字
密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

常用写法：<input type="radio" name="" checked="checked">
type：规定输入字段的类型
name：输入框的名字
checked：设定该输入框被预先选定
想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

常用写法：<select multiple=""></select>
multiple：当该属性为true时，可选择多个选项。

常用写法：<optgroup label=""></optgroup>
label：设定选项组的描述。

常用写法：<option value="" selected="">选项值</option>
value：定义送往服务器的选项值。
selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

常用写法：<input type="checkbox" checked="">
type：规定输入字段的类型
checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用写法：<textarea cols="" rows="" placeholder=""></textarea>
cols：控制可见文本的列数
rows：控制可见文本的行数
placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

常用写法：<input type="file" accept=""/>
accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

<progress>与<meter>主要区别和用法见HTML5 progress和meter控件

常用写法：<progress value="" max=""></progress>
value：规定进程的当前值
max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

<meter>

常用写法：<meter min="" low="" high="" max="" value="" optimum=""></meter>
value：规定度量的当前值
max：规定被界定为高的值的范围
min：规定被界定为低的值的范围
low：规定被界定为低的值的范围
high：规定被界定为高的值的范围
optimum：规定度量的最优值
具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

<audio>

常用写法：<audio src="" controls autoplay loop></audio>
src：规定音频文件的url
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

<video>

常用写法：<video src="" width="" height="" poster="" controls autoplay loop></video>
src：规定视频文件的url
width：设置视频播放器的宽度（pixels）
height：设置视频播放器的高度（pixels）
poster：设置视频未播放时展示的画面
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

常用写法：<source src="" type="">
src：规定媒体文件的url
type：规定媒体文件的类型
因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

HTML特殊字符编码对照表

参考

HTML基础
HTML 参考手册
HTML中标签对应的英文
meter标签改变颜色规则
HTML5 progress和meter控件

在线咨询

上一篇：创建平滑的HTML5动画
下一篇：用html代码编写的免费软件下载和安装教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML编码规范

法

boolean属性

JS生成标签

减少标签数量

实用高于完美

、html概述

二、基础标签

三、列表标签

四、表格标签

五、表单标签

六、多媒体标签

用html标签使用介绍

常用html标签列表

常用标签使用说明

列表

表格

与

多媒体资源

特殊字符

参考

您的项目需求