-
HTML篇_二、HTML简介_HTML入门必修第一课
HTML篇_二、HTML简介
一、HTML的基本结构
1.1 HTML的基本结构及解析
基本结构
这里我们先放一段代码块来进行展示，感受一下来自HTML的魅力。然后下文再对这段代码块进行解析。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题title> head> <body> <h1>学习HTML的第一个标题h1> <p>学习HTML的第一个段落p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
解析：
声明为一个HTML5文档。是HTML的根元素。元素包含了文档的元（meta）数据，例如：一句为定义网页字符编码为utf-8，还可以设置为GBK。</code>元素描述了文档的标题</li><li><code><body></code>元素包含了页面可见内容</li><li><code><h1></code>元素定义一个大标题</li><li><code><p></code>元素定义一个段落</li></ul> <blockquote> <p>小提示： 打开浏览器页面状态下，按键盘上的F12键开启调试模式就可以看到该网页的组成标签。</p> </blockquote> <h4><a name="t3"></a><a id="12HTML_36"></a>1.2HTML标签</h4> <p>HTML标记标签通常被称为HTML标签（HTML tag）</p> <ul><li>HTML标签是尖括号包围的关键词，例如：<code><html></code></li><li>HTML标签通常是成对出现的，例如标题标签：<code><h1></h1></code></li><li>标签成对出现时，第一个标签时开始标签，第二个标签则是结束标签。也被称为开放标签和闭合标签。<br> 使用方法如下：</li></ul> <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>开放标签</span><span class="token punctuation">></span></span>内容<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>闭合标签</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h4><a name="t4"></a><a id="13HTML_46"></a>1.3HTML元素</h4> <p>“HTML标签”和“HTML元素”通常代表的是同一个意思，但是严格来讲，一个HTML元素包括了开放标签和闭合标签。</p> <h4><a name="t5"></a><a id="14Web_49"></a>1.4Web浏览器</h4> <p>Web浏览器是用于读取HTML文件，并将该文件作为网页显示，但是浏览器并不是直接显示的HTML标签，但是浏览器可以使用HTML标签来决定如何展现页面内容给用户。</p> <p>现在的浏览器种类繁多，在这里举几个例子</p> <ul><li>Internet</li><li>Google Chrome</li><li>Firefox</li><li>Safari</li></ul> <p>ok，那我们以上述代码块为例来展示一下它在浏览器中的显示效果。这里我们使用Google <a href="https://so.csdn.net/so/search?q=Chrome%E6%B5%8F%E8%A7%88%E5%99%A8&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=Chrome%E6%B5%8F%E8%A7%88%E5%99%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"Chrome浏览器\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=Chrome%E6%B5%8F%E8%A7%88%E5%99%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"Chrome浏览器\"}"}" data-tit="Chrome浏览器" data-pretit="chrome浏览器">Chrome浏览器</a>。</p> <p><img src="https://1000bd.com/contentImg/2024/04/16/361fc71dc4c8fb15.png" alt="请添加图片描述"></p> <h3><a name="t6"></a><a id="_64"></a>二、声明</h3> <h4><a name="t7"></a><a id="21DOCTYPE__66"></a>2.1<!DOCTYPE> 声明</h4> <p>< !DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。它不需要区分大小写，以下些法均可，但通常使用第一种方式来进行书写。</p> <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span><span class="token punctuation">></span></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">Doctype</span> <span class="token name">Html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><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> <h4><a name="t8"></a><a id="22_79"></a>2.2通用声明</h4> <p><strong>HTML5</strong></p> <pre data-index="3" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <p><strong>HTML 4.01</strong></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 doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/html4/loose.dtd"</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p><strong>XHTML 1.0</strong></p> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span class="token string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span class="token punctuation">></span></span> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <p>除此之外还有多中网页声明类型，更多网页声明类型有兴趣可以去搜索了解一下，再次不做赘述。</p> <hr> <p>希望有所帮助！<br> 关注我，持续更新。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1652715">怎么提取pdf格式中的英语单词</a> <br /> <a href="/Article/Index/1416268">Blueprints - 虚幻中的行为树（Behavior Tree）</a> <br /> <a href="/Article/Index/1488306">【鸿蒙手机】获取UDID，并添加签名认证</a> <br /> <a href="/Article/Index/613475">分布式数据库排序及优化</a> <br /> <a href="/Article/Index/1391442">MYSQL学习笔记2-mysql数据文件</a> <br /> <a href="/Article/Index/1254391">CSS中border-radius的来美化table的实战方案</a> <br /> <a href="/Article/Index/1299753">【Docker】企业中 Docker 的 Dockerfile 用法及作用详解</a> <br /> <a href="/Article/Index/1173188">素问·阴阳应象大论原文</a> <br /> <a href="/Article/Index/946562">中智车联：用 TDengine 高效处理车辆运营可视化管理</a> <br /> <a href="/Article/Index/611853">中小团队的技术负责人如何做好技术团队建设</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/Godyanqi/article/details/128102829 </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/2039405">沪漂五周年了：我越来越迷茫了</a> <br /> <a href="/Article/Index/2039406">Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文</a> <br /> <a href="/Article/Index/2039407">MySQL-Seconds_behind_master的精度误差</a> <br /> <a href="/Article/Index/2039408">[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间</a> <br /> <a href="/Article/Index/2039409">AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊</a> <br /> <a href="/Article/Index/2039410">Agent OS ：五种驯服不确定性的范式</a> <br /> <a href="/Article/Index/2039411">PortSwigger SQL注入LAB11</a> <br /> <a href="/Article/Index/2039412">数据库即时编译JIT</a> <br /> <a href="/Article/Index/2039413">[Begin]AI Learn Data Day 0</a> <br /> <a href="/Article/Index/2039414">深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU</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 text-center"> <div style="padding:0px 5px;"> <a href="/tools">小工具</a> <a href="https://games.1000bd.com">小游戏</a> </div> <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=" 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>