您可以在10分钟内学习到17个简单的HTML代码示例

尽管现代网站通常是通过用户友好的界面构建的,但是了解一些基本的HTML还是很有用的。如果您了解以下17个HTML示例标签(以及一些其他功能),则可以从头开始创建基本网页或调整由WordPress之类的应用程序创建的代码。

我们提供了HTML代码示例,其中包含大多数标记的输出。如果希望看到它们的实际效果,请在文章末尾下载示例HTML文件。您可以在文本编辑器中使用它,然后将其加载到浏览器中以查看所做的更改。

1。 <!DOCTYPE html>

您将在创建的每个HTML文档的开头都需要此标记。它可以确保浏览器知道正在阅读HTML,并且希望使用最新版本的HTML5。

即使这实际上不是HTML标记,也仍然是一个好消息。

2。

这是另一个标记,用于告知浏览器正在读取HTML。 标记紧随DOCTYPE标记之后,然后在文件末尾使用标记将其关闭。文档中的其他所有内容都位于这些标记之间。

3。

标记开始文件的标题部分。这里输入的内容不会显示在您的网页上。相反,它包含搜索引擎的元数据和浏览器的信息。

对于基本页面,标签将包含您的标题,仅此而已。但是您还可以包括其他一些内容,我们稍后将进行介绍。

4。 </h2><figure><img class="lazy" data-original="//static.pcpc.me/images/2017/03/html-title-tag.png"></figure><p>此标记设置页面的标题。您需要做的就是将标题放在标签中并关闭它,就像这样(我也包含了标题标签):</p><pre><code class="language-html"><head><title>My Website</title></head></code></pre><p>这是将显示为标签标题的名称在浏览器中打开时。</p><h2> 5。 <meta></h2><p>像标题标签一样,元数据也放置在页面的页眉区域中。元数据主要由搜索引擎使用,是有关页面内容的信息。有许多不同的元字段,但其中一些是最常用的:</p><li><strong>说明</strong>-页面的基本说明。</li><li>< strong>关键字</strong>-适用于您页面的关键字选择。</li><li><strong>作者</strong>-页面的作者。</li><li><strong>视口</strong>-用于确保您的页面在所有设备上都外观良好的标记。</li><p>以下是一个适用于此页面的示例:</p><pre><code class="language-html"><meta name="description" content="A basic HTML tutorial"><meta name="keywords" content="HTML,code,tags"><meta name="author" content="PCPC.me"><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></pre><p>“视口"标记应始终内容为“ width = device-width,initial-scale = 1.0",以确保您的页面在移动设备和台式机设备上都能正常显示。</p><h2> 6。 <body></h2><p>关闭标题部分后,您将到达正文。使用<body>标签打开它,然后使用</body>标签关闭它。这恰好在文件末尾</html>标记之前。</p><p>网页的所有内容都在这些标记之间。听起来很简单:</p><pre><code class="language-html"><body>Everything you want displayed on your page.</body></code></pre><h2> 7。 <h1></h2><p><h1>标记在页面上定义了一级标题。通常是标题,并且每页上最好只有一个标题。</p><p><h2>定义了二级标题,例如节标题,<h3>三级子标题等等。继续,直到<h6>。例如,本文中标记的名称是二级标题。</p><pre><code class="language-html"><h1>Big and Important Header</h1><h2>Slightly Less Big Header</h2><h3>Sub-Header</h3></code></pre><p><strong>结果</strong></p><figure><img class="lazy" data-original="//static.pcpc.me/images/2019/04/header-tags-in-html.png"></figure><p>如您所见在每个级别上都较小。</p><h2> 8。 <p></h2><p>段落标签开始一个新的段落。通常,这会插入两个换行符。</p><p>例如,请看上一行与该行之间的换行符。这就是<p>标记的作用。</p><pre><code class="language-html"><p>Your first paragraph.</p><p>Your second paragraph.</p></code></pre><p><strong>结果:</strong></p><p>您的第一段。</p><p>您的第二段。< </p><p>您也可以在段落标签中使用CSS样式,例如这种更改文本大小的样式:</p><pre><code class="language-html"><p style="font-size: 120%;">20% larger text</p></code></pre><p><strong>结果:</strong></p><p>要了解如何使用CSS设置文字样式,请查看以下HTML和CSS教程。</p><h2> 9。 <br></h2><p>换行符插入一个换行符:</p><pre><code class="language-html"><p>The first line.<br>The second line (close to the first one).</p></code></pre><p><strong>结果:</strong></p><p>第一行。<br> >第二行(接近第一行)。</p><p><hr>标签的工作方式与此类似。这会在您的页面上绘制一条水平线,非常适合分隔文本的各个部分。</p><h2> 10。 <strong></h2><p>此标记定义重要文本。通常,这意味着它将大胆。但是,可以使用CSS来使<strong>文本显示不同。</p><p>但是,您可以安全地使用<strong>粗体显示文本。</p><pre><code class="language-html"><strong>Very important things you want to say.</strong></code></pre><p><strong>结果:</strong></p><p><strong>您想说的非常重要的事情。</strong></p><p>如果您熟悉<b>粗体标记,您仍然可以用它。无法保证它将在将来的HTML版本中继续使用,但目前仍可以使用。</p><h2> 11。 <em></h2><p>与<b>和<strong>,<em>和<i>相关。 <em>标记标识强调的文本,这通常意味着它将变为斜体。同样,CSS可能会使强调文本显示方式有所不同。</p><pre><code class="language-html"><em>An emphasized line.</em></code></pre><p><strong>结果:</strong></p><p><em>强调线。</em>< </p><p><i>标记仍然可以使用,但是同样,将来的HTML版本中可能会弃用该标记。</p><h2> 12。 <a></h2><p>使用<a>或定位标记可以创建链接。一个简单的链接如下所示:</p><pre><code class="language-html"><a href="//www.PCPC.me/>Go to PCPC.me</a></code></pre><p><strong>结果:</strong></p><p>转到PCPC.me </p><p>“ href"属性标识目标链接。在许多情况下,这将是另一个网站。它也可以是文件,例如图像或PDF。</p><p>其他有用的属性包括“目标"和“标题"。目标属性几乎专门用于在新标签或窗口中打开链接。 ,例如:</p><pre><code class="language-html"><a href="//www.PCPC.me/" target="_blank">Go to PCPC.me in a new tab</a></code></pre><p><strong>结果:</strong></p><p>转到新标签中的PCPC.me </p><p>“ title"属性创建工具提示。将鼠标悬停在下面的链接上可以查看其工作原理:</p><pre><code class="language-html"><a href="//www.PCPC.me/" title="This is a tool tip">Hover over this to see the tool tip</a></code></pre><p><strong>结果:</strong></p><p>将鼠标悬停在该链接上可以查看工具提示</p><figure><img class="lazy" data-original=""></figure><p>如果您想在页面中嵌入图片,则需要使用图片标签。通常,您将其与“ src"属性结合使用。这样可以指定图片的来源,例如:</p><figure><img class="lazy" data-original=""></figure><p><strong>结果:</strong></p><figure><img class="lazy" data-original="//static.pcpc.me/images/2019/04/sunlit-birds.jpg"></figure><p>其他可用属性,例如“ height",“ width, "和“ alt"。看起来可能是这样:</p><figure><img class="lazy" data-original=""></figure><p>如您所料,“ height"和“ width"属性设置图像的高度和宽度。通常,最好只设置其中一个,以便正确缩放图像。如果同时使用两者,则最终可能会得到拉伸或压缩的图像。</p><p>“ alt"标签会告诉浏览器,如果无法显示该图像,则显示哪些文本,并且最好包含任何图像。如果某人的连接速度特别慢或使用了旧的浏览器,他们仍然可以了解您的页面上应该显示的内容。</p><h2> 14。 <ol></h2><p>“有序列表"标签使您可以创建有序列表。通常,这意味着您会得到一个编号列表。列表中的每个项目都需要一个列表项标签(<li>),因此您的列表将如下所示:</p><pre><code class="language-html"><ol><li>First thing</li><li>Second thing</li><li>Third thing</li></ol></code></pre><p><strong>结果:</strong></p><li>第一件事</li><li>第二件事</li><li>第三件事</li><p>在HTML5中,您可以使用<ol reversed>颠倒数字的顺序。您可以使用start属性设置起始值。</p><p>“ type"属性可让您告诉浏览器列表项使用哪种符号类型。可以将其设置为“ 1",“ A",“ a",“ I"或“ i",设置列表以显示如下所示的符号:</p><pre><code class="language-html"><ol type="A"></code></pre><h2> 15。 <ul></h2><p>无序列表比有序列表简单得多。这只是一个项目符号列表。</p><pre><code class="language-html"><ul><li>First item</li><li>Second item</li><li>Third item</li></ul></code></pre><p><strong>结果:</strong></p><li>第一项</li><li>第二项</li><li>第三项</li><p>无序列表也具有“类型"属性,您可以将其设置为“圆盘",“圆形"或“正方形"。</p><h2> 16。 <table></h2><p>虽然人们不赞成使用表格进行格式化,但很多时候您都希望使用行和列来分割页面上的信息。一个表需要几个标签。以下是示例HTML代码:</p><pre><code class="language-html"><table><tbody><tr><th>1st column</th><th>2nd column</th></tr><tr><td>Row 1, column 1</td><td>Row 1, column 2</td></tr><td>Row 2, column 1</td><td>Row 2, column 2</td></tbody></table></code></pre><p><table>和</table>标记指定表的开始和结束。 <tbody>标记包含所有表内容。</p><p>表的每一行都包含在<tr>标记中。每行中的每个单元格都用<th>标记(用于列标题)或<td>标记(用于列数据)包装。每行每一列都需要其中之一。</p><p><strong>结果:</strong></p><h2> 17。 <blockquote></h2><p>当您引用其他网站或个人的报价,并且希望将报价与文档的其余部分分开时,请使用blockquote标记。您所需要做的就是将引号括在开始和结束blockquote标签之间:</p><pre><code class="language-html"><blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote></code></pre><p><strong>结果:</strong></p><p>我所设想的Web,但我们没有看到了呢。未来仍然比过去大得多。</p><p>使用的确切格式可能取决于您使用的浏览器或网站的CSS。 </p><h2> Go Forth和HTML </h2><p>使用这17个HTML示例(并且还在不断增加),您应该可以创建一个简单的网站。要查看如何将它们放在一起,可以下载我们的示例HTML页面。在浏览器中将其打开,以查看它们如何组合在一起,或者在文本编辑器中将其打开以查看代码的确切工作方式。</p><p>有关HTML中更多细节的信息,请尝试使用这些微学习应用进行编码。 </p> </div> <p> <small>标签: <a href="https://www.pcpc.me/tag/Coding-Tutorials/">编码教程</a> <a href="https://www.pcpc.me/tag/HTML/">HTML</a> <a href="https://www.pcpc.me/tag/Web-Development/">Web开发</a> <a href="https://www.pcpc.me/tag/Wordpress/">Wordpress</a> </small></p> <div class="adslot aligncenter"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3993128489863289" data-ad-slot="8218521392" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> <aside class="single-post-sidebar" style="display:flex;flex-direction:column;"> <div style="padding:20px;"><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-3993128489863289" data-ad-slot="6247798328"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="article-sidebar"> <div class="flex-block"> <div class="flex-row"> <h3 class="article-sidebar-title">最新相关资讯</h3> <div class="bullet-posts"> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/create-custom-post-types-wordpress"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/wordpress-featured-img.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/create-custom-post-types-wordpress">如何在 WordPress 中创建自定义帖子类型</a></h3> <p>2021-12-18 22:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/create-wordpress-child-theme"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/10/Easily-set-up-WordPress-with-these-X-steps-Featured.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/create-wordpress-child-theme">如何创建 WordPress 子主题</a></h3> <p>2021-12-18 06:02</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/sites-and-blogs-ios-development"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/holding-up-ios-smartphone.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/sites-and-blogs-ios-development">了解 iOS 开发的 10 个最佳网站和博客</a></h3> <p>2021-12-18 03:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/create-index-mongodb"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/How-to-create-indexes-in-MongoDB-Featured.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/create-index-mongodb">如何在 MongoDB 中创建索引:示例说明</a></h3> <p>2021-12-17 22:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/what-are-javascript-closures"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/closures-cover-page.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/what-are-javascript-closures">什么是 JavaScript 闭包以及如何编写它们?</a></h3> <p>2021-12-17 04:30</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/what-is-c-programming-language"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/c-programming-language.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/what-is-c-programming-language">C 程序设计语言简介</a></h3> <p>2021-12-17 00:16</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/github-vs-gitlab"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/GitLab-vs-GitHub.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/github-vs-gitlab">GitHub 与 GitLab:哪个更适合您?</a></h3> <p>2021-12-15 06:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/increase-php-memory-in-wordpress"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/pexels-thisisengineering-3861958-(1).jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/increase-php-memory-in-wordpress">如何在 WordPress 中增加 PHP 内存</a></h3> <p>2021-12-15 05:15</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/excel-macros-for-sorting-data"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/Excel-macros.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/excel-macros-for-sorting-data">5 个用于排序数据的 Microsoft Excel 宏</a></h3> <p>2021-12-14 22:15</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/how-to-create-website-html"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/A-monitor-displaying-Pawfect-website.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/how-to-create-website-html">如何使用 HTML 从头开始??构建网站</a></h3> <p>2021-12-14 05:45</p> </div> </div> </div> </div> </div> </div> </aside> </div> </div> </div> <div class="single-post-transition-bar"> <div class="label-div" style="position:relative;min-height:100px;"> <span class="single-post-transition-label-wrap"> <span class="single-post-transition-label" style="display: inline-block;">分类本周热门</span></span> <svg class="single-post-transition-icon"> <use xlink:href="#icon-down"></use> </svg> </div> <div style="max-width: 1100px; margin: 0 auto;"> <div class="flexbox"> <div class="item"> <a href="https://www.pcpc.me/tech/unity-game-development-languages"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2019/03/unity-languages-382x255.jpg"> <h4>要学习的7种Unity游戏开发语言:哪种才是最佳?</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/visual-studio-code-live-share"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2019/03/program-collaborately-382x255.jpg"> <h4>如何使用Visual Studio Code Live Share进行协作编程</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/program-swift-in-windows"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2018/01/swift-on-windows-382x255.jpg"> <h4>如何在Windows 10上的Swift中进行编程</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/python-language-future"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2018/10/python-language-future-382x255.jpg"> <h4>Python是未来编程语言的6个原因</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/getting-started-rust-raspberry-pi"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2019/04/rust-raspberry-pi-382x255.jpg"> <h4>如何在Raspberry Pi上开始使用Rust</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/css-skeleton-screen-loading-effect"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/Create-a-simple-skeleton-screen-loading-effect.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"> <h4>如何在 HTML、CSS 和 JavaScript 中创建骨架屏幕加载效果</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/what-is-pseudocode"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2020/02/pseudocode-382x255.jpg"> <h4>什么是伪代码,它如何使您成为更好的开发人员?</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/coding-apps"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2019/07/coding-apps-382x255.jpg"> <h4>6个使编程更容易的编码应用</h4></a> </div> </div> </div> </div> </div> <footer class="footer-wrap"> <div class="footer-container"> <div class="footer-copyright"><img src="/static/images/logo.png" style="height:30px;display:inline;margin-bottom:-8px;"> © 2020 <a href="https://www.pcpc.me">双电网</a>(Www.PcPc.Me). All Rights Reserved. | <a href="/sitemap.xml">网站地图</a></div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <div style="display:none;"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1278594161&web_id=1278594161"></script></div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4DVE4MNDE6"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-4DVE4MNDE6'); </script> </body> </html>