前端学习的笔记第二篇

冷不防 2024-05-06 21:21 64阅读 0赞

![image-20240212142533461][]

### **vscode如何快速生成代码** ###

`!` \+ `Tab`  
![image-20240211211106944][]  
**效果：**  
![image-20240211211700800][]

**解析：**

> `<!DOCTYPE html>`: 指定当前html版本5。  
> `<html lang="en">`: lang => language，en => english。指定当前页面内容是英文的。  
> `<meta charset="UTF-8">`:浏览器解码规则，按照`UTF-8`的格式进行解码。  
> `<meta name="viewport" content="width=device-width, initial-scale=1.0">`:设计的页面，既要在浏览器打开，又想要在手机端打开，就涉及到移动端适配。

## **html里的常见标签** ##

> 标题标签&&段落标签&&换行标签

### **注释标签** ###

目的：提高代码的可读性，使程序猿能够更轻松地理解和掌握代码。  
示例：  
``  
``

> 在浏览器中查看注释：按F12

![image-20240211223015234][]

### **标题标签** ###

> 有六个，从h1-h6，数字越大，则字体越小。

**示例：**![image-20240211224026022][]

**效果：**  
![image-20240211224259272][]

### **段落标签** ###

> p 标签代表一个段落标签。

**示例代码:**

![image-20240211232004115][]

**运行结果:**  
![image-20240211232236478][]

**示例代码:**

![image-20240211232037706][]

**运行结果:**  
![image-20240211232423084][]

### **换行标签** ###

注意：直接回车显示的结果为空格。

> 换行标签: br标签。br是break的缩写，表示换行。

*  br是一个单标签(不需要结束标签)
 *  br标签不像p标签那样带有一个很大的空隙
 *  `<br/>`是规范写法.不建议写成`<br>`

换行标签换行之后间隙比段落标签间隙小，浏览器默认的样式

**示例代码：**

![image-20240212142054107][]

**运行效果：**  
![image-20240212142146068][]

[image-20240212142533461]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d32aa24f68ff491bbd44da8d25c2c2ae.png
[image-20240211211106944]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/828000e366f947ffae92646bc9f799b7.png
[image-20240211211700800]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8968ade0148a48638d14ef5297a7fbf4.png
[image-20240211223015234]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/2b87a90ba0254fdf8ea67205c0a94868.png
[image-20240211224026022]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/5de2f95862134a9c842922490eb48ea6.png
[image-20240211224259272]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/669e5a37274740abb0fae437651768ad.png
[image-20240211232004115]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/184957dc56a54bf08046a5f8d78029b4.png
[image-20240211232236478]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/a3990c1bf4094923a485ff4cd689569f.png
[image-20240211232037706]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/572f6b5b8a174c7aa726fa8be47f0ae7.png
[image-20240211232423084]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/111a5dfda446493183cd338b8e23c5d1.png
[image-20240212142054107]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/50fb6238761d44989214c08277d4ba13.png
[image-20240212142146068]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3bc802f8e8144f55b704cbc5fd82fbdc.png