html格式化：从零开始学习基本标签
本文将带您逐步学习HTML基本标签的使用，从零开始掌握HTML格式化的基础知识。通过本文的学习，您将能够了解HTML中常用的标签以及它们的基本用途，进一步掌握网页开发的技巧和方法。
什么是HTML
HTML（超文本标记语言）是一种用于创建和布局网页的标准标记语言。通过使用HTML标签，可以将纯文本转换为格式化内容，并为网页添加链接、图片、音频、视频等多媒体元素。
基本HTML结构
每个HTML页面都应该包含以下基本结构：
<!DOCTYPE html><html><head><title>页面标题</title></head><body>页面内容</body></html>
上述代码中，``声明定义了HTML文档类型，``标签是文档的根元素，`
`标签用于定义文档的头部，`
`标签用于定义文档的标题，`<body>`标签用于定义文档的主体部分。</p>
<h2>文本格式化标签</h2><p>HTML提供了一系列的标签来格式化文本，以达到呈现信息更加醒目、清晰的效果。以下是几个常用的文本格式化标签：</p><p style="text-align: center"><img src="https://pic.rmb.bdstatic.com/bjh/gallery/ecbf76ad57a896d7e2362d6ba659d4696772.jpeg" alt="dingziku（html格式化：从零开始学习基本标签）"></p>
<ul> <li><b><b></b>标签：加粗文本</li> <li><i><i></i>标签：斜体文本</li> <li><u><u></u>标签：下划线文本</li> <li><s><s></s>标签：删除线文本</li> <li><sub><sub></sub>标签：下标文本</li> <li><sup><sup></sup>标签：上标文本</li></ul><h2>链接与图像标签</h2><p>在HTML中，使用`<a>`标签来创建链接，使用`<img>`标签来插入图像。以下是这两个标签的基本用法：</p>
<pre><a href=\"目标网址\">链接文本</a><img src=\"图像地址\" alt=\"替代文本\"></pre><h2>列表标签</h2><p>HTML提供了有序列表（`<ol>`）、无序列表（`<ul>`）以及定义列表（`<dl>`）三种列表标签，分别用于显示有序项目、无序项目和定义项目。以下是这三个标签的基本用法：</p><p style="text-align: center"><img src="https://pic.rmb.bdstatic.com/bjh/gallery/36bc510d0020377973dcc4e4d866dcd52949.jpeg" alt="dingziku（html格式化：从零开始学习基本标签）"></p>
<pre><ol> <li>有序列表项一</li> <li>有序列表项二</li></ol><ul> <li>无序列表项一</li> <li>无序列表项二</li></ul><dl> <dt>定义列表项一</dt> <dd>定义列表项一的解释</dd> <dt>定义列表项二</dt> <dd>定义列表项二的解释</dd></dl></pre><h2>表格标签</h2><p>HTML中的`<table>`标签用于创建表格。表格由行（`<tr>`）和单元格（`<td>`）组成。以下是一个简单的表格示例：</p>
<pre><table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr></table></pre><h2>结语</h2><p>通过学习本文，您应该已经了解了HTML的基本格式化标签，包括文本格式化、链接与图像、列表和表格标签。这只是HTML标签的冰山一角，掌握了这些基础知识后，您可以进一步学习和探索更多有关HTML的知识，从而打造出美观、功能丰富的网页。</p> </div>
</article>
</div>
</div>
<div class="uk-grid-medium " uk-grid>
<div class="uk-width-3-4@s">
<div class="uk-flex qzhai-extension-post">
<div>
<div class="qzhai-extension-post-prev uk-card uk-card-default uk-grid-collapse uk-height-1-1" uk-grid>
<div class="qzhai-extension-post-img uk-card-media-left uk-width-1-3@s">
<div class="uk-width-1-1 uk-height-1-1 uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/5cd01c57847475b79bccf2fb865c47014132.jpeg"
uk-img
>
</div>
</div>
<div class=" uk-width-2-3@s">
<div class="uk-card-body uk-flex uk-flex-between uk-flex-column uk-height-1-1">
<h3>广东国际赛车场（广东国际赛车场：速度与激情的交织之地）</h3>
<div>上一篇</div>
</div>
</div>
<a href="https://www.sywcxx.com/cydianzi/3555.html" data-can-open="1"></a>
</div>
</div>
<div>
<div class="qzhai-extension-post-next uk-card uk-card-default uk-grid-collapse uk-height-1-1" uk-grid>
<div class="qzhai-extension-post-img uk-flex-last uk-card-media-right uk-width-1-3@s">
<div
class="uk-width-1-1 uk-height-1-1 uk-background-cover"
data-src="https://pic.rmb.bdstatic.com/bjh/gallery/6e8010c3bb0d48f606fba14a64c7d6e04023.jpeg"
uk-img
>
</div>
</div>
<div class=" uk-width-2-3@s">
<div class="uk-card-body uk-flex uk-flex-between uk-flex-column uk-height-1-1">
<h3>siteground（Siteground：选择最佳的网站托管提供商）</h3>
<div>下一篇</div>
</div>
</div>
<a href="https://www.sywcxx.com/cydianzi/3580.html" data-can-open="1"></a>
</div>
</div>
</div>
<!--相关文章，如果没有，就显示最新文章-->
<div class="qzhai_related_articles">
<h5 class="qzhai-title-h5"><span class="qzf"> </span> 相关文章</h5>
<div uk-slider="autoplay: true;sets: true" class="uk-slider uk-slider-container">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slider-items uk-child-width-1-3@s uk-child-width-1-2 uk-grid uk-grid-medium" style="transform: translate3d(-252.406px, 0px, 0px);">
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/7949df1fdda563d47d39009ad9feab44791.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/87542e9ea4db7179563020e51c49fa5f9848.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">siteground（Siteground：选择最佳的网站托管提供商）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3580.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/df2412db008342bdc6eb31efeeca248b6989.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/fcd64d9504c6f0102e88b382025abd22797.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">dingziku（html格式化：从零开始学习基本标签）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3558.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/7198c4a875aaeff85e84ce09e93fb92e3339.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/5140be84b5fce4b556050e0b81c21ecd4410.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">广东国际赛车场（广东国际赛车场：速度与激情的交织之地）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3555.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/d7a584e25995ced85b1bc1b0a82a01783015.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/41e8d88008bc080150664dfdc996c2c81002.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">中国人寿保险(集团)公司（中国人寿保险(集团)公司的企业文化与核心价值观）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3553.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/ad8ed3efc4ec5daf1c70424c65446fce1371.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/b87f13e081277651957044bb15a4425f4273.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">支付宝积分有什么用（支付宝积分的应用与价值）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3551.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/4bfbc1ff05effd3aacccc54a7830c9f04519.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/82c94a0ec26114db838ae10a77114d4c8784.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">谷雨节气古诗大全（谷雨节气古诗的文化魅力）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3544.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/41e8d88008bc080150664dfdc996c2c81002.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/4b0009987d6f31f5dd97232ad435b9b49124.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">南昌理工学院分数线（南昌理工学院分数线与招生政策）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3541.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/ad8ed3efc4ec5daf1c70424c65446fce1371.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/41833855e1855402a2c93f4eab10b61e7816.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">情定大饭店韩剧（日常的渴望：揭秘《以情定饭店》韩剧的魅力）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3536.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/cba90f305b0a2a1746af41e6d7e719fb455.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/019ff7ef1b62436533a0afe2c9a560d78743.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">超感警探第七季（华尔街的超感警探：超感警探第七季赋予全新的惊喜与挑战）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3519.html" data-can-open="1"></a>
</div>
</li>
<li tabindex="-1" class="" style="order: 1;">
<div class="uk-card uk-card-default">
<div class="img uk-background-cover" data-src="https://pic.rmb.bdstatic.com/bjh/gallery/a51c1d3ca50ba0c574d09f8b35d78fc4685.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/cce8a9e0ab68e6c6646d0b160b27f15b4179.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">天空之城钢琴谱子（穹顶之上——《天空之城》钢琴谱子的魅力）</h3>
</div>
<a href="https://www.sywcxx.com/cydianzi/3518.html" data-can-open="1"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--评论-->
</div>
<!--侧边栏-->
<div id="qzhai-sidebar" class="uk-width-1-4@s">
<div class="qzhai-sidebar-box">
<div class="qzhai-single-sidebar-box">
<div class="uk-card uk-card-default qzhai-single-sidebar-info" >
<div class="uk-grid-collapse" uk-grid>
<div uk-tooltip="浏览" class="uk-width-1-6 uk-flex uk-flex-center">
<span class="qzf"></span>
</div>
<div class="uk-width-5-6">
<span> <script src=https://www.sywcxx.com/e/public/ViewClick/?classid=4&id=3558&addclick=1></script></span>
</div>
</div>
<div class="uk-grid-collapse" uk-grid>
<div uk-tooltip="发布时间" class="uk-width-1-6 uk-flex uk-flex-center">
<span class="qzf"></span>
</div>
<div class="uk-width-5-6">
<time> 2023-12-13 17:09:50 </time>
</div>
</div>
<div class="uk-grid-collapse categories" uk-grid>
<div uk-tooltip="文章分类" class="uk-width-1-6 uk-flex uk-flex-center">
<span class="qzf"> </span>
</div>
<div class="uk-width-5-6">
<ul class="uk-subnav">
<li>
<a href="https://www.sywcxx.com/cydianzi/" >
<span class="uk-label" style="--hover-bg-color: #22e9e6;">
创业点子</span>
</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<ul class='qzhai-sidebar'><li id="qzhai_widget_posts-4" class="qzhai-widget qzhai-widget-posts"><div class="uk-card uk-card-default">
<div class="uk-card-header"><h4>近期文章</h4></div>
<ul class="qzhai-widget-posts-box">
<li class="text">
<a href="https://www.sywcxx.com/cydianzi/977.html" data-can-open="1">600777股票（600777中国南航-A股票走势分析与投资建议）</a>
</li>
<li class="text">
<a href="https://www.sywcxx.com/cydianzi/929.html" data-can-open="1">江门金海湾花园（江门金海湾花园：一片宁静的绿色海湾）</a>
</li>
<li class="text">
<a href="https://www.sywcxx.com/cydianzi/287.html" data-can-open="1">生存之民工下载（中国农民工：生活在城市的坚实支柱）</a>
</li>
<li class="text">
<a href="https://www.sywcxx.com/cydianzi/2057.html" data-can-open="1">dearsister（亲爱的阿姐，谈谈我们的关系）</a>
</li>
<li class="text">
<a href="https://www.sywcxx.com/cydianzi/2180.html" data-can-open="1">马钢股份有限公司（马钢股份有限公司：行业龙头稳健发展）</a>
</li>
<li class="text">
<a href="https://www.sywcxx.com/cydianzi/3580.html" data-can-open="1">siteground（Siteground：选择最佳的网站托管提供商）</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--页面底部-->
<footer class="qzhai-footer">
<div class="wp">
<hr class="uk-divider-small">
<p class="uk-link-muted">
<span class="copyright">
© 2023 <a href="https://www.sywcxx.com/" target="_blank" rel="noopener">石原生活</a> 版权所有
</span>
<a href="http://beian.miit.gov.cn" target="_blank" class="Record">陕ICP备2022013318号-41
</a>
</p>
<div id="oolong"><script type="text/javascript" src="//js.users.51.la/21815369.js"></script>
</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>
<div class="bdsharebuttonbox">
<a class="bds_more" data-cmd="more"></a>
<a title="分享到QQ空间" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到新浪微博" class="bds_tsina" data-cmd="tsina"></a>
<a title="分享到腾讯微博" class="bds_tqq" data-cmd="tqq"></a>
<a title="分享到人人网" class="bds_renren" data-cmd="renren"></a>
<a title="分享到微信" class="bds_weixin" data-cmd="weixin"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":
{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"shar
e":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/
api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<div id="qzhai-quick-window" class="uk-flex-top" uk-modal="bg-close: false;esc-close:false">
<div class="uk-modal-dialog">
<div id="qzhai-quick-window-content" class="uk-width-1-1">
<div class="qzhai-quick-window-close-hd">
<div class="wp uk-flex uk-flex-right">
<a class="qzhai-quick-window-close uk-close-large" href="javascript:;" uk-close ></a>
</div>
</div>
<div class="qzhai-qwc"> </div>
<div class="wp loading">
<div class="qzhai-content uk-card uk-card-default __null">
<div class="uk-card-body">
<div class="h1"></div> <span></span>
<div class="img"></div>
<div><p></p><p></p><p></p><p></p></div>
</div>
</div>
</div>
<div class="qzhai-quick-window-close-ft uk-flex uk-flex-center">
<a class="qzhai-quick-window-close uk-close-large" href="javascript:;" uk-close ></a>
</div>
</div>
</div>
</div>
<script>
var qzhai = {"url":"/","ajaxUrl":"/","comment_nonce":"f2885bdc509e424050902001b90a2f31"};qzhai.ajaxIgnore = "";
// func_qzhai.push(function($){
// $('.qzhai-content pre').each(function(i, e) {
// $(e).addClass('qzhai_highlight').append('<div class="qzhai_highlight_heade"><span></span><div>');
// hljs.highlightBlock(e);
// });
// });
</script>
<script type='text/javascript' src='https://www.sywcxx.com/skin/js/highlight.pack.js?ver=1.0.3'></script>
<script type='text/javascript' src='https://www.sywcxx.com/skin/js/cell.js?ver=1.0.3'></script>
</body>
</html> 