尽管现代网站通常是通过用户友好的界面构建的，但是了解一些基本的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/five-free-game-development-tools-make-your-own-games">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2016/12/Make-Your-Own-Games-Featured-382x255.jpg">
<h4>5种免费的游戏开发软件工具，可以制作自己的游戏</h4></a>
</div>
<div class="item">
<a href="https://www.pcpc.me/tech/read-write-google-sheets-python">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2016/12/python-google-sheets-382x255.jpg">
<h4>如何使用Python读取和写入Google表格</h4></a>
</div>
<div class="item">
<a href="https://www.pcpc.me/tech/first-microsoft-power-query-script">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2019/10/microsoft-power-query-script-382x255.jpg">
<h4>您的第一个Microsoft Power Query脚本的分步指南</h4></a>
</div>
<div class="item">
<a href="https://www.pcpc.me/tech/reasons-ssl-certificate">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2018/05/need-ssl-certificate-382x255.jpg">
<h4>您的网站需要SSL证书的7个理由</h4></a>
</div>
<div class="item">
<a href="https://www.pcpc.me/tech/improve-programming-career-opportunities">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2014/10/coding-work-382x255.jpg">
<h4>如何改善您的编程职业机会</h4></a>
</div>
<div class="item">
<a href="https://www.pcpc.me/tech/hobbies-programmers-dont-involve-code">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2017/08/hobbies-programmers-382x255.jpg">
<h4>不涉及代码的程序员的10个爱好</h4></a>
</div>
<div class="item">
<a href="https://www.pcpc.me/tech/how-to-make-accordion-html-css">
<img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/Build-an-accordion-using-HTML-and-CSS-only-1.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5">
<h4>如何使用 HTML 和 CSS 制作手风琴</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>
</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>
