-
【前段基础入门之】=＞初识 HTML
前言
在整个前端开发中，必须掌握的技术栈为：
HTML ，CSS，JavaScript，它们三者，共同组成了前端开发的基础生态，以至于后续的进阶式开发，都是在这三者的基础上的扩展，同时它们三者在前端开发中，各自胜任的任务是，HTML定义了整个网页的骨架结构，CSS美化了整个网页的样式，或者也可以说是给 HTML 定制了多彩的皮肤，而JavaScript，则为整个网页注入了灵魂，使其变得生动起来。
HTML的详情简介
HTML全称：Hyper Text Markup Language，译为：超文本标记语言- 超文本： 是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。
- 标记： 文本要变成超文本，就需要用到各种标记符号。
- 语言： 每一个标记的写法、读音、使用规则，组成了一个标记语言。
其实严格意义上：HTML 不算是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
HTML 发展史
HTML 入门
1. HTML 标签元素
可以将这行文字封装成一个段落元素来使其在单独一行呈现：
<p>My cat is very grumpyp>- 1
分析这个标签的主要部分有:
开始标签：（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签：（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。内容:元素的内容，本例中就是所输入的文本本身。元素：开始标签、结束标签与内容相结合，便是一个完整的元素。
标签按结构可分为：单标签以及双标签
例如：<input type="text"> <img src="" alt="">- 1
- 2
2. HTML标签属性
标签元素身上，可以携带属性：
属性包含了关于元素的一些附加额外信息，这些信息本身不应显现在内容中。
属性应该包含：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。
- 由引号所包围的属性值。
有些
特殊的属性，没有属性名，只有属性值，例如：<input type="text" disabled>- 1
值得注意：- 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细总结）。
- 属性名、属性值不能乱写，都是w3c规定好的。
- 属性名、属性值，都不区分大小写，但推荐小写。
- 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
- 标签中不要出现同名属性，否则后写的会失效，例如：
3. HTML的标准结构
- 想要呈现在网页中的内容写在
body标签中。 head标签中的内容不会出现在网页中。head标签中的title标签可以指定网页的标题。
DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网站标题title> head> <body> <h1>文档标题h1> <p>这是一段文本 My cat is very grumpyp> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
文档声明为 HTML5 的执行文档，作用是：告诉浏览器当前网页的版本。（文档声明，必须在网页的第一行，且在 html 标签的外侧。）元素是 HTML 页面的根元素</code>元素描述了文档的标题</li><li><code><body> </code>元素包含了可见的页面内容</li><li><code><h1></code> 元素定义一个大标题</li><li><code><p> </code>元素定义一个段落</li></ul> <hr> <p><strong>HTML注释</strong>：<br> 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。<br> 作用：对代码进行解释和说明。</p> <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"> <span class="token comment"><!-- 这是HTML中的注释 --></span> <span class="token comment"><!-- <p>废弃的文本</p> <p>废弃的文本</p> <p>废弃的文本</p> <p>废弃的文本</p> --></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.471372;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre> <p><code>注意</code>：<code>注释不可以进行嵌套，会出现报错</code></p> <p>如：<img src="https://1000bd.com/contentImg/2024/03/18/030128504.png" alt="在这里插入图片描述"></p> <p>–</p> <h2><a name="t8"></a><a id="_144"></a>总结</h2> <p>以上就是本章节带来的HTML入门知识点内容的讲解，后续下一章，我们将继续述说HTML的其它功能属性与特征。</p> <hr> <blockquote> <p>🚵♂️ 博主座右铭：<em><strong>向阳而生，我还在路上！</strong></em><br> ——————————————————————————————<br> 🚴博主想说：<em><strong>将持续性为社区输出自己的资源，同时也见证自己的进步！</strong></em><br> ——————————————————————————————<br> 🤼♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】<br> ——————————————————————————————</p> </blockquote> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1066678">基于BM1684移植YOLOV7</a> <br /> <a href="/Article/Index/783016">Vue组件间通信</a> <br /> <a href="/Article/Index/1090302">SAP Commerce Cloud 里的 User 模型和 Restriction 的关系</a> <br /> <a href="/Article/Index/1366853">Linux - make命令 和 makefile</a> <br /> <a href="/Article/Index/1110964">【Linux初阶】Linux环境下的 git 使用 | git的add/commit/push/log/pull/mv/rm/status</a> <br /> <a href="/Article/Index/1337921">多线程基础篇（多线程案例）</a> <br /> <a href="/Article/Index/1156148">linux用户及用户组的分类、管理</a> <br /> <a href="/Article/Index/1357382">阶段六-Day02-Maven</a> <br /> <a href="/Article/Index/1734584">深入理解linux shell 中的exec内置命令&ubuntu bash</a> <br /> <a href="/Article/Index/1395484">vsCode git 修改、清空、重置、保存账号名密码</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_60961397/article/details/131628066 </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> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <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> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>