相关分类 
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-3515d49c>探索更多内容</div></div></div></div><!----></div><!--]--></div><div id="footer" data-v-a57d42a7 data-v-04f0d321><div class="footer-box" data-v-04f0d321><p data-v-04f0d321>© 2022, 北京探客时代网络科技有限公司</p><p data-v-04f0d321>京 ICP 备 2022008592 号 京公网安备 11011402012574 号 信息举报</p></div></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true">[["Reactive",1],{"data":2,"state":39,"_errors":40,"serverRendered":41,"path":42,"pinia":43},{"eKQrAHlLz26ECZn43Wdf-cyEy3fQdIkmJRm2-FaF4xA":3,"nae-Lbg00rUa7Pdk0WJ-gxr-mpPvdXv8SAhVWvDfmuI":13,"Nhf94bfYF4KNH_LzH9oWbuAwZAtfRff_Okhoz3FT1UU":27,"Oo1V_-ZF3Giu6Q56mz-o-9y2EYV4gxfo6lcTtBP5TT4":30,"tagDetail":34},{"status":4,"code":5,"message":6,"tips":7,"extra":7,"params":7,"data":8,"list":7,"map":7,"track":7,"time":6},"success","00000","",null,{"pageNo":9,"pageSize":10,"totalPage":11,"totalRows":11,"rows":12},1,20,0,[],{"status":4,"code":5,"message":6,"tips":7,"extra":7,"params":7,"data":14,"list":7,"map":7,"track":7,"time":6},{"path":15,"tagName":16,"tagCode":17,"industryCode":18,"directionCode":19,"icon":20,"tagDesc":21,"weight":22,"content":23,"type":24,"tagStatus":9,"createUid":7,"createdAt":25,"updateUid":7,"updatedAt":26},"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,1712836542000,1735981660000,{"status":4,"code":5,"message":6,"tips":7,"extra":7,"params":7,"data":28,"list":7,"map":7,"track":7,"time":6},{"pageNo":9,"pageSize":10,"totalPage":11,"totalRows":11,"rows":29},[],{"status":4,"code":5,"message":6,"tips":7,"extra":7,"params":7,"data":31,"list":7,"map":7,"track":7,"time":6},{"pageNo":9,"pageSize":10,"totalPage":9,"totalRows":9,"rows":32},[33],{"tagCode":17,"tagName":16,"icon":20,"bookNum":11,"docNum":11},{"tagDetail":35,"classifyList":36,"resourceList":37,"relatedAlbums":38},["Reactive",14],["Reactive",32],["Reactive",12],["Reactive",28],{},{"tagDetail":7,"nae-Lbg00rUa7Pdk0WJ-gxr-mpPvdXv8SAhVWvDfmuI":7,"Oo1V_-ZF3Giu6Q56mz-o-9y2EYV4gxfo6lcTtBP5TT4":7,"eKQrAHlLz26ECZn43Wdf-cyEy3fQdIkmJRm2-FaF4xA":7,"Nhf94bfYF4KNH_LzH9oWbuAwZAtfRff_Okhoz3FT1UU":7},true,"/tag/htmlcss",{"auth":44},{"account":45},["Ref",46],["Reactive",47],{"uuid":6,"headimgurl":6,"nickname":6,"isVisitor":48},-1]</script>
<script>window.__NUXT__={};window.__NUXT__.config={public:{apiBase:"/api"},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body>
</html>