【Web前端HTML5&CSS3】03-字符实体与语义标签

李修勇 發表於 2021-5-16 14:12:00

【Web前端HTML5&CSS3】03-字符实体与语义标签

<blockquote>
<p>笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>字符实体与语义标签<ul><li>1. 字符实体</li><li>2. meta 标签</li><li>3. 语义标签</li><li>4. 块元素与行内元素<ul><li>块元素（block element）</li><li>行内元素（inline element）</li></ul></li><li>5. 内容修正</li><li>6. 布局标签</li><li>7. 列表</li><li>8. 超链接<ul><li>外部地址</li><li>内部地址</li><li>新建页面</li><li>锚点跳转</li></ul></li><li>9. 图片<ul><li>图片格式<ul><li>jpeg（jpg）</li><li>gif</li><li>png</li><li>webp</li><li>base64</li></ul></li></ul></li><li>10. 内联格式</li><li>11. 音视频<ul><li>音频</li><li>source</li><li>embed</li><li>视频</li><li>其他</li></ul></li></ul></li></ul></div><p></p>
<h1 id="字符实体与语义标签">字符实体与语义标签</h1>
<h2 id="1-字符实体">1. 字符实体</h2>
<p>有些时候，在 HTML 中不能直接书写一些特殊符号，如：</p>
<ul>
<li>多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）</li>
<li>比如字母两侧的大于小于号（可能会被认为是标签并解析）</li>
</ul>
<p>如果我们需要在网页中书写这些特殊的符号，则需要使用 html 中的实体（转义字符）实体的语法：<code>&实体的名字;</code>，如：</p>
<table>
<thead>
<tr>
<th style="text-align: left">实体名称</th>
<th style="text-align: left">显示结果</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><mark><code>&nbsp;</code></mark></td>
<td style="text-align: left"><code> </code></td>
<td>空格</td>
</tr>
<tr>
<td style="text-align: left"><mark><code>&gt;</code></mark></td>
<td style="text-align: left">></td>
<td>大于号</td>
</tr>
<tr>
<td style="text-align: left"><mark><code>&lt;</code></mark></td>
<td style="text-align: left"><</td>
<td>小于号</td>
</tr>
<tr>
<td style="text-align: left"><mark><code>&amp;</code></mark></td>
<td style="text-align: left">&</td>
<td>与</td>
</tr>
<tr>
<td style="text-align: left"><code>&copy;</code></td>
<td style="text-align: left">©</td>
<td>版权</td>
</tr>
<tr>
<td style="text-align: left"><code>&reg;</code></td>
<td style="text-align: left">®</td>
<td>注册商标</td>
</tr>
<tr>
<td style="text-align: left"><code>&trade;</code></td>
<td style="text-align: left">™</td>
<td>商标</td>
</tr>
<tr>
<td style="text-align: left"><code>&times;</code></td>
<td style="text-align: left">×</td>
<td>乘号</td>
</tr>
<tr>
<td style="text-align: left"><code>&divide;</code></td>
<td style="text-align: left">÷</td>
<td>除号</td>
</tr>
<tr>
<td style="text-align: left"><code>&iquest;</code></td>
<td style="text-align: left">¿</td>
<td>倒问号</td>
</tr>
</tbody>
</table>
<p>更多的字符实体，可参考：HTML 字符实体、HTML ISO-8859-1 参考手册</p>
<h2 id="2-meta-标签">2. meta 标签</h2>
<p>以京东网站为例，右键单击，选择<code>查看网页源代码</code></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541996-2008481982.png" alt="image-20210514225741114" loading="lazy"></p>
<pre><code class="language-html"><meta charset="utf8" version="1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"
/>
<meta
name="description"
content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
/>
<meta
name="Keywords"
content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
/>
</code></pre>
<p>meta 主要用于设置网页中的一些元数据，元数据并不是给用户看的</p>
<ul>
<li>
<p><mark>charset</mark> ：指定网页的字符集</p>
</li>
<li>
<p><mark>name</mark> ：指定的数据的名称</p>
<ul>
<li>
<p><mark>keywords</mark>：表示网站的关键字，可以同时指定多个关键字，关键字间使用<code>,</code>隔开</p>
</li>
<li>
<p><mark>description</mark>：表示网站的描述信息</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542056-1487003466.png" alt="image-20210514230338273" loading="lazy"></p>
</li>
</ul>
</li>
<li>
<p><mark>content</mark> ：指定的数据的内容，会作为搜索结果的超链接上的文字显示</p>
</li>
</ul>
<p>打开 Zeal 手册（前端开发准备中做过介绍）</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542047-1134292109.png" alt="image-20210514230900103" loading="lazy"></p>
<p>发现除了<code>charset</code>、<code>name</code>、<code>content</code>之外，还有一个叫<mark><code>http-equiv</code></mark>的属性</p>
<pre><code class="language-html">If the http-equiv attribute is set, the <meta /> element is a pragma directive,
providing information equivalent to what can be given by a similarly-named HTTP
header.
</code></pre>
<p>如果设置了<code>http-equiv</code>属性，<code><meta></code>元素就是一个 pragma 指令，提供的信息相当于一个类似名称的 HTTP 头所能提供的信息。</p>
<p>点击<code>http-equiv</code>的链接，查看其更详细信息。</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541967-1580051526.png" alt="image-20210514231126506" loading="lazy"></p>
<ul>
<li><code>content-security-policy</code>：允许页面作者为当前页面定义一个<mark>内容策略</mark>。内容策略主要指定允许的服务器来源和脚本端点，这有助于防范跨站脚本攻击。</li>
<li><code>content-type</code>：声明文档的<mark>MIME 类型和字符编码</mark>。如果指定，content 属性必须有 "<code>text/html; charset=utf-8</code> "的值。这相当于一个指定了 charset 属性的<code><meta></code>元素，并对文档中的位置有同样的限制。注意：只能在使用<code>text/html</code>的文档中使用，不能在使用 XML MIME 类型的文档中使用。</li>
<li><code>default-style</code>：设置默认的 CSS 样式表集的名称。</li>
<li><code>x-ua-compatible</code>：如果指定，内容属性必须有 "<code>IE=edge </code>"的值。用户代理被要求忽略这个 pragma。</li>
<li><mark><code>refresh</code></mark>：该指令指定页面重新加载及重定向的方式
<ul>
<li>直到页面应该被重新加载的秒数--只有当 content 属性包含一个正整数时。</li>
<li>直到页面重定向到另一个页面的秒数--只有当内容属性包含一个正整数，后面跟着字符串'<code>;url=</code>'，以及一个有效的 URL。</li>
</ul>
</li>
</ul>
<p>其中我们直接将 Examples 中的示例代码加入 Demo.html 中</p>
<pre><code class="language-html"><meta charset="utf-8" />

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
</code></pre>
<p>对<code>refresh</code>进行测试，发现过了 3 秒钟之后自动跳转到了指定的网站</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542486-2074913532.gif" alt="sxx2l-rwqq5" loading="lazy"></p>
<h2 id="3-语义标签">3. 语义标签</h2>
<p>在网页中 HTML 专门用来负责网页的结构所以在使用 html 标签时，应该关注的是标签的语义，而不是它的样式</p>
<p>这里先介绍几个基本的语义标签，还有些常用的标签放在后面具体讲解</p>
<table>
<thead>
<tr>
<th></th>
<th style="text-align: left">标签</th>
<th style="text-align: left">作用</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>块元素<br>Block Element</td>
<td style="text-align: left"><mark><code><h1></code></mark><br><mark><code><h2></code></mark><br><mark><code><h3></code></mark><br><mark><code><h4></code></mark><br><mark><code><h5></code></mark><br><mark><code><h6></code></mark></td>
<td style="text-align: left">标题</td>
<td>一共有六级标题<br>从<code>h1</code> ~ <code>h6</code>重要性递减，<code>h1</code>最重要，<code>h6</code>最不重要<br>h1 在网页中的重要性仅次于<code>title</code>标签<br>一般情况下一个页面中只会有一个<code>h1</code><br>一般情况下标题标签只会使用到<code>h1</code> ～ <code>h3</code>，<code>h4</code> ～ <code>h6</code>很少用</td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><code><hgroup></code></td>
<td style="text-align: left">标题组</td>
<td>多层次的标题。它将一组<code><h1></code> ～ <code><h6></code>元素分组</td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><mark><code><p></code></mark></td>
<td style="text-align: left">段落</td>
<td>页面中的一个段落。由空行或第一行缩进将相邻的文本块分开</td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><code><blockquote></code></td>
<td style="text-align: left">长引文</td>
<td>用缩进表示所包含文本。<br>可以用<code>cite</code>属性表示引文来源，用<code><cite></code>元素表示来源的文本表述</td>
</tr>
<tr>
<td>行内元素<br>Inline Element</td>
<td style="text-align: left"><code><q></code></td>
<td style="text-align: left">短引文</td>
<td>用一个简短的内联引号包围文本。<br>大多数浏览器通过在文本周围加上引号来实现。<br>该元素用于不需要段落分隔的短引文；</td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><mark><code><br></code></mark></td>
<td style="text-align: left">换行</td>
<td></td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><code><em></code></td>
<td style="text-align: left">强调</td>
<td>表示强调作用。<code><em></code>元素可以嵌套，每一级嵌套表示更高的强调程度<br><mark><code><i></code></mark>元素效果与它相同，不过<code><i></code>不属于语义标签</td>
</tr>
<tr>
<td></td>
<td style="text-align: left"><code><strong></code></td>
<td style="text-align: left">重要</td>
<td>表示重要性、严肃性或紧迫性。浏览器通常以粗体字呈现内容<br><mark><code><b></code></mark>元素效果与它相同，不过<code><b></code>不属于语义标签</td>
</tr>
</tbody>
</table>
<p><strong>举例</strong></p>
<pre><code class="language-html"><h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541882-1221455695.png" alt="image-20210515212349676" loading="lazy"></p>
<p>HTML5 提供的新语义元素有</p>
<table>
<thead>
<tr>
<th style="text-align: left">标签</th>
<th style="text-align: left">作用</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><mark><code><header></code></mark></td>
<td style="text-align: left">页眉</td>
<td>介绍性的内容</td>
</tr>
<tr>
<td style="text-align: left"><mark><code><footer></code></mark></td>
<td style="text-align: left">页脚</td>
<td>通常包含有关作者的信息、版权或文件链接</td>
</tr>
<tr>
<td style="text-align: left"><mark><code><nav></code></mark></td>
<td style="text-align: left">导航链接</td>
<td>可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引</td>
</tr>
<tr>
<td style="text-align: left"><mark><code><main></code></mark></td>
<td style="text-align: left">文档主内容</td>
<td>中心主题直接相关或扩展的内容</td>
</tr>
<tr>
<td style="text-align: left"><code><article></code></td>
<td style="text-align: left">文章</td>
<td>自成一体，独立分发，可重复使用</td>
</tr>
<tr>
<td style="text-align: left"><code><section></code></td>
<td style="text-align: left">文档中的节</td>
<td>没有一个更具体的语义元素来代表</td>
</tr>
<tr>
<td style="text-align: left"><mark><code><aside></code></mark></td>
<td style="text-align: left">页面内容以外的内容</td>
<td>其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现</td>
</tr>
<tr>
<td style="text-align: left"><mark><code><mark></code></mark></td>
<td style="text-align: left">重要或强调的文本</td>
<td>为参考或记事目的而被标记或突出的文本，表明其相关性和重要性</td>
</tr>
<tr>
<td style="text-align: left"><code><summary></code></td>
<td style="text-align: left"><code><details></code> 标题</td>
<td>为<code><details></code>指定一个摘要、标题或图例。点击<code><summary></code>可以切换<code><details></code>打开和关闭</td>
</tr>
<tr>
<td style="text-align: left"><code><details></code></td>
<td style="text-align: left">用户能够查看或隐藏的额外细节</td>
<td>其中的信息只有被切换到 "打开 "状态时才可见。必须使用<code><summary></code>提供一个摘要或标签</td>
</tr>
<tr>
<td style="text-align: left"><code><figure></code></td>
<td style="text-align: left">自包含内容</td>
<td>独立的内容，用<code><figcaption></code>元素指定一个可选的标题。比如图示、图表、照片、代码清单等</td>
</tr>
<tr>
<td style="text-align: left"><code><figcaption></code></td>
<td style="text-align: left"><code><figure></code> 的标题</td>
<td>描述其父元素<figure>其余内容的标题或图例</figure></td>
</tr>
<tr>
<td style="text-align: left"><code><time></code></td>
<td style="text-align: left">定义日期/时间</td>
<td>可能包括<code>datetime</code>属性，将日期翻译成机器可读的格式，以便获得更好的搜索引擎结果或自定义功能。如提醒</td>
</tr>
</tbody>
</table>
<p>这些新语义标签在视觉效果上基本上没有什么区别</p>
<h2 id="4-块元素与行内元素">4. 块元素与行内元素</h2>
<h3 id="块元素block-element">块元素（block element）</h3>
<ul>
<li>在网页中一般通过块元素来对页面进行布局</li>
</ul>
<h3 id="行内元素inline-element">行内元素（inline element）</h3>
<ul>
<li>行内元素主要用来包裹文字</li>
<li>一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
<ul>
<li>如<code><p></code>元素中不能放任何的块元素，不过</li>
</ul>
</li>
</ul>
<h2 id="5-内容修正">5. 内容修正</h2>
<p>浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：</p>
<ul>
<li>标签写在了根元素的外部</li>
<li><code><p></code>元素中嵌套了块元素</li>
<li>根元素中出现了除<code>head</code>和<code>body</code>以外的子元素</li>
</ul>
<p>这个通过浏览器中的<code>查看网页源代码</code>并不能看到效果，但是使用 F12 进行<code>开发者调试</code>时是能够看到上述几种情况被修正的结果。</p>
<p>不过虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。</p>
<h2 id="6-布局标签">6. 布局标签</h2>
<p><strong>结构化语义标签</strong></p>
<ul>
<li><code>header</code>表示网页的头部（页眉）</li>
<li><code>main</code>表示网页的主体部分（一个页面中只会有一个 main）</li>
<li><code>footer</code>表示网页的底部（页脚）</li>
<li><code>nav</code>表示网页中的导航</li>
<li><code>aside</code>和主体相关的其他内容（侧边栏）</li>
<li><code>article</code>表示一个独立的文章</li>
<li><code>section</code>表示一个独立的区块，上边的标签都不能表示时使用 section</li>
</ul>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541912-1612021092.png" alt="HTML5 语义元素" loading="lazy"></p>
<ul>
<li><code>div</code> 块元素，没有任何的语义，就用来表示一个区块。目前来讲，div 还是主要的布局元素</li>
<li><code>span</code> 行内元素，没有任何的语义，一般用于在网页中<code>选中文字</code></li>
</ul>
<h2 id="7-列表">7. 列表</h2>
<p>在 html 中可以创建列表，html 列表一共有三种：</p>
<ul>
<li>
<p>有序列表，使用<code>ol</code>标签来创建有序列表，使用<code>li</code>表示列表项</p>
<pre><code class="language-html"><ol>
<li>Mix flour, baking powder, sugar, and salt.</li>
<li>In another bowl, mix eggs, milk, and oil.</li>
<li>Stir both mixtures together.</li>
<li>Fill muffin tray 3/4 full.</li>
<li>Bake for 20 minutes.</li>
</ol>
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542482-778783470.png" alt="image-20210515212835770" loading="lazy"></p>
</li>
<li>
<p>无序列表，使用<code>ul</code>标签来创建无序列表，使用<code>li</code>表示列表项</p>
<pre><code class="language-html"><ul>
<li>Milk</li>
<li>
Cheese
<ul>
   <li>
   Blue cheese
   <ul>
      <li>Sweet blue cheese</li>
      <li>Sour blue cheese</li>
   </ul>
   </li>
   <li>Feta</li>
</ul>
</li>
</ul>
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541895-583162027.png" alt="image-20210515213301387" loading="lazy"></p>
<p>可以看出，列表元素之间是可以互相嵌套的</p>
</li>
<li>
<p>定义列表，使用<code>dl</code>标签来创建定义列表，使用<code>dt</code>表示定义的内容，使用<code>dd</code>来对内容进行解释说明</p>
<pre><code class="language-html"><dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>

<dt>Morgawr</dt>
<dd>A sea serpent.</dd>

<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541929-1780435467.png" alt="image-20210515212936773" loading="lazy"></p>
</li>
</ul>
<h2 id="8-超链接">8. 超链接</h2>
<p>超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置</p>
<p>使用<code>a</code>标签来定义超链接，<code>href</code>属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址</p>
<p>超链接是也是一个行内元素，在<code>a</code>标签中可以嵌套除它自身外的任何元素</p>
<h3 id="外部地址">外部地址</h3>
<ul>
<li><q>Linking to an absolute URL</q>：链接一个绝对路径</li>
<li><q>Linking to an email address</q>：链接一个 email 地址</li>
<li><q>Linking to telephone numbers</q>：链接电话号码</li>
<li><q>Using the download attribute to save a <code><canvas></code> as a PNG</q>：下载图片</li>
</ul>
<pre><code class="language-html"><ul>
<li><a href="https://www.baidu.com">Website</a></li>
<li><a href="mailto:example@outlook.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541957-123714443.gif" alt="动画2021-5-15" loading="lazy"></p>
<h3 id="内部地址">内部地址</h3>
<p>当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以<code>./</code>或<code>../</code>开头</p>
<ul>
<li><code>./</code> 表示当前文件所在目录，可以省略不写</li>
<li><code>../</code>表示当前文件所在目录的上一级目录</li>
</ul>
<pre><code class="language-html"><a href="./test1.html">超链接1</a><br />
<a href="../test2.html">超链接2</a><br />
<a href="./test3/test3.html">超链接3</a><br />
<a href="../test4/test4.html">超链接4</a>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541965-2106704524.gif" alt="动画2021-5-11" loading="lazy"></p>
<h3 id="新建页面">新建页面</h3>
<p><code>target</code>属性，用来指定超链接打开的位置可选值：</p>
<ul>
<li><code>_self</code>在当前页面中打开超链接，默认值</li>
<li><code>_blank</code>在新建页面中打开超链接</li>
</ul>
<pre><code class="language-html"><a href="./test1.html">超链接1——默认</a><br />
<a href="./test1.html" target="_self">超链接1——当前页面</a><br />
<a href="./test1.html" target="_blank">超链接1——新建页面</a><br />
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542016-638094754.gif" alt="动画2021-5-10" loading="lazy"></p>
<h3 id="锚点跳转">锚点跳转</h3>
<p>可以使用<code>javascript:void(0);</code>来作为<code>href</code>的属性，此时点击这个超链接什么也不会发生</p>
<p>可以将<code>#</code>作为超链接的路径的占位符使用。</p>
<p>可以直接将超链接的<code>href</code>属性设置为<code>#</code>，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置</p>
<p>可以跳转到页面的指定位置（锚点），只需将<code>href</code>属性设置<code>#目标元素的id属性值</code>（唯一不重复）</p>
<pre><code class="language-html"><p>汉皇重色思倾国，御宇多年求不得。</p>
<p>杨家有女初长成，养在深闺人未识。</p>
<p>天生丽质难自弃，一朝选在君王侧。</p>
<p><a id="Anchor1" href="#Anchor2"> 回眸一笑百媚生，六宫粉黛无颜色。</a></p>
<p>春寒赐浴华清池，温泉水滑洗凝脂。</p>
<p>侍儿扶起娇无力，始是新承恩泽时。</p>
<p>云鬓花颜金步摇，芙蓉帐暖度春宵。</p>
<p>春宵苦短日高起，从此君王不早朝。</p>
<p>承欢侍宴无闲暇，春从春游夜专夜。</p>
<p><a id="Anchor2" href="#Anchor3"> 后宫佳丽三千人，三千宠爱在一身。</a></p>
<p>金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
<p>姊妹弟兄皆列土，可怜光彩生门户。</p>
<p>遂令天下父母心，不重生男重生女。</p>
<p>骊宫高处入青云，仙乐风飘处处闻。</p>
<p>缓歌慢舞凝丝竹，尽日君王看不足。</p>
<p>渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>
<p>九重城阙烟尘生，千乘万骑西南行。</p>
<p>翠华摇摇行复止，西出都门百余里。</p>
<p>六军不发无奈何，宛转蛾眉马前死。</p>
<p>花钿委地无人收，翠翘金雀玉搔头。</p>
<p>君王掩面救不得，回看血泪相和流。</p>
<p>黄埃散漫风萧索，云栈萦纡登剑阁。</p>
<p>峨嵋山下少人行，旌旗无光日色薄。</p>
<p>蜀江水碧蜀山青，圣主朝朝暮暮情。</p>
<p>行宫见月伤心色，夜雨闻铃肠断声。</p>
<p>天旋地转回龙驭，到此踌躇不能去。</p>
<p>马嵬坡下泥土中，不见玉颜空死处。</p>
<p>君臣相顾尽沾衣，东望都门信马归。</p>
<p>归来池苑皆依旧，太液芙蓉未央柳。</p>
<p>芙蓉如面柳如眉，对此如何不泪垂。</p>
<p>春风桃李花开夜，秋雨梧桐叶落时。</p>
<p>西宫南苑多秋草，落叶满阶红不扫。</p>
<p>梨园弟子白发新，椒房阿监青娥老。</p>
<p>夕殿萤飞思悄然，孤灯挑尽未成眠。</p>
<p><a id="Anchor3" href="#Anchor4"> 迟迟钟鼓初长夜，耿耿星河欲曙天。 </a></p>
<p>鸳鸯瓦冷霜华重，翡翠衾寒谁与共。</p>
<p>悠悠生死别经年，魂魄不曾来入梦。</p>
<p>临邛道士鸿都客，能以精诚致魂魄。</p>
<p>为感君王辗转思，遂教方士殷勤觅。</p>
<p>排空驭气奔如电，升天入地求之遍。</p>
<p>上穷碧落下黄泉，两处茫茫皆不见。</p>
<p>忽闻海上有仙山，山在虚无缥渺间。</p>
<p>楼阁玲珑五云起，其中绰约多仙子。</p>
<p>中有一人字太真，雪肤花貌参差是。</p>
<p>金阙西厢叩玉扃，转教小玉报双成。</p>
<p>闻道汉家天子使，九华帐里梦魂惊。</p>
<p>揽衣推枕起徘徊，珠箔银屏迤逦开。</p>
<p>云鬓半偏新睡觉，花冠不整下堂来。</p>
<p><a id="Anchor4" href="#Anchor5"> 风吹仙袂飘飖举，犹似霓裳羽衣舞。 </a></p>
<p>玉容寂寞泪阑干，梨花一枝春带雨。</p>
<p>含情凝睇谢君王，一别音容两渺茫。</p>
<p>昭阳殿里恩爱绝，蓬莱宫中日月长。</p>
<p>回头下望人寰处，不见长安见尘雾。</p>
<p>惟将旧物表深情，钿合金钗寄将去。</p>
<p>钗留一股合一扇，钗擘黄金合分钿。</p>
<p>但令心似金钿坚，天上人间会相见。</p>
<p>临别殷勤重寄词，词中有誓两心知。</p>
<p>七月七日长生殿，夜半无人私语时。</p>
<p><a id="Anchor5" href="#Anchor6"> 在天愿作比翼鸟，在地愿为连理枝。 </a></p>
<p>天长地久有时尽，此恨绵绵无绝期。</p>


<a href="#">回到顶部</a>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542483-931033732.gif" alt="动画2021-5-14" loading="lazy"></p>
<h2 id="9-图片">9. 图片</h2>
<p>图片标签用于向当前页面中引入一个外部图片</p>
<p><code>img</code>标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）</p>
<p><strong>属性</strong></p>
<ul>
<li><code>src</code>：属性指定的是外部图片的路径（路径规则和超链接是一样的）</li>
<li><code>alt</code>：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据 alt 中的内容来识别图片</li>
<li><code>width</code>：图片的宽度（单位是像素）</li>
<li><code>height</code> ：图片的高度（单位是像素）</li>
<li>宽度和高度中如果只修改了一个，则另一个会等比例缩放</li>
</ul>
<p><strong>注意</strong></p>
<ul>
<li>一般情况在 pc 端，不建议修改图片的大小，需要多大的图片就裁多大</li>
<li>但是在移动端，经常需要对图片进行缩放（大图缩小）</li>
</ul>
<p><strong>举例</strong></p>
<pre><code class="language-html"><img
src="https://gitee.com/vectorx/ImageCloud/raw/master/img/20210513002416.png"
alt="蒂姆·伯纳斯·李爵士，万维网的发明人"
/>
<img
src="https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210514233853.gif"
alt="结构、表现、行为"
/>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542001-1369397692.png" alt="image-20210515233449533" loading="lazy"></p>
<h3 id="图片格式">图片格式</h3>
<h4 id="jpegjpg">jpeg（jpg）</h4>
<ul>
<li>支持的颜色比较丰富</li>
<li>不支持透明效果</li>
<li>不支持动图</li>
<li>一般用来显示照片</li>
</ul>
<h4 id="gif">gif</h4>
<ul>
<li>支持的颜色比较单一</li>
<li>支持简单透明</li>
<li>支持动图</li>
</ul>
<h4 id="png">png</h4>
<ul>
<li>支持的颜色丰富</li>
<li>支持复杂透明</li>
<li>不支持动图</li>
<li>专为网页而生</li>
</ul>
<h4 id="webp">webp</h4>
<ul>
<li>这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式</li>
<li>具备其他图片格式的所有优点，而且文件还特别的小</li>
<li>缺点：兼容性不好</li>
</ul>
<h4 id="base64">base64</h4>
<ul>
<li>
<p>将图片使用 base64 编码，这样可以将图片转换为字符，通过字符的形式来引入图片</p>
<pre><code class="language-html"><img
width="300"
src="data:image/png;base64,AAABAAEAICAAAAEAIACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAxVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zda/P9qhPz/mKr9/7bC/f/Fz/7/ydL+/8HM/v+tu/3/jaH9/156/P8zV/z/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/z9h/P+gsP3/8fP+/////////////////////////////////////////////////+ru/v+Zqv3/PV/8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P9lgPz/6+/+///////////////////////////////////////////////////////////////////////s7/7/Y378/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/aoT8//r6/v///////////////////////v7+/+Po/v/R2f7/y9T+/9rg/v/3+f7////////////////////////////j6P7/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/0Zm/P/w8/7/////////////////5+v+/4ab/f9AYvz/MVX8/zFV/P8xVfz/MVX8/zVY/P9kf/z/tsP9//39/v////////////T2/v8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/sL79/////////////////87W/v8/Yfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/ZYD8//L0/v//////n7D9/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/0Bh/P/6+/7////////////v8v7/QmP8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/TWz8/3GJ/P8yVvz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/e5L8/////////////////5qr/f8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P+mtv3/////////////////XHn8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/7/L/f////////////////87Xfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/ydL+////////////+/v+/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P/Ezv7////////////9/f7/M1b8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/7G//f////////////////9HZ/z/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/kqX9/////////////////22H/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P9kf/z/////////////////pbX9/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zRX/P/v8v7////////////s7/7/Nln8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/6Ky/f////////////////+Inf3/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/RWb8//f4/v////////////H0/v9Kafz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/PV/8/1Jw/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/kKT9/////////////////9vh/v9DZPz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/1Fv/P/m6/7//v7+/3aO/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8zVvz/xM79/////////////////+fr/v9viPz/MVX8/zFV/P8xVfz/MVX8/zRX/P+Emf3/8/X+////////////xc/+/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P87Xfz/ztf+///////////////////////i5/7/sL79/5+w/f+ywP3/6u3+//////////////////////+uvP3/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P83Wvz/sL79//7+/v//////////////////////////////////////////////////////3OL+/0Vl/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/aYP8/9Pb/v//////////////////////////////////////9fb+/5yu/f84W/z/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/1d0/P+Spf3/t8T9/8fR/v/Dzv7/qrn9/3uS/P88Xvz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/MVX8/zFV/P8xVfz/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="
/>
</code></pre>
<p>图片格式的选择</p>
</li>
<li>
<p>图片效果一样的，选文件小的</p>
</li>
<li>
<p>图片效果不一样的，选图片效果好的</p>
</li>
<li>
<p>尽可能的兼顾和平衡图片效果和文件大小</p>
</li>
</ul>
<h2 id="10-内联格式">10. 内联格式</h2>
<p>内联框架<code>iframe</code>，用于向当前页面中引入一个其他页面，</p>
<ul>
<li><code>src</code>指定要引入的网页的路径</li>
<li><code>frameborder</code>指定内联框架的边框</li>
</ul>
<p><strong>举例</strong></p>
<pre><code class="language-html"><iframe
src="https://www.qq.com"
width="800"
height="600"
frameborder="0"
></iframe>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542164-1025647085.png" alt="image-20210516001417802" loading="lazy"></p>
<h2 id="11-音视频">11. 音视频</h2>
<h3 id="音频">音频</h3>
<p><code>audio</code>标签用来向页面中引入一个外部的音频文件</p>
<p>音视频文件引入时，默认情况下不允许用户自己控制播放停止</p>
<p><strong>属性</strong>：</p>
<ul>
<li><code>controls</code>是否允许用户控制播放</li>
<li><code>autoplay</code>音频文件是否自动播放
<ul>
<li>如果设置了<code>autoplay</code>，则音乐在打开页面时会自动播放</li>
<li>但是目前来讲大部分浏览器都不会自动对音乐进行播放</li>
</ul>
</li>
<li><code>loop</code>音乐是否循环播放</li>
</ul>
<pre><code class="language-html"><audio src="./source/audio.mp3" controls autoplay loop></audio>
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542484-1760989805.png" alt="image-20210516002915651" loading="lazy"></p>
<h3 id="source">source</h3>
<p>除了通过<code>src</code>属性来指定外部文件的路径以外，还可以通过<code><source></code>元素来指定文件的路径</p>
<pre><code class="language-html"><audio controls autoplay loop>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3" />
<source src="./source/audio.ogg" />
</audio>
</code></pre>
<p>IE11 下，能够正常播放</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542042-207124260.png" alt="image-20210516004453236" loading="lazy"></p>
<p>IE8 下，出现我们自定义的提示信息</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542061-77617116.png" alt="image-20210516005054543" loading="lazy"></p>
<h3 id="embed">embed</h3>
<p>IE8 下不支持<code>audio</code>元素，但是可以使用 <code><embed></code> 元素在文档中的指定位置嵌入外部内容。</p>
<p>这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。</p>
<pre><code class="language-html"><embed src="./source/audio.mp3" />
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542017-1104387084.png" alt="image-20210516005207428" loading="lazy"></p>
<h3 id="视频">视频</h3>
<p>使用<code>video</code>标签来向网页中引入一个视频，使用方式和<code>audio</code>基本上是一样的</p>
<pre><code class="language-html"><video controls>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm"
/>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4"
/>
<embed
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
type="video/mp4"
/>
</video>
</code></pre>
<p>IE11 下，能够正常播放</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542018-130356749.png" alt="image-20210516012905334" loading="lazy"></p>
<p>IE8 下，也能正常播放</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100541965-100607468.png" alt="image-20210516010618514" loading="lazy"></p>
<h3 id="其他">其他</h3>
<p>通过<code>iframe</code>和<code>embed</code>的方式引入视频。以某艺为例，提供了视频链接的 HTML 代码和通用代码</p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542482-962910067.png" alt="image-20210516011905816" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/2364648/202207/2364648-20220702100542516-1671322966.png" alt="image-20210516011837229" loading="lazy"></p>
<pre><code class="language-html"><iframe
src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0c53ddd55f262c6d416afa9d1f49dc55&tvId=1008748400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%"
frameborder="0"
allowfullscreen="true"
width="100%"
height="100%"
></iframe>
</code></pre>
<p>不过，<code>embed</code>需要 flash 的支持</p>
<pre><code class="language-html"><embed
   src="//player.video.iqiyi.com/0c53ddd55f262c6d416afa9d1f49dc55/0/0/v_19rrcuh1jw.swf-albumId=1008748400-tvId=1008748400-isPurchase=0-cnId=undefined"
   allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always"
   type="application/x-shockwave-flash"></embed>
</code></pre><br><br>
来源：https://www.cnblogs.com/vectorx/p/14773767.html

頁: [1]

琼殿技术论坛's Archiver

【Web前端HTML5&CSS3】03-字符实体与语义标签