-
Java Web——前端HTML入门
目录
HTML&CSS3&JavaScript简述
HTML 主要用于网页主体结构的搭建，像一个毛坯房
CSS 主要用于页面元素美化，对毛坯房进行精装修
JavaScript 主要用于页面元素的动态处理，在房屋中添加各种智能设备和系统，响应用户的点击事件，或者在用户滚动页面时显示或隐藏某些元素，这些都需要 JavaScript 来实现。
1. HTML概念
HTML5是HTML的最新版本，它在2008年发布，结合了HTML4.01的相关标准并进行了更新和改进，以适应现代网络的需求。HTML5包含了许多不同的技术，这些技术在互联网上得到了广泛应用，并且提供了更好的网络应用功能。与旧的技术相比，HTML5的语法更加清晰，并且它还可以支持SVG内容，使得处理网页中的多媒体内容更加容易。此外，HTML5还引入了一些新元素，对原有的一些功能进行了改进和标准化。最终在2014年，W3C发布了HTML5的最终版本。
2. 超文本
HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
3. 标记语言
HTML是一种标记语言，不是编程语言。它没有编程语言的复杂功能，只是通过简单的标签来定义网页的结构和内容，每个标签都有固定的含义和显示效果。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
- 双标签: 标签是通过一组尖括号+标签名的方式来定义的
<p>Hello world</p>这个例子中使用了一个p标签来定义一个段落，
叫开始标签，
叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。- 单标签
<input type="text" name="username" />- 属性
<a href="http://www.xxx.com">show detail</a>href="网址" 就是属性，href是属性名，"网址"是属性值
4. HTML基础结构
- <!DOCTYPE html>
- <html>
- <head>
- <title>我的第一个网页</title>
- </head>
- <body>
- <!--一个简单的示例代码-->
- <h1>欢迎来到我的网页</h1>
- <p>这是一个段落。</p>
- </body>
- </html>
- 文档声明： 是HTML5的文档声明，它告诉浏览器这个文档使用的是HTML5的标准。
- 根标签： 和 是HTML文档的根标签，其他所有标签都需要位于这对标签之间。
- 头部元素： 和 标签定义了文档的头部。在头部中，我们使用了
标签来设置网页的标题。这个标题会显示在浏览器的标签页上。头部还可以包含其他元素，如样式链接、脚本链接等。</li><li id="u9ee37f67"><strong>主体元素</strong>：<body> 和 </body> 标签定义了网页的主体内容。这部分内容会在浏览器窗口中显示出来。在示例中，主体包含了一个一级标题 <h1> 和一个段落 <p>。</li><li id="u8c36b781"><strong>注释</strong>：在HTML代码中，可以使用 <!-- --> 来添加注释。注释的内容不会在浏览器中显示，用于添加一些说明或备注。</li></ol> <p id="u9b9418d8">这个简单的示例展示了HTML文档的基本结构，包括文档声明、根标签、头部元素、主体元素和注释。通过学习和使用更多的HTML标签和属性，你可以创建更丰富和复杂的网页内容。</p> <hr id="FBIwt"> <h2 id="GnK1R"><a name="t5"></a>5. HTML基础词汇</h2> <p id="u3d6e0473"><strong>标签（Tag）</strong>：</p> <ul><li id="ue4389468">在HTML中，标签是用于标识和定义网页元素的关键词。标签通常成对出现，由一个开始标签和一个结束标签组成，结束标签前有一个斜杠（/）。例如，<code><p></code> 是段落标签的开始标签，<code></p></code> 是段落标签的结束标签。这样的标签称为双标签。</li><li id="ubdbd0f92">有些标签单独出现，不需要结束标签，称为单标签。例如，<code><br></code> 是一个换行标签，它单独出现，表示在文本中换行。</li></ul> <p id="u1db40ca8"><strong>属性（Attribute）</strong>：</p> <ul><li id="u968adce0">属性是HTML标签的一部分，用于提供更多关于标签的信息。它们通常出现在开始标签中。</li><li id="u141a4a93">属性用于定义标签的一些特征或设置，例如颜色、大小、链接目标等。它们由属性名和属性值组成，中间用等号连接。例如，在<code><a href="https://www.example.com"></code>中，<code>href</code>是一个属性名，它指定了链接的目标地址。</li></ul> <p id="u6f323f0a"><strong>文本（Text）</strong>：</p> <ul><li id="u2d22a10f">在HTML中，文本是指双标签中间的内容，它可以是文字、空格、换行等任何可见的内容。</li><li id="ucb20c576">文本是网页上实际显示给用户的内容，可以包含各种文本元素和文本格式。通过在文本周围使用不同的HTML标签，我们可以控制文本的样式、布局和其他视觉效果。</li></ul> <p id="ucd2d1e85"><strong>元素（Element）</strong>：</p> <ul><li id="ucf180dc4">元素是经过浏览器解析后，由标签、属性和文本组成的完整结构。它是HTML页面的构建块。</li><li id="ud12cd958">一个元素可以包含其他元素，形成一个层次结构。例如，一个<code><div></code>元素可以包含一个<code><p></code>元素和一些文本，形成一个块级元素，其中包含一段文本。</li></ul> <p id="ud9c75bed">这些概念是HTML的基础，理解它们对于学习和应用HTML非常重要。通过合理地使用各种HTML标签、属性和文本内容，我们可以创建出结构清晰、样式美观的网页。</p> <hr id="eMsps"> <h2 id="XzGvx"><a name="t6"></a>6. HTML<a href="https://so.csdn.net/so/search?q=%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"语法规则\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"语法规则\"}"}" data-tit="语法规则" data-pretit="语法规则">语法规则</a></h2> <p id="u90fd071c"><strong>1. 根标签有且只能有一个</strong></p> <ul><li id="u09528816">HTML文档只能有一个根标签，即<code><html></code>，它包裹着整个HTML文档的内容。其他所有标签都应位于根标签之内。</li></ul> <p id="u13ead31f"></p> <p id="u7bbea178"><strong>2. 无论是双标签还是单标签都需要正确关闭</strong></p> <ul><li id="ub708a33c">双标签需要正确闭合，即在结束位置使用相应的结束标签。例如，<code><p></code>标签需要使用<code></p></code>来闭合。</li><li id="uc69c7770">单标签则不需要结束标签，但它们在闭合时可能包含斜杠。例如，<code><br/></code>标签用于换行。</li></ul> <p id="u982cf9ad"></p> <p id="uf463a969"><strong>3. 标签可以嵌套但不能交叉嵌套</strong></p> <ul><li id="u3c477001">在HTML中，标签可以嵌套在其他标签中，以形成层次结构。但是不允许交叉嵌套，即一个标签不能完全包含在另一个标签的中间部分。</li></ul> <p id="u8630ab7e">以下是一个不符合规则的交叉嵌套例子：</p> <pre id="b554ff9d" data-index="4" class="set-code-show" name="code"><code class="hljs language-cobol"><span class="hljs-operator"><</span>b<span class="hljs-operator">></span><span class="hljs-operator"><</span>i<span class="hljs-operator">></span>这是错误的交叉嵌套<span class="hljs-operator"><</span><span class="hljs-operator">/</span>b<span class="hljs-operator">></span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>i<span class="hljs-operator">></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p id="uf239d64b">正确的嵌套方式应该是：</p> <pre id="fd349e56" data-index="5" class="set-code-show" name="code"><code class="hljs language-cobol"><span class="hljs-operator"><</span>b<span class="hljs-operator">></span><span class="hljs-operator"><</span>i<span class="hljs-operator">></span>这是正确的嵌套<span class="hljs-operator"><</span><span class="hljs-operator">/</span>i<span class="hljs-operator">></span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>b<span class="hljs-operator">></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p id="ua4d88c5d"></p> <p id="uff0ae47a"><strong>4. 注释语法为 ，注意不能嵌套</strong></p> <ul><li id="u32e9dd6b">HTML中的注释使用<code><!--</code>和<code>--></code>包围，注意在这之间不能再次嵌套注释。</li></ul> <p id="uba832b01"></p> <p id="u97fa7e99"><strong>5. 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值</strong></p> <ul><li id="u7b7dece4">HTML标签的属性必须指定一个值，并且这个值必须用引号包围。但在HTML5中，当属性名和值相同时，可以省略属性值。例如，<code><input type="text" disabled="disabled"></code>可以简写为<code><input type="text" disabled></code>。</li></ul> <p id="u3b6192de"></p> <p id="ub32e4cf4"><strong>6. HTML中不严格区分字符串使用单双引号</strong></p> <ul><li id="ue533937a">在HTML中，可以使用单引号或双引号来包围属性的值，两者的效果是相同的。例如，<code><a href="example.com"></code>和<code><a href='example.com'></code>是等价的。</li></ul> <p id="ub6de2a34"></p> <p id="u4486ad3a"><strong>7. HTML标签不严格区分大小写,但是不能大小写混用</strong></p> <ul><li id="u17eba3a1">HTML标签不区分大小写，<code><p></code>和<code><P></code>是等效的。但是在同一个文档中，不能大小写混用，否则会出现错误。</li></ul> <p id="u4b72bb46"></p> <p id="u4ffefdb9"><strong>8. HTML中不允许自定义标签名,强行自定义则无效</strong></p> <ul><li id="u138d9b55">在HTML中，不能使用自定义的标签名。所有标签都应使用HTML标准中定义的标签名。如果使用了自定义的标签名，浏览器将不会识别它，并且将其视为无效内容。</li></ul> <hr id="DmbwH"> <h2 id="M7GqX"><a name="t7"></a>7. VS Code 推荐使用的插件</h2> <p id="u83f8d39d"></p> <p class="img-center"><img alt="" height="704" id="uec2e7fec" src="https://1000bd.com/contentImg/2023/11/17/002132995.png" ></p> <p class="img-center"><img alt="" height="251" id="ufc2a02d4" src="https://1000bd.com/contentImg/2023/11/17/002132842.png" ></p> <p id="u991a1f6d"></p> <ul><li id="u168775f0">Auto Rename Tag 自动修改标签对插件</li><li id="uf96bdd4b">Chinese Language Pack 汉化包</li><li id="u1c93cc66">HTML CSS Support HTML CSS 支持</li><li id="ucc195e11">Intellij IDEA Keybindings IDEA快捷键支持</li><li id="u6c119593">Live Server 实时加载功能的小型服务器</li><li id="u0515e0ff">open in browser 通过浏览器打开当前文件的插件</li><li id="u97382074">Prettier-Code formatter 代码美化格式化插件</li><li id="u69c88f5e">Vetur VScode中的Vue工具插件</li><li id="uc38104f0">vscode-icons 文件显示图标插件</li><li id="ub9eae8d3">Vue 3 snipptes 生成VUE模板插件</li><li id="u2f80f4c1">Vue language Features Vue3语言特征插件</li></ul> <hr id="bHGl0"> <h2 id="nB7Xt"><a name="t8"></a>8. 在线帮助文档</h2> <p id="u289f8dd0">提供丰富的编程和前端开发教程的一个好用的教程网址</p> <p id="u02c892b8"><a href="http://www.w3school.com.cn" title="w3school 在线教程">w3school 在线教程</a></p> <p class="img-center"><img alt="" height="914" id="u4314ecf7" src="https://1000bd.com/contentImg/2023/11/17/002132939.png" ></p> <p id="ue9faa31b"></p> <p id="u293501cf"></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1193679">BlockingQueue二</a> <br /> <a href="/Article/Index/705242">递归求解斐波那契数列</a> <br /> <a href="/Article/Index/913705">第二章 JAVA基础语法</a> <br /> <a href="/Article/Index/1057604">Java函数式编程：三、流与函数式编程</a> <br /> <a href="/Article/Index/1458116">新晋“学霸”夸克大模型拿下C-Eval和CMMLU双榜第一</a> <br /> <a href="/Article/Index/765377">xpath获取带命名空间节点注意事项</a> <br /> <a href="/Article/Index/1283770">进阶JS-reduce用法</a> <br /> <a href="/Article/Index/770924">牛客每日刷题之链表</a> <br /> <a href="/Article/Index/1451825">Django路由层之有名分组和无名分组、反向解析、路由分发、伪静态的概念、名称空间、虚拟环境、Django1和Django2的区别</a> <br /> <a href="/Article/Index/810455">Debian系列-系统安装及Qt基础开发环境配置</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/Sakurapaid/article/details/134367493 </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>