一、什么是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文档的根元素包含页面的所有内容
\元素:用于定义文档头部信息,包括文档标题、脚本、样式表等
\元素:提供关于文档的元数据.例如字符集声明、网页描述、作者等等
\元素:定义文档的标题,显示在浏览器的标题栏或书签中 </li> <li> \元素:包含文档的主体内容 </li> <li> \ <header>元素:代表网页的页眉 </li> </ul> 上面每个字段的含义和作用： <pre><code class="language-html"> <!DOCTYPE html> </code></pre> 作用：文档类型声明，告诉浏览器这是 HTML5 文档（早期 HTML 版本需更复杂声明，如 HTML4 的 <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></code>）。 <pre><code class="language-html"> <html> </code></pre> 作用：定义 HTML 文档的根元素，所有其他标签必须包含在 <code><html></code> 和 <code></html></code> 之间。 <pre><code class="language-html"><head> <meta charset="utf-8"> <title>欢迎访问我的网站!</title> </head> </code></pre> <code><head></code> 标签的作用： 存放元数据（不会直接显示在页面上），包括字符编码、标题、CSS/JS 文件链接等。 <ul> <li> \ </li> <li> 作用：声明文档使用 UTF-8 字符编码，确保中文字符、特殊符号正常显示。 </li> <li> 必要性：如果缺失或编码错误，可能导致页面乱码。 </li> <li> \<title>欢迎访问我的网站!\
作用：定义浏览器标签页标题，也是搜索引擎结果中显示的标题。

<body>
    <header>
        <h1>这是一个HTML5网站</h1>
    </header>
</body>

\ 标签的作用：

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

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

实现类似功能。
\

这是一个HTML5网站\
作用：定义一级标题（\

到 \

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

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

2.2 HTML5基于语法

2.2 HTML初体验

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

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这个文件，展示如下：

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

THE END