Web前端

最新推荐文章于 2023-07-10 15:41:56 发布

不知死活的猿

最新推荐文章于 2023-07-10 15:41:56 发布

阅读量129

点赞数

分类专栏： JavaWeb 文章标签： java css html web javascript

原文链接：https://blog.csdn.net/dangai0201/article/details/77796405

版权

JavaWeb 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

基础标签

布局篇

<header>：

表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。

用于布局头部。

<nav>：

表示导航栏，描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.

用于网站导航位。

<main>:

呈现了文档 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。

注意：<main> 标签不能是以下元素的继承，<article>、<aside>、<footer>、<header> 或 <nav> 。
在一个文档中不能出现一个以上的 <main>标签

<header></header>
<nav></nav>
<main>
       <article>
            <section>
                    ...
            </section>
       </article>
       <article>
            <section>
                    ...
            </section>
        </article>
        ...
        <aside></aside>
</main>
<footer></footer>

<article>：

表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

可用于定义文章或大段文字区域。

<section>：

表示文档中的一个区域，比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>~<h6>)作为子节点来辨识每一个<section>。

如果元素内容可以分为几个部分的话，应该使用<article>而不是<section>
不要把<section>元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）。一般来说，一个<section>应该出现在文档大纲中。
<section>可用作对<article>的分区。

<aside>：

元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。

<footer>：

表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

音频和视频：

<audio>：在文档中表示音频内容
<audio> 元素可以包含多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述；浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。

属性

src：嵌入的音频的URL。该URL应遵从 HTTP access controls，这是一个可选属性；你可以在audio元素中使用
<source> 元素来替代该属性指定嵌入的音频。
autoplay：boolean，默认值为"false"，设置为"true"时，音频会马上自动开始播放
controls：如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
loop：boolean，如果指定，将循环播放音频。
muted：boolean，默认值为"false"–>有声音，“true”–>静音
volume: 音频播放的音量。值从0.0 (无声) 到 1.0 (最大声)
buffered：你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。
preload：枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。

可以是以下属性之一：

none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
auto / 空字符串: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。假如不设置，默认值就是浏览器定义的了（不同浏览器会选择自己的默认值），即使规范建议设置为metadata。
autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和
preload属性在规范里是允许的。规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

<!-- Audio playback with captions -->
<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English">
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

<!-- audio playback using <source> -->
<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="foo.wav" type="audio/wav">
</audio>

事件

<video>：用于在HTML或者XHTML文档中嵌入视频内容
属性

src：要嵌到页面的视频的URL。可选；你也可以使用video块内的 <source> 元素来指定需要嵌到页面的视频。
autoplay：boolean，默认值为"false"，指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。
controls：加上这个属性，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
height：视频展示区域的高度，单位是CSS像素。
width：视频显示区域的宽度，单位是CSS像素。
loop：boolean；指定后，会在视频结尾的地方，自动返回视频开始的地方。
buffered：这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。
poster：一个海报帧的URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。
preload：同<audio>的preload
crossorigin：该枚举属性指明抓取相关图片是否必须用到CORS（跨域资源共享）。支持CORS的资源可在
<canvas>

元素中被重用，而不会被污染。允许的值如下：

anonymous：跨域请求（即，使用 Origin: 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509
证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 Access-Control-Allow-Origin:
HTTP头)，图片会被污染并且它的使用会受限。
use-credentials：跨域请求A cross-origin request (i.e. with Origin: HTTP
header) 会被执行，且凭证会被发送 (即，发送一个 cookie, 一个证书和HTTP Basic授权会被执行)。如果服务器不提供证书给源站点 (通过Access-Control-Allow-Credentials: HTTP 头)，图像会被污染且它的使用会受限。不加这个属性时，抓取资源不会走CORS请求(即，不会发送 Origin: HTTP 头)，保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。查看
CORS 设置属性获取更多信息。

<!-- Simple video example -->
<!-- 播放一个视频，视频一收到，允许播放的时候就会立马开始播放，而不会停下来直到下载更多内容。 图片 "posterimage.jpg" 会一直展示在视频区域，直到开始播放。 -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">

  抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>

并用你喜欢的播放器观看!

</video>

<!-- Video with subtitles -->
<!-- 允许用户选择不同的字幕 -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

事件

abort：在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay：在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough：在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange：元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied：媒体被清空（初始化）时触发。
ended：播放结束时触发。
error：在发生错误时触发。元素的error属性会包含更多信息。参阅Error
handling获得详细信息。
loadeddata：媒体的第一帧已经加载完毕。
loadedmetadata：媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart：在媒体开始加载时触发。
mozaudioavailable：当音频数据缓存并交给音频层处理时
pause：播放暂停时触发。
play：在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing：在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress：告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange：在回放速率变化时触发。
seeked：在跳跃操作完成时触发。
seeking：在跳跃操作开始时触发。
stalled：在尝试获取媒体数据，但数据不可用时触发。
suspend：在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate：元素的currentTime属性表示的时间已经改变。
volumechange：在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）。
waiting：在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。

拾遗：

<figure>：

代表一段独立的内容, 经常与说明 <figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主体(main flow)时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

<!-- 插入图片和说明 -->
<!-- Just a figure -->
<figure>
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7AFBWpZ2-1605335473573)(https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png)]
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  <figcaption>Fig1. MDN Logo</figcaption>
</figure>
<p></p>
<!-- 插入代码块 -->
<figure>
  <figcaption>Get browser details using navigator</figcaption>
  <pre>
    function NavigatorExample() {
      var txt;
      txt = "Browser CodeName: " + navigator.appCodeName;
      txt+= "Browser Name: " + navigator.appName;
      txt+= "Browser Version: " + navigator.appVersion ;
      txt+= "Cookies Enabled: " + navigator.cookieEnabled;
      txt+= "Platform: " + navigator.platform;
      txt+= "User-agent header: " + navigator.userAgent;
    }            
  </pre>
</figure>
<figcaption>：