二进制的流浪
0%

HTML基础---学习手记

发表于 更新于 分类于
本文字数： 2.3k 阅读时长 ≈ 2 分钟

关于HTML一些生疏和不常见的知识，简单汇总一下。

HTML布局元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
><body>
 <header>
 </header>
 
 <nav>
 </nav>
 
 <main>
   <article>
   </article>
   
   <aside>
   </aside>
 </main>
 
 <footer>
 </footer>
></body>

Layout

多媒体嵌入

图片—img

为图片提供一个语义容器，在标题和图片之间建立清晰的关联，使用HTML5 的

和
元素。

1
2
3
4
<figure>
	<img src="address" alt="当图片无法显示时" title="当鼠标悬浮在图片时说明图片">
  <figcaption>说明图片的描述文字</figcaption>
</figure>

视频和音频—video&audio

Video

1
2
3
4
5
<video src="视频资源地址" controls>
  <p>
    不支持视频时显示
  </p>
</video>

controls 显示浏览器提供的控件界面

使用多个播放源以提高兼容性

1
2
3
4
5
6
7
<video controls>
  <source src="" type="video/mp4">
  <source src="" type="video/webm">
  <p>
    浏览器不支持该视频时显示
  </p>
</video>

WebM 和 MP4 两种格式在目前已经足够支持大多数平台和浏览器。

其他video特性—H5

1
2
3
4
5
6
7
<video controls width="400" height="400"
       autoplay loop muted
       poster="address">
  <source src="address" type="video/mp4">
  <source src="address" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

poster—视频的封面

audio标签

1
2
3
4
5
<audio controls>
  <source src="" type="audio/mp3">
  <source src="" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频时显示</p>
</audio>

audio没有视觉部件，所以除了不支持width、height和poster之外，它支持video所以video标签拥有的特性。

Iframe元素—嵌入技术

embed和object元素主要用来嵌入PDF和SVG、Flash，但现今它们都在逐渐被淘汰，只有iframe现在经常还被使用。

1
2
3
4
5
6
7
<iframe src="address"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="address">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

**allowfullscreen: **允许进行全屏展示

frameborder: 绘制边框（推荐在CSS中用border）

sandbox: 提高安全性

响应式图片

1
2
3
4
5
6
7
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset: 图像地址 固有宽度（以w为单位）

sizes: (媒体条件) 槽的宽度（条件为真时）

运行机制：

                1. 检查设备宽度
                2. 检查sizes列表中哪个媒体条件第一个为真
                3. 查看对应的槽宽度
                4. 加载srcset列表中最接近该槽大小的图像