htmlcss

HTML（超文本标记语言）简介

1. 定义与作用

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

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

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

2. 基本结构

- 一个典型的HTML文件具有基本的结构，包括``声明，它定义了HTML的版本（当前常用的是HTML5）。然后是``标签，它包裹着整个网页内容，分为``和``两部分。``部分包含了网页的元数据，如网页标题（``标签）、样式表引用（`<link>`标签）、脚本引用（`<script>`标签）等。`<body>`部分则是网页的主体内容，用户在浏览器中看到的实际信息都在这个部分，例如文本、图片、链接等元素。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>3. 标签类型</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span> - HTML有多种类型的标签，包括双标签和单标签。双标签有开始标签和结束标签，如`<div>`（开始标签）和`</div>`（结束标签），内容放在这两个标签之间。单标签则只有一个标签，如`<img>`，它通过属性来提供更多信息，如`src`属性用于指定图像的来源（如`<img src="image.jpg">`）。还有语义化标签，如`<header>`（网页头部）、`<footer>`（网页底部）、`<article>`（文章内容）等，这些标签有助于搜索引擎理解网页内容，同时也提高了代码的可读性和可维护性。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>4. 版本演变</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span> - HTML经历了多个版本的发展。从早期的HTML1.0到HTML4.01，再到现在广泛使用的HTML5。HTML5带来了许多新的特性和功能，如原生支持音频和视频（`<audio>`和`<video>`标签）、更好的表单功能（如`input`类型的扩展，包括`email`、`date`等）、以及更强大的语义化标签，这些改进使得网页开发更加方便和高效。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>CSS（层叠样式表）简介</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>1. 定义与作用</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span> - CSS用于控制网页的外观和布局，它可以为HTML元素设置各种样式属性，如颜色、字体、大小、边框、背景、位置等。如果说HTML是网页的骨架，那么CSS就是网页的皮肤和装饰，它让网页从简单的结构展示变成具有吸引力的视觉呈现。例如，通过CSS可以将段落文本的颜色设置为蓝色，字体设置为Arial，大小为16像素，使网页更符合设计要求。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>2. 工作方式</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span> - CSS通过选择器来定位HTML元素，然后为选定的元素应用样式规则。选择器可以是元素选择器（如`p`选择所有段落元素）、类选择器（如`.class - name`选择具有特定类名的元素）、ID选择器（如`#id - name`选择具有特定ID的元素）、属性选择器（如`[type="button"]`选择具有特定属性值的元素）等多种类型。样式规则以键值对的形式出现，例如`color: red;`（将元素颜色设置为红色）、`font - size: 14px;`（将字体大小设置为14像素）等，这些规则被放置在样式表中，可以是内联样式（直接写在HTML元素的`style`属性中）、内部样式表（写在HTML文件的`<style>`标签内）或外部样式表（通过`<link>`标签引用独立的`.css`文件）。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>3. 布局模型</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span> - CSS有多种布局模型，早期主要是基于盒模型的布局。每个HTML元素都被看作是一个矩形的盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。通过设置这些属性的值，可以控制元素的大小和位置。随着技术的发展，出现了更先进的布局方式，如`flexbox`（弹性布局）和`grid`（网格布局）。`flexbox`可以方便地实现元素在水平或垂直方向上的对齐、分布和伸缩，例如创建一个水平居中的导航栏。`grid`布局则更适合于构建复杂的二维布局，将网页划分为行和列，像布局一个网页的页面框架一样精确地安排元素的位置。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span>4. 层叠和继承特性</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><span> - CSS的层叠特性是指当多个样式规则应用于同一个元素时，浏览器会根据一定的优先级规则来确定最终的样式。优先级的判断依据包括选择器的特殊性（如ID选择器优先级高于类选择器）、样式的来源（如内联样式优先级高于外部样式表）等。继承特性是指某些样式属性会从父元素自动传递给子元素，例如字体相关的属性通常会被继承。这两个特性在处理复杂的样式冲突和样式复用方面非常重要，帮助开发者更好地管理和应用样式。</span></div><div class="bling-selectable bling-text-block"><br/></div><div class="bling-selectable bling-text-block"><br/></div></div></div><div class="tag-more-btn" data-v-42c4e926>探索更多内容</div></div></div></div><div class="collection-wrap-bottom" data-v-42c4e926><div class="collection-wrap-bottom-title" data-v-42c4e926>html/css <span data-v-42c4e926>7 个结果</span></div><div class="collection-wrap-bottom-relevant" data-v-42c4e926><div class="filter-panel" data-v-42c4e926 data-v-f41a0f77><div class="filter-header" data-v-f41a0f77><div class="filter-title" data-v-f41a0f77>过滤器</div><div class="filter-clear" data-v-f41a0f77>清除过滤器</div></div><div class="filter-groups" data-v-f41a0f77><div class="filter-group" data-v-f41a0f77><div class="filter-group-title" data-v-f41a0f77>等级</div><div class="filter-options" data-v-f41a0f77><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>初级</div></div><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>中级</div></div><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>高级</div></div></div></div><div class="filter-divider" data-v-f41a0f77></div><div class="filter-group" data-v-f41a0f77><div class="filter-group-title" data-v-f41a0f77>价格</div><div class="filter-options" data-v-f41a0f77><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>免费</div></div><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>付费</div></div></div></div><div class="filter-divider" data-v-f41a0f77></div><div class="filter-group" data-v-f41a0f77><div class="filter-group-title" data-v-f41a0f77>类型</div><div class="filter-options" data-v-f41a0f77><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>专籍</div></div><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>文章</div></div><div class="filter-option" data-v-f41a0f77><div class="filter-checkbox" data-v-f41a0f77></div><div class="filter-label" data-v-f41a0f77>问卷</div></div></div></div></div></div><div class="collection-wrap-bottom-list-container" data-v-42c4e926><div class="infinite-scroll" data-v-42c4e926 data-v-0420d012><div class="collection-wrap-bottom-relevant-list" data-v-42c4e926><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551914826033532928" data-v-42c4e926><div class="icon-img cover" style="background-image:url(https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>Tailwind CSS是什么？初学者指南</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>文章</span><span class="tag-item" data-v-42c4e926>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551914440740573184" data-v-42c4e926><div class="icon-img cover" style="background-image:url(https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>2024-2025年最新CSS特性：新功能和令人兴奋的变化</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>文章</span><span class="tag-item" data-v-42c4e926>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551912841225965568" data-v-42c4e926><div class="icon-img cover" style="background-image:url(https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>SVG vs PNG：这个简单切换如何让我的网站变得更快</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>文章</span><span class="tag-item" data-v-42c4e926>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551909146677481472" data-v-42c4e926><div class="icon-img cover" style="background-image:url(https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>创意CSS动画：用HTML和CSS构建派对表情符号</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>文章</span><span class="tag-item" data-v-42c4e926>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551908108192976896" data-v-42c4e926><div class="icon-img cover" style="background-image:url(https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>2025年的响应式布局是什么</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>文章</span><span class="tag-item" data-v-42c4e926>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/article/551907419714752512" data-v-42c4e926><div class="icon-img cover" style="background-image:url(https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>前端面试500题大全</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>文章</span><span class="tag-item" data-v-42c4e926>初级</span></div></a><a class="collection-wrap-bottom-relevant-row" target="_blank" href="/book/551415478250115072" data-v-42c4e926><div class="cover" style="background-image:url(http://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755693975.png);" data-v-42c4e926></div><div class="collection-wrap-bottom-relevant-title" data-v-42c4e926>《网页设计与样式艺术》</div><div class="collection-wrap-bottom-relevant-tags" data-v-42c4e926><span class="tag-item" data-v-42c4e926>免费</span><span class="tag-item" data-v-42c4e926>专籍</span><span class="tag-item" data-v-42c4e926>初级</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":56,"once":58,"_errors":59,"serverRendered":29,"path":61,"pinia":62},["ShallowReactive",3],{"tagDetail-htmlcss":4},{"tagInfo":5,"classifyList":20,"resourceList":21},{"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":17,"updatedAt":19},"1-2-11","html/css","htmlcss","artisan","web","https://cdn-oss.tkcnn.com/cn/icon/htmlcss.png","HTML是构建网页的基础语言，用于描述网页的结构和内容。它通过一系列的标签来定义各种网页元素，如文本、图像、链接、表单、音频、视频等。这些标签就像是建筑图纸上的标记，告诉浏览器如何显示网页中的信息。",1090,"{\"173598163583254144\":{\"id\":\"173598163583254144\",\"type\":\"page\",\"properties\":{},\"content\":[\"173598163583243004\",\"173598163705971999\",\"173598163705960259\",\"173598163705986689\",\"173598163705998774\",\"173598163705938273\",\"173598163705908482\",\"173598163705986162\",\"173598163705903061\",\"173598163705990988\",\"173598163705957607\",\"173598163705996466\",\"173598163705950595\",\"173598163705926817\",\"173598163705985293\",\"173598163705901564\",\"173598163705961429\",\"173598163705912561\",\"173598163705965194\",\"173598163705938725\",\"173598163705938897\",\"173598163705904491\",\"173598163705992834\",\"173598163705983251\",\"173598163705933546\",\"173598163705982061\",\"173598163705946789\",\"173598163705970728\",\"173598163705966253\",\"173598163705957608\",\"173598163705975573\",\"173598163705972318\",\"173598163705963210\",\"173598163705957913\",\"173598163705901026\",\"173598165528593776\",\"173598165570792965\"],\"format\":{},\"parentId\":\"\"},\"173598163583243004\":{\"id\":\"173598163583243004\",\"type\":\"text\",\"properties\":{\"title\":[[\"HTML（超文本标记语言）简介\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705971999\":{\"id\":\"173598163705971999\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705960259\":{\"id\":\"173598163705960259\",\"type\":\"text\",\"properties\":{\"title\":[[\"1. 定义与作用\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705986689\":{\"id\":\"173598163705986689\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705998774\":{\"id\":\"173598163705998774\",\"type\":\"text\",\"properties\":{\"title\":[[\" - HTML是构建网页的基础语言，用于描述网页的结构和内容。它通过一系列的标签来定义各种网页元素，如文本、图像、链接、表单、音频、视频等。这些标签就像是建筑图纸上的标记，告诉浏览器如何显示网页中的信息。例如，`\u003Cp>`标签用于定义段落，浏览器会将`\u003Cp>`标签内的文本以段落的形式呈现给用户。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705938273\":{\"id\":\"173598163705938273\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705908482\":{\"id\":\"173598163705908482\",\"type\":\"text\",\"properties\":{\"title\":[[\"2. 基本结构\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705986162\":{\"id\":\"173598163705986162\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705903061\":{\"id\":\"173598163705903061\",\"type\":\"text\",\"properties\":{\"title\":[[\" - 一个典型的HTML文件具有基本的结构，包括`\u003C!DOCTYPE html>`声明，它定义了HTML的版本（当前常用的是HTML5）。然后是`\u003Chtml>`标签，它包裹着整个网页内容，分为`\u003Chead>`和`\u003Cbody>`两部分。`\u003Chead>`部分包含了网页的元数据，如网页标题（`\u003Ctitle>`标签）、样式表引用（`\u003Clink>`标签）、脚本引用（`\u003Cscript>`标签）等。`\u003Cbody>`部分则是网页的主体内容，用户在浏览器中看到的实际信息都在这个部分，例如文本、图片、链接等元素。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705990988\":{\"id\":\"173598163705990988\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705957607\":{\"id\":\"173598163705957607\",\"type\":\"text\",\"properties\":{\"title\":[[\"3. 标签类型\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705996466\":{\"id\":\"173598163705996466\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705950595\":{\"id\":\"173598163705950595\",\"type\":\"text\",\"properties\":{\"title\":[[\" - HTML有多种类型的标签，包括双标签和单标签。双标签有开始标签和结束标签，如`\u003Cdiv>`（开始标签）和`\u003C/div>`（结束标签），内容放在这两个标签之间。单标签则只有一个标签，如`\u003Cimg>`，它通过属性来提供更多信息，如`src`属性用于指定图像的来源（如`\u003Cimg src=\\\"image.jpg\\\">`）。还有语义化标签，如`\u003Cheader>`（网页头部）、`\u003Cfooter>`（网页底部）、`\u003Carticle>`（文章内容）等，这些标签有助于搜索引擎理解网页内容，同时也提高了代码的可读性和可维护性。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705926817\":{\"id\":\"173598163705926817\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705985293\":{\"id\":\"173598163705985293\",\"type\":\"text\",\"properties\":{\"title\":[[\"4. 版本演变\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705901564\":{\"id\":\"173598163705901564\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705961429\":{\"id\":\"173598163705961429\",\"type\":\"text\",\"properties\":{\"title\":[[\" - HTML经历了多个版本的发展。从早期的HTML1.0到HTML4.01，再到现在广泛使用的HTML5。HTML5带来了许多新的特性和功能，如原生支持音频和视频（`\u003Caudio>`和`\u003Cvideo>`标签）、更好的表单功能（如`input`类型的扩展，包括`email`、`date`等）、以及更强大的语义化标签，这些改进使得网页开发更加方便和高效。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705912561\":{\"id\":\"173598163705912561\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705965194\":{\"id\":\"173598163705965194\",\"type\":\"text\",\"properties\":{\"title\":[[\"CSS（层叠样式表）简介\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705938725\":{\"id\":\"173598163705938725\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705938897\":{\"id\":\"173598163705938897\",\"type\":\"text\",\"properties\":{\"title\":[[\"1. 定义与作用\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705904491\":{\"id\":\"173598163705904491\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705992834\":{\"id\":\"173598163705992834\",\"type\":\"text\",\"properties\":{\"title\":[[\" - CSS用于控制网页的外观和布局，它可以为HTML元素设置各种样式属性，如颜色、字体、大小、边框、背景、位置等。如果说HTML是网页的骨架，那么CSS就是网页的皮肤和装饰，它让网页从简单的结构展示变成具有吸引力的视觉呈现。例如，通过CSS可以将段落文本的颜色设置为蓝色，字体设置为Arial，大小为16像素，使网页更符合设计要求。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705983251\":{\"id\":\"173598163705983251\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705933546\":{\"id\":\"173598163705933546\",\"type\":\"text\",\"properties\":{\"title\":[[\"2. 工作方式\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705982061\":{\"id\":\"173598163705982061\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705946789\":{\"id\":\"173598163705946789\",\"type\":\"text\",\"properties\":{\"title\":[[\" - CSS通过选择器来定位HTML元素，然后为选定的元素应用样式规则。选择器可以是元素选择器（如`p`选择所有段落元素）、类选择器（如`.class - name`选择具有特定类名的元素）、ID选择器（如`#id - name`选择具有特定ID的元素）、属性选择器（如`[type=\\\"button\\\"]`选择具有特定属性值的元素）等多种类型。样式规则以键值对的形式出现，例如`color: red;`（将元素颜色设置为红色）、`font - size: 14px;`（将字体大小设置为14像素）等，这些规则被放置在样式表中，可以是内联样式（直接写在HTML元素的`style`属性中）、内部样式表（写在HTML文件的`\u003Cstyle>`标签内）或外部样式表（通过`\u003Clink>`标签引用独立的`.css`文件）。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705970728\":{\"id\":\"173598163705970728\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705966253\":{\"id\":\"173598163705966253\",\"type\":\"text\",\"properties\":{\"title\":[[\"3. 布局模型\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705957608\":{\"id\":\"173598163705957608\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705975573\":{\"id\":\"173598163705975573\",\"type\":\"text\",\"properties\":{\"title\":[[\" - CSS有多种布局模型，早期主要是基于盒模型的布局。每个HTML元素都被看作是一个矩形的盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。通过设置这些属性的值，可以控制元素的大小和位置。随着技术的发展，出现了更先进的布局方式，如`flexbox`（弹性布局）和`grid`（网格布局）。`flexbox`可以方便地实现元素在水平或垂直方向上的对齐、分布和伸缩，例如创建一个水平居中的导航栏。`grid`布局则更适合于构建复杂的二维布局，将网页划分为行和列，像布局一个网页的页面框架一样精确地安排元素的位置。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705972318\":{\"id\":\"173598163705972318\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705963210\":{\"id\":\"173598163705963210\",\"type\":\"text\",\"properties\":{\"title\":[[\"4. 层叠和继承特性\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705957913\":{\"id\":\"173598163705957913\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598163705901026\":{\"id\":\"173598163705901026\",\"type\":\"text\",\"properties\":{\"title\":[[\" - CSS的层叠特性是指当多个样式规则应用于同一个元素时，浏览器会根据一定的优先级规则来确定最终的样式。优先级的判断依据包括选择器的特殊性（如ID选择器优先级高于类选择器）、样式的来源（如内联样式优先级高于外部样式表）等。继承特性是指某些样式属性会从父元素自动传递给子元素，例如字体相关的属性通常会被继承。这两个特性在处理复杂的样式冲突和样式复用方面非常重要，帮助开发者更好地管理和应用样式。\"]]},\"format\":{},\"parentId\":\"173598163583254144\"},\"173598165528593776\":{\"id\":\"173598165528593776\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\",\"content\":[]},\"173598165570792965\":{\"id\":\"173598165570792965\",\"type\":\"text\",\"properties\":{\"title\":[[\"\"]]},\"format\":{},\"parentId\":\"173598163583254144\",\"content\":[]}}",3,1,null,1712836542000,1735981660000,[],[22,30,34,38,42,46,50],{"id":23,"widgetId":23,"widgetType":24,"title":25,"cover":11,"verticalCover":11,"summary":26,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":29,"readNum":28},"551914826033532928",2,"Tailwind CSS是什么？初学者指南","Tailwind CSS是实用优先的CSS框架，以现成低级类替代复杂样式，让网页设计快速直观。它支持响应式与状态样式，通过配置文件保持设计一致，JIT引擎避免CSS膨胀，非常适合初学者高效构建现代布局。",false,"0",true,{"id":31,"widgetId":31,"widgetType":24,"title":32,"cover":11,"verticalCover":11,"summary":33,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":29,"readNum":28},"551914440740573184","2024-2025年最新CSS特性：新功能和令人兴奋的变化","本文介绍2024-2025年主流浏览器支持的最新CSS特性，包括:has()父选择器、CSS嵌套、容器查询等，可减少JavaScript依赖，优化工作流程，让代码更清晰易维护，助力前端开发者构建现代UI。",{"id":35,"widgetId":35,"widgetType":24,"title":36,"cover":11,"verticalCover":11,"summary":37,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":29,"readNum":28},"551912841225965568","SVG vs PNG：这个简单切换如何让我的网站变得更快","本文分享作者从PNG切换到SVG的优化经历：PNG图标导致网站加载慢、跨设备模糊，SVG让文件大幅缩小、加载提速、图标始终锐利，还给出使用建议与工具，鼓励从小步尝试SVG提升网站性能与专业性。",{"id":39,"widgetId":39,"widgetType":24,"title":40,"cover":11,"verticalCover":11,"summary":41,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":29,"readNum":28},"551909146677481472","创意CSS动画：用HTML和CSS构建派对表情符号","本文讲解如何用HTML和SCSS构建派对表情符号动画，包含面部特征与动态效果，展现CSS的动画创意潜力。还涵盖结构解析、样式动画详解、演示用例及优化技巧，助力创意CSS开发。",{"id":43,"widgetId":43,"widgetType":24,"title":44,"cover":11,"verticalCover":11,"summary":45,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":29,"readNum":28},"551908108192976896","2025年的响应式布局是什么","2025年响应式布局进化为多维上下文感知模式，基于容器查询、clamp流体排版、动态视口单位等工具，组件自响应，适配容器、用户偏好、设备能力与网络环境，打造跨设备流体体验。",{"id":47,"widgetId":47,"widgetType":24,"title":48,"cover":11,"verticalCover":11,"summary":49,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":29,"readNum":28},"551907419714752512","前端面试500题大全","本文收集前端开发最常见500道面试题，涵盖HTML5、CSS3、JavaScript等多领域，每道题配详细答案解析与实际示例，助力理解掌握相关知识点。",{"id":51,"widgetId":51,"widgetType":16,"title":52,"cover":53,"verticalCover":54,"summary":55,"level":16,"isAuthor":27,"isPurchased":27,"isRead":27,"isPay":27,"price":28,"isTestRead":27,"readNum":28},"551415478250115072","《网页设计与样式艺术》","http://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755693975.png","http://clis-oss.oss-cn-beijing.aliyuncs.com/cn/doc/20260130/download_1769755690523.png","本书是一本面向初学者的网页设计与CSS样式系统教程。它从零开始，以轻松的风格，循序渐进地讲解了HTML结构、CSS核心样式、现代布局、响应式设计、交互动画等关键知识与技能，并通过完整实战项目引导读者将理论转化为实践，最终能够独立设计并实现美观、实用的网页。",["Reactive",57],{},["Set"],["ShallowReactive",60],{"tagDetail-htmlcss":-1},"/tag/htmlcss",{"auth":63},{"account":64,"loading":69,"initialized":71},["Ref",65],["Reactive",66],{"uuid":67,"headimgurl":67,"nickName":67,"isVisitor":68},"",-1,["EmptyRef",70],"false",["EmptyRef",70]]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"41c4f53e-1a7a-49ec-8978-b1a2b81093f6",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>