02. HTML基础知识和开发工具介绍

02. HTML基础知识和开发工具介绍

1. 标签的书写注意规范
2. 写出HTML骨架标签
3. 写出超链接标签
4. 写出图片标签并说出在图片标签中alt和title的区别
5. 说出相对路径的三种形式

标签的书写规范


HTML基本结构标签






以小猪佩奇的身体来举例：

网页开发工具

我们选用VS Code来进行网页开发。
VS Code的下载安装教程参考以下链接：VS Code的下载安装教程
在vscode里新建文件，首先将文件保存为html文件。

在开发工具中输入一个英文的感叹号"!",在弹出的对话框里选择第一个感叹号，点击鼠标，就会发现，html的骨架标签就基本生成了。只需要在里边修改就行。


在body中写入内容，



可以看到运行结果如图所示。

ctrl+"+" 放大代码字号，ctrl+"-"* 缩小代码字号

vscode插件安装（此方法要求电脑能够上网）
安装中文简体包：


重启之后可以看到软件的界面全都变成中文的了。

表示网页为英文，定义为英文也可以写中文，定义为“zh-CN”表示网页为中文，也可以在文档里写英文，中英文都可以显示。

表示这个网站为中文网站。

HTML常用标签


举个一级标签的例子（写完标签之后一定要保存才能刷新出来），

显示的网页如图所示

段落标签的使用结果如下图所示，可以看到，哈哈哈哈和嘻嘻嘻嘻中间分段了。

其在浏览器的显示结果如图所示。


例如：

ctrl+ / 可以添加注释，即注释标签