一、什么是HTML？

世界上第一个HTML网站(HTML1.0)：The World Wide Web project

HTML（HyperText Markup Language） 是一种用于创建网页结构和内容的标记语言。它是构建网页的基础技术之一，与CSS（控制样式）和JavaScript（实现交互功能）共同构成现代网页开发的三大核心技术。

HTML:超文本标记语言,HTML是由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记语言。

用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如NIX,Windows等)。使用HTML,将所需要表达的信息按某种规则写成TML文件,通过专用的浏览器来识别,并将这些HTML文件"翻译"成可以识别的信息,即我们所见到的网页。

网站开发三剑客：

  • HTML：页面的结构和内容
  • CSS：页面的外观和样式
  • JS：页面的交互和效果

二、HTML基本结构和语法

HTML5 是 HTML 的最新版本（当前标准），它对早期的 HTML 进行了改进和扩展，但核心思想保持不变。

误区：H5是HTML5的缩写，H5 = HTML5 + CSS3 + JavaScript

2.1 HTML5基本结构

HTML5示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎访问我的网站!</title>
</head>
<body>
    <header>
        <h1>这是一个HTML5网站</h1>
    </header>
</body>
</html>

上面字段说明：

  • \<!DOCTYPE>声明：指定文档类型。在HTML5中,只需写\<!DOCTYPE html>即可
  • \<html>元素：定义HTML文档的根元素包含页面的所有内容
  • \<head>元素:用于定义文档头部信息,包括文档标题、脚本、样式表等
  • \<meta>元素:提供关于文档的元数据.例如字符集声明、网页描述、作者等等
  • \<title>元素:定义文档的标题,显示在浏览器的标题栏或书签中
  • \<body>元素:包含文档的主体内容
  • \<header>元素:代表网页的页眉

上面每个字段的含义和作用：

<!DOCTYPE html>

作用：文档类型声明，告诉浏览器这是 HTML5 文档（早期 HTML 版本需更复杂声明，如 HTML4 的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）。

<html>

作用：定义 HTML 文档的根元素，所有其他标签必须包含在 <html> 和 </html> 之间。

<head>
    <meta charset="utf-8">
    <title>欢迎访问我的网站!</title>
</head>

<head> 标签的作用：

存放元数据（不会直接显示在页面上），包括字符编码、标题、CSS/JS 文件链接等。

  • \<meta charset="utf-8">
  • 作用：声明文档使用 UTF-8 字符编码，确保中文字符、特殊符号正常显示。
  • 必要性：如果缺失或编码错误，可能导致页面乱码。
  • \<title>欢迎访问我的网站!\</title>
  • 作用：定义浏览器标签页标题，也是搜索引擎结果中显示的标题。
<body>
    <header>
        <h1>这是一个HTML5网站</h1>
    </header>
</body>

\<body> 标签的作用：

包含用户可见的所有内容，如文本、图片、链接等。

  • \<header>
  • 作用：HTML5 新增的语义化标签，表示页面的页眉区域（通常包含网站标题、导航栏）。
  • 对比旧版：早期 HTML 常用 \
  • \

    这是一个HTML5网站\

  • 作用：定义一级标题（\

    到 \

    表示标题层级）。
  • SEO 优化：\

    是页面最重要的标题，通常每个页面只出现一次。

2.2 HTML5基于语法

2.2.1 HTML初体验

使用谷歌浏览器打开https://www.baidu.com/网站，同时按F12，点击【元素】，点开\<head>可以查看到网站的标题信息：百度一下

image-20250518182447336

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为1.HTML初体验.html

<!-- html注释信息 -->
<!DOCTYPE html>
<html>
    <head>
        <title>HTM5</title>
    </head>
    <body>
        <head>
            <h1>这是我的第一个网站！</h1>
            <h2>这是二级标题！</h2>
            <p>开始正式学习网站</p>
        </head>
    </body>
</html>

2、双击1.HTML初体验.html这个文件，展示如下：

image-20250518193134560