2.1HTML5基本结构 - 码农知识堂

2.1HTML5基本结构
HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成，这些标签以<元素名>的形式出现，用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来。

HTML5文档的基本结构如下：
```
html>
<html>
  <head>
    <title>网页标题title>
  head>
  <body>
    主体内容
  body>
html>
```
HTML5元素的内容一般以起始标签<元素名>开始，以结束标签元素名>终止。例如首部标签中的</span><span style="color:#000000;">标签用于标记网页标题，该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签</span><span style="color:#000000;"><body></span><span style="color:#000000;">中的内容显示到网页上。</span></p> <p>HTML标签 </p> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul><li>HTML 标签是由<em>尖括号</em>包围的关键词，比如 <html></li><li>HTML 标签通常是<em>成对出现</em>的，比如 <b> 和 </b></li><li>标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标签</em></li><li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em></li></ul> <p>HTML文档 = 网页</p> <ul><li>HTML 文档<em>描述网页</em></li><li>HTML 文档<em>包含 HTML 标签</em>和纯文本</li><li>HTML 文档也被称为<em>网页</em></li></ul> <p> Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。</p> <h4 id="2.1.1%20%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%3C!DOCTYPE%3E" style="margin-left:0in;text-align:left;"><a name="t0"></a><span style="color:#000000;"><strong>2.1.1 </strong></span><span style="color:#000000;"><strong>文档类型声明</strong></span><span style="color:#000000;"><strong><!DOCTYPE></strong></span></h4> <p><span style="color:#000000;"> DOCTYPE</span><span style="color:#000000;">是</span><span style="color:#000000;">Document Type</span><span style="color:#000000;">的简写，含义为文档类型。</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档基础结构中第一行</span><span style="color:#000000;"><!DOCTYPE html></span><span style="color:#000000;">就是</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">的</span><span style="color:#000000;">DOCTYPE</span><span style="color:#000000;">声明。</span></p> <p><span style="color:#d34817;"> <strong> </strong></span><strong>网页实际上有多种浏览模式，例如兼容模式，标准模式等。</strong><span style="color:#000000;">HTML5</span><span style="color:#000000;">用</span><span style="color:#000000;"><!DOCTYPE></span><span style="color:#000000;">标签定义文档该基于何种标准在网页中呈现。</span><strong><span style="color:#000000;"><!DOCTYPE html></span></strong><span style="color:#000000;"><strong>意味着该网页的呈现标准是基于</strong></span><strong><span style="color:#000000;">HTML5</span></strong><span style="color:#000000;">。当使用该</span><span style="color:#000000;">DOCTYPE声明方式时，浏览器会<strong>将此页面定义为标准兼容模式</strong>。</span></p> <p><span style="color:#000000;"><strong>HTML4.01</strong></span><span style="color:#000000;"><strong>的文档类型声明较为复杂，常见如下：</strong></span></p> <pre data-index="1" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span> <span class="hljs-keyword">PUBLIC</span> <span class="hljs-string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="hljs-string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;"><strong>在</strong></span><span style="color:#000000;"><strong>HTML5</strong></span><span style="color:#000000;"><strong>中，该声明被大幅度化简：</strong></span></p> <pre data-index="2" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;">在浏览器打开的网页页面任意位置右键点击，选择“查看网页源代码”，在页面顶端第一句就是</span><span style="color:#000000;">DOCTYPE</span><span style="color:#000000;">声明。</span></p> <p><span style="color:#000000;"> HTML5</span><span style="color:#000000;">引入了新的特性和元素，同时也取消了对部分过期元素的支持，因此如果在</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">的</span><span style="color:#000000;">DOCTYPE</span><span style="color:#000000;">声明下使用了</span><span style="color:#000000;">HTML</span><span style="color:#000000;">的过期元素，网页可能无法正常显示预期的效果。</span></p> <h4 id="2.1.2%20%E6%A0%B9%E6%A0%87%E7%AD%BE%3Chtml%3E" style="margin-left:0in;text-align:left;"><a name="t1"></a><span style="color:#000000;"><strong>2.1.2 </strong></span><span style="color:#000000;"><strong>根标签</strong></span><span style="color:#000000;"><strong><html></strong></span></h4> <p><span style="color:#000000;"><strong> </strong><html></span><span style="color:#000000;">是</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档的<strong>根元素标签</strong>，除顶部</span><span style="color:#000000;"><!DOCTYPE html></span><span style="color:#000000;">文档类型声明以外，所有的</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档都是<strong>以</strong></span><strong><span style="color:#000000;"><html></span><span style="color:#000000;">标签开始，以</span><span style="color:#000000;"></html></span></strong><span style="color:#000000;"><strong>标签结束</strong>。在</span><span style="color:#000000;"><html></span><span style="color:#000000;">和</span><span style="color:#000000;"></html></span><span style="color:#000000;">标签内包含了两个重要的元素标签：</span><strong><span style="color:#000000;"><head></span></strong><span style="color:#000000;"><strong>首部标签</strong>和</span><strong><span style="color:#000000;"><body></span></strong><span style="color:#000000;"><strong>主体标签</strong>，<strong>分别用于标记文档的首部和主体部分</strong>。</span></p> <h4 id="2.1.3%20%E9%A6%96%E9%83%A8%E6%A0%87%E7%AD%BE%3Chead%3E" style="margin-left:0in;text-align:left;"><a name="t2"></a><span style="color:#000000;"><strong>2.1.3 </strong></span><span style="color:#000000;"><strong>首部标签</strong></span><span style="color:#000000;"><strong><head></strong></span></h4> <p><span style="color:#000000;"> HTML5</span><span style="color:#000000;">文档的首部<strong>以</strong></span><strong><span style="color:#000000;"><head></span><span style="color:#000000;">标签开始，以</span><span style="color:#000000;"></head></span></strong><span style="color:#000000;"><strong>标签结束</strong>。</span><span style="color:#000000;"><head></span><span style="color:#000000;">标签中的内容不会显示在网页的页面中。</span><span style="color:#000000;"><head></span><span style="color:#000000;">标签中可包含</span><span style="color:#000000;"><title></span><span style="color:#000000;">和</span><span style="color:#000000;"><meta></span><span style="color:#000000;">等标签，用于声明页面标题、字符集和关键词等。</span></p> <h5><span style="color:#000000;"><strong>网页标题标签</strong></span><span style="color:#000000;"><strong><title></strong></span></h5> <p><span style="color:#000000;"><strong> </strong>HTML5</span><span style="color:#000000;">文档<strong>使用</strong></span><strong><span style="color:#000000;"><title></span><span style="color:#000000;">和</span><span style="color:#000000;">标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，若省略</span><span style="color:#000000;">标签则网页标题会显示为</span><span style="color:#000000;">“</span><span style="color:#000000;">无标题文档</span><span style="color:#000000;">”</span><span style="color:#000000;">。建议在网页代码中保留该标签，因为</span><span style="color:#000000;"><title></span><span style="color:#000000;">标签还能用于当网页被添加到收藏夹时显示标题，以及作为页面标题显示在搜索引擎结果中。</span></p> <h5><span style="color:#000000;"><strong>基础地址标签</strong></span><span style="color:#000000;"><strong><base></strong></span></h5> <p><span style="color:#000000;"><strong> <base></strong></span><strong><span style="color:#000000;">标签用于为页面上所有的链接设置默认</span><span style="color:#000000;">URL</span><span style="color:#000000;">地址或目标</span><span style="color:#000000;">target</span></strong><span style="color:#000000;"><strong>。</strong>当</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档中使用了相对路径时，浏览器会用</span><span style="color:#000000;"><base></span><span style="color:#000000;">标签指定的</span><span style="color:#000000;">URL</span><span style="color:#000000;">进行补全。例如：</span></p> <pre data-index="3" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">base</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://localhost/images/"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"sunflower.jpg"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;">此时在第一个图像标签</span><span style="color:#000000;"><</span><span style="color:#000000;">img</span><span style="color:#000000;">></span><span style="color:#000000;">中</span><span style="color:#000000;">src</span><span style="color:#000000;">属性填写的是一个相对路径，由于</span><span style="color:#000000;"><base></span><span style="color:#000000;">标签的作用，该路径会被浏览器自动补全为：</span><span style="color:#000000;"><</span><span style="color:#000000;">img</span> <span style="color:#000000;">src</span><span style="color:#000000;">=" http://localhost/images/sunflower.jpg" /></span><span style="color:#000000;">。如果没有使用</span><span style="color:#000000;"><base></span><span style="color:#000000;">标签来指定</span><span style="color:#000000;">URL</span><span style="color:#000000;">地址，则浏览器会用当前</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档的</span><span style="color:#000000;">URL</span><span style="color:#000000;">对图片地址进行补全。</span></p> <p> <span style="color:#000000;"><strong><base></strong></span><span style="color:#000000;"><strong>标签也可以为该网页上所有超链接统一设置打开方式。</strong>例如：</span> </p> <pre data-index="4" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">base</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.baidu.com"</span>></span>百度<span class="hljs-tag"></<span class="hljs-name">a</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.163.com"</span>></span>网易<span class="hljs-tag"></<span class="hljs-name">a</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;">在</span><span style="color:#000000;"><base></span><span style="color:#000000;">标签中的属性</span><span style="color:#000000;">target="_blank"</span><span style="color:#000000;">指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。</span></p> <h5><span style="color:#000000;"><strong>元数据标签</strong></span><span style="color:#000000;"><strong><meta></strong></span></h5> <p><span style="color:#000000;"> <strong><meta></strong></span><strong><span style="color:#000000;">标签用于提供当前</span><span style="color:#000000;">HTML</span></strong><span style="color:#000000;"><strong>文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。</strong>通常</span><span style="color:#000000;"><meta></span><span style="color:#000000;">标签可用于定义网页的字符集、关键词、描述、作者等信息。</span></p> <p> <span style="color:#000000;"><strong>(1) </strong></span><span style="color:#000000;"><strong>字符集声明</strong></span></p> <p><span style="color:#000000;"><strong> </strong></span><span style="color:#000000;">Charset</span><span style="color:#000000;">是</span><span style="color:#000000;">Character Set</span><span style="color:#000000;">的简写，含义为字符集设置。浏览器统一默认的字符集是</span><span style="color:#000000;">ISO-8859-1</span><span style="color:#000000;">西文字符集，如果使用了其他字符集，浏览器需知道使用何种字符集才能正确地显示</span><span style="color:#000000;">HTML</span><span style="color:#000000;">页面。</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档使用</span><span style="color:#000000;"><meta>标签进行字符集声明。</span><span style="color:#000000;">万维网初期使用的是</span><span style="color:#000000;">ACSII</span><span style="color:#000000;">字符集，该字符集支持数字</span><span style="color:#000000;">0-9</span><span style="color:#000000;">、英文字母大写</span><span style="color:#000000;">A-Z</span><span style="color:#000000;">和小写</span><span style="color:#000000;">a-z</span><span style="color:#000000;">，以及部分特殊字符。由于很多国家使用的字符不被</span><span style="color:#000000;">ACSII</span><span style="color:#000000;">支持，因此浏览器统一默认的字符集是</span><span style="color:#000000;">ISO-8859-1</span><span style="color:#000000;">西文字符集。</span></p> <p><span style="color:#000000;">以</span><span style="color:#000000;">UTF-8</span><span style="color:#000000;">字符集为例，</span><span style="color:#000000;">HTML4.01</span><span style="color:#000000;">的字符集声明如下：</span></p> <pre data-index="5" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#000000;">在</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">中，同样的内容声明方式会更为简洁，写法如下：</span></p> <pre data-index="6" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#000000;"><strong>(2) </strong></span><span style="color:#000000;"><strong>关键词声明</strong></span></p> <p><span style="color:#000000;"><strong>使用</strong></span><span style="color:#000000;"><strong><meta></strong></span><span style="color:#000000;"><strong>标签定义网页关键词（</strong></span><span style="color:#000000;"><strong>keywords</strong></span><span style="color:#000000;"><strong>）</strong>的用法如下<strong>：</strong></span></p> <pre data-index="7" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"HTML5, CSS3, jQuery"</span> /></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;"><strong>(3) </strong></span><span style="color:#000000;"><strong>页面描述声明</strong></span></p> <p><span style="color:#000000;"><strong>使用</strong></span><span style="color:#000000;"><strong><meta></strong></span><span style="color:#000000;"><strong>标签定义页面描述（</strong></span><span style="color:#000000;"><strong>description</strong></span><span style="color:#000000;"><strong>）</strong>的用法如下<strong>：</strong></span></p> <pre data-index="8" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"This is a tutorial about HTML5, CSS3, jQuery"</span> /></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#000000;">搜索引擎会根据</span><span style="color:#000000;"><meta></span><span style="color:#000000;">标签中的</span><span style="color:#000000;">name</span><span style="color:#000000;">和</span><span style="color:#000000;">content</span><span style="color:#000000;">属性来索引网页。</span></p> <h5><span style="color:#000000;"><strong>样式</strong></span><span style="color:#000000;"><strong>标签</strong></span><span style="color:#000000;"><strong><style></strong></span></h5> <p> <strong><span style="color:#000000;">样式标签<style>可用于定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。</span></strong></p> <p>例如：</p> <pre data-index="9" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-tag">p</span> {<span class="hljs-attribute">color</span>: red}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>这是一个段落。<span class="hljs-tag"></<span class="hljs-name">p</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;">这段代码可以将</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档中所有未指定字体颜色的段落显示为红色。</span></p> <h5> <span style="color:#000000;"><strong>链接标签</strong></span><span style="color:#000000;"><strong><link></strong></span></h5> <p><span style="color:#000000;"><strong><link></strong></span><span style="color:#000000;"><strong>标签用于连接外部资源和当前</strong></span><span style="color:#000000;"><strong>HTML5</strong></span><span style="color:#000000;"><strong>文档，它只出现在首部标签</strong></span><span style="color:#000000;"><strong><head></strong></span><span style="color:#000000;"><strong>和</strong></span><span style="color:#000000;"><strong></head></strong></span><span style="color:#000000;"><strong>中，通常用于连接外部样式表。</strong>例如：</span></p> <pre data-index="10" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"my.css"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;">这表示将</span><span style="color:#000000;">CSS</span><span style="color:#000000;">样式文件</span><span style="color:#000000;">my.css</span><span style="color:#000000;">指定的样式效果应用于当前网页中。</span></p> <p><span style="color:#000000;">如果<strong>需要同时引用多个外部样式表文件</strong>，则<strong>需要为每一个</strong></span><strong><span style="color:#000000;">CSS</span><span style="color:#000000;">样式文件单独使用一次</span><span style="color:#000000;"><link></span></strong><span style="color:#000000;"><strong>标签</strong>。例如<strong>：</strong></span></p> <pre data-index="11" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"my1.css"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"my2.css"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"my3.css"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#000000;"> 这里对于</span><span style="color:#000000;">CSS</span><span style="color:#000000;">样式文件的引用使用了相对路径，也可以根据实际需要填写</span><span style="color:#000000;">URL</span><span style="color:#000000;">地址。</span></p> <h5><span style="color:#000000;"><strong>脚本标签</strong></span><span style="color:#000000;"><strong><script></strong></span></h5> <p><span style="color:#000000;"><strong><script></strong></span><span style="color:#000000;"><strong>标签为可选，取决于当前页面是否需要使用脚本内容，比如</strong></span><span style="color:#000000;"><strong>JavaScript</strong></span><span style="color:#000000;"><strong>。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在</strong></span><span style="color:#000000;"><strong><script></strong></span><span style="color:#000000;"><strong>和</strong></span><span style="color:#000000;"><strong></script></strong></span><span style="color:#000000;"><strong>标签中。</strong>例如：</span></p> <pre data-index="12" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"test.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#000000;"><strong>和引用外部</strong></span><span style="color:#000000;"><strong>CSS</strong></span><span style="color:#000000;"><strong>文件类似，如果需要同时引用多个</strong></span><span style="color:#000000;"><strong>JavaScript</strong></span><span style="color:#000000;"><strong>文件，则需要为每一个</strong></span><span style="color:#000000;"><strong>JavaScript</strong></span><span style="color:#000000;"><strong>文件单独使用一次</strong></span><span style="color:#000000;"><strong><script></strong></span><span style="color:#000000;"><strong>标签。</strong>例如：</span> </p> <pre data-index="13" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"test1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"test2.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"test3.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4 id="2.1.4%20%E4%B8%BB%E4%BD%93%E6%A0%87%E7%AD%BE%3Cbody%3E" style="margin-left:0in;text-align:left;"><a name="t3"></a><span style="color:#000000;">2.1.4 </span><span style="color:#000000;">主体标签</span><span style="color:#000000;"><body></span></h4> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;"> HTML5</span><span style="color:#000000;">文档的主体部分<strong>以</strong></span><strong><span style="color:#000000;"><body></span><span style="color:#000000;">标签开始，以</span><span style="color:#000000;"></body></span></strong><span style="color:#000000;"><strong>标签结束</strong>。</span><strong><span style="color:#000000;"><body></span></strong><span style="color:#000000;"><strong>标签中的内容将全部显示在网页的页面中</strong>。</span><span style="color:#000000;"><body></span><span style="color:#000000;">标签中可直接添加文本内容，也可继续嵌套其他元素标签，形成多样化的显示效果。</span></p> <h4 id="2.1.5%20HTML5%E6%96%87%E6%A1%A3%E6%B3%A8%E9%87%8A" style="margin-left:0in;text-align:left;"><a name="t4"></a><span style="color:#000000;"><strong>2.1.5 HTML5</strong></span><span style="color:#000000;"><strong>文档注释</strong></span></h4> <p><span style="color:#000000;"> 为增加</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档的可读性，可为其添加注释部分。<strong>注释是文档中的说明文字，不会被浏览器执行</strong>。</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">使用</span><strong><span style="color:#000000;"></span></strong><span style="color:#000000;"><strong>标签</strong>为文档进行注释，注释标签以“</span><span style="color:#000000;"></span><span style="color:#000000;">”结束，中间的“</span><span style="color:#000000;">...</span><span style="color:#000000;">”替换为注释文字内容即可。</span><strong><span style="color:#000000;"></span></strong><span style="color:#000000;"><strong>标签支持单行和多行注释</strong>。</span></p> <h4 id="2.1.6%20HTML5%E6%96%87%E6%A1%A3%E8%A7%84%E8%8C%83" style="margin-left:0in;text-align:left;"><a name="t5"></a><span style="color:#000000;"><strong>2.1.6 HTML5</strong></span><span style="color:#000000;"><strong>文档规范</strong></span></h4> <h5 style="margin-left:0in;text-align:left;"><span style="color:#000000;"><strong>1. </strong></span><span style="color:#000000;"><strong>文件类型</strong></span></h5> <p><span style="color:#9b2d1f;"> <strong> </strong> </span><span style="color:#000000;">一般来说，纯</span><span style="color:#000000;">HTML5开发推荐使用</span><strong><span style="color:#000000;">.html</span></strong><span style="color:#000000;"><strong>格式</strong>。和</span><span style="color:#000000;">HTML4.01</span><span style="color:#000000;">一样，</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">支持的常用文件后缀名为</span><span style="color:#000000;">.html</span><span style="color:#000000;">。在早期的</span><span style="color:#000000;">DOS</span><span style="color:#000000;">操作系统中，文件扩展名限制为最多</span><span style="color:#000000;">3</span><span style="color:#000000;">个字符，无法识别</span><span style="color:#000000;">4</span><span style="color:#000000;">位文件名，因此</span><strong><span style="color:#000000;">.</span><span style="color:#000000;">htm</span></strong><span style="color:#000000;">被用于兼容此类操作系统。目前这两种扩展名方式均被各类浏览器广泛支持，互换后缀名不会引起打开错误，但是<strong>通过</strong></span><span style="color:#000000;"><strong>URL地址访问时需要正确的扩展名</strong>。</span></p> <h5 style="margin-left:0in;text-align:left;"><span style="color:#000000;"><strong>2. </strong></span><span style="color:#000000;"><strong>元素标签格式</strong></span></h5> <p style="margin-left:0in;text-align:left;"><span style="color:#000000;">元素标签<strong>一般情况下是成对出现的</strong>，<strong>首尾标签的元素名称保持一致</strong>，并且<strong>尾标签中需要加上斜杠符号</strong>。</span><span style="color:#000000;">早期的</span><span style="color:#000000;">HTML</span><span style="color:#000000;">规范中，标签的大小写是不敏感的，因此老版本的网页中可能会存在如下写法：</span></p> <pre data-index="14" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">HTML</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">HEAD</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">TITLE</span>></span>早期存在的大写标签页面<span class="hljs-tag"></<span class="hljs-name">TITLE</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">HEAD</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">BODY</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> ……</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">BODY</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">HTML</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;">万维网联盟（</span><span style="color:#000000;">W3C</span><span style="color:#000000;">）明确规定了<strong>在新版本</strong></span><strong><span style="color:#000000;">HTML5</span></strong><span style="color:#000000;"><strong>中必须使用小写格式，包括元素标签本身和其中可能出现的属性</strong>均需要遵守此规范。</span></p> <p><span style="color:#9b2d1f;"> </span><span style="color:#0d0016;">在</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">中，也<strong>存在部分标签是独立使用</strong>，<strong>没有首尾标签成对出现</strong>。例如，换行标签</span><span style="color:#000000;"><</span><span style="color:#000000;">br</span><span style="color:#000000;">></span><span style="color:#000000;">和水平线标签</span><span style="color:#000000;"><</span><span style="color:#000000;">hr</span><span style="color:#000000;">></span><span style="color:#000000;">等。由于此类标签单个就已经可以表达足够明确的含义，并且不包含其他文本内容需要放置在其首尾标签之间，因此结束标签没有存在的必要性。</span></p> <p><span style="color:#9b2d1f;"> </span><span style="color:#000000;">目前这种无结束标签的元素标签有不同的写法存在，例如水平线标签可以写成</span><span style="color:#000000;"><</span><span style="color:#000000;">hr</span><span style="color:#000000;">></span><span style="color:#000000;">或</span><span style="color:#000000;"><</span><span style="color:#000000;">hr</span><span style="color:#000000;"> /></span><span style="color:#000000;">。</span><span style="color:#000000;">HTML4.01</span><span style="color:#000000;">以前版本可以直接写成</span><span style="color:#000000;"><</span><span style="color:#000000;">hr</span><span style="color:#000000;">></span><span style="color:#000000;">，但在</span><span style="color:#000000;">XML</span><span style="color:#000000;">规范中，所有的标签都必须有结束标签，因此必须加上斜杠符号表示完结。虽然目前这两种写法均能被浏览器正确显示，但是从长远来看，加上结束标志即斜杠符号的写法更为标准。</span></p> <h5 style="margin-left:0in;text-align:left;"><span style="color:#000000;"><strong>3. </strong></span><span style="color:#000000;"><strong>字符实体的使用</strong></span></h5> <p><span style="color:#9b2d1f;"> </span><span style="color:#0d0016;">在</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">文档中存在一些特殊字符无法直接使用。例如小于符号（</span><span style="color:#000000;"><</span><span style="color:#000000;">）和大于符号（</span><span style="color:#000000;">></span><span style="color:#000000;">）是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在</span><span style="color:#000000;">HTML5</span><span style="color:#000000;">中称为字符实体（</span><span style="color:#000000;">Character Entities</span><span style="color:#000000;">）。</span></p> <p><span style="color:#000000;"> </span><span style="color:#000000;">字符实体可借助<strong>其对应的字符名称或数字代码</strong>进行输出，其格式如下：</span></p> <pre data-index="15" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">&实体名称;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">&#实体数字;</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><span style="color:#000000;">实体名称和实体数字的写法都是以</span><span style="color:#000000;">&</span><span style="color:#000000;">符号开头，以</span><span style="color:#000000;">;</span><span style="color:#000000;">符号结尾，其中实体数字前面还加有</span><span style="color:#000000;">#</span><span style="color:#000000;">符号以示区分。例如大于符号（</span><span style="color:#000000;">></span><span style="color:#000000;">）可以使用</span><span style="color:#000000;">&</span><span style="color:#000000;">gt</span><span style="color:#000000;">;</span><span style="color:#000000;">或</span><span style="color:#000000;">></span><span style="color:#000000;">表示。</span></p> <p><span style="color:#000000;"><strong>常用的字符实体及其对应的表示方式如表</strong></span><span style="color:#000000;"><strong>所示：</strong></span></p> <p class="img-center"><img alt="" height="542" src="https://1000bd.com/contentImg/2024/03/15/005045005.png" ></p> <p> <span style="color:#000000;">实体名称的出现是为了方便记忆，但是<strong>部分实体名称不能完全被所有浏览器支持</strong>。</span><span style="color:#000000;">例如单引号的实体名称</span><span style="color:#000000;">'</span><span style="color:#000000;">在</span><span style="color:#000000;">IE</span><span style="color:#000000;">浏览器中不被支持，在这种情况下可以使用实体数字代替<strong>。</strong></span></p> <h5 style="margin-left:0in;text-align:left;"><span style="color:#000000;"><strong>4. </strong></span><span style="color:#000000;"><strong>图像文件的使用</strong></span></h5> <p><strong><span style="color:#000000;">网页文件常见的图像格式有</span><span style="color:#000000;">：</span></strong></p> <p><span style="color:#000000;"><strong>JPEG</strong></span><span style="color:#000000;"><strong>格式</strong></span></p> <p><span style="color:#000000;">JPEG</span><span style="color:#000000;">格式指的是联合图像专家组（</span><span style="color:#000000;">Joint Photographic Experts Group</span><span style="color:#000000;">，</span><span style="color:#000000;">JPEG</span><span style="color:#000000;">）格式，是第一个国际图像压缩标准。该格式的图像文件后缀名是</span><strong><span style="color:#000000;">.jpg</span></strong><span style="color:#000000;">或</span><strong><span style="color:#000000;">.JPG</span></strong><span style="color:#000000;">两种形式。</span></p> <p><span style="color:#000000;"><strong>JPEG</strong></span><span style="color:#000000;"><strong>格式图像文件有以下特点：</strong></span></p> <ul><li><span style="color:#000000;"><strong>支持高级压缩</strong></span></li><li><span style="color:#000000;"><strong>弹性压缩比</strong></span></li><li><span style="color:#000000;"><strong>广泛支持互联网标准</strong></span></li></ul> <p> <span style="color:#000000;"><strong>GIF</strong></span><span style="color:#000000;"><strong>格式</strong></span></p> <p><span style="color:#000000;">GIF</span><span style="color:#000000;">格式指的是图像交换格式（</span><span style="color:#000000;">Graphics Interchange Format</span><span style="color:#000000;">，</span><span style="color:#000000;">GIF</span><span style="color:#000000;">），该格式的图像文件后缀名是</span><span style="color:#000000;">.<strong>gif</strong></span><span style="color:#000000;">或</span><strong><span style="color:#000000;">.GIF</span></strong><span style="color:#000000;">两种形式。</span></p> <p><span style="color:#000000;"><strong>GIF</strong></span><span style="color:#000000;"><strong>格式图像文件有以下特点：</strong></span></p> <ul><li><span style="color:#000000;"><strong>无损性</strong></span></li><li><span style="color:#000000;"><strong>256</strong></span><span style="color:#000000;"><strong>种颜色</strong></span></li><li><span style="color:#000000;"><strong>隔行扫描</strong></span></li><li><span style="color:#000000;"><strong>动画效果</strong></span></li></ul> <p><span style="color:#000000;"><strong>PNG</strong></span><span style="color:#000000;"><strong>格式</strong></span></p> <p><span style="color:#000000;">PNG</span><span style="color:#000000;">格式指的是图像交换格式（</span><span style="color:#000000;">Portable Network Graphic Format</span><span style="color:#000000;">，</span><span style="color:#000000;">PNG</span><span style="color:#000000;">），该格式的图像文件后缀名是</span><strong><span style="color:#000000;">.</span><span style="color:#000000;">png</span></strong><span style="color:#000000;">或</span><strong><span style="color:#000000;">.PNG</span></strong><span style="color:#000000;">两种形式。</span></p> <p><span style="color:#000000;"><strong>PNG</strong></span><span style="color:#000000;"><strong>格式图像文件有以下特点：</strong></span></p> <ul><li><span style="color:#000000;"><strong>文件体积小</strong></span></li><li><span style="color:#000000;"><strong>支持透明显示</strong></span></li><li><span style="color:#000000;"><strong>色彩索引模式</strong></span></li></ul> <h4 id="2.1.7%20HTML4.01%E8%BD%AC%E6%8D%A2%E4%B8%BAHTML5" style="margin-left:0in;text-align:left;"><a name="t6"></a><span style="color:#000000;"><strong>2.1.7 HTML4.01</strong></span><span style="color:#000000;"><strong>转换为</strong></span><span style="color:#000000;"><strong>HTML5</strong></span></h4> <p><span style="color:#000000;"><strong>基于</strong></span><span style="color:#000000;"><strong>HTML4.01</strong></span><span style="color:#000000;"><strong>开发的网页可以分成三个步骤转换为</strong></span><span style="color:#000000;"><strong>HTML5</strong></span><span style="color:#000000;"><strong>网页。</strong></span></p> <p><span style="color:#000000;">示例代码如下：</span></p> <pre data-index="16" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:1005px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span> <span class="hljs-keyword">PUBLIC</span> <span class="hljs-string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="hljs-string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>HTML4.01网页转换HTML5<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Type"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"text/html; charset=utf-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"test.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"test.css"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 再见，HTML4.01！</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 你好，HTML5！</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <span style="color:#000000;"><strong>步骤一：化简</strong></span><span style="color:#000000;"><strong>DOCTYPE</strong></span><span style="color:#000000;"><strong>声明方式。</strong></span></p> <p><span style="color:#000000;"><strong>步骤二：化简</strong></span><span style="color:#000000;"><strong>charset</strong></span><span style="color:#000000;"><strong>字符集描述方式。</strong></span></p> <p><span style="color:#000000;"><strong>步骤三（可选，取决于需要转换的文件是否包含该内容）：若存在外部</strong></span><span style="color:#000000;"><strong>css</strong></span><span style="color:#000000;"><strong>文件或</strong></span><span style="color:#000000;"><strong>js</strong></span><span style="color:#000000;"><strong>文件的引用，可以直接省略其中的</strong></span><span style="color:#000000;"><strong>type</strong></span><span style="color:#000000;"><strong>描述。</strong></span></p> <p><span style="color:#000000;">修改后的代码如下：</span></p> <pre data-index="17" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span> HTML4.01网页转换HTML5<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">”test.js”</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">”stylesheet”</span> <span class="hljs-attr">href</span>=<span class="hljs-string">”test.css”</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 再见，HTML4.01！</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 你好，HTML5！</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1252157">如何设计一个好的游戏剧情（Part 1：主题的设定）</a> <br /> <a href="/Article/Index/922683">压缩与解压</a> <br /> <a href="/Article/Index/1206251">＜packaging＞pom＜/packaging＞的作用与maven的分模块管理了解</a> <br /> <a href="/Article/Index/1292675">元宇宙安全与著作权相关市场与技术动态：韩国视角</a> <br /> <a href="/Article/Index/1010995">阿里菜鸟面经 Java后端开发社招三年</a> <br /> <a href="/Article/Index/878608">记录VSCode C++网络编程编译失败出现 undefined reference to _imp_socket等等</a> <br /> <a href="/Article/Index/661312">“px、pt、ppi、dpi、dp、sp”全攻略</a> <br /> <a href="/Article/Index/760857">用了 TCP 协议，数据一定不会丢吗？</a> <br /> <a href="/Article/Index/1146966">【Java八股文总结】之读写分离&分库分表</a> <br /> <a href="/Article/Index/873979">SpringBoot与Shiro整合（认证、授权和密码加密）</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/zeyeqianli/article/details/136721982 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>