初体验HTML

刘春龙原创2026/3/5大约 4 分钟

在学习本章节之前，先了解一下什么是前端

现在是一个大前端时代，简单来说，大前端就是所有前端的统称，比如网站、小程序、Android、iOS、Watch 等，最接近用户的那一层也就是 UI 层，然后将其统一起来，就是大前端。

引用网友的一句话：ES2015 开始 JavaScript 的发展宛如坐上了火箭，有幸见证了一场又一场繁荣，由此可见，前端发展之迅猛。我们既然站在风口浪尖上，那就赶紧乘风而起吧!

前端技术体系：

在我们的课程中，已经为大家设计好了整套的前端技术体系

所有技术的核新（基础）是：HTML5+CSS3+JavaScript，但其实这些内容都是简单易学的

提示

HTML5+CSS3 都十分简单，而 JavaScript 才是重中之重，你在前端的道路上能够走多远，这完全取决于你对 JavaScript 的理解和掌握程度！

这里会写一个最简单的小例子，讲述 HTML5+CSS3+JavaScript 效果

<p>我是Hello World</p>

var pText = document.querySelector('p')
pText.innerHTML = '我是修改之后的Hello World'
pText.style.color = 'red'

p {
  height: 60px;
  width: 100%;
  background-color: #000;
  line-height: 60px;
  text-align: center;
  color: #fff;
}

总结

通过上面的案例，我们明显的能够体会到，HTML 会让你的网页有内容，css 会让网页上的内容更加好看，而 js 则会动态的去修改网页内容，具有支配浏览器的能力。

下面，正式开始进入 HTML 的学习了！

提示

vscode 生成 HTML 结构快捷键：！+回车，代码如下

<!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>Document</title>
  </head>
  <body></body>
</html>

HTML5 简介

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用 HTML5 编写的文件，后缀以.html 结尾，HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>

提示

文件后缀名以.html 结尾

在编写代码的过程中，<>必须是英文状态下编写

HTML 标签有两种表现形式：

双标签，例如：<html></html>
单标签，例如：<img>

基本结构

HTML5 的 DOCTYPE 声明
DOCTYPE是 document type (文档类型) 的缩写。是 H5 的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。
```
<!DOCTYPE html>
```
html 标签
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个 HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
```
<!DOCTYPE html>
<html></html>
```
head 标签
head 标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
```
<!DOCTYPE html>
<html>
  <head> </head>
</html>
```
body 标签
body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
它会直接在页面中显示出来，也就是用户可以直观看到的内容
```
<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    我会显示在浏览器中
  </body>
</html>
```
title 标签
可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写 head 一定要写 title
<title>的增加有利于 SEO 优化
提示
SEO 是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求
```
<!DOCTYPE html>
<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
    我会显示在浏览器中
  </body>
</html>
```
meta 标签
meta 标签用来描述一个 HTML 网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是 gbk，这些都是编码格式，通常使用utf-8。
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>itbaizhan</title>
  </head>
  <body>
    
  </body>
</html>
```

设置网站 logo

<link rel="shortcut icon" href="favicon.ico" />

HTML 注释

浏览器不会显示注释

<!-- 这是一段注释 -->
<!-- 这里的内容不会被浏览器显示 -->

注意

在开始标签中有一个叹号，但是结束标签中没有

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。