vscode前端代码对齐

时间: 2023-08-28 18:05:38 浏览: 148

前端开发基础：HTML+CSS

### 前端开发基础：HTML+CSS #### 前言前端开发是指通过HTML、CSS、JavaScript等技术创建用户界面的过程。本篇笔记主要介绍HTML与CSS的基础知识，帮助初学者快速入门。 #### HTML简介 - **定义**：HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。 - **作用**：HTML用于构建网页的基本结构，并通过一系列标签定义网页的不同部分。 - **版本**：目前最新版本为HTML5。 - **文档声明**：`<!DOCTYPE html>`表示当前文档遵循HTML5规范。 - **语言属性**：`<html lang="zh-CN">`表示网页使用的语言为中国汉语。 #### HTML基本结构 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body>  </body> </html> ``` - **元数据**：`<head>`标签内的信息，如`<meta charset="UTF-8">`指定字符编码为UTF-8。 - **主体内容**：`<body>`标签内包含所有可见内容。 #### 标签关系 - **嵌套关系**：一个标签可以嵌套在另一个标签内。 - **并列关系**：多个标签可以并列出现，处于同一层级。 #### VScode开发工具 - **快速生成HTML5骨架**：在VScode中输入`!`然后按回车键，可以快速生成HTML5文档的基本框架。 - **代码片段**：利用预设的代码片段提高编写效率。 - **智能提示**：VScode提供智能提示功能，帮助开发者快速完成代码。 #### HTML常用标签 - **标题标签**：`<h1>`至`<h6>`，用于定义不同级别的标题。 - **段落标签**：`<p>`，用于定义一段文本。 - **换行标签**：`<br>`，强制文本换行显示。 - **文本格式化标签**： - `<strong>`或`<b>`：加粗文本。 - `<em>`或`<i>`：斜体文本。 - `<u>`：下划线文本。 - `<s>`：删除线文本。 - **容器标签**：`<div>`和`<span>`，分别用于定义区块级容器和内联级容器。 - **图像标签**：`<img src="image.jpg" alt="替代文本">`，用于插入图片。 #### 图像标签注意事项 - **`src`属性**：必须填写图像的URL。 - **`alt`属性**：提供图像无法显示时的替代文本。 - **宽度与高度**：通常只设置其中一个，避免图片失真。 #### 路径概念 - **根目录**：网站的最高级别目录。 - **相对路径**：相对于当前文件的位置，如`images/pic.jpg`。 - **绝对路径**：从根目录开始的完整路径，如`/images/pic.jpg`。 #### 绝对路径示例 - **基于网站根目录**：如`/images/pic.jpg`。 - **基于服务器地址**：如`http://example.com/images/pic.jpg`。 #### 超链接标签 - **基本用法**：`<a href="url">链接文本</a>` - **外部链接**：`href`属性需使用完整的URL，如`http://www.example.com`。 - **内部链接**：仅需提供相对路径或文件名即可。 - **空链接**：用于占位符或触发JavaScript事件，如`<a href="#">点击这里</a>`。 - **下载链接**：指向`.zip`、`.exe`、`.rar`等文件，可直接下载。 #### 锚点链接 - **创建锚点**：`<a id="section1"></a>` - **链接到锚点**：`<a href="#section1">跳转至标题一</a>` #### HTML中的注释和特殊字符 - **注释**：`` - **特殊字符**： - `<`表示“<” - `>`表示“>” - `&`表示“&” - `"`表示“"” - `'`表示“'” 以上是关于HTML的基础知识点总结。接下来，我们将探讨CSS的基础知识。 #### CSS简介 - **定义**：CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的布局和外观。 - **作用**：通过定义颜色、字体、间距等属性美化网页。 - **引入方式**：内联样式、内部样式表、外部样式表。 #### CSS选择器 - **类型选择器**：`p { color: blue; }` 选取所有`<p>`标签。 - **类选择器**：`.classname { color: red; }` 选取类名为`classname`的所有元素。 - **ID选择器**：`#idname { color: green; }` 选取ID为`idname`的唯一元素。 #### CSS常用属性 - **文本属性**： - `color`：设置文本颜色。 - `font-family`：定义字体系列。 - `font-size`：设置字体大小。 - **盒子模型属性**： - `width`和`height`：定义元素的宽高。 - `padding`：定义元素内部与内容之间的空白。 - `margin`：定义元素与其他元素之间的空白。 - **背景属性**： - `background-color`：设置背景颜色。 - `background-image`：设置背景图像。 - **定位属性**： - `position`：定义元素的定位类型。 - `top`、`right`、`bottom`、`left`：定义元素的位置坐标。 #### CSS盒模型 - **内容**：实际显示的文字或图片。 - **填充**：内容与边框之间的空间。 - **边框**：围绕内容和填充的一条线。 - **边界**：边框与其他元素间的距离。 #### 浮动与清除浮动 - **浮动**：允许元素向左或向右移动，使其他元素环绕其周围。 - **清除浮动**：确保元素不受浮动元素的影响，避免布局错乱。 #### 响应式设计 - **媒体查询**：根据不同的屏幕尺寸应用不同的样式。 - **视口单位**：使用`vw`、`vh`单位适应屏幕尺寸。 #### 总结通过本文档的学习，我们了解了HTML与CSS的基础知识，包括HTML的基本结构、常用标签、路径概念、超链接以及CSS的选择器、常用属性、盒模型等内容。这些知识对于前端开发至关重要，是构建美观、响应式网页的基础。随着技术的不断进步，HTML5与CSS3提供了更多的特性和功能，建议继续深入学习，以便更好地掌握前端开发技能。

在VSCode中，可以使用插件来实现前端代码的对齐。一个常用的插件是JS-CSS-HTML Formatter。你可以在VSCode中直接搜索并安装这个插件。请注意，在使用这个插件时，不要勾选自动保存选项，以免造成不必要的麻烦。 #### 引用[.reference_title] - *1* [Vscode:如何在运算符左右自动添加空格插件。如何自动对齐代码格式插件。](https://blog.csdn.net/qq_45720624/article/details/126558446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

阅读全文

vscode前端代码对齐

相关推荐

仿支付宝风格的CSS网站导航栏设计与实现

精通前端ECharts：打造动态大屏可视化设计

前端学习笔记，做一个简单的网站-星星，学习代码

VSCode提高 Node 和 Vue 开发效率的插件推荐

前端基于html+css+js的酒类项目

web前端网页制作课作业：甜甜圈蛋糕店(HTML+CSS+JavaScript)

HTML人物介绍、个人设计web前端大作业、贝聿铭人物介绍(带报告3000字)

JS代码格式化工具

web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口

HTML网页制作：解析表格表尾效果与VSCode中Jupyter教程

个性化vscode配置，一键启动Vue服务，提升开发效率

学习前端基础：仿淘宝静态网页模板

HTML5旅游网站设计源码：前端期末作业示例

掌握HTML与CSS：前端导师社交证明部分挑战

7. 学会使用VsCode编辑器，提升HTML5、CSS3、JS代码编写的效率

【代码质量升级】：掌握使用gofmt提升代码可读性的策略

vscode配置前端开发环境

vscode怎么调字体居中

vscode(1)使商品列表位于界面正中间。

最新推荐

【中国房地产业协会-2024研报】2024年第三季度房地产开发企业信用状况报告.pdf

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

如何在Springboot后端项目中实现前端的多人视频会议功能，并使用Vue.js与ElementUI进行界面开发？

Android应用显示Ignaz-Taschner-Gymnasium取消课程概览