[HTML一] html基础

「爱情、让人受尽委屈。」 2023-03-06 05:48 34阅读 0赞

### 一、html的介绍 ###

#### 1.1 html的定义 ####

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。 标记：就是标签, `<标签名称></标签名称>`，比如：`<html></html>、<h1></h1>`等，标签大多数都是成对出现的。

所谓超文本，有两层含义:

1.  因为网页中还可以图片、视频、音频等内容(超越文本限制)
2.  它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

#### 1.2 html的作用 ####

html是用来开发网页的，它是开发网页的语言。

#### 1.3 小结 ####

*  html是开发网页的语言
 *  html中的标签大多数都是成对出现的, 格式: `<标签名>`

### 二、html的基本结构 ###

#### 2.1 结构代码 ####

<!DOCTYPE html>
    <html>
        <head>            
            <meta charset="UTF-8">
            <title>网页标题</title>
        </head>
        <body>
              网页显示内容
        </body>
    </html>

1.  第一行`<!DOCTYPE html>`是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
2.  `<html>...</html>`标签是开发人员在告诉浏览器，整个网页是从`<html>`这里开始的，到`html`结束,也就是html文档的开始和结束标签。
3.  `<head>...</head>`标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
4.  `<body>...</body>`标签是编写网页上显示的内容。

#### 2.2 浏览网页文件 ####

网页文件的后缀是\*\*.html**或者**.htm\*\*, **一个html文件就是一个网页**，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

![在这里插入图片描述][20200805203140653.png]

#### 2.3 小结 ####

![在这里插入图片描述][20200805203200475.png]

### 三、vscode的基本使用 ###

#### 3.1 vscode 的基本介绍 ####

全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台**代码编辑器**，目前是前端(网页)开发使用最多的一款软件开发工具。

#### 3.2 vscode 的安装 ####

1.  下载网址: https://code.visualstudio.com/Download
2.  选择对应的安装包进行下载: \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aOHahQOx-1596630635790)(imgs/pt.png)\]
3.  根据下载的安装包双击进行安装即可，当然为了更好的使用 vscode 还可以安装对应的插件。

#### 3.3 vscode 的插件安装 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">插件名</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">Chinese (Simplified) Language Pack for VS Code</td> 
   <td align="center">中文(简体)汉化包</td> 
  </tr> 
  <tr> 
   <td align="center">open in browser</td> 
   <td align="center">右击在浏览器打开html</td> 
  </tr> 
 </tbody> 
</table>

1.  汉化插件安装![在这里插入图片描述][20200805203255767.png]  
    ![在这里插入图片描述][20200805203255742.png]
2.  open in browser插件安装 ![在这里插入图片描述][20200805203357524.png]

**注意: 如果在vscode打开的html文档中右击没有出现 open in browser 类型的选项，需要把当前打开的文件关掉，重新打开这个文件就好了。**

#### 3.4 vscode 的插件卸载 ####

点击对应安装的插件，然后再点击卸载按钮即可。

#### 3.5 vscode 的使用 ####

1.  打开文件夹创建文件 ![在这里插入图片描述][20200805203455407.png]  
    ![在这里插入图片描述][20200805203455302.png]
2.  快速创建html文档的基本结构![在这里插入图片描述][20200805204124980.png]
3.  右击在浏览器打开html文档 ![在这里插入图片描述][20200805204159115.png]

#### 3.6 设置字体大小 ####

![在这里插入图片描述][20200805204228960.png]  
![在这里插入图片描述][20200805204228804.png]

#### 3.7 设置颜色主题 ####

![在这里插入图片描述][2020080520430425.png]  
![在这里插入图片描述][20200805204303913.png]

#### 3.8 设置默认浏览器\[可选\] ####

1.  可以根据自己的需要设置默认使用的浏览器 ![在这里插入图片描述][20200805204333160.png]

#### 3.9 小结 ####

*  vscode 是由微软研发的一款免费、开源的跨平台代码编辑器
 *  通过资源管理器打开文件夹创建HTML文件，编写 HTML 代码
 *  可以根据需要安装对应的插件
 *  可以设置字体大小和颜色主题

[20200805203140653.png]: /images/20230208/09a938781d364c38aae0a28a5296e11e.png
[20200805203200475.png]: /images/20230208/d3fd39619c9744d8abb5ca6e6dcfa46a.png
[20200805203255767.png]: /images/20230208/c6a3a9eb525e41c5834eb11323209e51.png
[20200805203255742.png]: /images/20230208/59dfd470441d44a4a847dda5a3e6458a.png
[20200805203357524.png]: /images/20230208/28807cdd7eaa4be2b1a2a97cd21d2992.png
[20200805203455407.png]: /images/20230208/9592940ed08a43e9adbccfe4bce9454f.png
[20200805203455302.png]: /images/20230208/c7d6b3bac40d472699342b56eb0f6e88.png
[20200805204124980.png]: /images/20230208/1fded390354b401a90e4a359fbc18876.png
[20200805204159115.png]: /images/20230208/a626758b88724278b3c13ed786fc56cc.png
[20200805204228960.png]: /images/20230208/bfc59a535052411a8c171f10ce38edf3.png
[20200805204228804.png]: /images/20230208/98b6c6d0e1da4453bee1839656f75f75.png
[2020080520430425.png]: /images/20230208/b32d590f56e54dd487b73a1cea778d41.png
[20200805204303913.png]: /images/20230208/ee7b018d511548deaae753496f9793f4.png
[20200805204333160.png]: /images/20230208/c44feef24dff41489e1d74a9e106e0da.png