鼎泰网
HTML篇_二、HTML简介_HTML入门必修第一课
创始人
2024-03-02 17:13:32
0次

HTML篇_二、HTML简介

一、HTML的基本结构

1.1 HTML的基本结构及解析

基本结构

这里我们先放一段代码块来进行展示，感受一下来自HTML的魅力。然后下文再对这段代码块进行解析。


文档标题
学习HTML的第一个标题
学习HTML的第一个段落

解析：
结构解析图

  • 声明为一个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> <h3>1.2HTML标签</h3> <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><code><开放标签>内容<闭合标签> </code></pre> <h3>1.3HTML元素</h3> <p>“HTML标签”和“HTML元素”通常代表的是同一个意思，但是严格来讲，一个HTML元素包括了开放标签和闭合标签。</p> <h3>1.4Web浏览器</h3> <p>Web浏览器是用于读取HTML文件，并将该文件作为网页显示，但是浏览器并不是直接显示的HTML标签，但是浏览器可以使用HTML<br /> 标签来决定如何展现页面内容给用户。</p> <p>现在的浏览器种类繁多，在这里举几个例子</p> <ul><li>Internet</li><li>Google Chrome</li><li>Firefox</li><li>Safari</li></ul> <p>ok，那我们以上述代码块为例来展示一下它在浏览器中的显示效果。这里我们使用Google Chrome浏览器。</p> <p><img src="https://img.pic99.top/dingtaihe/202403/4904e697fb649ba.png" alt="请添加图片描述" /></p> <h2>二、声明</h2> <h3>2.1<!DOCTYPE> 声明</h3> <p>< !DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显<br /> 示网页内容。它不需要区分大小写，以下些法均可，但通常使用第一种方式来进行书写。</p> <pre><code><!DOCTYPE html><!DOCTYPE HTML><!doctype html><!Doctype Html> </code></pre> <h3>2.2通用声明</h3> <p><strong>HTML5</strong></p> <pre><code><!DOCTYPE html> </code></pre> <p><strong>HTML 4.01</strong></p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </code></pre> <p><strong>XHTML 1.0</strong></p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </code></pre> <p>除此之外还有多中网页声明类型，更多网页声明类型有兴趣可以去搜索了解一下，再次不做赘述。</p> <hr /> <p>希望有所帮助！<br /> 关注我，持续更新。</p><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-22a2fefd3b.css" rel="stylesheet"><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-4f8fbf9108.css" rel="stylesheet"> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/news/39347.html">华泰证券：政策催化 氢能全产业链发展提速</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/news/39349.html">浙江温州“8+4”经济政策体系发布</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145427.html" class="text-dark fw-bold text-hover-primary fs-6">*ST惠程（002168）披露...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">截至2025年12月22日收盘，*ST惠程（002168）报收于3.69元，较前一交易日上涨5.13...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145425.html" class="text-dark fw-bold text-hover-primary fs-6">苹果因应用商店追踪政策被意大利...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">12月22日消息，据欧洲新闻网报道，意大利竞争管理局对苹果公司、苹果分销国际公司和苹果意大利公司处以...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145426.html" class="text-dark fw-bold text-hover-primary fs-6">形势政策系列报告会第二场报告会...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">新华社北京12月22日电　由中央宣传部、中央和国家机关工委、教育部、中央军委政治工作部、北京市委联合...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145424.html" class="text-dark fw-bold text-hover-primary fs-6">中国将主要签证便利化政策延长至...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">On December 18, several Chinese embassies issued a...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145422.html" class="text-dark fw-bold text-hover-primary fs-6">“两高”相关部门负责人就第三批...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2025年12月22日上午10：00，最高人民法院召开新闻发布会，与最高人民检察院联合发布第三批行政...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145419.html" class="text-dark fw-bold text-hover-primary fs-6">商务部回应安世半导体问题：督促...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">新华社北京12月22日电 商务部新闻发言人22日就安世半导体问题答记者问时说，中国政府本着对全球半导...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145420.html" class="text-dark fw-bold text-hover-primary fs-6">创识科技实控人张更生被留置，去...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">每经记者｜赵李南 每经编辑｜董兴生 12月22日，创识科技（SZ300941，股价28.87元，市...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145418.html" class="text-dark fw-bold text-hover-primary fs-6">人大常委会|整改问题金额1.0...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">新华社北京12月22日电 题：整改问题金额1.04万亿元 制定完善制度1090多项——2024年度审...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145415.html" class="text-dark fw-bold text-hover-primary fs-6">法援三十载·新规启新程 | 金...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">概况 11月以来，金山区法律援助中心围绕“法援三十载·新规启新程”主题，联合11个街镇（高新区）法律...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/145417.html" class="text-dark fw-bold text-hover-primary fs-6">轻信理财骗局损失8.8万元，起...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">三湘都市报12月22日讯（文/视频 全媒体记者 虢灿）女子轻信网络投资理财骗局，被骗8.8万元，收款...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鼎泰网</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">资讯</a> </li> <li class="menu-item"> <a href="/caijing/" target="_blank" class="menu-link px-2">财经</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>