①、企业快速开发平台Spring Cloud之HTML 简介

①、企业快速开发平台Spring Cloud之HTML 简介
HTML 简介

HTML 实例
```
html>
<html>
<head>
<meta charset="utf-8">
<title>xx教程(minglisoft.cn)title>
head>
<body>
 
<h1>我的第一个标题h1>
 
<p>我的第一个段落。p>
 
body>
html>
```
实例解析
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
- </strong> 元素描述了文档的标题</li><li><strong><body></strong> 元素包含了可见的页面内容</li><li><strong><h1></strong> 元素定义一个大标题</li><li><strong><p></strong> 元素定义一个段落</li></ul> <p><strong>注：</strong>在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。</p> <p><img alt="" src="https://1000bd.com/contentImg/2022/07/20/203410089.png"></p> <hr> <p> <h2><a name="t3"></a>什么是HTML?</h2> <p>HTML 是用来描述网页的一种语言。</p> <ul><li>HTML 指的是超文本标记语言: <strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage</li><li>HTML 不是一种编程语言，而是一种<strong>标记</strong>语言</li><li>标记语言是一套<strong>标记标签</strong> (markup tag)</li><li>HTML 使用标记标签来<strong>描述</strong>网页</li><li>HTML 文档包含了HTML<strong> 标签</strong>及<strong>文本</strong>内容</li><li>HTML文档也叫做<strong> web 页面</strong></li></ul> <hr> <h2><a name="t4"></a>HTML 标签</h2> <p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p> <ul><li>HTML 标签是由<em>尖括号</em>包围的关键词，比如 <html></li><li>HTML 标签通常是<em>成对出现</em>的，比如 <b> 和 </b></li><li>标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标签</em></li><li>开始和结束标签也被称为<em>开放标签</em>和<em>闭合标签</em></li></ul> <pre data-index="1"><code class="hljs language-undefined"><标签>内容</标签></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <hr> <h2><a name="t5"></a>HTML 元素</h2> <p>"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.</p> <p>但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:</p> <p>HTML 元素:</p> <pre data-index="2"><code class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>这是一个段落。<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <hr> <h2><a name="t6"></a>Web 浏览器</h2> <p>Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。</p> <p>浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：</p> <p><img alt="" src="https://1000bd.com/contentImg/2022/07/20/203410288.png"></p> <hr> <h2><a name="t7"></a>HTML 网页结构</h2> <p>下面是一个可视化的HTML页面结构：</p> <p><img alt="" src="https://1000bd.com/contentImg/2022/07/20/203410476.png"></p> <div class="table-box"><table><tbody><tr><th> <p><img alt="Note" src="https://1000bd.com/contentImg/2022/06/17/214054658.jpeg"></p> </th><td>只有 <body> 区域 (白色部分) 才会在浏览器中显示。</td></tr></tbody></table></div> <p> <hr> <h2><a name="t8"></a>HTML版本</h2> <p>从初期的网络诞生后，已经出现了许多HTML版本:</p> <p><img alt="" src="https://1000bd.com/contentImg/2022/07/20/203411049.png"></p> <hr> <h2><a name="t9"></a><!DOCTYPE> 声明</h2> <p><!DOCTYPE>声明有助于浏览器中正确显示网页。</p> <p>网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。</p> <p>doctype 声明是不区分大小写的，以下方式均可：</p> <pre data-index="3"><code class="hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">HTML</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!doctype <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!Doctype <span class="hljs-keyword">Html</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <hr> <h2><a name="t10"></a>通用声明</h2> <h3><a name="t11"></a>HTML5</h3> <pre data-index="4"><code class="hljs language-xml"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3><a name="t12"></a>HTML 4.01</h3> <pre data-index="5"><code class="hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">HTML</span> <span class="hljs-keyword">PUBLIC</span> <span class="hljs-string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string">"http://www.w3.org/TR/html4/loose.dtd"</span>></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h3><a name="t13"></a>XHTML 1.0</h3> <pre data-index="6"><code class="hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span> <span class="hljs-keyword">PUBLIC</span> <span class="hljs-string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span>></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <hr> <h2><a name="t14"></a>中文编码</h2> <p>目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。</p> <h2><a name="t15"></a>HTML 实例</h2> <pre data-index="7" class="set-code-hide" name="code"><code class="hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">页面标题<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>我的第一个标题<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>我的第一个段落。<span class="hljs-tag"></<span class="hljs-name">p</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1569058">快速入门基础控制台API</a> <br /> <a href="/Article/Index/892825">SpringBoot基于guava集成令牌桶算法</a> <br /> <a href="/Article/Index/1201085">ArcGIS基础：字段的别名和字段属性域设置</a> <br /> <a href="/Article/Index/1371801">【Android】关于touch设备TOOL_TYPE_STYLUS</a> <br /> <a href="/Article/Index/747456">（26）Blender源码分析之顶层菜单的关于菜单</a> <br /> <a href="/Article/Index/905580">expect脚本中使用普通用户执行sh脚本命令，expect脚本中解决``反引号获取值有问题方法、expect遍历登录不同主机不同密码的主机执行指定命令方法</a> <br /> <a href="/Article/Index/1339373">解决Qt msvc编译器中文显示乱码问题</a> <br /> <a href="/Article/Index/1153773">R语言的现代线性回归</a> <br /> <a href="/Article/Index/1238765">async-await Rust: 200 多行代码实现一个极简 runtime</a> <br /> <a href="/Article/Index/1163456">二叉查找树(1)-二叉树-数据结构和算法(Java)</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/Xiaohong0716/article/details/125888892 </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 简介

HTML 实例

实例解析