图片
HTML并非只能用于展示文字，它还可以用于展示包括图片在内的多种多媒体内容。为了在HTML中使用图片，我们会用到<img>标签来创建图片元素。
<img src="example.jpg">
对于<img>图片元素，我们最少只需要设置一个src属性便能使它工作（该属性是必须的），在网页上正常显示图片。对于src属性，其内容同样也是一个资源的地址，它与超链接的href属性具有相似的规则。
<img>是一个自闭合标签，它不需要内容和结束标签，为了更好的在代码中区分一般标签和自闭合标签，我们可以在标签的>前增加一个/。对于自闭合标签的写法，可以依照具体选择的代码规范而定，<img>或<img />两种写法都是正确的。
图片元素的其它属性
对于图片元素，它还有一些其他的属性可以使用：
alt: 图片的替代文字，在图片无法显示的时候将展示其设定的文字，例如图片资源不存在的情况下。title: 图片的提示信息，与超链接的属性相同，在鼠标悬停在图片上时将展示该信息。
另外，图片元素还可以通过width和height属性来设置宽度与高度，默认情况下使用像素为单位。在使用width和height属性后，图片将按该属性设置的值展示，而非根据真实的图片大小。自定义设置宽度与高度后，也有可能导致图片未能保持原始的宽高比，使展示的图片变形。
对于HTML中图片宽度与高度的修改，更推荐在CSS中设定而非直接在HTML中。
其它多媒体内容
除图片外，HTML中也可以插入音频、视频、矢量图等多媒体元素。在这里，我们将简单地介绍一下<video>视频元素以及<audio>音频元素。
视频
对于<video>视频标签，是在HTML5新增支持的内容，它的一个简单的用法是使用类似于图片的src属性：
<video src="hello.mp4">
<p>浏览器不支持HTML5视频</p>
</video>
对于视频元素的内容，它被称之为后备内容，即当浏览器不支持HTML5视频或者不支持视频资源时，将使用的后备回退内容。<video>元素的后备内容可以是任何不同的内容，在这里我们使用的是展示不支持视频的提示文本。利用后备内容的特点，我们可以结合<source>元素，为视频指定多个媒体资源，以提高对于不同浏览器的兼容性：
<video>
<source src="hello.mp4" type="video/mp4" />
<source src="hello.webm" type="video/webm" />
<p>浏览器不支持HTML5视频</p>
</video>
<video>视频元素还有以下几个可能会用到的属性：
autoplay: 视频是否立即自动播放，即使在页面还未完全加载的情况下。controls: 是否展示控制控制，使用户能控制视频的播放。loop: 视频是否循环播放。muted: 视频是否静音播放。
以上几个属性的值均为布尔值，使用时若为真的情况下，可省略属性值，例如：
<video controls autoplay>
<source src="hello.mp4" type="video/mp4" />
<source src="hello.webm" type="video/webm" />
<p>浏览器不支持HTML5视频</p>
</video>
音频内容
在HTML中嵌入音频内容的方法与视频类似，只是将<video>标签换为了<audio>标签。<audio>的使用方法与视频相似，区别为音频没有视觉相关的部分属性，例如width、height、poster等。
<audio controls autoplay>
<source src="hello.mp3" type="audio/mp3" />
<source src="hello.ogg" type="audio/ogg" />
<p>浏览器不支持HTML5音频</p>
</audio>
其它嵌入内容
除常见的图片、视频、音频外，HTML还可以嵌入一些其它内容，例如使用<iframe>可以在当前网页嵌入其它网页，或是使用<object>嵌入Flash内容等。这些可嵌入的内容不在于本课程讨论范围内，有兴趣可自行深入了解。
文档框架与容器
在前文中，我们都是直接在网页中使用具体的元素，而在本节中，我们将介绍通过一些特定的结构化元素，来构建一个网页的整体框架。
对于一个文档我们通常会有目录（导航）、内容、页眉、页脚、侧边栏等结构。在HTML中，也有一部分语义化的标签，提供了标记不同功能区段的能力：
<main>: 页面中独有的主要内容，在每个页面中只使用一次，一般直接放于<body>中。<article>: 代表文章内容，与页面中的其它部分无关。<section>: 代表一个具体功能的部分，例如文章中的摘要等。<aside>: 代表与页面无关或可以独立的内容，通常表示为侧边栏。<header>: 代表全局或网页中的一部分的页眉。<nav>: 代表页面中主导航功能，且通常不包含二级目录链接。<footer>: 代表页面页脚部分。
除此以外，HTML还提供了一个无特定语义的块元素<div>，它可以被用于构建不具备上述特定语义的内容。
另外，在HTML中还提供了<hr>和<br>两个标签，可以使用它们实现添加水平分割线以及换行的效果。
<hr>与<br>均为自闭合标签，不需要有任何内容。
元数据
HTML的元数据可以粗略地理解为保存了网页中不会在浏览器中显示的内容，而是提供给浏览器本身或是第三方使用的一些数据。通常，网页的元数据会包含在<head>中，例如前文提到的使用<title>标签设置网页的标题。我们将不会直接在网页中看到标题的文本，但通常浏览器会在窗口或标签栏中展示。
下面，我们将对常见的元数据作简单的介绍。
<link>: 链接外部资源文件，通常用于加载CSS文件，或是设置网页的图标。<script>: 嵌入或加载javascript、ecmascript等脚本，在不指定类型的情况下默认为javascript。<meta>: 设置HTML的元数据，包括网页作者、描述、编码、关键词等内容，也可以用于指定SEO优化内容等属性。
除了在<head>中使用上述标签定义元数据外，还可以通过<html>标签的lang属性，设置网页的语言，例如<html lang="zh-CN">。网页语言的设定规则，可以参考相关ISO标准。
欢迎大家搜索关注我的公众号“风纸”，或是直接扫描下方二维码关注👇，也可以在微信上查看本文。
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
