七分钟学会 HTML 网页制作

七分钟学会 HTML 网页制作
什么是HTML

点击打开视频讲解更加详细
- Hyper Text Markup Language（超文本标记语言）
- 标签控制排版
- 体积小，方便传输
编写HTLML

推荐使用：VS Code
```
    
    
    
    末晨曦吖


    
        我的第一个标题
 
        我的第一个段落。
    
```
HTML文件结构
```
    末晨曦吖
```
- 起始行告诉浏览器这是一个HTML文档
- 开始标签
- 结束标签
html根标签，标签都是成对出现的，标签中可以嵌套文本或其他标签
- 中定义文档的描述信息
- </code> 定义title，它会显示在浏览器上</li> </ul> <h1 id="html常用标签">HTML常用标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h1> <h2 id="标题标签">标题标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </code></pre> <strong>效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/24/52ef4b6a81645cda.webp" alt="1111111111111.png" loading="lazy"> <h2 id="段落标签">段落标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </code></pre> <strong>效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/24/6bd51f15071740ba.webp" alt="222222222222222.png" loading="lazy"> <h2 id="文本样式标签">文本样式标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><b>加粗文本</b><br><br> <i>斜体文本</i><br><br> <code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup><br><br> <del>我是带删除线的文本</del> </code></pre> <strong>效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/24/b824a1f8bb4a1fdc.webp" alt="33333333333.png" loading="lazy"> <h2 id="列表标签">列表标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <h3 id="无序列表">无序列表<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </code></pre> <strong>效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/24/0f8117ae4479a115.webp" alt="44444444.png" loading="lazy"> <h3 id="有序列表">有序列表<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ol start="50"> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </code></pre> <strong>效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/24/5c1ec04961bde210.webp" alt="55555555555555.png" loading="lazy"> <h2 id="超链接标签">超链接标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><a href="https://www.bilibili.com/" target="_blank">跳转到 B 站</a> </code></pre> <strong>效果：</strong><br> <img src="https://1000bd.com/contentImg/2024/03/24/832be03dedc0757c.webp" alt="66666666666666.png" loading="lazy" class="medium-zoom-image"> <h2 id="多媒体标签">多媒体标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <h3 id="图片标签">图片标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><img src="./smiley.gif"> </code></pre> <h3 id="视频标签">视频标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><video src="./video .mp4" controls></video> </code></pre> <h3 id="音频标签">音频标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h3> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><audio src="./audio .mp3" controls></audio> </code></pre> <h2 id="div标签">div标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p>块级元素，并没具体的实际意义，主要作用是调整布局样式；</p> <pre class="highlighter-hljs" highlighted="true"><code class="language-clike highlighter-hljs hljs"><div> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </div> </code></pre> <h2 id="布局标签">布局标签<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <div class="table-wrapper"><table> <thead> <tr> <th><code><headet></code></th> <th>头部信息</th> </tr> </thead> <tbody> <tr> <td><code><nav></code></td> <td>导航栏</td> </tr> <tr> <td><code><aside></code></td> <td>侧边栏</td> </tr> <tr> <td><code><main></code></td> <td>内容区域</td> </tr> <tr> <td><code><footer></code></td> <td>底部信息</td> </tr> <tr> <td><code><article></code></td> <td>文章详情</td> </tr> <tr> <td><code><section></code></td> <td>页面分区</td> </tr> </tbody> </table></div> <h2 id="更多资料参考">更多资料参考<button class="cnblogs-toc-button" title="显示目录导航" aria-expanded="false"></button></h2> <p><a href="https://www.runoob.com/html/html-tutorial.html" target="_blank" rel="noopener">菜鸟教程</a></p> <p><a href="https://www.w3cschool.cn/index.html" target="_blank" rel="noopener">w3cschool</a></p> <p><a href="https://www.bilibili.com/video/BV1ia411d7Jr/?vd_source=66e2692cc471862d6c3f85dc4b9ea5dd" target="_blank" rel="noopener">若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！</a></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1298220">网课自动暂停解决方法、挂课后台播放方法、解决继续教育自动暂停</a> <br /> <a href="/Article/Index/987620">RockyLinux9.0系统在VMware虚拟机上【保姆级】安装步骤，并修改网络配置，使用固定IP进行SSH连接【47张过程图】</a> <br /> <a href="/Article/Index/813022">RocketMq源码分析（一）--基本知识</a> <br /> <a href="/Article/Index/808224">gitee提交代码到仓库</a> <br /> <a href="/Article/Index/642134">哈希表的前置知识---二叉搜索树</a> <br /> <a href="/Article/Index/1310370">小米笔试题——01背包问题变种</a> <br /> <a href="/Article/Index/893907">云原生中间件RocketMQ-核心原理之高可用机制</a> <br /> <a href="/Article/Index/1221588">自己动手从零写桌面操作系统GrapeOS系列教程——23.从硬盘读取文件</a> <br /> <a href="/Article/Index/1103951">android中集成阿里云金融级实人认证</a> <br /> <a href="/Article/Index/1597124">Cadence 16.6 PCB Edito如何将鼠标中键反向拉拽改为正向拖拽</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://www.cnblogs.com/mochenxiya/p/16609813.html </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

什么是HTML

编写HTLML

我的第一个标题

HTML文件结构