七分钟学会 HTML 网页制作

什么是HTML

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

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

编写HTLML

推荐使用：VS Code




    
    
    
    末晨曦吖


    
        我的第一个标题
 
        我的第一个段落。

HTML文件结构




    末晨曦吖

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

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

中定义文档的描述信息
</code> 定义title，它会显示在浏览器上</li> </ul> <h1 id="html常用标签">HTML常用标签</h1> <h2 id="标题标签">标题标签</h2> <pre><code class="language-clike"><h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </code></pre> <p><strong>效果：</strong><br> <img src="https://img.yipin100.com/p.php?img=https://upload-images.jianshu.io/upload_images/26490172-f02c8b23bad32d2b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="1111111111111.png" loading="lazy"></p> <h2 id="段落标签">段落标签</h2> <pre><code class="language-clike"><p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </code></pre> <p><strong>效果：</strong><br> <img src="https://img.yipin100.com/p.php?img=https://upload-images.jianshu.io/upload_images/26490172-3449546da1267f3e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="222222222222222.png" loading="lazy"></p> <h2 id="文本样式标签">文本样式标签</h2> <pre><code class="language-clike"><b>加粗文本</b><br><br> <i>斜体文本</i><br><br> <code>电脑自动输出</code><br><br> 这是 <sub> 下标</sub> 和 <sup> 上标</sup><br><br> <del>我是带删除线的文本</del> </code></pre> <p><strong>效果：</strong><br> <img src="https://img.yipin100.com/p.php?img=https://upload-images.jianshu.io/upload_images/26490172-fa2c9da9ac2c5876.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="33333333333.png" loading="lazy"></p> <h2 id="列表标签">列表标签</h2> <h3 id="无序列表">无序列表</h3> <pre><code class="language-clike"><ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> </code></pre> <p><strong>效果：</strong><br> <img src="https://img.yipin100.com/p.php?img=https://upload-images.jianshu.io/upload_images/26490172-88e5bb77df6802b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="44444444.png" loading="lazy"></p> <h3 id="有序列表">有序列表</h3> <pre><code class="language-clike"><ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ol start="50"> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> </code></pre> <p><strong>效果：</strong><br> <img src="https://img.yipin100.com/p.php?img=https://upload-images.jianshu.io/upload_images/26490172-283961ad46c08564.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="55555555555555.png" loading="lazy"></p> <h2 id="超链接标签">超链接标签</h2> <pre><code class="language-clike"><a href="https://www.bilibili.com/" target="_blank">跳转到 B 站</a> </code></pre> <p><strong>效果：</strong><br> <img src="https://img.yipin100.com/p.php?img=https://upload-images.jianshu.io/upload_images/26490172-e6008dd737950a0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="66666666666666.png" loading="lazy"></p> <h2 id="多媒体标签">多媒体标签</h2> <h3 id="图片标签">图片标签</h3> <pre><code class="language-clike"><img src="./smiley.gif"> </code></pre> <h3 id="视频标签">视频标签</h3> <pre><code class="language-clike"><video src="./video .mp4" controls></video> </code></pre> <h3 id="音频标签">音频标签</h3> <pre><code class="language-clike"><audio src="./audio .mp3" controls></audio> </code></pre> <h2 id="div标签">div标签</h2> <p>块级元素，并没具体的实际意义，主要作用是调整布局样式；</p> <pre><code class="language-clike"><div> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </div> </code></pre> <h2 id="布局标签">布局标签</h2> <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> <h2 id="更多资料参考">更多资料参考</h2> <p>菜鸟教程</p> <p>w3cschool</p> <p>若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！</p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid100-0.html' class='tagbtn' target='_blank'>CSS</a><a href='/t/etagid334-0.html' class='tagbtn' target='_blank'>js</a><a href='/t/etagid239-0.html' class='tagbtn' target='_blank'>vue</a><a href='/t/etagid231-0.html' class='tagbtn' target='_blank'>程序员</a><a href='/t/etagid49-0.html' class='tagbtn' target='_blank'>前端</a><a href='/t/etagid2155-0.html' class='tagbtn' target='_blank'>HTML5</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566383.html">在虚拟机(centos)上安装或卸载nodejs</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565889.html">js 正则匹配两个字符串之间，某个字符串之前（之后）的内容</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565764.html">sql server2016里面的json功能 - 转</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565979.html">创建vue项目的第一步——之安装vue 命令更新了</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565990.html">vue打包报错</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565272.html">vue登录页面后台返回验证码图片</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565466.html">cefSharp通过js操控页面，含跨域操控</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565101.html">angularjs $emit $on $broadcast 父子兄弟之间传值</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565125.html">DOM修改使用DOM操作CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564642.html">HTML和CSS</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564897.html">vue axios 1 创建项目及简单配置axios</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>