您现在的位置是：首页 > 技术教程正文

七分钟学会 HTML 网页制作

admin 阅读： 2024-03-26

后台-插件-广告管理-内容页头部广告（手机）

什么是HTML

点击打开视频讲解更加详细

Hyper Text Markup Language（超文本标记语言）
标签控制排版
体积小，方便传输

编写HTLML

推荐使用：VS Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>末晨曦吖</title> </head> <body> <div id="app"> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </div> </body> <style scoped> body{ padding: 0; margin: 0; } </style> </html>

HTML文件结构

<!DOCTYPE html> <html lang="en"> <head> <title>末晨曦吖</title> </head> <body></body> </html>

起始行告诉浏览器这是一个HTML文档
开始标签
结束标签

html根标签，标签都是成对出现的，标签中可以嵌套文本或其他标签

中定义文档的描述信息
定义title，它会显示在浏览器上</li></ul><h2>HTML常用标签</h2> <h3>标题标签</h3> <span><</span>h1<span>></span>这是标题 <span>1</span><span><</span><span>/</span>h1<span>></span> <span><</span>h2<span>></span>这是标题 <span>2</span><span><</span><span>/</span>h2<span>></span> <span><</span>h3<span>></span>这是标题 <span>3</span><span><</span><span>/</span>h3<span>></span> <span><</span>h4<span>></span>这是标题 <span>4</span><span><</span><span>/</span>h4<span>></span> <span><</span>h5<span>></span>这是标题 <span>5</span><span><</span><span>/</span>h5<span>></span> <span><</span>h6<span>></span>这是标题 <span>6</span><span><</span><span>/</span>h6<span>></span> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><p><strong>效果：</strong><br><img src="/d/file/p/20240326/bded3ba978afbe32394a629d1988ba3b.png#pic_center" alt="在这里插入图片描述"></p> <h3>段落标签</h3> <span><</span>p<span>></span>这是一个段落。<span><</span><span>/</span>p<span>></span> <span><</span>p<span>></span>这是一个段落。<span><</span><span>/</span>p<span>></span> <span><</span>p<span>></span>这是一个段落。<span><</span><span>/</span>p<span>></span> <ul><li>1</li><li>2</li><li>3</li></ul><p><strong>效果：</strong><br><img src="/d/file/p/20240326/456b0b1a873e131c1fe29a470b1c7401.png#pic_center" alt="在这里插入图片描述"></p> <h3>文本样式标签</h3> <span><</span>b<span>></span>加粗文本<span><</span><span>/</span>b<span>></span><span><</span>br<span>></span><span><</span>br<span>></span> <span><</span>i<span>></span>斜体文本<span><</span><span>/</span>i<span>></span><span><</span>br<span>></span><span><</span>br<span>></span> <span><</span>code<span>></span>电脑自动输出<span><</span><span>/</span>code<span>></span><span><</span>br<span>></span><span><</span>br<span>></span> 这是 <span><</span>sub<span>></span> 下标<span><</span><span>/</span>sub<span>></span> 和 <span><</span>sup<span>></span> 上标<span><</span><span>/</span>sup<span>></span><span><</span>br<span>></span><span><</span>br<span>></span> <span><</span>del<span>></span>我是带删除线的文本<span><</span><span>/</span>del<span>></span> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><p><strong>效果：</strong><br><img src="/d/file/p/20240326/d3d69ef4c641e376accc73afe37f113e.png#pic_center" alt="在这里插入图片描述"></p> <h3>列表标签</h3> <h4>无序列表</h4> <span><</span>ul<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span><span>/</span>ul<span>></span> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><p><strong>效果：</strong><br><img src="/d/file/p/20240326/34f862ff54ca24be72e45e0924680af0.png#pic_center" alt="在这里插入图片描述"></p> <h4>有序列表</h4> <span><</span>ol<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span><span>/</span>ol<span>></span> <span><</span>ol start<span>=</span><span>"50"</span><span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span>li<span>></span>列表项<span><</span><span>/</span>li<span>></span> <span><</span><span>/</span>ol<span>></span> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><p><strong>效果：</strong><br><img src="/d/file/p/20240326/efc3a3647d2748c3839b9efe219e60ed.png#pic_center" alt="在这里插入图片描述"></p> <h3>超链接标签</h3> <span><</span>a href<span>=</span><span>"https://www.bilibili.com/"</span> target<span>=</span><span>"_blank"</span><span>></span>跳转到 B 站<span><</span><span>/</span>a<span>></span> <ul><li>1</li></ul><p><strong>效果：</strong><br><img src="/d/file/p/20240326/09d93c1fa73db7cdab57d57b214249f1.png#pic_center" alt="在这里插入图片描述"></p> <h3>多媒体标签</h3> <h4>图片标签</h4> <span><</span>img src<span>=</span><span>"./smiley.gif"</span><span>></span> <ul><li>1</li></ul><h4>视频标签</h4> <span><</span>video src<span>=</span><span>"./video .mp4"</span> controls<span>></span><span><</span><span>/</span>video<span>></span> <ul><li>1</li></ul><h4>音频标签</h4> <span><</span>audio src<span>=</span><span>"./audio .mp3"</span> controls<span>></span><span><</span><span>/</span>audio<span>></span> <ul><li>1</li></ul><h3>div标签</h3> <p>块级元素，并没具体的实际意义，主要作用是调整布局样式；</p> <span><</span>div<span>></span> <span><</span>h1<span>></span>我的第一个标题<span><</span><span>/</span>h1<span>></span> <span><</span>p<span>></span>我的第一个段落。<span><</span><span>/</span>p<span>></span> <span><</span><span>/</span>div<span>></span> <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><h3>布局标签</h3> <table><thead><tr><th><headet></th><th>头部信息</th></tr></thead><tbody><tr><td><nav></td><td>导航栏</td></tr><tr><td></td><td>侧边栏</td></tr><tr><td><main></td><td>内容区域</td></tr><tr><td><footer></td><td>底部信息</td></tr><tr><td></td><td>文章详情</td></tr><tr><td><section></td><td>页面分区</td></tr></tbody></table> <h3>更多资料参考</h3> <p>菜鸟教程</p> <p>w3cschool</p> <p>若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！</p> </div> <div class="pagebar"> </div> <div class="tags_share"> <div class="artice_tags"> <span>标签:</span> </div> </div> <div class="avow"> <div class="avowtitle">声明</div>  <p>1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。</p> <p>在线投稿：<a href='https://www.pyhost.cn/e/DoInfo/AddInfo.php?classid=2&mid=1&ecmscheck=1' target='_blank'>投稿</a> 站长QQ：1888636</p>  </div> <div class="pcd_ad"><script src="/skin/js/thea7.js"></script></div> <div class="mbd_ad"><table width="100%" height="90" style="background-color:#ccc;"> <tr align="center"> <td style="text-align: center;color: #666;">后台-插件-广告管理-内容页尾部广告（手机）</td> </tr> </table></div> <div class="related"> <div class="md_tit"> <span>相关文章</span> </div> <ul> <li><a href="/tutorial/5402.html" title="08 | Swoole与Go系列教程之Channel通道的应用"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="08 | Swoole与Go系列教程之Channel通道的应用"></div> <p>08 | Swoole与Go系列教程之Channel通道的应用</p> </a> </li> <li><a href="/tutorial/5403.html" title="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能"></div> <p>thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能</p> </a> </li> <li><a href="/tutorial/5397.html" title="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告"></div> <p>[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告</p> </a> </li> <li><a href="/tutorial/5396.html" title="Typecho：简约而强大的开源PHP博客平台"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="Typecho：简约而强大的开源PHP博客平台"></div> <p>Typecho：简约而强大的开源PHP博客平台</p> </a> </li> <li><a href="/tutorial/5387.html" title="昔日辉煌不再，PHP老矣，尚能饭否？"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="昔日辉煌不再，PHP老矣，尚能饭否？"></div> <p>昔日辉煌不再，PHP老矣，尚能饭否？</p> </a> </li> <li><a href="/tutorial/5384.html" title="PHP APCu缓存使用与避坑"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="PHP APCu缓存使用与避坑"></div> <p>PHP APCu缓存使用与避坑</p> </a> </li> <li><a href="/tutorial/5381.html" title="谁说PHP不能异步和并行运行？"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="谁说PHP不能异步和并行运行？"></div> <p>谁说PHP不能异步和并行运行？</p> </a> </li> <li><a href="/tutorial/5377.html" title="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展"> <div class="img"><img src="" onerror="this.onerror=null; this.src='/skin/images/def.jpeg'" alt="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展"></div> <p>一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展</p> </a> </li> </ul> </div> </div> </div> <div class="main_right" id="main_right"> <div class="widget widget_gzwmdiy"> <div class="md_tit"><span>关注我们</span></div> <div class="widget_gz_body"> <p>扫一扫关注我们，了解最新精彩内容</p> <div class="qr_img"> <img src="/d/file/p/20231220/8ad98652841054fbbc542cb0219b1219.png" alt=""> </div> </div> </div> <div class="widget widget_searchpanel"> <div class="md_tit"><span>搜索</span></div> <div class="widget_div"> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="/e/search/index.php" > <input type="text" name="keyboard" placeholder="输入关键词"/> <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button> <input type="hidden" value="title" name="show"> <input type="hidden" value="1" name="tempid"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> </div> <div class="widget widget_cead"> <script src="/skin/js/thea3.js"></script> </div> <div class="widget widget_paihang"> <div class="md_tit"><span>排行榜</span></div> <script>$( function () {$( '.paihang' ).tabslet();} );</script> <div class="paihang"> <ul class="tit"> <li><a href="#hot_1">热门文章</a></li> <li><a href="#hot_2">随机文章</a></li> </ul> <div id="hot_1" class="ph_list"> <ul> <li><a href="/tutorial/1009.html" target="_blank">好奇喵 | Tor浏览器——如何拥有一颗洋葱并使用</a></li> <li><a href="/tutorial/2921.html" target="_blank">Ubuntu 20.04 RTX 4090显卡深度学习环境配置（Nvidia显卡驱动、CUDA11.6.0、cuDNN8.5）</a></li> <li><a href="/tutorial/1594.html" target="_blank">VPN的介绍及自建点对点的OpenVPN和使用方法：保姆级详细教程，(windou客户端版)后附脚本</a></li> <li><a href="/tutorial/126.html" target="_blank">phpy ：PHP 与 Python 互调用库，为 PHP 引入 Python 生态，PHP 也可以写 AI 了</a></li> <li><a href="/tutorial/120.html" target="_blank">Linux内核开启BBRv3加速让VPS更低延迟提升性能</a></li> <li><a href="/tutorial/1819.html" target="_blank">【R语言】——基因GO/KEGG富集分析!超级简单的保姆级教程！</a></li> <li><a href="/tutorial/2192.html" target="_blank">Python 可视化 web 神器：streamlit、Gradio、dash、nicegui；低代码 Python Web 框架：PyWebIO</a></li> <li><a href="/tutorial/164.html" target="_blank">如何快速定位当前数据库消耗 CPU 最高的sql 语句？</a></li> <li><a href="/tutorial/4398.html" target="_blank">Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结</a></li> </ul> </div> <div id="hot_2" class="ph_list"> <ul> <li><a href="/tutorial/3879.html" target="_blank">用html制作一个简历</a></li> <li><a href="/tutorial/4675.html" target="_blank">Vue项目前端部署——nginx方式</a></li> <li><a href="/tutorial/2353.html" target="_blank">291.【华为OD机试】模拟目录管理（Java&Python&C++&JS实现）</a></li> <li><a href="/tutorial/5037.html" target="_blank">SeaTunnel Web安装一把成</a></li> <li><a href="/tutorial/2142.html" target="_blank">[ 环境搭建篇 ] 安装python环境并配置环境变量(附python3.10.3安装包)</a></li> <li><a href="/tutorial/2329.html" target="_blank">Python连接打印机：实现自动化打印的利器</a></li> <li><a href="/tutorial/4902.html" target="_blank">Element-UI控件Tree实现数据树形结构</a></li> <li><a href="/tutorial/1721.html" target="_blank">PhpMyAdmin启用双因子认证（2FA），及异常问题排查</a></li> <li><a href="/tutorial/1073.html" target="_blank">入门【网络安全/黑客】启蒙教程</a></li> </ul> </div> </div> </div> <div class="widget widget_cead"> <script src="/skin/js/thea4.js"></script> </div> <div class="widget widget_previous"> <div class="md_tit"><span>最近发表</span></div> <ul> <li><a title="08 | Swoole与Go系列教程之Channel通道的应用" href="/tutorial/5402.html">08 | Swoole与Go系列教程之Channel通道的应用</a></li> <li><a title="thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能" href="/tutorial/5403.html">thinkphp融合workerman的两种简单方式，直接在workerman里面用tp的orm功能</a></li> <li><a title="[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告" href="/tutorial/5397.html">[240607] Jina AI 发布多模态嵌入模型 | PHP 曝新漏洞 | TypeScript 5.5 RC 发布公告</a></li> <li><a title="Typecho：简约而强大的开源PHP博客平台" href="/tutorial/5396.html">Typecho：简约而强大的开源PHP博客平台</a></li> <li><a title="昔日辉煌不再，PHP老矣，尚能饭否？" href="/tutorial/5387.html">昔日辉煌不再，PHP老矣，尚能饭否？</a></li> <li><a title="PHP APCu缓存使用与避坑" href="/tutorial/5384.html">PHP APCu缓存使用与避坑</a></li> <li><a title="谁说PHP不能异步和并行运行？" href="/tutorial/5381.html">谁说PHP不能异步和并行运行？</a></li> <li><a title="一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展" href="/tutorial/5377.html">一个用rust写的类似于Skywalking/CAT的迷你trace PHP扩展</a></li> <li><a title="Typecho博客搭建教程" href="/tutorial/5374.html">Typecho博客搭建教程</a></li> </ul> </div> <div class="widget widget_cead"> <script src="/skin/js/thea5.js"></script> </div> <div class="widget widget_tags"> <div class="md_tit"><span>标签列表</span></div> <ul> <li><a target="_blank" href="/tags-优惠促销-0.html">优惠促销</a></li> <li><a target="_blank" href="/tags-香港VPS-0.html">香港VPS</a></li> <li><a target="_blank" href="/tags-美国VPS-0.html">美国VPS</a></li> <li><a target="_blank" href="/tags-洛杉矶-0.html">洛杉矶</a></li> <li><a target="_blank" href="/tags-洛杉矶VPS-0.html">洛杉矶VPS</a></li> <li><a target="_blank" href="/tags-新加坡vps-0.html">新加坡vps</a></li> <li><a target="_blank" href="/tags-优惠码-0.html">优惠码</a></li> <li><a target="_blank" href="/tags-服务器-0.html">服务器</a></li> <li><a target="_blank" href="/tags-美国CN2VPS-0.html">美国CN2VPS</a></li> <li><a target="_blank" href="/tags-便宜美国vps-0.html">便宜美国vps</a></li> <li><a target="_blank" href="/tags-美国vps推荐-0.html">美国vps推荐</a></li> <li><a target="_blank" href="/tags-日本vps-0.html">日本vps</a></li> <li><a target="_blank" href="/tags-美国便宜VPS-0.html">美国便宜VPS</a></li> <li><a target="_blank" href="/tags-独立服务器-0.html">独立服务器</a></li> <li><a target="_blank" href="/tags-VPS-0.html">VPS</a></li> <li><a target="_blank" href="/tags-香港vps推荐-0.html">香港vps推荐</a></li> <li><a target="_blank" href="/tags-美国vpscn2-0.html">美国vpscn2</a></li> <li><a target="_blank" href="/tags-香港cn2vps-0.html">香港cn2vps</a></li> <li><a target="_blank" href="/tags-美国cmin2vps-0.html">美国cmin2vps</a></li> <li><a target="_blank" href="/tags-美国as9929vps-0.html">美国as9929vps</a></li> </ul> </div> </div> </div>  </div> </div> <div id="footer"> <div class="footer container"> <div class="fr"><a href="/contact/" target="_blank">申请友情链接</a></div> <div class="fl"> <p>Copyright (c) 2023 主机评测 All rights reserved. <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">浙ICP备2022012306号-1</a> </p> </div> </div> </div> <div class="m_search"><i class="fa fa-search"></i></div> <div class="m_search_box"> <span><i class="fa fa-remove"></i></span> <form onsubmit="return checkSearchForm()" method="post" name="searchform" action="/e/search/index.php" > <input type="text" name="keyboard" placeholder="输入关键词"/> <button type="submit" class="submit" value="搜索"><i class="fa fa-search"></i></button> <input type="hidden" name="show" value="title,newstext"> <input type="hidden" name="tempid" value="1"> <input type="hidden" value="news" name="tbname"> <input name="mid" value="1" type="hidden"> <input name="dopost" value="search" type="hidden"> </form> </div> <div id="goTop" class="goTop"><i class="fa fa-angle-up"></i></div> <script src="/skin/js/common.min.js" type="text/javascript"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f87360bc08657de9dda1d3005636bdbe"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>