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/649fb2adfd04063ca0e66395107c580c4208.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><p style="text-align: center"><img src="https://pic.rmb.bdstatic.com/bjh/gallery/87020094eecd7a43e7c69458af14c3539990.jpeg" alt="dingziku（html格式化：从零开始学习基本标签）"></p>
<pre><a href=\"目标网址\">链接文本</a><img src=\"图像地址\" alt=\"替代文本\"></pre><h2>列表标签</h2><p>HTML提供了有序列表（`<ol>`）、无序列表（`<ul>`）以及定义列表（`<dl>`）三种列表标签，分别用于显示有序项目、无序项目和定义项目。以下是这三个标签的基本用法：</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/0143602da6097ed306ab4949d97697f772.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>bureaucratic（公文主管与官僚主义）</h3>
<div>上一篇</div>
</div>
</div>
<a href="https://www.zzbpp.com/cygs/18781.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/dae9d544538d8839fe65e3fa1cf673836933.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>geronimo（杰罗尼莫 - 龙舟竞技）</h3>
<div>下一篇</div>
</div>
</div>
<a href="https://www.zzbpp.com/cygs/18809.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/e2da6c63243c55b699bcd9f7eb7bc9b93166.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/05563c07cb8e424bd5d2b0a65ec73c267164.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">geronimo（杰罗尼莫 - 龙舟竞技）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18809.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/78f72d55d658d23903eb52f105f984609269.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/ecbf76ad57a896d7e2362d6ba659d4696772.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">dingziku（html格式化：从零开始学习基本标签）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18784.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/601207d75eae13ec7ff360883569f30f7564.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/5483cf639f0dfe24b5ef6117110aaee15219.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">bureaucratic（公文主管与官僚主义）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18781.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/a4a80b5e610069291e963c6629f5c13c7360.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/f6fb14d5b89f409a5f60f02c177357124619.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">filetype（使用HTML格式编写文章）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18772.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/c9de4bad3928801646c53b801fb9949f4530.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/5980cba84e5e4198a1443799c9c1e9cd483.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">中威电气石产品（Title 中威电气石产品的卓越表现 - 提升能源效率，助力可持续发展）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18760.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/e411ac5a043080af072bfa571cf7d5b78420.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/31f9fd2acfdf3233a6677415232dac714810.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">中国银行纸黄金（中国银行纸黄金的发展及前景展望）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18756.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/5140be84b5fce4b556050e0b81c21ecd4410.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/94c3f87752aff34770ed0187c11e3547994.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">真力时售后维修（真力时售后服务保证您的腕表长久如新）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18731.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/abaf8dd2113831f82065ef2e48ee0d774723.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/daadb6738aad8fea14504d23062715b7651.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">mp4视频转换器（使用MP4 视频转换器转换成其他格式的方法）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18729.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/0f2ecc8199bad9042b97bc2a4967c1cb2793.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/d7243ccc6e09b5d8da73555b999f1fb48014.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">无肉不欢橘花散里（无肉不欢 - 橘花散）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18726.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/9ae2f5785bd7d40af8a842c5e8beff655240.jpeg" uk-img="" style="background-image: url(https://pic.rmb.bdstatic.com/bjh/gallery/82637c5f4fa657ddf7d8f83c02d17adb5266.jpeg);"></div>
<div class="uk-card-body">
<h3 class="uk-card-title">pgd-476（PGD-476治疗黄斑变性的希望）</h3>
</div>
<a href="https://www.zzbpp.com/cygs/18714.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.zzbpp.com/e/public/ViewClick/?classid=3&id=18784&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> 2024-10-09 14:26:26 </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.zzbpp.com/cygs/" >
<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.zzbpp.com/cygs/909.html" data-can-open="1">谷歌账号注册网站官网（谷歌账号注册网站官方介绍）</a>
</li>
<li class="text">
<a href="https://www.zzbpp.com/cygs/15505.html" data-can-open="1">矮人dos工具箱（携手汗水和智慧，矮人工具箱为你解决各种问题）</a>
</li>
<li class="text">
<a href="https://www.zzbpp.com/cygs/16016.html" data-can-open="1">战神杨辰回归都市（战神归来：杨辰重返都市）</a>
</li>
<li class="text">
<a href="https://www.zzbpp.com/cygs/1567.html" data-can-open="1">表示变化快的成语（时间飞逝，岁月如梭）</a>
</li>
<li class="text">
<a href="https://www.zzbpp.com/cygs/2251.html" data-can-open="1">忘忧草研究院一二三（忘忧草研究院：抒写心灵的治愈之地）</a>
</li>
<li class="text">
<a href="https://www.zzbpp.com/cygs/10718.html" data-can-open="1">劲力五星城杰座户型图（劲力五星城杰华座户型大揭秘）</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.zzbpp.com/" target="_blank" rel="noopener">找找生活</a> 版权所有
</span>
<a href="http://beian.miit.gov.cn" target="_blank" class="Record">陕ICP备2022013318号-38
</a>
</p>
<div id="oolong"></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.zzbpp.com/skin/js/highlight.pack.js?ver=1.0.3'></script>
<script type='text/javascript' src='https://www.zzbpp.com/skin/js/cell.js?ver=1.0.3'></script>
</body>
</html> 