HTML教程
一、HTML概述
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它是构建网页结构和内容的基础，通过标签来定义网页元素的类型、布局和样式等基本属性。HTML并不是一种编程语言，而是一种标记语言，它告诉浏览器如何显示网页中的内容。
二、HTML基本结构
一个简单的HTML文档通常具有以下结构：
我的第一个网页
欢迎来到我的网页
这是一个段落。
</code> 标签内的内容会显示在浏览器的标题栏；<code><body></code> 部分则是网页的主体内容，如标题、段落等可见元素。
</p><img src='https://cb2.cn/plugins/addons/wxinseo/template/picture/5058f1af8388633f609cadb75a75dc9d.jpg' alt='html教程' />
<h2>三、常用标签</h2>
<h3>标题标签</h3>
<p>从 <code><h1></code> 到 <code><h6></code>，分别表示一级到六级标题，<code><h1></code> 是最大的标题，常用于页面主标题，随着数字增大，标题字号逐渐减小。例如：
</p>
<pre><code class="language-html"><h1>主标题</h1>
<h2>副标题</h2></code></pre>
<h3>段落标签</h3>
<p><code><p></code> 标签用于定义段落。浏览器会自动在段落前后添加空行。例如：
</p>
<pre><code class="language-html"><p>这是一个段落。</p>
<p>这是另一个段落。</p></code></pre>
<h3>链接标签</h3>
<p><code><a></code> 标签用于创建超链接，通过 <code>href</code> 属性指定链接的目标地址。例如：
</p>
<pre><code class="language-html"><a href="https://www.example.com">点击这里</a></code></pre>
<h3>图片标签</h3>
<p><code><img></code> 标签用于在网页中插入图片，<code>src</code> 属性指定图片的路径，<code>alt</code> 属性提供图片的替代文本，当图片无法显示时，会显示该文本。例如：
</p>
<pre><code class="language-html"><img src="image.jpg" alt="这是一张图片"></code></pre>
<h2>四、HTML属性</h2>
<p>HTML标签可以拥有属性，属性提供了关于元素的额外信息。属性总是在标签的起始标签中，以属性名="属性值"的形式出现。例如，<code><a></code> 标签的 <code>href</code> 属性指定链接地址，<code><img></code> 标签的 <code>src</code> 属性指定图片源。
</p>
<h2>五、HTML与CSS、JavaScript的关系</h2>
<p>HTML负责网页的结构和内容，CSS（Cascading Style Sheets，层叠样式表）用于美化网页，控制网页的布局、颜色、字体等样式。而JavaScript则用于为网页添加动态交互功能，如响应用户点击事件、实现动画效果等。三者结合，才能创建出丰富、美观且交互性强的网页。
</p>
<p>HTML是网页开发的基础，通过不断学习和实践，你可以掌握更多HTML知识和技巧，创建出更复杂、更优秀的网页。
</p>
</div>
</div>
<div class="news-txtpaging">
<div class="news-label-item">
<span>文章标签：</span>
<a
href="/.html?name=HTML"
title="HTML">HTML</a>
<a
href="/.html?name=基本结构"
title="基本结构">基本结构</a>
<a
href="/.html?name=常用标签"
title="常用标签">常用标签</a>
<a
href="/.html?name=HTML属性"
title="HTML属性">HTML属性</a>
<a
href="/.html?name=CSS"
title="CSS">CSS</a>
<a
href="/.html?name=JavaScript"
title="JavaScript">JavaScript</a>
</div>
<div class="news-txtpaging-item">
<a href="/newscontent/3889.html"
title="零基础入门到进阶：全面掌握HTML教程精髓">上一篇：零基础入门到进阶：全面掌握HTML教程精髓</a>
</div>
<div class="news-txtpaging-item">
<a href="/newscontent/3891.html"
title="Excel秘籍大公开：常用技巧精粹大全">下一篇：Excel秘籍大公开：常用技巧精粹大全</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="et-right">
<div class="news-right-row">
<div class="news_righ_item">
<div class="article-module-title ">
更多栏目
</div>
<div class="create-article">
<a href="/news.html">
<img src="/themes/web/www/static/picture/remoteL17092052019402.png">
<span>新闻动态</span></a>
<a href="/help.html">
<img src="/themes/web/www/static/picture/remoteL17092052224961.png">
<span>文档中心</span></a>
<a href="/downloads">
<img src="/themes/web/www/static/picture/remoteL17092052326960.png">
<span>下载中心</span></a>
</div>
</div>
<div class="newsPage_left_sticky">
<div class="news_righ_item" style="padding-bottom: 10px;">
<div class="article-module-title ">
目录结构
</div>
<div class="directoryStructure">
<span class="nothing">全文</span>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<script src="/themes/web/www/static/script/prism.js"></script>
<script>
$(document).ready(function () {
newsContent();
});
</script>
<div class="sky-footer-container footerContainer-h footer_shallow"
style="background:rgba(255, 255, 255, 1)">
<div class="comp_container comp_container_auto">
<div class="sky-footer-top">
<a class="sky-footer-block" href="/Assure.html" >
<img src="/themes/web/www/upload/local6816354bcb606.png" class="sky-footer-icon">
<div class="sky-footer-title">全额退款服务</div>
</a>
<a class="sky-footer-block" href="/register" >
<img src="/themes/web/www/upload/local6816354ed4210.png" class="sky-footer-icon">
<div class="sky-footer-title">新人注册有礼</div>
</a>
<a class="sky-footer-block" >
<img src="/themes/web/www/upload/local681635490c91d.png" class="sky-footer-icon">
<div class="sky-footer-title">客户价值为先</div>
</a>
<a class="sky-footer-block" href="/Assure.html" >
<img src="/themes/web/www/upload/local681635490c91d.png" class="sky-footer-icon">
<div class="sky-footer-title">1v1架构指导</div>
</a>
</div>
<div class="sky-footer-main">
<div class="sky-footer-left">
<div class="sky-footer-left-logo">
<img src="/themes/web/www/upload/local6815fd5caa00d.svg" alt="沈阳不二云端网络科技有限公司">
</div>
<div class="sky-footer-companyInformation">
<div class="sky-footer-address">沈阳不二云端网络科技有限公司</div>
<div class="sky-footer-copy">Copyright © 2020-2025 All Rights Reserved.不二云 版权所有</div>
</div>
<div class="sky-footer-left-itme">
<p>服务热线：</p>
<a href="tel:4009011125">4009011125</a>
</div>
<div class="sky-footer-left-itme">
<p>电子邮箱：</p>
<a href="mailto:abcqq@188.com">abcqq@188.com</a>
</div>
<div class="sky-footer-left-itme">
<p>Telegram：</p>
<a href="https://t.me/a86cc"
target="_blank">https://t.me/a86cc</a>
</div>
<div class="sky-footer-left-itme">
<p>商务QQ：</p>
<a href="http://wpa.qq.com/msgrd?v=3&uin=3515655888&site=qq&menu=yes"
target="_blank">3515655888</a>
</div>
<div class="sky-footer-left-itme">
<p>公司地址：</p>
<a>辽宁省沈阳市沈北新区道义北大街59-1号C区412室-A760</a>
</div>
<div class="sky-footer-socials">
<div class="sky-footer-ewm">
<img src="/themes/web/www/upload/local6833c35353463.jpg" alt="公众号">
<p class="sky-footer-ewm-title">公众号</p>
</div>
<div class="sky-footer-ewm">
<img src="/themes/web/www/upload/local6816390bd0f66.png" alt="微信">
<p class="sky-footer-ewm-title">微信</p>
</div>
</div>
</div>
<div class="sky-footer-right">
<div class="sky-footer-nav-row">
<div class="sky-footer-nav-column">
<div class="sky-footer-nav-heading">服务指南</div>
<div class="sky-footer-nav-item">
<a href="/security">安全中心</a>
</div>
<div class="sky-footer-nav-item">
<a href="/verified">实名认证</a>
</div>
<div class="sky-footer-nav-item">
<a href="/apimanage">API管理</a>
</div>
<div class="sky-footer-nav-item">
<a href="/submitticket">提交工单</a>
</div>
</div>
<div class="sky-footer-nav-column">
<div class="sky-footer-nav-heading">代理系统</div>
<div class="sky-footer-nav-item">
<a href="/cooperation/partner.html">合作伙伴</a>
</div>
<div class="sky-footer-nav-item">
<a href="/cooperation/aff.html">代理推广</a>
</div>
<div class="sky-footer-nav-item">
<a href="/affiliates">推广明细</a>
</div>
</div>
<div class="sky-footer-nav-column">
<div class="sky-footer-nav-heading">帮助中心</div>
<div class="sky-footer-nav-item">
<a href="/news.html">行业新闻</a>
</div>
<div class="sky-footer-nav-item">
<a href="/help.html">帮助中心</a>
</div>
<div class="sky-footer-nav-item">
<a href="/downloads">文件下载</a>
</div>
</div>
<div class="sky-footer-nav-column">
<div class="sky-footer-nav-heading">关于我们</div>
<div class="sky-footer-nav-item">
<a href="/Introduction.html">公司简介</a>
</div>
<div class="sky-footer-nav-item">
<a href="/contact.html">联系我们</a>
</div>
<div class="sky-footer-nav-item">
<a href="/news.html">公司动态</a>
</div>
<div class="sky-footer-nav-item">
<a href="/certificate.html">荣誉资质</a>
</div>
</div>
</div>
<div class="sky-footer-bottom">
<div class="sky-footer-links">
<a class="universal icon-diduiqi"></a>
<a href="https://www.ipip.net/" target="_blank">IP库查询</a>
<a href="https://www.chinaz.com/" target="_blank">站长之家</a>
<a href="/sitemap.xml" target="_blank">站点地图</a>
<a href="https://www.aiboce.com/ping" target="_blank">PING测速</a>
<a href="https://www.aiboce.com/tcping" target="_blank">TCP检测</a>
<a href="https://img.nocn.cn/" target="_blank">爱云免费图床</a>
<a href="https://cn.evn.cc/status/cb2" target="_blank">服务器监控</a>
<a href="https://www.ailingxi.cn" target="_blank">灵锡资源网</a>
<a href="https://www.buer.cc" target="_blank">布尔家园</a>
</div>
<div class="sky-footer-info">
<div class="info-copyright">
<a class="filing-itme"
href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%25E4%25B8%258A%25E6%25B5%25B7%25E7%258E%25A5%25E6%2582%25A0%25E6%2582%25A0%25E4%25BA%2591%25E8%25AE%25A1%25E7%25AE%2597%25E6%259C%2589%25E9%2599%2590%25E5%2585%25AC%25E5%258F%25B8&type=xuke"
target="_blank" >
<img class="filing-icon" src="/themes/web/www/static/picture/gongan.png"/>
<span class="filing-title">代理销售云计算产品服务机构：B1-20211276 </span>
</a>
<a class="filing-itme"
href="https://beian.miit.gov.cn/"
target="_blank" >
<img class="filing-icon" src="/themes/web/www/static/picture/local657930f11d1cd.png"/>
<span class="filing-title">网站备案号：辽ICP备2024043856号-6 </span>
</a>
<a class="filing-itme"
href="https://www.gsxt.gov.cn/"
target="_blank" >
<img class="filing-icon" src="/themes/web/www/upload/local6815f9ae846cd.png"/>
<span class="filing-title">电子营业执照：91210113MAE1G380XA </span>
</a>
<a class="filing-itme"
href="https://beian.mps.gov.cn/#/query/webSearch?code=21011302000430"
target="_blank" >
<img class="filing-icon" src="/themes/web/www/upload/local6838343ba76a1.png"/>
<span class="filing-title">辽公网安备：21011302000430号 </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="online_Nav" style="--servicewidth:40px;
--serviceline:2">
<div class=" animate__animated animate__slideInRight">
<div class="phone-container ">
<div class="consultation-box">
<div class="border-decorator decorator-one"></div>
<div class="border-decorator decorator-two"></div>
<div class="border-decorator decorator-three"></div>
<div class="border-decorator decorator-four"></div>
<img class="consultation-image"
src="/themes/web/www/static/picture/remoteL17137804762255.jpeg"
alt="">
<a class="consultation-button" href="https://work.weixin.qq.com/kfid/kfc3ae4c53806ec9c43" target="blank"
style="background: rgba(0, 86, 255, 1)"><p>在线咨询</p></a>
</div>
</div>
<div class="sideNavigation">
<div class="online_body" >
<div class="online_navItem">
<a class="onlineService"><i
class="develop sk-tubiao_kefu"></i></a>
<div class="hoverWindow">
<div class="onlineservice_triangle"></div>
<div class="onlineService_Body">
<div class="onlineservice_content">
<div class="onlineService_Title">
<div class="onlineService_Title_Icon"></div>
<div class="onlineService_Title_Text">
<div
class="onlineService_kefu display">
<a href="/default/qq.html?qq=2231908359"
target="_blank"
>
<div class="kefuInformation">
<div class="kefuInformation-status">
<img class="qqicon online"
src="//q1.qlogo.cn/g?b=qq&nk=2231908359&s=100"
alt=" 王美佳"
width="100%"
height="100%"/>
<i class="online-indicator"></i>
</div>
<div class="nicknameInformation">
<span class="nickname">王美佳 </span>
<span class="qq">售前咨询</span>
</div>
</div>
</a>
<a href="/default/qq.html?qq=3515655888"
target="_blank"
>
<div class="kefuInformation">
<div class="kefuInformation-status">
<img class="qqicon online"
src="//q1.qlogo.cn/g?b=qq&nk=3515655888&s=100"
alt=" 独角兽"
width="100%"
height="100%"/>
<i class="online-indicator"></i>
</div>
<div class="nicknameInformation">
<span class="nickname">独角兽 </span>
<span class="qq">售后咨询</span>
</div>
</div>
</a>
</div>
<div
class="onlineService_kefu display Telegram onlineService_bottom">
<a href="https://t.me/https://t.me/a86cc"
target="_blank">
<div class="kefuInformation">
<img class="qqicon"
src="/themes/web/www/static/picture/telegram.svg"
alt=" Telegram咨询"
width="100%" height="100%">
<div class="nicknameInformation">
<span class="nickname">Telegram咨询</span>
<span class="qq often">
添加https://t.me/a86cc</span>
</div>
</div>
</a>
<a href="tel:4009011125"
target="_blank">
<div class="kefuInformation">
<img class="qqicon"
src="/themes/web/www/static/picture/Hotline.svg"
alt=" 客服热线"
width="100%" height="100%">
<div class="nicknameInformation">
<span class="nickname">客服热线(24H)</span>
<span class="qq often">
拨打:4009011125</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="online_navItem">
<a class="onlineService"><i class="develop sk-bianji1"></i></a>
<div class="hoverWindow">
<div class="onlineservice_triangle"></div>
<div class="onlineService_Body">
<div class="onlineservice_content workOrder">
<a class="onlineService_Title" href="/submitticket">
<div class="onlineService_Title_Icon"><i
class="sk icon_edit"></i></div>
<div class="onlineService_Title_Text">
<p class="onlineServicetitle">
提交工单</p>
<span class="onlineServicedesc"
>
我们会第一时间处理您的需求 </span>
</div>
</a>
<a class="onlineService_Title" href="/submitticket">
<div class="onlineService_Title_Icon"><i
class="develop sk-tousujianyi"></i></div>
<div class="onlineService_Title_Text">
<p class="onlineServicetitle">
建议反馈</p>
<span class="onlineServicedesc"
>
真诚期待您的宝贵意见 </span>
</div>
</a>
<a class="onlineService_Title" href="/submitticket">
<div class="onlineService_Title_Icon"><i
class="develop sk-jubao"></i></div>
<div class="onlineService_Title_Text">
<p class="onlineServicetitle">
违法举报</p>
<span class="onlineServicedesc"
style="color:#FA7100" >
"违法有害信息"举报专区 </span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="online_navItem">
<a class="onlineService"><i
class="develop sk-31erweima"></i></a>
<div class="hoverWindow">
<div class="onlineservice_triangle"></div>
<div class="onlineService_Body officialAccount">
<div class="onlineservice_content">
<div class="onlineService_Title">
<div class="onlineService_Title_Icon"></div>
<div class="onlineService_Title_Text">
<img class="qrCode" src="/themes/web/www/upload/local6816390bd0f66.png"
alt="31erweima" width="100%"
height="100%"/>
</div>
</div>
<div class="onlineService_Close">微信二维码</div>
</div>
<div class="onlineservice_content">
<div class="onlineService_Title">
<div class="onlineService_Title_Icon"></div>
<div class="onlineService_Title_Text">
<img class="qrCode" src="/themes/web/www/upload/local6833c35353463.jpg"
alt="31erweima" width="100%"
height="100%"/>
</div>
</div>
<div class="onlineService_Close">官方公众号</div>
</div>
</div>
</div>
</div>
</div>
<div class="onlineTop">
<div class="onlineTop_icon">
<i class="develop sk-fanhuidingbu1"></i>
</div>
</div>
</div>
</div>
</div>
<script src="/themes/web/www/static/script/wow.min.js?v1.2.9"></script>
<script src="/themes/web/www/static/script/common.js?v1.2.9"></script>
<script src="/themes/web/www/static/script/universalComponents.js?v1.2.9"></script>
<script src="/themes/web/www/default/html/globalJS.js?v1.2.9"></script>
<script src="/themes/web/www/default/html/wwwJS.js?v1.2.9"></script>
<div class="latest-announcement-panel">
<div class="latest-popup-content-title">
<div class="latest-announcement-title">
linux运维工具推荐 </div>
<div class="latest-announcement-close">✖</div>
</div>
<div class="latest-announcement-content">
<div>
<p>Linux工具推荐：</p>
<p>支持一键换源/安装宝塔/1p/系统优化等，运维好帮手！Github开源工具，欢迎star~</p>
<p><a href="https://cb2.cn/helpcontent/230.html" target="_blank" rel="noopener">https://cb2.cn/helpcontent/230.html</a></p>
<p>（开源地址：<a href="https://github.com/JiaP/cb2cn" target="_blank" rel="noopener">https://github.com/JiaP/cb2cn</a>）</p>
<p>---------------------------------------</p>
<p>邀请好友注册购买可获得高额佣金！</p>
<p><a href="https://cb2.cn/cooperation/aff.html" target="_blank" rel="noopener">点击立即开通推介计划！</a><br><br><a href="https://cb2.cn/newscontent/2188.html">不二云计算不二云 B站视频创作奖励计划</a></p> </div>
<a class="latest-announcement-bott">
<span class="latest-announcement-no-more"
data-url="/"
>
查看详情 </span>
<span class="latest-announcement-buttclose">
关闭
</span>
</a>
</div>
</div>
<div class="latest-announcement-toggle">
linux运维工具推荐</div>
<script>
$(function () {
manageAnnouncement('1', 'zsYxIeDQ');
});
</script>
<script>
$(document).ready(function(){
if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();}; $("[data-toggle='tooltip']").jTippy();$('.nav-layoutcontainer').addClass('black');$('.headerBg').css('background-color','rgba(255, 255, 255, 1)');module.nav();module.footer();module.sidebar();
});</script><script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=lkh1w9delei"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></body>
</html>
