30分钟学会HTML

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值