Web前端培训：理解CSS位置属性

网页设计中，你放内容的地方和你放内容的方式一样重要。位置可以影响用户体验的各个方面，在web前端培训中，您将了解CSS位置属性以及它如何与HTML页面上的元素一起工作。

CSS位置属性是做什么的？

CSS位置属性帮助您定义要在HTML页面上获取的元素的位置。CSS位置属性有六个值，您可以分配给它来确定定义的位置。了解这些值之间的差异可以让你知道在哪里和何时使用它们。

CSS位置：静态值

这是CSS位置属性的默认值。在这种模式下，目标元素与自然文档流一起定位。请注意，顶部、右侧、底部、左侧以及Z索引属性不会显示任何效果。

CSS位置：相对值

该位置值与静态值非常相同，但是，该值允许上述方向属性对目标元素的位置产生影响。方向属性将元素从其在文档中相对于其自身属性（例如左侧或底部）的自然位置移动。偏移量不影响任何其他元素的位置。想要对CSS有更多的了解，建议参加web前端培训，可以有更全面的认识和理解。

CSS位置：固定值

使用此位置值，目标元素将不包括在自然文档流中。这意味着文件不会像通常那样为布局中的元素固有地创造空间。这些元素相对于文档或初始包含块放置，除非其中一个祖先将转换、透视或筛选器属性设置为非任何对象（请参阅CSS转换规范），在这种情况下，祖先充当包含块。值得注意的是，滚动不会影响具有此CSS位置值的元素。一个固定的元素不会在页面上留下它通常所在的位置的空白。

CSS位置：绝对值

与固定值一样，具有绝对值的元素将从自然文档流中删除，并且在页面布局中不会为元素创建空间。元素将根据最近放置的祖先元素进行定位。如果该选项不可用，则元素将使用文档主体并随页面滚动一起移动。Web前端培训有很多关于CSS的课程，感兴趣的同学可以报名学习一下，有专业讲师面授指导教学，相信会更容易快速掌握这些知识。

CSS位置：粘性值

使用粘性值，目标元素从HTML文档的自然流接收其位置。位置的改变是从最近的滚动祖先元素及其包含块中进行的。从某种意义上说，这个值在达到“粘滞”点之前与“相对”相同，偏移量不会影响任何其他元素的位置。你可以把它看作是相对值和固定值的混合体。

理解Z索引属性

Z索引属性处理重叠或可能重叠的元素的位置，这取决于页面的布局，这个位置处理元素相互堆叠的方式，它有助于保持对要显示的元素的可见焦点。用一个较大的Z索引覆盖那些用较小的Z索引覆盖的重叠元素。

把页面上的元素想象成一张卡片。你把其中四个放下来，但要确保王牌总是在最上面显示什么。Z索引属性可以更改堆栈顺序。

每个元素都有一个位置值。请记住，默认值设置为静态。任何具有其位置值更改为静态以外的任何元素都将显示设置为静态的元素。Z索引仅适用于已定位的元素（位置：绝对，位置：相对，位置：固定，位置：粘滞）和弯曲元素（显示的直接子元素：弯曲元素）。否则，所有元素都会出现在页面上，好像它们的位置值设置为静态；因此，与Z指数无关。

尽管CSS提供了所有的工具，但有时很难掌握您控制的内容。想要更熟练地使用CSS技能，不妨去web前端培训去学习，那里有更加系统规范的课程，让你获得全面提升。

能改进和DOM节点的附加属性的类型检查使新的Vue值得更新。Vue团队确实做了很多工作。实际上，他们在同一天发布了两个子版本。Vue 3.3.5 和 3.3.6 都在2023年10月20日发布。

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验

WeakMaps

其中一个得到改进的是在可能的情况下从 Maps 和 Sets 转移到WeakMaps 和WeakSets。

那是什么，为什么这么重要？

如果你在 Maps或 Sets 中存储东西，你会对这些东西做一个引用。这意味着，只要Map或Set被使用，这个东西就不会被垃圾收集器从内存中释放。

通常这是有意义的。但有时候不是。特别是当你写一些代码，只是深入到数据的正常工作流中。例如，通过在系统中流动的数据中添加诊断数据。

当你需要时，你希望数据被释放，你不希望保留保留数据的权利。

这就是 WeakMaps 和 WeakSets 开始发挥作用的地方，Vue现在在内部更多地使用这些来防止内存泄漏并提高整体性能。

对 contenteditable="plaintext-only" 的支持

我认为 contenteditable可以是true或false。但显然，有第三个值 "plaintext-only"。

通常，当你将参数设置为true时，你也可以编辑格式，粘贴富文本。使用plaintext-only值则不行。

现在的变化是，Vue不会为HTML规范中定义的合法值抛出 Typescript 错误。

延迟加载图像

再次，这只是对HTML特性的类型支持。它在3.3.5中被添加，并使你能够将img的加载参数设置为lazy。

这样，图像不会立即加载，而是当你的浏览器决定你很快就能看到它时加载。

这是一个标准的HTML特性，已经存在了一段时间，但这个修复是一个很好的提醒，用它来提高应用程序的性能。

此版本中还有其他的错误修复和性能改进。

Vue 3.2.40的新功能

Vue的最新版本，受欢迎的Web框架于2022年9月28日发布，为开发者提供了修复的错误，为3.3版本做准备。

错误地禁用按钮

上面的代码说明了按钮不应该被禁用，因为“false”在属性中实际上是一个字符串，而不是一个布尔值。在Vue的最新版本中，它通过检查属性的类型来修复。

V-on不会抛出错误

上面的代码和类似的最近抛出了错误，而它们本应该正常工作，它也被修复了。

事件被正确地触发

上述代码并没有导致 onBlur被调用，而它应该被调用。动态和静态v-on的合并导致这个bug消失。

修复了一个内存泄漏

在上述情况下，在dev场景中内存没有被正确清理。它是由于提升的 vnodes不正确地保留了DOM节点引起的。现在也修复了。

这些是最有趣的修复，在其他一些与SSR有关的问题也被修复了，团队正在大力工作。

Vue 3.2.41-45 的3个最有趣的错误修复

Vue团队上个月并没有休息。刚刚介绍了Vue 3.2.40，现在已经有了五个新的小版本。下面将带你了解最重要的错误修复。

Vue对奇怪的单文件组件(SFC)抛出错误

传递给单文件组件解析器的代码没有 <template>，也没有<script>。这是有效的HTML代码，但很有可能传递这样的代码表示传递了错误的变量。现在，如果组件不包含<template>或<script>标签，解析器将抛出错误。

import { parse } from '@vue/compiler-sfc';

const result=parse(`
import a from 'vue'
`);
console.log(result.errors); // []

剥离HTML注释不会导致空白被移除

通常，HTML 对于空白是宽容的。除非它不是，并且布局中断。不幸的是，这种情况发生了，其中一个HTML注释（如下所示）被剥离，而没有被替换为空格。这发生在字符串插值附近。现在已经修复了。

<template>
    <div class="foo">
        <h1>Message:</h1>
        <!-- A comment explaining the interpolation below -->
        {{ msg }}
    </div>
</template>

可以在CSS中使用内联注释

以前，在内联CSS中添加注释会导致下面的CSS规则停止工作。现在，你可以不受问题地使用注释。

<div
    style="
      /* something */
      width: 300px;
      height: 300px;
      background-color: pink;
    "
  ></div>

Vue.js 3.3：优秀的DX和10倍速度的构建

Vue 推出了 3.3 成为了头条新闻。我们都知道，Vue实际上是构建web应用程序的一种非常快速和高效的方式。它能变得更好吗？

看起来可以。新版本放宽了 props 和 emits 类型的规则，使Typescript开发者高兴。现在，定义 emits 也更容易，不需要样板文件。为props提供默认值现在也很简单。

新的 defineModel 使得定义双向绑定更容易。

使用 defineSlots，我们可以为 slots 定义类型，这是一个有用的工具，可以很好地记录代码，并且易于使用。

使用 defineSlots，我们可以为slots定义类型，这是一个有用的工具，可以很好地记录代码，并且易于使用。

我们还可以享受通用组件。

Vue再次显示它关心DX，并且能够快速并直接地构建应用程序，而不需要很多线束。

它也关心性能。现在从 rollup构建中分离类型检查，ESBuild rolloup依赖都组合到根据发布说明的10倍更快的构建时间。

Jest被Vitest替换，意味着现在编写和执行测试将更容易，更快。

更改类型生成器也有助于更精细地提高性能。

总的来说，这是一个很好的版本，涉及到每个人都应该关心的两个主要问题：简化使用和提高性能。

Vue团队每次发布都显示出它是一个生产项目的有价值的框架。它弥补了轻巧、快速、但功能强大和强类型库之间的差距。

凭借像真正的自动导入和快速设置这样的强大工具生态系统，它是现代web应用程序的绝佳选择。

作者：王大冶
原文链接：https://juejin.cn/post/7293804880706240550

用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>??

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

??<optgroup>??

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

??<option>??

常用写法：??<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>??

常用写法：??<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>??

常用写法：??<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控件

在线咨询

上一篇：Python｜简单几行代码提取html文件中全部指定
下一篇：JS中Json数据的处理和解析JSON数据的方法详解

您的项目需求

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

整合营销服务商

Web前端培训：理解CSS位置属性

WeakMaps

对 contenteditable="plaintext-only" 的支持

延迟加载图像

Vue 3.2.40的新功能

错误地禁用按钮

V-on不会抛出错误

事件被正确地触发

修复了一个内存泄漏

Vue 3.2.41-45 的3个最有趣的错误修复

Vue对奇怪的单文件组件(SFC)抛出错误

剥离HTML注释不会导致空白被移除

可以在CSS中使用内联注释

Vue.js 3.3：优秀的DX和10倍速度的构建

用html标签使用介绍

常用html标签列表

常用标签使用说明

列表

表格

与

多媒体资源

特殊字符

参考

您的项目需求