一个典型的HTML文件具有基本的结构，包括声明，它定义了HTML的版本（当前常用的是HTML5）。然后是标签，它包裹着整个网页内容，分为和两部分。部分包含了网页的元数据，如网页标题（</span><span class="inline-code">标签）、样式表引用（</span><span class="inline-code"><link></span><span class="inline-code">标签）、脚本引用（</span><span class="inline-code"><script></span><span class="inline-code">标签）等。</span><span class="inline-code"><body></span><span class="inline-code">部分则是网页的主体内容，用户在浏览器中看到的实际信息都在这个部分，例如文本、图片、链接等元素。</span></div>
</div>
</div>
</div><div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >标签类型</span></div>
</div>
</div>
</div><div class="bling-selectable bling-unordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >HTML有多种类型的标签，包括双标签和单标签。双标签有开始标签和结束标签，如</span><span class="inline-code"><div></span><span class="inline-code">（开始标签）和</span><span class="inline-code"></div></span><span class="inline-code">（结束标签），内容放在这两个标签之间。单标签则只有一个标签，如</span><span class="inline-code"><img></span><span class="inline-code">，它通过属性来提供更多信息，如</span><span class="inline-code">src</span><span class="inline-code">属性用于指定图像的来源（如</span><span class="inline-code"><img src="image.jpg"></span><span class="inline-code">）。还有语义化标签，如</span><span class="inline-code"><header></span><span class="inline-code">（网页头部）、</span><span class="inline-code"><footer></span><span class="inline-code">（网页底部）、</span><span class="inline-code"><article></span><span class="inline-code">（文章内容）等，这些标签有助于搜索引擎理解网页内容，同时也提高了代码的可读性和可维护性。</span></div>
</div>
</div>
</div><div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >版本演变</span></div>
</div>
</div>
</div><div class="bling-selectable bling-unordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >HTML经历了多个版本的发展。从早期的HTML1.0到HTML4.01，再到现在广泛使用的HTML5。HTML5带来了许多新的特性和功能，如原生支持音频和视频（</span><span class="inline-code"><audio></span><span class="inline-code">和</span><span class="inline-code"><video></span><span class="inline-code">标签）、更好的表单功能（如</span><span class="inline-code">input</span><span class="inline-code">类型的扩展，包括</span><span class="inline-code">email</span><span class="inline-code">、</span><span class="inline-code">date`等）、以及更强大的语义化标签，这些改进使得网页开发更加方便和高效。</span></div>
</div>
</div>
</div>
<div class="bling-selectable bling-text-block" data-index="0">
<div class="bling-block-position">
<div class="bling-block-stage"><span ></span></div>
</div>
</div>
<div class="bling-selectable bling-h1-block">
<div class="bling-block-position">
<div class="bling-h1"><span >CSS（层叠样式表）简介</span></div>
</div>
</div>
<div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >定义与作用</span></div>
</div>
</div>
</div><div class="bling-selectable bling-unordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >CSS用于控制网页的外观和布局，它可以为HTML元素设置各种样式属性，如颜色、字体、大小、边框、背景、位置等。如果说HTML是网页的骨架，那么CSS就是网页的皮肤和装饰，它让网页从简单的结构展示变成具有吸引力的视觉呈现。例如，通过CSS可以将段落文本的颜色设置为蓝色，字体设置为Arial，大小为16像素，使网页更符合设计要求。</span></div>
</div>
</div>
</div><div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >工作方式</span></div>
</div>
</div>
</div><div class="bling-selectable bling-unordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >CSS通过选择器来定位HTML元素，然后为选定的元素应用样式规则。选择器可以是元素选择器（如</span><span class="inline-code">p</span><span >选择所有段落元素）、类选择器（如</span><span class="inline-code">.class - name</span><span >选择具有特定类名的元素）、ID选择器（如</span><span class="inline-code">#id - name</span><span >选择具有特定ID的元素）、属性选择器（如</span><span class="inline-code">[type="button"]</span><span >选择具有特定属性值的元素）等多种类型。样式规则以键值对的形式出现，例如</span><span class="inline-code">color: red;</span><span >（将元素颜色设置为红色）、</span><span class="inline-code">font - size: 14px;</span><span >（将字体大小设置为14像素）等，这些规则被放置在样式表中，可以是内联样式（直接写在HTML元素的</span><span class="inline-code">style</span><span >属性中）、内部样式表（写在HTML文件的`</span><span ><style></span><span class="inline-code">标签内）或外部样式表（通过</span><span ><link></span><span class="inline-code">标签引用独立的</span><span >.css`文件）。</span></div>
</div>
</div>
</div><div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >布局模型</span></div>
</div>
</div>
</div><div class="bling-selectable bling-unordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >CSS有多种布局模型，早期主要是基于盒模型的布局。每个HTML元素都被看作是一个矩形的盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。通过设置这些属性的值，可以控制元素的大小和位置。随着技术的发展，出现了更先进的布局方式，如</span><span class="inline-code">flexbox</span><span >（弹性布局）和</span><span class="inline-code">grid</span><span >（网格布局）。</span><span class="inline-code">flexbox</span><span >可以方便地实现元素在水平或垂直方向上的对齐、分布和伸缩，例如创建一个水平居中的导航栏。</span><span class="inline-code">grid</span><span >布局则更适合于构建复杂的二维布局，将网页划分为行和列，像布局一个网页的页面框架一样精确地安排元素的位置。</span></div>
</div>
</div>
</div><div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >层叠和继承特性</span></div>
</div>
</div>
</div><div class="bling-selectable bling-unordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >CSS的层叠特性是指当多个样式规则应用于同一个元素时，浏览器会根据一定的优先级规则来确定最终的样式。优先级的判断依据包括选择器的特殊性（如ID选择器优先级高于类选择器）、样式的来源（如内联样式优先级高于外部样式表）等。继承特性是指某些样式属性会从父元素自动传递给子元素，例如字体相关的属性通常会被继承。这两个特性在处理复杂的样式冲突和样式复用方面非常重要，帮助开发者更好地管理和应用样式。</span></div>
</div>
</div>
</div>
<div class="bling-selectable bling-text-block" data-index="0">
<div class="bling-block-position">
<div class="bling-block-stage"><span ></span></div>
</div>
</div>
<div class="bling-selectable bling-h3-block">
<div class="bling-block-position">
<div class="bling-h3"><span >总结</span></div>
</div>
</div>
<div class="bling-selectable bling-ordered-list-block">
<div class="bling-selectable bling-text-block" data-index="1">
<div class="bling-block-position">
<div class="bling-block-stage"><span >HTML核心是定义网页结构与内容，包含基础结构、多种标签类型，HTML5是当前主流版本并新增了多媒体、表单等增强特性；</span></div>
</div>
</div>
<div class="bling-selectable bling-text-block" data-index="2">
<div class="bling-block-position">
<div class="bling-block-stage"><span >CSS核心是控制网页外观与布局，通过选择器定位元素并应用样式规则，支持盒模型、Flex/Grid等布局方式，层叠和继承是其核心特性；</span></div>
</div>
</div>
<div class="bling-selectable bling-text-block" data-index="3">
<div class="bling-block-position">
<div class="bling-block-stage"><span >HTML与CSS分工明确，前者搭骨架，后者做装饰，共同构成网页的基础呈现体系。</span></div>
</div>
</div>
</div>
<div class="bling-selectable bling-text-block" data-index="0">
<div class="bling-block-position">
<div class="bling-block-stage"><span ></span></div>
</div>
</div>
</div></div><div class="tag-more-btn" data-v-d2041bfa>探索更多内容</div></div><div class="tag-relevance-resource" data-v-d2041bfa><div class="tag-relevance-resource-title" data-v-d2041bfa>相关资源</div><div data-v-d2041bfa><!--[--><a href="/article/551914826033532928" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260205/download_1770281677666.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>Tailwind CSS是什么？初学者指南</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551914440740573184" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770029091636.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>2024-2025年最新CSS特性：新功能和令人兴奋的变化</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551912841225965568" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770028053061.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>SVG vs PNG：这个简单切换如何让我的网站变得更快</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551909146677481472" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770031518617.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>创意CSS动画：用HTML和CSS构建派对表情符号</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551908108192976896" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030826535.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>2025年的响应式布局是什么</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551907419714752512" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030285649.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>前端面试500题大全</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/book/551415478250115072" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755690523.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>《网页设计与样式艺术》</div><div class="article-other-info" data-v-683285e8><div class="article-author ellipsis1" data-v-683285e8>9 章</div></div><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>专籍</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><!--]--></div></div><!----><div class="tag-relevance-album" data-v-d2041bfa><div class="tag-relevance-album-title" data-v-d2041bfa>相关专籍</div><!--[--><a href="/article/551914826033532928" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260205/download_1770281677666.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>Tailwind CSS是什么？初学者指南</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551914440740573184" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770029091636.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>2024-2025年最新CSS特性：新功能和令人兴奋的变化</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551912841225965568" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770028053061.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>SVG vs PNG：这个简单切换如何让我的网站变得更快</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551909146677481472" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770031518617.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>创意CSS动画：用HTML和CSS构建派对表情符号</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551908108192976896" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030826535.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>2025年的响应式布局是什么</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/article/551907419714752512" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030285649.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>前端面试500题大全</div><!----><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>文章</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><a href="/book/551415478250115072" class="article" style="" data-v-d2041bfa data-v-683285e8><img src="https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755690523.png" class="article-cover" data-v-683285e8><div class="article-info" data-v-683285e8><div class="title ellipsis2" data-v-683285e8>《网页设计与样式艺术》</div><div class="article-other-info" data-v-683285e8><div class="article-author ellipsis1" data-v-683285e8>9 章</div></div><div class="article-price" data-v-683285e8><div class="price-and-rank" data-v-683285e8><div class="price" data-v-683285e8>免费</div><div class="type" data-v-683285e8>专籍</div><div class="rank" data-v-683285e8></div></div><div class="study" data-v-683285e8>学习</div></div></div></a><!--]--><div class="loading-wrap" data-v-d2041bfa data-v-1f1f96a9><!----><div class="bottom-line" data-v-1f1f96a9><div class="left-bg" data-v-1f1f96a9><div class="line" data-v-1f1f96a9></div><div class="circle" data-v-1f1f96a9></div></div><div class="center" data-v-1f1f96a9>我是有底线的</div><div class="right-bg" data-v-1f1f96a9><div class="circle" data-v-1f1f96a9></div><div class="line" data-v-1f1f96a9></div></div></div></div></div></div></div></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{turnstileSiteKey:"1x00000000000000000000AA"},app:{baseURL:"/",buildId:"6140cca5-06f1-40be-bdfe-321380aa1760",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":90,"once":92,"_errors":93,"serverRendered":38,"path":95,"pinia":96},["ShallowReactive",3],{"tagDetail-htmlcss":4,"tagClassify-htmlcss":23,"schResult-htmlcss":26,"tagBookList-htmlcss":79},{"code":5,"message":6,"data":7},0,"success",{"path":8,"tagName":9,"tagCode":10,"industryCode":11,"directionCode":12,"icon":13,"tagDesc":14,"weight":15,"content":16,"type":17,"tagStatus":18,"createUid":19,"createdAt":20,"updateUid":21,"updatedAt":22},"1-2-11","html\u002Fcss","htmlcss","artisan","web","https:\u002F\u002Fcdn-oss.tkcnn.com\u002Fcn\u002Ficon\u002Fhtmlcss.png","{\"579357709021\":{\"id\":\"579357709021\",\"type\":\"page\",\"content\":[\"579357839900\",\"579357708776\",\"579357797405\",\"579357797784\"],\"parentId\":\"\"},\"579357839900\":{\"id\":\"579357839900\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"parentId\":\"579357709021\"},\"579357708776\":{\"id\":\"579357708776\",\"type\":\"h1\",\"properties\":{\"title\":[[\"HTML：构建网页的基础语言\"]]},\"parentId\":\"579357709021\"},\"579357797405\":{\"id\":\"579357797405\",\"type\":\"text\",\"properties\":{\"title\":[]},\"parentId\":\"579357709021\"},\"579357797784\":{\"id\":\"579357797784\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML是构建网页的基础语言，用于描述网页的结构和内容。它通过一系列的标签来定义各种网页元素，如文本、图像、链接、表单、音频、视频等。这些标签就像是建筑图纸上的标记，告诉浏览器如何显示网页中的信息。\"]]},\"parentId\":\"579357709021\"}}",1090,"{\"173598163583254144\":{\"id\":\"173598163583254144\",\"type\":\"page\",\"properties\":{},\"content\":[\"173598163583243004\",\"656554153976\",\"656554135078\",\"656554205244\",\"656554231309\",\"656554303139\",\"656554321353\",\"656554338063\",\"656554319838\",\"656554467429\",\"656554433577\",\"656554465565\",\"656554417041\",\"656554415574\",\"656554453753\",\"656554545597\",\"656554511288\",\"656554780590\",\"656554711942\",\"656554823830\",\"656554870040\",\"656554804378\",\"656554892597\"],\"format\":{},\"parentId\":\"\"},\"173598163583243004\":{\"id\":\"173598163583243004\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"656554153976\":{\"id\":\"656554153976\",\"type\":\"ordered-list\",\"content\":[\"656554149471\"],\"parentId\":\"173598163583254144\"},\"656554149471\":{\"id\":\"656554149471\",\"type\":\"text\",\"properties\":{\"title\":[[\"定义与作用\"]]},\"parentId\":\"656554153976\"},\"656554135078\":{\"id\":\"656554135078\",\"type\":\"unordered-list\",\"content\":[\"656554109764\"],\"parentId\":\"173598163583254144\"},\"656554109764\":{\"id\":\"656554109764\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML是构建网页的基础语言，用于描述网页的结构和内容。它通过一系列的标签来定义各种网页元素，如文本、图像、链接、表单、音频、视频等。这些标签就像是建筑图纸上的标记，告诉浏览器如何显示网页中的信息。例如，\"],[\"\u003Cp>\",[[\"c\"]]],[\"标签用于定义段落，浏览器会将\",[[\"c\"]]],[\"\u003Cp>\",[[\"c\"]]],[\"标签内的文本以段落的形式呈现给用户。\",[[\"c\"]]]]},\"parentId\":\"656554135078\"},\"656554205244\":{\"id\":\"656554205244\",\"type\":\"ordered-list\",\"content\":[\"656554297830\"],\"parentId\":\"173598163583254144\"},\"656554297830\":{\"id\":\"656554297830\",\"type\":\"text\",\"properties\":{\"title\":[[\"基本结构\"]]},\"parentId\":\"656554205244\"},\"656554231309\":{\"id\":\"656554231309\",\"type\":\"unordered-list\",\"content\":[\"656554294104\"],\"parentId\":\"173598163583254144\"},\"656554294104\":{\"id\":\"656554294104\",\"type\":\"text\",\"properties\":{\"title\":[[\"一个典型的HTML文件具有基本的结构，包括\"],[\"\u003C!DOCTYPE html>\",[[\"c\"]]],[\"声明，它定义了HTML的版本（当前常用的是HTML5）。然后是\",[[\"c\"]]],[\"\u003Chtml>\",[[\"c\"]]],[\"标签，它包裹着整个网页内容，分为\",[[\"c\"]]],[\"\u003Chead>\",[[\"c\"]]],[\"和\",[[\"c\"]]],[\"\u003Cbody>\",[[\"c\"]]],[\"两部分。\",[[\"c\"]]],[\"\u003Chead>\",[[\"c\"]]],[\"部分包含了网页的元数据，如网页标题（\",[[\"c\"]]],[\"\u003Ctitle>\",[[\"c\"]]],[\"标签）、样式表引用（\",[[\"c\"]]],[\"\u003Clink>\",[[\"c\"]]],[\"标签）、脚本引用（\",[[\"c\"]]],[\"\u003Cscript>\",[[\"c\"]]],[\"标签）等。\",[[\"c\"]]],[\"\u003Cbody>\",[[\"c\"]]],[\"部分则是网页的主体内容，用户在浏览器中看到的实际信息都在这个部分，例如文本、图片、链接等元素。\",[[\"c\"]]]]},\"parentId\":\"656554231309\"},\"656554303139\":{\"id\":\"656554303139\",\"type\":\"ordered-list\",\"content\":[\"656554360233\"],\"parentId\":\"173598163583254144\"},\"656554360233\":{\"id\":\"656554360233\",\"type\":\"text\",\"properties\":{\"title\":[[\"标签类型\"]]},\"parentId\":\"656554303139\"},\"656554321353\":{\"id\":\"656554321353\",\"type\":\"unordered-list\",\"content\":[\"656554357989\"],\"parentId\":\"173598163583254144\"},\"656554357989\":{\"id\":\"656554357989\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML有多种类型的标签，包括双标签和单标签。双标签有开始标签和结束标签，如\"],[\"\u003Cdiv>\",[[\"c\"]]],[\"（开始标签）和\",[[\"c\"]]],[\"\u003C\u002Fdiv>\",[[\"c\"]]],[\"（结束标签），内容放在这两个标签之间。单标签则只有一个标签，如\",[[\"c\"]]],[\"\u003Cimg>\",[[\"c\"]]],[\"，它通过属性来提供更多信息，如\",[[\"c\"]]],[\"src\",[[\"c\"]]],[\"属性用于指定图像的来源（如\",[[\"c\"]]],[\"\u003Cimg src=\\\"image.jpg\\\">\",[[\"c\"]]],[\"）。还有语义化标签，如\",[[\"c\"]]],[\"\u003Cheader>\",[[\"c\"]]],[\"（网页头部）、\",[[\"c\"]]],[\"\u003Cfooter>\",[[\"c\"]]],[\"（网页底部）、\",[[\"c\"]]],[\"\u003Carticle>\",[[\"c\"]]],[\"（文章内容）等，这些标签有助于搜索引擎理解网页内容，同时也提高了代码的可读性和可维护性。\",[[\"c\"]]]]},\"parentId\":\"656554321353\"},\"656554338063\":{\"id\":\"656554338063\",\"type\":\"ordered-list\",\"content\":[\"656554398927\"],\"parentId\":\"173598163583254144\"},\"656554398927\":{\"id\":\"656554398927\",\"type\":\"text\",\"properties\":{\"title\":[[\"版本演变\"]]},\"parentId\":\"656554338063\"},\"656554319838\":{\"id\":\"656554319838\",\"type\":\"unordered-list\",\"content\":[\"656554350784\"],\"parentId\":\"173598163583254144\"},\"656554350784\":{\"id\":\"656554350784\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML经历了多个版本的发展。从早期的HTML1.0到HTML4.01，再到现在广泛使用的HTML5。HTML5带来了许多新的特性和功能，如原生支持音频和视频（\"],[\"\u003Caudio>\",[[\"c\"]]],[\"和\",[[\"c\"]]],[\"\u003Cvideo>\",[[\"c\"]]],[\"标签）、更好的表单功能（如\",[[\"c\"]]],[\"input\",[[\"c\"]]],[\"类型的扩展，包括\",[[\"c\"]]],[\"email\",[[\"c\"]]],[\"、\",[[\"c\"]]],[\"date`等）、以及更强大的语义化标签，这些改进使得网页开发更加方便和高效。\",[[\"c\"]]]]},\"parentId\":\"656554319838\"},\"656554467429\":{\"id\":\"656554467429\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"parentId\":\"173598163583254144\"},\"656554433577\":{\"id\":\"656554433577\",\"type\":\"h1\",\"properties\":{\"title\":[[\"CSS（层叠样式表）简介\"]]},\"parentId\":\"173598163583254144\"},\"656554465565\":{\"id\":\"656554465565\",\"type\":\"ordered-list\",\"content\":[\"656554496936\"],\"parentId\":\"173598163583254144\"},\"656554496936\":{\"id\":\"656554496936\",\"type\":\"text\",\"properties\":{\"title\":[[\"定义与作用\"]]},\"parentId\":\"656554465565\"},\"656554417041\":{\"id\":\"656554417041\",\"type\":\"unordered-list\",\"content\":[\"656554426006\"],\"parentId\":\"173598163583254144\"},\"656554426006\":{\"id\":\"656554426006\",\"type\":\"text\",\"properties\":{\"title\":[[\"CSS用于控制网页的外观和布局，它可以为HTML元素设置各种样式属性，如颜色、字体、大小、边框、背景、位置等。如果说HTML是网页的骨架，那么CSS就是网页的皮肤和装饰，它让网页从简单的结构展示变成具有吸引力的视觉呈现。例如，通过CSS可以将段落文本的颜色设置为蓝色，字体设置为Arial，大小为16像素，使网页更符合设计要求。\"]]},\"parentId\":\"656554417041\"},\"656554415574\":{\"id\":\"656554415574\",\"type\":\"ordered-list\",\"content\":[\"656554468266\"],\"parentId\":\"173598163583254144\"},\"656554468266\":{\"id\":\"656554468266\",\"type\":\"text\",\"properties\":{\"title\":[[\"工作方式\"]]},\"parentId\":\"656554415574\"},\"656554453753\":{\"id\":\"656554453753\",\"type\":\"unordered-list\",\"content\":[\"656554444175\"],\"parentId\":\"173598163583254144\"},\"656554444175\":{\"id\":\"656554444175\",\"type\":\"text\",\"properties\":{\"title\":[[\"CSS通过选择器来定位HTML元素，然后为选定的元素应用样式规则。选择器可以是元素选择器（如\"],[\"p\",[[\"c\"]]],[\"选择所有段落元素）、类选择器（如\"],[\".class - name\",[[\"c\"]]],[\"选择具有特定类名的元素）、ID选择器（如\"],[\"#id - name\",[[\"c\"]]],[\"选择具有特定ID的元素）、属性选择器（如\"],[\"[type=\\\"button\\\"]\",[[\"c\"]]],[\"选择具有特定属性值的元素）等多种类型。样式规则以键值对的形式出现，例如\"],[\"color: red;\",[[\"c\"]]],[\"（将元素颜色设置为红色）、\"],[\"font - size: 14px;\",[[\"c\"]]],[\"（将字体大小设置为14像素）等，这些规则被放置在样式表中，可以是内联样式（直接写在HTML元素的\"],[\"style\",[[\"c\"]]],[\"属性中）、内部样式表（写在HTML文件的`\"],[\"\u003Cstyle>\"],[\"标签内）或外部样式表（通过\",[[\"c\"]]],[\"\u003Clink>\"],[\"标签引用独立的\",[[\"c\"]]],[\".css`文件）。\"]]},\"parentId\":\"656554453753\"},\"656554545597\":{\"id\":\"656554545597\",\"type\":\"ordered-list\",\"content\":[\"656554542392\"],\"parentId\":\"173598163583254144\"},\"656554542392\":{\"id\":\"656554542392\",\"type\":\"text\",\"properties\":{\"title\":[[\"布局模型\"]]},\"parentId\":\"656554545597\"},\"656554511288\":{\"id\":\"656554511288\",\"type\":\"unordered-list\",\"content\":[\"656554579964\"],\"parentId\":\"173598163583254144\"},\"656554579964\":{\"id\":\"656554579964\",\"type\":\"text\",\"properties\":{\"title\":[[\"CSS有多种布局模型，早期主要是基于盒模型的布局。每个HTML元素都被看作是一个矩形的盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。通过设置这些属性的值，可以控制元素的大小和位置。随着技术的发展，出现了更先进的布局方式，如\"],[\"flexbox\",[[\"c\"]]],[\"（弹性布局）和\"],[\"grid\",[[\"c\"]]],[\"（网格布局）。\"],[\"flexbox\",[[\"c\"]]],[\"可以方便地实现元素在水平或垂直方向上的对齐、分布和伸缩，例如创建一个水平居中的导航栏。\"],[\"grid\",[[\"c\"]]],[\"布局则更适合于构建复杂的二维布局，将网页划分为行和列，像布局一个网页的页面框架一样精确地安排元素的位置。\"]]},\"parentId\":\"656554511288\"},\"656554780590\":{\"id\":\"656554780590\",\"type\":\"ordered-list\",\"content\":[\"656554733141\"],\"parentId\":\"173598163583254144\"},\"656554733141\":{\"id\":\"656554733141\",\"type\":\"text\",\"properties\":{\"title\":[[\"层叠和继承特性\"]]},\"parentId\":\"656554780590\"},\"656554711942\":{\"id\":\"656554711942\",\"type\":\"unordered-list\",\"content\":[\"656554737295\"],\"parentId\":\"173598163583254144\"},\"656554737295\":{\"id\":\"656554737295\",\"type\":\"text\",\"properties\":{\"title\":[[\"CSS的层叠特性是指当多个样式规则应用于同一个元素时，浏览器会根据一定的优先级规则来确定最终的样式。优先级的判断依据包括选择器的特殊性（如ID选择器优先级高于类选择器）、样式的来源（如内联样式优先级高于外部样式表）等。继承特性是指某些样式属性会从父元素自动传递给子元素，例如字体相关的属性通常会被继承。这两个特性在处理复杂的样式冲突和样式复用方面非常重要，帮助开发者更好地管理和应用样式。\"]]},\"parentId\":\"656554711942\"},\"656554823830\":{\"id\":\"656554823830\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"parentId\":\"173598163583254144\"},\"656554870040\":{\"id\":\"656554870040\",\"type\":\"h3\",\"properties\":{\"title\":[[\"总结\"]]},\"parentId\":\"173598163583254144\"},\"656554804378\":{\"id\":\"656554804378\",\"type\":\"ordered-list\",\"content\":[\"656554857360\",\"656554888407\",\"656554815000\"],\"parentId\":\"173598163583254144\"},\"656554857360\":{\"id\":\"656554857360\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML核心是定义网页结构与内容，包含基础结构、多种标签类型，HTML5是当前主流版本并新增了多媒体、表单等增强特性；\"]]},\"parentId\":\"656554804378\"},\"656554888407\":{\"id\":\"656554888407\",\"type\":\"text\",\"properties\":{\"title\":[[\"CSS核心是控制网页外观与布局，通过选择器定位元素并应用样式规则，支持盒模型、Flex\u002FGrid等布局方式，层叠和继承是其核心特性；\"]]},\"parentId\":\"656554804378\"},\"656554815000\":{\"id\":\"656554815000\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML与CSS分工明确，前者搭骨架，后者做装饰，共同构成网页的基础呈现体系。\"]]},\"parentId\":\"656554804378\"},\"656554892597\":{\"id\":\"656554892597\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"parentId\":\"173598163583254144\"}}",3,1,null,1712836542000,"95",1773746601000,{"code":5,"message":6,"data":24},{"classifyList":25},[],{"code":5,"message":6,"data":27},{"rows":28,"pageNo":18,"pageSize":76,"totalPage":77,"totalRows":78},[29,39,45,51,57,63,69],{"id":30,"widgetId":30,"widgetType":31,"title":32,"cover":33,"verticalCover":34,"summary":35,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},"551914826033532928",2,"Tailwind CSS是什么？初学者指南","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260205\u002Fdownload_1770281673068.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260205\u002Fdownload_1770281677666.png","Tailwind CSS是实用优先的CSS框架，以现成低级类替代复杂样式，让网页设计快速直观。它支持响应式与状态样式，通过配置文件保持设计一致，JIT引擎避免CSS膨胀，非常适合初学者高效构建现代布局。",false,"0",true,{"id":40,"widgetId":40,"widgetType":31,"title":41,"cover":42,"verticalCover":43,"summary":44,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},"551914440740573184","2024-2025年最新CSS特性：新功能和令人兴奋的变化","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770029096708.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770029091636.png","本文介绍2024-2025年主流浏览器支持的最新CSS特性，包括:has()父选择器、CSS嵌套、容器查询等，可减少JavaScript依赖，优化工作流程，让代码更清晰易维护，助力前端开发者构建现代UI。",{"id":46,"widgetId":46,"widgetType":31,"title":47,"cover":48,"verticalCover":49,"summary":50,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},"551912841225965568","SVG vs PNG：这个简单切换如何让我的网站变得更快","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770028049018.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770028053061.png","本文分享作者从PNG切换到SVG的优化经历：PNG图标导致网站加载慢、跨设备模糊，SVG让文件大幅缩小、加载提速、图标始终锐利，还给出使用建议与工具，鼓励从小步尝试SVG提升网站性能与专业性。",{"id":52,"widgetId":52,"widgetType":31,"title":53,"cover":54,"verticalCover":55,"summary":56,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},"551909146677481472","创意CSS动画：用HTML和CSS构建派对表情符号","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770031522240.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770031518617.png","本文讲解如何用HTML和SCSS构建派对表情符号动画，包含面部特征与动态效果，展现CSS的动画创意潜力。还涵盖结构解析、样式动画详解、演示用例及优化技巧，助力创意CSS开发。",{"id":58,"widgetId":58,"widgetType":31,"title":59,"cover":60,"verticalCover":61,"summary":62,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},"551908108192976896","2025年的响应式布局是什么","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770030829791.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770030826535.png","2025年响应式布局进化为多维上下文感知模式，基于容器查询、clamp流体排版、动态视口单位等工具，组件自响应，适配容器、用户偏好、设备能力与网络环境，打造跨设备流体体验。",{"id":64,"widgetId":64,"widgetType":31,"title":65,"cover":66,"verticalCover":67,"summary":68,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},"551907419714752512","前端面试500题大全","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770030288883.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260202\u002Fdownload_1770030285649.png","本文收集前端开发最常见500道面试题，涵盖HTML5、CSS3、JavaScript等多领域，每道题配详细答案解析与实际示例，助力理解掌握相关知识点。",{"id":70,"widgetId":70,"widgetType":18,"title":71,"cover":72,"verticalCover":73,"summary":74,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":36,"readNum":37,"chapterCount":75},"551415478250115072","《网页设计与样式艺术》","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260130\u002Fdownload_1769755693975.png","https:\u002F\u002Fclis-oss.oss-cn-beijing.aliyuncs.com\u002Fcn\u002Fdoc\u002F20260130\u002Fdownload_1769755690523.png","本书是一本面向初学者的网页设计与CSS样式系统教程。它从零开始，以轻松的风格，循序渐进地讲解了HTML结构、CSS核心样式、现代布局、响应式设计、交互动画等关键知识与技能，并通过完整实战项目引导读者将理论转化为实践，最终能够独立设计并实现美观、实用的网页。","9",10,"1","7",{"code":5,"message":6,"data":80},{"rows":81,"pageNo":18,"pageSize":89,"totalPage":77,"totalRows":78},[82,83,84,85,86,87,88],{"id":30,"widgetId":30,"widgetType":31,"title":32,"cover":33,"verticalCover":34,"summary":35,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},{"id":40,"widgetId":40,"widgetType":31,"title":41,"cover":42,"verticalCover":43,"summary":44,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},{"id":46,"widgetId":46,"widgetType":31,"title":47,"cover":48,"verticalCover":49,"summary":50,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},{"id":52,"widgetId":52,"widgetType":31,"title":53,"cover":54,"verticalCover":55,"summary":56,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},{"id":58,"widgetId":58,"widgetType":31,"title":59,"cover":60,"verticalCover":61,"summary":62,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},{"id":64,"widgetId":64,"widgetType":31,"title":65,"cover":66,"verticalCover":67,"summary":68,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":38,"readNum":37,"chapterCount":19},{"id":70,"widgetId":70,"widgetType":18,"title":71,"cover":72,"verticalCover":73,"summary":74,"level":18,"isAuthor":36,"isPurchased":36,"isRead":36,"isPay":36,"price":37,"isTestRead":36,"readNum":37,"chapterCount":75},20,["Reactive",91],{},["Set"],["ShallowReactive",94],{"tagDetail-htmlcss":-1,"tagBookList-htmlcss":-1,"tagClassify-htmlcss":-1,"schResult-htmlcss":-1},"\u002Ftag\u002Fhtmlcss",["Reactive",97],{}]</script></body></html>