• web技术——HTML文档基础部分(1)


    前言

    HTML是一种标记语言,这意味着它用来标记文档中的各个部分,已指定文档在打印件或者显示器上的显示方式。简单来说,HTML就是超文本标记语言。
    这里补充一些东西,可能大家初学不知道,html在哪里运行的,我习惯在vscode上面写该语言。当然,也可以在记事本里面运行。还有一点,HTML文档中大小写无严格规定。

    壹、基本语法

    1.1 含义

    HTML中的基本语法单位称为标签。一般来说,标签用于指定内容的类别。标签的语法是利用一对尖括号“<>”将标签名称包围起来。
    注意:大部分标签都是成对出现,当然也有单标签,后面我们会学到。
    如下是一行简单的代码:

    This is simple stuff.


    解释
    (1)

    即为开始标签,

    为结束标签;
    (2)由上可知,结束标签里面带有“/”符号;
    (3)在开始标签和结束标签,中间的就是标签的内容;
    (4)运行之后,我们会发现,浏览器上面的内容,就是代码标签之间的内容。

    1.2 注释

    格式:
    在这里插入图片描述

    HTML文档和程序里面注释一样重要。浏览器会忽略掉HTML注释,这些注释只对人有用。注释的格式,如上图所示,可以单行和多行

    注意:除注释外,还有一些其他类型的文本出现在文档中,也会被浏览器忽视。会忽略掉无法识别 的标签,这里的标签就像其他高级语言里面的关键字,是规定约束好 的。此外还忽略掉 空行,如果要在显示结果里面显示空行,需要加上特定的标签

    1.3 HTML文档的标准结构

    1、每个HTML文档的第一行都是一个DOCTYPE命令,它指定了该文档所遵循的特定SGML文档类型定义,这个地方,不是很好理解,通俗的来讲就是在这个命令里面定义许多规则,写完整体代码之后,它会把代码和命令里面定义对比一下,看看有没有错误

    DOCTYPE html>
    
    • 1

    2、文档中必须有以下四个标签: <body></code>。<br> <code><html></code>:在最开始的部分,<code></html></code>:在末尾部分。<br> 而在<code><html></code>里面会有一个特性<code>lang</code>,用于指定当前所用的语言,英语是“<code>en</code>”,中文简体是“<code>zh-cn</code>”,这里的<code>cn</code>也是域名,这里在计算机网络里面会讲。<br> 演示:<br> <img src="https://1000bd.com/contentImg/2024/04/02/57ab74f2804885ad.png" alt="在这里插入图片描述"></p> <p><strong>解释:</strong><br> 一个HTML文档包含两部分,<strong>头(head)部分和主体(body)部分</strong>。<code><head></code>元素包多了文档的头部分,该部分提供了文档的相关信息,而没有提供文档内容。它总是包含两个简单元素:一个<strong>标题元素</strong>和一个<code>meta</code><strong>元素</strong>。<strong>meta元素</strong>用来提供关于文档的额外信息。它不包含任何内容,而是通过特性指定信息。也就是所能表达的范围是8位,通常表达是<strong>UTF-8</strong>,也可以是16为32位,分别把8换成16和32。</p> <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p>这里面的反斜杠表示没有结束标签——开始标签和结束标签合为一个,即为我们之前提到的单标签。<strong>注意,也可以把斜杠去了</strong>。</p> <p>我们来看一个基本的格式:</p> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> 标题 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <h2><a name="t6"></a><a id="_56"></a>贰、基本的文本标记</h2> <p>我们来学习一些有哪些标签,它们是什么意思,又怎么用。</p> <h3><a name="t7"></a><a id="21__58"></a>2.1 段落</h3> <p>在文本前后加上<code><p></p></code>即可。<br> <strong>演示:</strong></p> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> 标题 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> hello everyone we begin to study <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li></ul></pre> <p><img src="https://1000bd.com/contentImg/2024/04/02/ef8158e49aba6efd.png" alt="在这里插入图片描述"><br> 大家有没有发现一个奇怪的现象,我在代码中打的既有多个空格,又有换行但是只显示空格,并且是一个空。这里就是我们之前讲的,在浏览器显示时候,会忽略掉HTML文档里面的空格和换行,需要用特定的标签来约定。</p> <p><strong>大家可以把下面代码写在自己的环境下试一下</strong>:</p> <pre data-index="4" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> 标题 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>Hello,everyone.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> <span class="token comment"><!--<i></i>:表示将包含的内容变成斜体字--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token comment"><!--<p></p>:这对标签,可以将段落段落之间换行--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>Hello, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>ereryone <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token comment"><!--<b></b>:表示将包含的内容编程粗体字--></span> <span class="token comment"><!--<br>:表示行中断,这里是单标签--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <p><strong>结果:</strong><br> <img src="https://1000bd.com/contentImg/2024/04/02/b0a404ebc4b147bd.png" alt="在这里插入图片描述"></p> <h3><a name="t8"></a><a id="22__102"></a>2.2 保留空白字符</h3> <p>那么怎么样可以将文本原封不动的打印出来呢,我们引入<code>pre</code>标签。<br> 来看下面代码:</p> <pre data-index="5" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> Hi <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span> <span class="token comment"><!--加粗标签--></span> 你 们 好 啊 !<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre> <p><strong>效果</strong>:<br> <img src="https://1000bd.com/contentImg/2024/04/02/05a93f7776f8e07c.png" alt="在这里插入图片描述"></p> <h3><a name="t9"></a><a id="23__127"></a>2.3 标题</h3> <p>👀<strong>注意</strong>:我们要区分两个标签,一个是<code>title</code>,另一个就是我们现在讲的标题——<code><h></code>.<br> <img src="https://1000bd.com/contentImg/2024/04/02/ba8412be59b3bd59.png" alt="在这里插入图片描述"><br> <strong>这里的标签,最后显示出来的效果在这个位置</strong>:<br> <img src="https://1000bd.com/contentImg/2024/04/02/44bd463792055d40.png" alt="在这里插入图片描述"><br> 而我们现在讲的标签,标题一共分为六级,它们按照数字的变化而导致字号的改变,来看一下代码:</p> <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> Hi <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>hanmz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>hanmz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>hanmz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>hanmz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>hanmz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>hanmz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <p>效果图:<br> <img src="https://1000bd.com/contentImg/2024/04/02/f4681f2f06ada904.png" alt="在这里插入图片描述"><br> 比如你想要强调某一行或者某个字,可以用以下方法:</p> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>font</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> hanmzhi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>font</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>font</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> hanmzhi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>font</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <p>运用<code><font size=" 字号"></code>来加强字体,来看一下效果:<br> <img src="https://1000bd.com/contentImg/2024/04/02/ae1a8aefd482a8d5.png" alt="在这里插入图片描述"></p> <h3><a name="t10"></a><a id="24__169"></a>2.4 水平线</h3> <p>利用<code><hr></code>标签,注意,这里依然是单标签,我们到现在,已经学到了两种单标签了,一个是行中断:<code><br></code>,另一个就是现在这个。</p> <h2><a name="t11"></a><a id="_173"></a>叁、图片</h2> <h3><a name="t12"></a><a id="31__174"></a>3.1 简述</h3> <p>最常用的两种图片格式:可交换的图像格式(<strong>GIF</strong>)、联合图像专家组格式(<strong>JPEG</strong>)。<br> 当前浏览器中绝大部分都是这两种格式,并且这两种格式文件可以压缩,能节约存储空间,通过<strong>Internt传输</strong>也比较快。</p> <p><strong>GIF</strong>图片文件扩展名为<code>.gif</code>,<strong>JPEG</strong>图片文件扩展文件为<code>.jpg 或者 .jepg</code>。最近还日趋流行的另一种图片格式为<strong>PNG</strong>,把它压缩后,并没有降低图片的清晰度,因而内存要占比前两种多。</p> <h3><a name="t13"></a><a id="32__179"></a>3.2 元素</h3> <h4><a name="t14"></a><a id="321__180"></a>3.2.1 特性一</h4> <p><code><img/></code>是一个行内元素,用于指定将要显示在文档中的图片。<strong>注意</strong>,这个元素没有内容,所有要在开始标签中带有一个斜杠,<strong>并没有结束标签</strong>,也是为单标签。</p> <p><code><img/></code>元素里面包含了两个特性:<code>src</code>和<code>alt</code>。</p> <p><strong>解释</strong>:<br> <code>src</code>:可以指定包含的图片文件<br> <code>alt</code>:当图片无法显示时,在本应显示图片的位置出现的文本。<br> 看一下列子:</p> <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> Hi <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>han.jpg<span class="token punctuation">"</span></span><span class="token attr-name">,alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片显示错误<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li></ul></pre> <p>效果如下:<br> <img src="https://1000bd.com/contentImg/2024/04/02/e2cb4d67f2b6f1dd.png" alt="在这里插入图片描述"><br> 可以看见,图片显示出来了。<br> <strong>这里需要有两个注意点</strong>:<br> (1)图片格式,没有完全显示出,需要借助滚动来看,这样子过于麻烦,那么如何减小像素呢?<br> (2)<strong>这点非常重要</strong>,一定要把该图片文件,放到你建立的html文件里面,否则显示不出,如下图所示:<br> <img src="https://1000bd.com/contentImg/2024/04/02/834b7ea4f59a1ba1.png" alt="在这里插入图片描述"></p> <h4><a name="t15"></a><a id="322__209"></a>3.2.2 特性二</h4> <p><code>img</code>里面还有另外两个可选特性:<code>width</code>、<code>height</code>。<br> 加上两行代码就可以了:<br> <img src="https://1000bd.com/contentImg/2024/04/02/c54527887bd09c23.png" alt="在这里插入图片描述"></p> <p>这俩个特性时用来约束图片的格式大小:<br> <img src="https://1000bd.com/contentImg/2024/04/02/2258ce12306d8f5c.png" alt="在这里插入图片描述"></p> <h2><a name="t16"></a><a id="_216"></a>肆、超链接</h2> <p>大家先思考一下:<code>html</code>和网页之间是什么关系?<br> 解答:<code>html</code>是一种超文本标志语言,最中运行环境是浏览器的网页。</p> <p>书上的解释过于复杂,我来简化一下:<br> 所有链接通过锚元素<code><a></code>中的特性指定,这也是一个行内元素。<br> 格式:<br> <img src="https://1000bd.com/contentImg/2024/04/02/2e961f94498bf2a4.png" alt="在这里插入图片描述"><br> <code>href</code>后面url地址是绝对地址,就是根目录开始的路径,而后面的圣诞节这三个字是在html运行后,在页面上显示的超文本链接,点击就可以进去,也相当于重命名。<br> <img src="https://1000bd.com/contentImg/2024/04/02/8c82951e4118a074.png" alt="在这里插入图片描述"></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/652758">切入点表达式</a> <br /> <a href="/Article/Index/819264">logrotate日志轮转</a> <br /> <a href="/Article/Index/1523909">计算机等级考试:信息安全技术 知识点十</a> <br /> <a href="/Article/Index/756442">MYSQL快速从另外一张表中更新数据</a> <br /> <a href="/Article/Index/791924">06-引入Express创建web服务器、接口封装并使用postman测试,静态资源托管</a> <br /> <a href="/Article/Index/795163">shell [stdin/stdout/stderr][重定向]</a> <br /> <a href="/Article/Index/1352035">2023年中国人防服务需求现状及行业市场规模前景分析[图]</a> <br /> <a href="/Article/Index/1125683">数据结构:栈和队列</a> <br /> <a href="/Article/Index/918237">JavaWeb + Ajax + HTML 添加数据数据与查询数据,(利用axios响应与json数据传输)</a> <br /> <a href="/Article/Index/1301472">debug模式启动不了项目,报:Method breakpoints may dramatically slow down debugging</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址:https://blog.csdn.net/qq_64131064/article/details/132887958 </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> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <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> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>