Web 前端开发零基础快速入门，HTML/HTML5 标签及属性的基础语法

一、基础入门

从零开始创建一个网页（2 种方法）
生成 HTML5 骨架

1、创建第一个网页

方法一：

创建一个空文件夹
在文件夹中，右键新建文本文件
然后将文件后缀名.txt修改为 .html ，再使用Vscode 编辑器打开
注意：设置操作系统 “文件扩展名” 为可见

方法二：

创建一个空文件夹，直接使用 Vscode 打开文件夹
使用快捷键 Ctrl + N 新建文件，保存文件格式为 .html后缀名即可
或者点击新建文件按钮或在 Vscode 资源管理器中右键新建文件

注：我们所看到的网页有各种效果（包括图片、视频、文字 …..），但 HTML 文件本身是纯文本

生成 HTML5 骨架

TIP
输入 ! 英文模式下，按 tab键，即可自动生成 HTML5 的骨架
注：如果没有生成，看网页的格式是否正确或保存
在 Vscode 中生成 HTML5 骨架即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>这是我的第一个HTML网页</title>
  </head>
  <body>
    第一个HTML网页 ，Hello ！
  </body>
</html>

3、预览网页的方式

方法 1：
直接文件夹中双击网页图标，即可查看
适合开发者 Chrome 浏览器，记得将 Chrome 浏览器设置为默认浏览器
修改网页内容后，在浏览器中手动刷新后，即可更新内容
方法 2：
在 Vscode 中安装 Live Server插件（实时热更新）修改内容后，保存网页将自动刷新
安装完成后，在当前 HTML 文件中，按快捷键 Ctrl+Shift+P 选择 Open Witch Live Server 即可打开
使用快捷键注意：网页必须存放在文件夹中，并且 Vscode 已经打开这个文件夹
开发时可以使用分屏模式，一边开发、一边呈现效果，所见即所得。电脑屏幕效果如下：

图片[1]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

4、常用浏览器

浏览器是网页显示、运行的平台。常用浏览器有 IE、火狐（Firefox）谷歌（Google）、Safari（苹果官方）、Opera 、Edge（微软）等
全球浏览器市场份额：https://gs.statcounter.com/browser-market-share

图片[2]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

中国浏览器市场份额：https://tongji.baidu.com/research/site

图片[3]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

5、浏览器内核

图片[4]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[5]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[6]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

二、认识 HTML5 骨架

<!--文档类型声明DTD-->
<!DOCTYPE html>
<!--<html></html> 标签对-->
<html lang="en">
  <!--<head></head> 标签对-->
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!--<body></body>标签对-->
  <body></body>
</html

1、文档类型声明 DTD

定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。`
<!DOCTYPE> 声明不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
SGML（Standard Generalized Markup Language）

即标准通用标记语言) SGML 是国际上定义电子文档和内容描述的标准。
HTML5 不基于 SGML，所以不需要引用 DTD

提示：
请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

不写 DTD 会引发浏览器的一些兼容问题
不同版本的 HTML 有不同的 DTD 写法
HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。
在 HTML5 中只有一种（如下所示）：

HTML5 标准

<!DOCTYPE html>

<!DOCTYPE > 声明没有结束标签。
<!DOCTYPE > 声明对大小写不敏感，以下任意方式都可以。但，建议使用 <!DOCTYPE html>

<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>

HTML4.01 严格版

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 过渡版

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 框架版

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

当前HTML5 已经一统江湖了，早期的 HTML4 及以前的版本都已不用，只做 HTML 发展历史了解就好。

那么，是谁在制定这些版本，就是 W3C 组织

2、W3C 组织

TIP
W3C 指万维网联盟（World Wide Web Consortium）是万维网的主要国际标准组织
W3C 创建于 1994 年 10 月主要负责制定 WEB 标准
W3C 由 Tim Berners-Lee（蒂姆·伯纳斯·李） 创建 ，被誉为 "互联网之父"
W3C 是一个会员组织
W3C 的工作是对 web 进行标准化
W3C 创建并维护 WWW 标准
W3C 标准也被称为 W3C 规范
主要是 HTML 和 CSS
W3C 组织官网：https://www.w3.org/ (opens new window)

JavaScript 由 Brendan Eich 于 1995 年发明，并于 1997 年成为 ECMA 标准。

3、网页组成

网页主要由三部分组成：

结构（Structure）、表现（Presentation）和行为（Behavior）

图片[7]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

4、html 标签

图片[8]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

5、字符集

图片[9]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[10]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[11]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[12]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[13]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[14]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>艾编程-为每个互联网人提供高质量的终身学习平台</title>
    <meta name="Keywords" content="艾编程,WEB前端,Java架构师,Python课程" />
    <meta
      name="description"
      content="艾编程连接了国内外一线互联网公司整合一线师资和企业项目研发解决方案，面向互联网企业开发者提供Web前端、Java、Python、大数据、人工智能等技术在实际企业应用中的项目研发解决方案体系化在线课程。"
    />
  </head>
  <body></body>
</html>

SEO 优化

图片[15]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[16]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

7、VSCode 中 HTML 模板代码解读

图片[17]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

图片[18]-HTML/HTML5 标签基础语法 - hao415资讯论坛【前端基础课程】-hao415资讯论坛

完整解读

<!--声明当前文档类型为 html5标准-->
<!DOCTYPE html>
<!--声明当前页面的语言类型-->
<html lang="en">
  <head>
    <!--网页的编码集-->
    <meta charset="UTF-8" />
    <!--IE8及以上的版本按照最新的标准去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--用户移动端适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--网页标题-->
    <title>艾编程</title>
    <!--网页关键词-->
    <meta name="Keywords" content="艾编程,WEB前端,Java架构师,Python课程" />
    <!--网页描述-->
    <meta name="description" content="为每个互联网人提供高质量的终身学习平台" />
  </head>
  <body></body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END