5.HTML结构及标签结构介绍

5.HTML结构及标签结构介绍
支持戳这里看视频学习 →→→ HTML结构介绍
戳这里可看全系列内容 →→→ 戳我戳我戳我
文章目录
一、前言

HTML对于前端来讲就是我们的身体里面的骨头，是项目非常核心的骨架内容。

HTML 是用来描述网页的超文本标记【HyperText Markup Language】语言。
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

 二、HTML5结构介绍

下面是一个可视化的HTML页面结构：

PS:
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
元素描述了文档的标题<br> <body> 元素包含了可见的页面内容<br> <h1> 元素定义一个大标题<br> <p> 元素定义一个段落</p> </blockquote> <p><strong>最终效果展示：</strong><br> <img src="https://1000bd.com/contentImg/2023/11/15/221556463.png" alt="在这里插入图片描述"></p> <h2><a name="t3"></a><a id="HTML_31"></a>三、HTML标签结构介绍</h2> <p><img src="https://1000bd.com/contentImg/2023/11/15/221556691.png" alt="在这里插入图片描述"></p> <blockquote> <p><strong>注意点：</strong><br> 当然，也有一些是例外的，比如： img、input、br、hr 等<br> 这些标签就是自闭合的标签，就不用分别写一个开始标签和一个结束标签了。<br> 比如：<img src=“xxx” alt=“xxx” /> <input value=“xxx” /> <br /> <hr /></p> </blockquote> <h2><a name="t4"></a><a id="_37"></a>四、结语</h2> <blockquote> <p>HTML是前端开发的基础当中的基础，各位同学一定要打牢基础~为以后做实际项目打牢基础！<br> 建议今天的内容写至少三遍，写的每一遍都要想一想每一行代码是做什么的，他有什么意义，有任何疑惑欢迎下方评论，笔者会进行答疑~</p> </blockquote> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1065640">数字营销中台和全渠道的数字化精耕，快消老品牌实现数字营销焕新生</a> <br /> <a href="/Article/Index/1150428">Vscode的Emmet语法</a> <br /> <a href="/Article/Index/1527859">机器视觉学习（五）—— 图像的几何</a> <br /> <a href="/Article/Index/1408052">Unity之ShaderGraph如何实现水波纹效果</a> <br /> <a href="/Article/Index/1373211">Go 代码块与作用域，变量遮蔽问题详解</a> <br /> <a href="/Article/Index/1741601">力扣面试题17.05.字母与数字</a> <br /> <a href="/Article/Index/1165409">SpringCloud—-解决灾难性雪崩效应的方法之降级</a> <br /> <a href="/Article/Index/1109967">【Node.js】包与npm包</a> <br /> <a href="/Article/Index/1419551">工作小计-GPU硬编以及依赖库 nvcuvid&nvidia-encode</a> <br /> <a href="/Article/Index/636404">VUE3+Vite3开发网易云音乐 Day1 后端环境搭建</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_43606158/article/details/126933618 </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>

文章目录

一、前言

二、HTML5结构介绍