htmlcss

定义与作用

HTML是构建网页的基础语言，用于描述网页的结构和内容。它通过一系列的标签来定义各种网页元素，如文本、图像、链接、表单、音频、视频等。这些标签就像是建筑图纸上的标记，告诉浏览器如何显示网页中的信息。例如，

标签用于定义段落，浏览器会将

标签内的文本以段落的形式呈现给用户。

基本结构

一个典型的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"> <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"> <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"> <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"> <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"> <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-block-stage"><span >CSS（层叠样式表）简介</span></div> </div> </div> <div class="bling-selectable bling-ordered-list-block"> <div class="bling-selectable bling-text-block"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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"> <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-block-stage"><span >总结</span></div> </div> </div> <div class="bling-selectable bling-ordered-list-block"> <div class="bling-selectable bling-text-block"> <div class="bling-block-position"> <div class="bling-block-stage"><span >HTML核心是定义网页结构与内容，包含基础结构、多种标签类型，HTML5是当前主流版本并新增了多媒体、表单等增强特性；</span></div> </div> </div> <div class="bling-selectable bling-text-block"> <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"> <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"> <div class="bling-block-position"> <div class="bling-block-stage"><span ></span></div> </div> </div> </div> </div><div class="tag-more-btn" data-v-76c79c19>探索更多内容</div></div></div></div><div class="collection-wrap-bottom" data-v-76c79c19><div class="collection-wrap-bottom-title" data-v-76c79c19>html/css <span data-v-76c79c19>7 个结果</span></div><div class="collection-wrap-bottom-relevant" data-v-76c79c19><div class="filter-panel" data-v-76c79c19 data-v-d104b19b><div class="filter-header" data-v-d104b19b><div class="filter-title" data-v-d104b19b>过滤器</div><div class="filter-clear" data-v-d104b19b>清除过滤器</div></div><div class="filter-groups" data-v-d104b19b><div class="filter-group" data-v-d104b19b><div class="filter-group-title" data-v-d104b19b>等级</div><div class="filter-options" data-v-d104b19b><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>初级</div></div><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>中级</div></div><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>高级</div></div></div></div><div class="filter-divider" data-v-d104b19b></div><div class="filter-group" data-v-d104b19b><div class="filter-group-title" data-v-d104b19b>价格</div><div class="filter-options" data-v-d104b19b><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>免费</div></div><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>付费</div></div></div></div><div class="filter-divider" data-v-d104b19b></div><div class="filter-group" data-v-d104b19b><div class="filter-group-title" data-v-d104b19b>类型</div><div class="filter-options" data-v-d104b19b><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>专籍</div></div><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>文章</div></div><div class="filter-option" data-v-d104b19b><div class="filter-checkbox" data-v-d104b19b></div><div class="filter-label" data-v-d104b19b>问卷</div></div></div></div></div></div><div class="collection-wrap-bottom-list-container" data-v-76c79c19><div class="infinite-scroll" data-v-76c79c19 data-v-0420d012><div class="collection-wrap-bottom-relevant-list" data-v-76c79c19><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551914826033532928" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260205/download_1770281673068.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>Tailwind CSS是什么？初学者指南</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>文章</span><span class="tag-item" data-v-76c79c19>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551914440740573184" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770029096708.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>2024-2025年最新CSS特性：新功能和令人兴奋的变化</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>文章</span><span class="tag-item" data-v-76c79c19>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551912841225965568" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770028049018.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>SVG vs PNG：这个简单切换如何让我的网站变得更快</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>文章</span><span class="tag-item" data-v-76c79c19>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551909146677481472" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770031522240.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>创意CSS动画：用HTML和CSS构建派对表情符号</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>文章</span><span class="tag-item" data-v-76c79c19>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551908108192976896" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030829791.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>2025年的响应式布局是什么</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>文章</span><span class="tag-item" data-v-76c79c19>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551907419714752512" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030288883.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>前端面试500题大全</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>文章</span><span class="tag-item" data-v-76c79c19>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/book/551415478250115072" data-v-76c79c19><div class="cover" style="background-image:url(https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755693975.png);" data-v-76c79c19></div><div class="collection-wrap-bottom-relevant-title" data-v-76c79c19>《网页设计与样式艺术》</div><div class="collection-wrap-bottom-relevant-tags" data-v-76c79c19><span class="tag-item" data-v-76c79c19>免费</span><span class="tag-item" data-v-76c79c19>专籍</span><span class="tag-item" data-v-76c79c19>初级</span></div></a></div><div class="no-more" data-v-0420d012>没有更多了</div><div class="sentinel" data-v-0420d012></div></div></div></div></div></div></div><div id="footer" data-v-5c19166b data-v-ca6a56ed><div class="footer-box" data-v-ca6a56ed><p data-v-ca6a56ed>© 2022, 北京探客时代网络科技有限公司</p><p data-v-ca6a56ed>京 ICP 备 2022008592 号　京公网安备 11011402012574 号　信息举报</p></div></div></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":70,"once":72,"_errors":73,"serverRendered":32,"path":75,"pinia":76},["ShallowReactive",3],{"tagDetail-htmlcss":4},{"tagInfo":5,"classifyList":21,"resourceList":22},{"path":6,"tagName":7,"tagCode":8,"industryCode":9,"directionCode":10,"icon":11,"tagDesc":12,"weight":13,"content":14,"type":15,"tagStatus":16,"createUid":17,"createdAt":18,"updateUid":19,"updatedAt":20},"1-2-11","html/css","htmlcss","artisan","web","https://cdn-oss.tkcnn.com/cn/icon/htmlcss.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/div>\",[[\"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/Grid等布局方式，层叠和继承是其核心特性；\"]]},\"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,[],[23,33,39,45,51,57,63],{"id":24,"widgetId":24,"widgetType":25,"title":26,"cover":27,"verticalCover":28,"summary":29,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":32,"readNum":31,"chapterCount":17},"551914826033532928",2,"Tailwind CSS是什么？初学者指南","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260205/download_1770281673068.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260205/download_1770281677666.png","Tailwind CSS是实用优先的CSS框架，以现成低级类替代复杂样式，让网页设计快速直观。它支持响应式与状态样式，通过配置文件保持设计一致，JIT引擎避免CSS膨胀，非常适合初学者高效构建现代布局。",false,"0",true,{"id":34,"widgetId":34,"widgetType":25,"title":35,"cover":36,"verticalCover":37,"summary":38,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":32,"readNum":31,"chapterCount":17},"551914440740573184","2024-2025年最新CSS特性：新功能和令人兴奋的变化","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770029096708.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770029091636.png","本文介绍2024-2025年主流浏览器支持的最新CSS特性，包括:has()父选择器、CSS嵌套、容器查询等，可减少JavaScript依赖，优化工作流程，让代码更清晰易维护，助力前端开发者构建现代UI。",{"id":40,"widgetId":40,"widgetType":25,"title":41,"cover":42,"verticalCover":43,"summary":44,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":32,"readNum":31,"chapterCount":17},"551912841225965568","SVG vs PNG：这个简单切换如何让我的网站变得更快","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770028049018.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770028053061.png","本文分享作者从PNG切换到SVG的优化经历：PNG图标导致网站加载慢、跨设备模糊，SVG让文件大幅缩小、加载提速、图标始终锐利，还给出使用建议与工具，鼓励从小步尝试SVG提升网站性能与专业性。",{"id":46,"widgetId":46,"widgetType":25,"title":47,"cover":48,"verticalCover":49,"summary":50,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":32,"readNum":31,"chapterCount":17},"551909146677481472","创意CSS动画：用HTML和CSS构建派对表情符号","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770031522240.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770031518617.png","本文讲解如何用HTML和SCSS构建派对表情符号动画，包含面部特征与动态效果，展现CSS的动画创意潜力。还涵盖结构解析、样式动画详解、演示用例及优化技巧，助力创意CSS开发。",{"id":52,"widgetId":52,"widgetType":25,"title":53,"cover":54,"verticalCover":55,"summary":56,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":32,"readNum":31,"chapterCount":17},"551908108192976896","2025年的响应式布局是什么","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030829791.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030826535.png","2025年响应式布局进化为多维上下文感知模式，基于容器查询、clamp流体排版、动态视口单位等工具，组件自响应，适配容器、用户偏好、设备能力与网络环境，打造跨设备流体体验。",{"id":58,"widgetId":58,"widgetType":25,"title":59,"cover":60,"verticalCover":61,"summary":62,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":32,"readNum":31,"chapterCount":17},"551907419714752512","前端面试500题大全","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030288883.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260202/download_1770030285649.png","本文收集前端开发最常见500道面试题，涵盖HTML5、CSS3、JavaScript等多领域，每道题配详细答案解析与实际示例，助力理解掌握相关知识点。",{"id":64,"widgetId":64,"widgetType":16,"title":65,"cover":66,"verticalCover":67,"summary":68,"level":16,"isAuthor":30,"isPurchased":30,"isRead":30,"isPay":30,"price":31,"isTestRead":30,"readNum":31,"chapterCount":69},"551415478250115072","《网页设计与样式艺术》","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755693975.png","https://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755690523.png","本书是一本面向初学者的网页设计与CSS样式系统教程。它从零开始，以轻松的风格，循序渐进地讲解了HTML结构、CSS核心样式、现代布局、响应式设计、交互动画等关键知识与技能，并通过完整实战项目引导读者将理论转化为实践，最终能够独立设计并实现美观、实用的网页。","9",["Reactive",71],{},["Set"],["ShallowReactive",74],{"tagDetail-htmlcss":-1},"/tag/htmlcss",{"auth":77},{"account":78,"loading":83,"initialized":85},["Ref",79],["Reactive",80],{"uuid":81,"headimgurl":81,"nickName":81,"isVisitor":82},"",-1,["EmptyRef",84],"false",["EmptyRef",84]]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{env:"production",apiBaseV1:"https://api-trade.tkcnn.com/cn-trade",apiBaseV2:"https://api-trade.tkcnn.com/trade-web"},app:{baseURL:"/",buildId:"9a515fcd-4afb-4083-9959-948c60681bae",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>