HTML5新增标签

超级小丑_Supclown

于 2022-04-14 10:01:13 发布

阅读量162

点赞数

分类专栏： html5 文章标签：前端

本文链接：https://blog.csdn.net/m0_57860459/article/details/124164702

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

(1) 语义化结构标签#

最常用语义标签

header 头部标签
footer 底部标签
nav 导航标签
aside 侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>头部</header>
    <nav>导航栏</nav>
    <aside>侧边栏</aside> <div>主体</div>
    <footer>d底部</footer>
</body>
</html>

其他语义化标签

<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

(2) 多媒体标签#

<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

audio 和 video 标签

<!-- audio标签 -->
<!DOCTYPE HTML>
<html>
<body>
    <audio src="https://www.w3school.com.cn/i/horse.ogg" controls="controls">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

<!-- video 标签 -->
<!DOCTYPE HTML>
<html>
<body>
    <video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
        your browser does not support the video tag
    </video>
</body>
</html>

(3) 新的 Input 类型#

number
tel
date
color
datetime
datetime-local
email
month
range
search
time
url
week

<!DOCTYPE HTML>
<html>
<body>
    <input type="number" placeholder="请输入或选择数字">
    <input type="tel" placeholder="请输入电话号码">
    <input type="date" placeholder="请选择日期">
</body>
</html>

(4) canvas画布#

先了解一下

<!DOCTYPE HTML>
<html>
<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
  </canvas>
  
  <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(10, 10);
    cxt.lineTo(150, 50);
    cxt.lineTo(10, 50);
    cxt.stroke();
  </script>
</body>
</html>

超级小丑_Supclown

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5新增标签

(1) 语义化结构标签#最常用语义标签header 头部标签 footer 底部标签 nav 导航标签 aside 侧边栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫