HTML 基本语法
HTML(HyperText Markup Language)是构成网页内容的基础。它使用一系列的标签来描述网页的结构,包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。
在线体验一下 CodePen (在线 HTML 编辑器)。
千万不要被「超文本」、「标记语言」吓到,HTML 的语法非常直观,常用的标签结构并不复杂,用于构建基础网页已经足够,稍微了解一下就能上手。
就是这些基本的标签结构,却能让人优雅地组织你的网页内容,专注于信息的呈现而不是纠结于如何显示,达到“心中有页,落笔成型”的境界。
HTML 文档结构
每个 HTML 文档都需要一个基本的结构,声明文档类型,并包含 <html>
、<head>
和 <body>
等核心标签。
HTML 语法 | 作用 | 示例 |
---|---|---|
<!DOCTYPE html> |
声明文档类型为 HTML5 | |
<html></html> |
HTML 文档的根元素 | |
<head></head> |
包含文档的元数据,如标题、字符编码等 | |
<title></title> |
定义文档的标题,显示在浏览器标签上 | <title>我的网页标题</title> |
<meta charset="UTF-8"> |
定义字符编码为 UTF-8,支持多种字符集 | |
<body></body> |
包含网页可见内容的主体部分 | |
<h1></h1> 到 <h6></h6> |
定义不同级别的标题 | <h1>主标题</h1> , <h2>副标题</h2> |
<p></p> |
定义段落 | <p>这是一个段落。</p> |
可选语法 (实际上是不同的 HTML 版本和doctype)
虽然 <!DOCTYPE html>
是 HTML5 的标准声明,但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。
最佳实践
一个标准的 HTML 文档应该以 <!DOCTYPE html>
开头,并包含 <html>
、<head>
和 <body>
标签,确保语义清晰和结构完整。
✅ Do this | ❌ Don't do this |
---|---|
使用 <!DOCTYPE html> 声明 HTML5 |
忘记添加 <!DOCTYPE html> 声明 |
包含 <head> 和 <body> 标签 |
缺少 <head> 或 <body> 标签 |
HTML 标题
HTML 提供了六级标题标签 <h1>
到 <h6>
,用于表示不同级别的标题内容。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
<h1>一级标题</h1> |
定义一级标题 | 页面中最主要的标题 |
<h2>二级标题</h2> |
定义二级标题 | 次要的标题 |
<h3>三级标题</h3> |
定义三级标题 | 更细分的标题 |
<h4>四级标题</h4> |