静思田园

Appearance

HTML ​

网站备注
codepen前端在线编辑，可保存
jsfiddle前端在线编辑
仅html实时显示
w3cschool
mdnmdn中文

HTML基础 ​

HTML(Hyper Text Mark-up Language )即是超文本标记语言，通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上，HTML 不是一种编程语言。

特点 ​

  • HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
  • 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。
  • 一个HTML文件的后缀名是.htm或者是.html。
  • HTML是大小写不敏感的,HTML与html是一样的

URL ​

统一资源定位符，用于表示资源在网络上的地址，每个部分以/进行分隔。

http网络资源

http
https://www.dotohi.com/mypapth/model.html?arg=1&name=fh#anchor

FTP文件下载

http
ftp://ftp.dotohi.com/download-path/second-path/ftp.pdf

MAILTO邮箱地址

http
mailto:1044531744@qq.com

参数说明

参数说明
https访问协议 http 或 https、ftp、mailto
www.dotohi.com服务器地址
download-path/second-path资源目录
ftp.pdf文件名
arg=1&name=fh参数
#anchor锚点

注释 ​

注释对一段 html 代码进行说明。

html
<body>
    <form>
        <fieldset>
            <legend>Personalia:</legend>
            Name: <input type="text" size="30" /><br />
            Email: <input type="text" size="30" /><br />
            Date of birth: <input type="text" size="10" />
        </fieldset>
    </form>
</body>

访问路径 ​

绝对路径 ​

绝对路径包含主机+服务器地址+目录+文件名的完整路径

http
https://www.dotohi.com/frontend/Javascript/console-color.html

相对路径 ​

相对路径是指相对当前目录的地址

html
# 当前目录的文件
now.html

# 上级目录中的文件
../prev.html

# 子目录中的文件
children/son.html

# 根目录中的文件
/root.html

页面结构 ​

语义标签 ​

html
<h1>标题</h1> 
<p>段落</p>

<!-- 图片-->
<img src="path.png" />

嵌套关系 ​

元素可以互相嵌套包裹，即元素存在父子级关系，属于树状结构。

html
<body>
		<div class="service_entry">
			<ul class="J_tab_head service_list">
				<li class="service_item noframe">
					<a href="https://jiayouka.jd.com/">
						<i class="service_ico">
							<img class="img" src="https://m.360buyimg.com/babel.png" />
						</i>
						<span class="service_txt">加油卡</span>
					</a>
				</li>
			</ul>
		</div>
	</body>

基本结构 ​

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
</body>
</html>
标签说明
DOCTYPE声明为 HTML 文档
htmllang:网页的语言，如 en/zh 等，非必选项目
head文档说明部分，对搜索引擎提供信息或加载 CSS、JS 等
title网页标题
keyword向搜索引擎说明你的网页的关键词
description向搜索引擎描述网页内容的摘要信息
body页面主体内容

内容标题 ​

标题使用 h1 ~ h6 来定义，用于突出显示文档内容。

  • 从 h1 到 h6 对搜索引擎来说权重会越来越小
  • 页面中最好只有一个 h1 标签
  • 标题最好不要嵌套如 h1 内部包含 h2
html
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

h1 ​

1级标题

h2 ​

2级标题

h3 ​

3级标题

h4 ​

4级标题

h5 ​

5级标题

h6 ​

6级标题

页眉页脚、导航、主体内容 ​

header标签是用来定义网页或者模块的头部

在 HTML 中使用nav设置导航链接。

main ​

HTML5 中使用 main 标签表示页面主要区域，一个页面中main元素最好只出现一次。

footer 标签定义网页或者模块的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
  <!-- header -->
  <header>
        <nav> <!-- nav -->
            <ul>
                <li><a href="">tab 1</a></li>
                <li><a href="">tab 2</a></li>
            </ul>
        </nav>
    </header>
  <main>
    主体内容
  </main>
   <!-- footer -->
  <footer> 
  	<p>冀ICP备19024518号</p>
    <p>京公网安备11010802043456</p>
    <p>Copyright © 2020-2024 Loveagri</p>
  </footer>
<body>
</body>
</html>

内容区域 ​

article ​

使用 article 标签主要作用是表示独立的内容单元。通常对应于文章、博客、新闻等。使用 article 标签，可以明确区分网页上的不同内容部分，提升网页的可读性和语义化水平，通过将一篇博客或资讯整体包裹在 article 标签中，可以清晰展示其主体内容。内部，可以进一步利用 section、article、aside 等标签进行更细致的结构划分。

html
<article>
  <header>
    <h1>这是一篇博客的标题</h1>
    <p>这是博客的摘要。</p>
  </header>
  <p>这是博客的主体内容。</p>
  <!-- 其他博客内容 -->
</article>

区块定义 ​

section ​

使用 section 定义一个区块，一般是一组相似内容的排列组合。使用section标签来分隔相关的内容或引用或者分隔不同的文章或章节。

html
<article>
  <section>
    <h2>文章标题</h2>
    <p>这是一篇关于...的文章。</p>
  </section>
  <section>
    <h2>文章标题</h2>
    <p>这是一篇关于...的文章。</p>
	</section>
</article>

附加区域 ​

aside ​

使用 aside 用来表示页面主内容之外的内容，通常用于侧边栏、导航链接、广告等。

通用容器 ​

div ​

div 是 HTML 中的一个块级元素，用于分组和格式化其他 HTML 元素。它没有预定义的语义，通常用于构建网页布局。有些区域这些有语义的容器不好表达，这时可以采用div容器，比如轮播图效果中的内容。

文本相关 ​

基本标签 ​

p ​

p标签用于定义段落。段落通常由一段文字组成，它们之间会自动插入一些空白。

pre ​

pre 标签是 HTML 中用于表示预格式化文本的标签。被包含在 pre 标签中的文本会保持原有的空格和换行符，而且文本会使用等宽字体显示。这使得 pre 标签在展示计算机源代码或者文本的时候非常有用。

html
<pre>
for i in range(10):
    print(i)
</pre>
for i in range(10):
    print(i)
html
<pre lang="html">
&lt;html&gt;
    &lt;body&gt;
        &lt;p&gt;Hello, World!&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<html>
    <body>
        <p>Hello, World!</p>
    </body>
</html>

br ​

在html 中回车是忽略的，使用 br 标签可以实现换行效果。

span ​

span 标签与 div 标签都是没有语义的，是 HTML 中的一个行内（inline）元素，通常用于在文本中添加样式或者用于包裹文本以便通过 CSS 进行样式设置或其他操作。

描述文本 ​

small 标签在 HTML5 中是用来定义小号文本的。它常常用于脚注、脚本、 copyright 等细 print 字体的文本。

html
<p>This is a paragraph with a <small>small</small> word in it.</p>

This is a paragraph with a small word in it.

time ​

用来表示日期和时间。它有一个 datetime 属性，这个属性用来存储标准的日期和时间字符串，这样可以确保即使在没有 JavaScript 的情况下，也能正确地显示日期和时间。

html
  The event will happen on <time datetime="2022-02-20">Feb 21, 2022</time> at <time datetime="2022-02-20T14:00">2 pm</time>.

The event will happen on at .

abbr ​

用于表示一个缩写形式，还可以提供一个可选的 title 属性，当用户将鼠标悬停在该元素上时，会显示出 title 属性中的文本。

html
<abbr title="World Health Organization">WHO</abbr>

WHO

sub ​

下标文本会以当前字体尺寸的一半来显示，且不会 line-break（不会换行）。

html
<p>这是水分子的方程式：H<sub>2</sub>O</p>

这是水分子的方程式：H2O

sup ​

上标常用于表示上标注释，如化学公式中的氧化数，或者在文本中表示上标注释时。 CSS 属性 vertical-align: super 来创建上标效果

html
<p>This is an example of the O<sup>2</sup> signal.</p>

This is an example of the O2 signal.

del & ins ​

表示已经被删除的文本。这通常用于表示文本内容已经被修改或更新，而原始内容应该被视为已经不再相关，ins 一般与 del 标签配合使用描述更新与修正。

html
<p>原价 <del>200元</del> 现价 <ins>100元</ins><p/>

原价 200元 现价 100元

s ​

s标签是 strike 标签的缩写版本，s 标签显示效果与 del 相似，但语义用来定义那些不正确、不准确或没有用的文本。

html
<p><s>My car is blue.</s></p>
<p>My new car is silver.</p>

My car is blue.

My new car is silver.

code ​

code标签用于表示计算机源代码或者其他机器可读的文本内容。它通常被嵌入在<pre>标签中，以保持文本的格式。<pre>标签用于预格式化的文本，意味着文本会保留空格和换行符。

html

<pre>
  <code>
  function helloWorld() {
      console.log("Hello, world!");
  }
  </code>
</pre>

function helloWorld() {
    console.log("Hello, world!");
}

progress ​

<progress> 标签用于表示一个进度条，通常用于表示任务的完成进度，如下载进度、加载进度等。

html
<progress value="50" max="100">50%</progress>

50%

强调文本 ​

strong ​

strong 标签和 em 一样，用于强调文本，并且em是斜体。

html
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

强调文本
加粗文本
定义项目
一段电脑代码 print("Hello World")
计算机样本
键盘输入
变量

mark ​

用于突出显示文本内容，类似我们生活中使用的马克笔。

html
<p>Do not forget to buy <mark>milk</mark> today.</p>

Do not forget to buy milk today.

引用标签 ​

cite ​

cite 表示作品的标题，比如书籍、歌曲、电影、论文等。它通常被用来表示一个引用的来源，或者是一个作品的标题。

html
<p>《人民日报》在其2008年版《中国科技十大成就》中提到，  <cite>中国科技进步 </cite>  对世界科技发展作出了重大贡献。</p>

《人民日报》在其2008年版《中国科技十大成就》中提到， 中国科技进步 对世界科技发展作出了重大贡献。

blockquote ​

blockquote 用于定义一个块引用，即一个引用自其他来源的段落。它可以包含文本、换行符以及其他 HTML 元素，是与cite配合使用标签。

html
<blockquote cite="https://www.dotohi.com">
  这是一个块引用。这里的文本来自其他的来源，例如书籍、杂志、网站或其他作者。
</blockquote>
这是一个块引用。这里的文本来自其他的来源，例如书籍、杂志、网站或其他作者。

q ​

q 用于表示行内短的引用文本，并会在大部分浏览器中会加上引号。

html
<p>最初的HTML版本由<q>Tim Berners-Lee</q>在1991年创建。</p>

最初的HTML版本由Tim Berners-Lee在1991年创建。

联系信息 ​

address ​

用于设置联系地址等信息，一般将address 放在footer 标签中。

html
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

图片与链接 ​

图片 ​

  • 网络带宽成本很高，图片处理在保证用户体验好的前提下，文件尺寸也要尽可能小
  • 图片属性静态文件，不要放在 WEB 服务器上，而放在云储存服务器上并使用 CDN 加速
  • 以 JPEG 类型优先使用，文件尺寸更小
  • 小图片使用 PNG，清晰度更高，因为文件尺寸小，文件也不会太大
  • 网页图标建议使用 css 字体构建如 iconfont 或 fontawesome
格式说明透明
PNG无损压缩格式，适合图标、验证码等，可以设置透明色。有些小图标建议使用 css 字体构建。支持
GIF256 色，可以产生动画效果（即 GIF 动图）支持
JPEG有损压缩的类型，如商品、文章的图片展示

img ​

html
<img src="https://www.w3school.com.cn/i/photo/tulip.jpg" alt="My Image" style="width:100px;height:100px;" />
My Image
属性值描述
alttext规定图像的替代文本。
srcURL规定显示图像的 URL。

链接 ​

网页链接 ​

a ​

a标签定义超链接，用于从一张页面链接到另一张页面。

html
<a href="https://www.dotohi.com" download="https://www.dotohi.com">欢迎来到秘境田园</a>

欢迎来到秘境田园

属性值描述
hrefURL规定链接指向的页面的 URL。
target
_blank
_parent
_self
_top		规定在何处打开被链接文档。
title文字提示文本
打开窗口 ​

下面设置 target 属性在指定窗口打开。

html
<a href="https:www.taobao.com" target="taobao">淘宝</a>
<a href="https:www.baidu.com" target="baidu">百度</a>
<a href="https:www.sina.com" target="sina">新浪</a>d

<script>
    window.open('https:www.baidu.com', 'baidu')
</script>
锚点链接 ​

锚点可以设置跳转到页面中的某个部分。

  1. 为元素添加id 属性来设置锚点
  2. 设置 a 标签的 href 属性
html
    <a href="#anchor">跳转到锚点处</a>
    <div style="height: 1000px;"></div>

    <div id="anchor" style="background: green;">
        这是锚点处
    </div>
  1. 也可以跳转到不同页面的锚点
html
   <a href="other.html#anchor">跳转到其它页面锚点处</a>
邮箱链接 ​

除了页面跳转外可以指定其他链接。使用以下方式也有缺点，邮箱可能会被恶意用户采集到，所以有些用户使用 loveagri#qq.com 然后提示用户 请将#改为@后发邮件的提示形式。

html
<!-- 邮箱 -->
<a href="mailto:loveagri@163.com?subject=test&cc=sample@hotmail.com&body=use mailto sample">send email</a>

<!--form方式：-->

<form name='sendmail' action='mailto:sample@163.com'>

    <input name='cc' type='text' value='sample@hotmail.com'>

    <input name='subject' type='text' value='test'>

    <input name='body' type='text' value='use mailto sample'>

</form>
                                                                                           
<!-- 电话 -->
<a href="tel:18511056181">call</a>

send email

call

参数内容
to收信人
subject主题
cc抄送
bcc暗送
body内容

警告

body里面换行可以这样实现，换行在URL编码里面就是“%0A”

html
<a href="mailto:luihuilang@163.com?subject=信件标题&body=%0Aa1: %0Aa2: %0Aa3: ">点击</a>
下载文件 ​

默认情况下使用链接可以下载浏览器无法处理的文件，如果下载图片需要后台语言告之浏览器mime类型

html
<a target="_blank" href='http://www.dotohi.com/logo.png' download='img.png'>下载图片</a>

下载图片

​

表单与列表 ​

表单 ​

form ​

表单应该置于form之中

<form> 元素可以包含以下一个或多个表单元素：

属性值描述
accept-charset字符集规定提交表单时要使用的字符编码。
actionURL规定提交表单时将表单数据发送到哪里。
autocompleteon
off		规定表单是否应启用自动完成功能。
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain		规定在向服务器提交表单数据时，应该如何对表单数据进行编码。
methodget
post		规定发送表单数据时使用的 HTTP 方法。
name文本规定表单的名称。
novalidatenovalidate规定提交表单时不应验证表单。
target_blank
_self
_parent
_top		规定在何处显示提交表单后收到的响应。

input ​

文本框用于输入单行文本使用，下面是常用属性与示例。

属性说明
type表单类型默认为 text
<input type="button">按钮
<input type="checkbox">多选框
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<br /><input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">（默认值）
<input type="time">
<input type="url">
<input type="week">
name后台接收字段名
required必须输入
placeholder提示文本内容
value默认值
maxlength允许最大输入字符数
size表单显示长度，一般用不使用而用 css 控制
disabled禁止使用，不可以提交到后台
readonly只读，可提交到后台
capture使用麦克风、视频或摄像头哪种方式获取手机上传文件，支持的值有 microphone, video, camera
html
<form action="/action_page.php">
  <label for="fname">名字：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓氏：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
</form>




调取摄像头 ​

当 input 类型为 file 时手机会让用户选择图片或者拍照，如果想直接调取摄像头使用以下代码。

html
<input type="file" capture="camera" accept="image/*" />

hidden隐藏表单用于提交后台数据，但在前台内容不显示所以在其上做用样式定义也没有意义。

html
<input type="hidden" name="id" value="1">

submit、button创建提交按钮可以将表单数据提交到后台，有多种方式可以提交数据如使用 AJAX，或 HTML 的表单按钮。

  1. 使用 input 构建提交按钮，如果设置了 name 值按钮数据也会提交到后台，如果有多个表单项可以通过些判断是哪个表单提交的。

    html
    <input type="submit" name="submit" value="提交表单">

  2. 使用 button 也可以提交，设置 type 属性为submit 或不设置都可以提交表单。

    html
    <button type="submit">提交表单</button>

通过为表单设置 disabled 或 readonly 都可以禁止修改表单，但 readonly表单的数据可以提交到后台。

html
<input type="text" name="web" value="houdunren.com" readonly>
PATTERN ​

表单可以通过设置 pattern 属性指定正则验证，也可以使用各种前端验证库如 formvalidator 或 validator.js。

属性说明
pattern正则表达式验证规则
oninvalid输入错误时触发的事件
html
<form action="">
	<input type="text" name="username" pattern="[A-z]{5,20}"
	oninvalid="validate('请输入5~20位字母的用户名')">
	<button>提交</button>
</form>

<script>
	function validate(message) {
		alert(message);
	}
</script>

label ​

label标签的 for 属性 应当与相关元素的 id 属性相同。

html
<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="提交">
</form>




textarea ​

<textarea> 标签定义多行文本输入控件。

选项说明
cols列字符数（一般使用 css 控制更好）
rows行数（一般使用 css 控制更好）
html
<label for="w3review">评论 ：</label>

<textarea id="w3review" name="w3review" rows="4" cols="50">
	记录生活点点滴滴的地方
</textarea>

select ​

元素用于创建下拉列表。

选项说明
multiple支持多选
size列表框高度
optgroup选项组
selected选中状态
option选项值
html
<label for="cars">请选择一个汽车品牌：</label>
<select  name="cars" id="cars">
  <optgroup label="中国车">
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德国车">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

文件上传 ​
选项说明
multiple支持多选
accept允许上传类型 .png,.psd 或 image/png,image/gif
html
<form action="" method="POST" enctype="multipart/form-data">
	<fieldset>
		<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
	</fieldset>
	<button>保存</button>
</form>

​

autocomplete浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

html
<form action="">
  <input type="search" autocomplete="on" name="content" />
  <button>提交</button>
</form>

datalist ​

<datalist> 标签为 元素规定预定义选项的列表。用户在输入数据时，将看到预定义选项的下拉列表。<datalist> 元素的 id 属性必须等于 <input> 元素的 list 属性（这会把它们绑定在一起）。

html
<label for="browser">请从列表中选择您的浏览器：</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

列表 ​

列表的使用与word 等软件的列表概念相似，只不过是应用在网页展示中。

ol ​

有序列表是指有数字编号的列表项

html
<!--
list-style-type:
    circle      空心圆
    disc        实心圆
    square      实心方块
    decimal     数字
    upper-alpha 大写字母
    lower-alpha 小写字母
    upper-roman 大写罗马数字
    lower-roman 小写罗马数字
 -->
<ol style="list-style-type:upper-roman">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

<ol style="list-style-type:decimal" start="3">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
  1. 咖啡
  2. 茶
  3. 牛奶
  1. 咖啡
  2. 茶
  3. 牛奶

ul ​

无序列表是没有数字编号的列表项

html
<ul style="list-style-type:circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

<ul style="list-style-type:disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
  • 咖啡
  • 茶
  • 牛奶
  • 咖啡
  • 茶
  • 牛奶

表格与多媒体 ​

表格 ​

table、tr ​

<table> 标签定义了 HTML 表格。

一个 table表格由一个 <table> 元素和一个或多个 tr、 th 和 td 元素组成：

  • tr 定义表格行
  • th 定义表格标题
  • td 定义表格单元格

HTML 表格还可以包含以下元素：

html
<table>
  <thead>
    <tr>
      <th>月份</th>
      <th>储蓄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>
月份储蓄
一月￥3400
二月￥4500
合计￥7900

td ​

colspan和rowspan分别设置单元格合并列行。

属性值描述
colspan数字规定单元格应跨越的列数。
rowspan数字设置单元格应跨越的行数。
html
  <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>电邮</th>
                <th colspan="2">电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bill Gates</td>
                <td>bill.gates@example.com</td>
                <td>138-1234-5678</td>
                <td>186-2345-6789</td>
            </tr>
        </tbody>
    </table>
姓名电邮电话
Bill Gatesbill.gates@example.com138-1234-5678186-2345-6789

多媒体 ​

video ​

video标签用于在文档中嵌入视频内容，例如电影片段或其他视频流。

<video> 标签包含一个或多个带有不同视频源的 <source> 标签。浏览器将选择它支持的第一个源。

<video> 和 </video> 标签之间的文本只会在不支持 <video> 元素的浏览器中显示。

HTML 支持三种视频格式：MP4、WebM 和 OGG。

属性值描述
autoplayautoplay规定视频准备就绪后立即开始播放。
controlscontrols规定应显示的视频控件（例如播放/暂停按钮等）。
height像素设置视频播放器的高度。
width像素设置视频播放器的宽度。
looploop规定视频将在每次结束时重新开始。
mutedmuted规定应将视频的音频输出静音。
posterURL规定在下载视频期间或在用户点击播放按钮之前显示的图像。
preloadautometadatanone规定在页面加载时，视频是否应加载或应如何加载。
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。
如果设置为 preload=metadata值将加载视频尺寸或关键针数据，目的也是减少带宽占用。
设置为preload="auto" 时表示将自动加载视频数据
srcURL规定视频文件的 URL。
html
<video width="640" height="360" controls>
  <source src="https://assets.mixkit.co/videos/4664/4664-720.mp4" type="video/mp4">
  <source src="https://video-previews.elements.envatousercontent.com/files/477fac5f-fe5f-4672-80c3-edd1bbd0ed44/video_preview_h264.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

audio ​

<audio> 标签用于在文档中嵌入声音内容，例如音乐或其他音频流。

<audio> 标签可包含一个或多个拥有不同音频源的 <source> 标签。浏览器将选择它支持的第一个源。

<audio> 和 </audio> 标签之间的文本只会在不支持 <audio> 元素的浏览器中显示。

HTML 支持三种音频格式：MP3、WAV 和 OGG。

属性值描述
autoplayautoplay规定音频将在准备就绪后立即开始播放。
controlscontrols规定应显示音频控件（例如播放/暂停按钮等）。
looploop规定音频将在每次结束后重新开始。
mutedmuted规定音频输出应静音。
preloadautometadatanone规定是否以及如何在页面加载时加载音频。
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload="metadata"值将加载视频尺寸或关键针数据，目的也是减少带宽占用。 设置为preload="auto" 时表示将自动加载视频数据
srcURL规定音频文件的 URL。
html
<audio controls>
  <source src="https://music-cdn.icons8.com/preview/124/ee3e7e77-5f8e-4bc4-ba06-8a16fa2d52ba.mp3" type="audio/mp3">
  <source src="https://music-cdn.icons8.com/preview/911/4dc36f63-27cb-4744-a1ee-b944f5c827c0.mp3" type="audio/mp3">
  您的浏览器不支持 audio 标签。
</audio>