WEB前端-HTML5基础知识复习(一)

本文最后更新于:December 3, 2021 pm

HTML5规范于2014年10月29日由万维网联盟正式宣布,HTML是万维网最核心的超文本标记语言。万维网不等同于互联网,但它是依靠互联网运行的服务之一,万维网又简写为www,它可以实现在互联网的帮助下,访问由许多互相链接的超文本组成的系统。现代的浏览器都支持 HTML5。HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是块级 元素。为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block。

1
2
3
header, section, footer, aside, nav, main, article, figure {
display: block;
}

HTML5中的一些新特性:

  • 1.用于绘画的 canvas 元素
  • 2.用于媒介回放的 video 和 audio 元素
  • 3.对本地离线存储的更好的支持
  • 4.新的特殊内容元素,比如 article、footer、header、nav、section
  • 5.新的表单控件,比如 calendar、date、time、email、url、search

HTML5的改进:

  • 1.新元素
  • 2新属性
  • 3.完全支持 CSS3
  • 4.Video 和 Audio
  • 5.2D/3D 制图
  • 6.本地存储
  • 7.本地 SQL 数据
  • 8.Web 应用

······


目录

1.HTML5新元素

1.1 <canvas>元素

标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API。是一个画布标签,只是作为一个图形容器,必须使用脚本来绘制图形。<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

简单使用实例:显示一个红色的矩形.

1
2
3
4
5
6
7
8
<canvas id="myCanvas"></canvas>

<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

1.2 新多媒体元素

1.2.1 <audio>

定义音频内容。

简单使用实例:

1
2
3
4
5
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

1.2.2 <video>

定义视频(video 或者 movie)。

简单使用实例:

1
2
3
4
5
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>

1.2.3 <source>

定义多媒体资源 <video> 和 <audio>。

简单使用实例:

1
2
3
4
5
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

1.2.4 <embed>

定义嵌入的内容,比如插件。

简单使用实例:

1
<embed src="helloworld.swf">

1.2.5 <track>

为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

简单使用实例:带有两个字幕轨道的视频.

1
2
3
4
5
6
7
8
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>

1.3 新表单元素

标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出,比如脚本的输出。

1.4 新的语义和结构元素

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

1.5 已移除的元素

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/2546412185.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!