01-VS_Code新建HTML以及代码架构讲解

最新推荐文章于 2023-02-15 16:30:08 发布

千纸鹤。

最新推荐文章于 2023-02-15 16:30:08 发布

阅读量548

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/zrh565309720/article/details/104763072

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. 新建HTML

首先，笔者新建了一个文件，并且后缀命名成.html后缀。之后切换到英文输入法下，写一个感叹号！，如下图所示。

在这里插入图片描述

操作界面会弹出提示框，这个时候单机或者回车选中第一个感叹号！便会自动搭建框架，如下图所示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

二.网页框架讲解

在生成了网页框架后，我们看到第一行有这样一条代码

<!DOCTYPE html>

其中 !DOCTYPE 是文档类型声明，作用是告诉浏览器使用那种HTML版本显示本网页。
注：!DOCTYPE 需要写在 html标签的前面。

在一个C语言程序中，我们知道是从main函数开始运行，一直到大括号结束，所有要用到的程序都放在这个main函数中编写（注：此处忽略函数定义和全局变量定义以及头文件的调用），那么我们一个网页是从哪里开始写，又是从哪里结束的呢？
在网页中

<html> <\html>

就类似于C语言中的main函数的大括号，我们所有的程序都要写在这对括号之中完成。
head 从字面意思理解就是头部的意思，他是对我们网页的首部所作的一个设置，例如网页标题，文本编码以及大小等设置。其左右有点类似单片机程序中的初始化操作，是对一些陪着的设置功能。

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>键盘敲烂，月薪过万！</title>
</head>

body里则是网页主题的编写，在body中所作的操作都将在网页中直观的显示出来。

<body> </body>

本章在此仅给读者对HTML的框架有一个感性的认识，不做深入讲解，在后面的章节中会做详细的讲解。

三. 编写网页前需要注意的修改点

<html lang="en">

这句代码表示设置当前网页所使用的语言。en表示使用的是英文。如果使用en，在这个网页中，也同样是可以出现中文字符的，但是为了保险，在写代码前我们首先将其改为 zh-CN 表示是中文网页。它的作用仅用于提示网页当前网页的语言格式并且提供警示作用。

例如使用google浏览器打开的时候会自动提醒是否将其翻译成中文一样，如果将其设置为其他语言，打开时将自动询问你是否翻译。

第二个要注意的地方是下面这句代码