30分钟学会HTML

HTML 基本语法

HTML（HyperText Markup Language）是构成网页内容的基础。它使用一系列的标签来描述网页的结构，包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。

在线体验一下 CodePen (在线 HTML 编辑器)。

千万不要被「超文本」、「标记语言」吓到，HTML 的语法非常直观，常用的标签结构并不复杂，用于构建基础网页已经足够，稍微了解一下就能上手。

就是这些基本的标签结构，却能让人优雅地组织你的网页内容，专注于信息的呈现而不是纠结于如何显示，达到“心中有页，落笔成型”的境界。

HTML 文档结构

每个 HTML 文档都需要一个基本的结构，声明文档类型，并包含 、 和 等核心标签。

HTML 语法	作用	示例
	声明文档类型为 HTML5
	HTML 文档的根元素
	包含文档的元数据，如标题、字符编码等
	定义文档的标题，显示在浏览器标签上
	定义字符编码为 UTF-8，支持多种字符集
	包含网页可见内容的主体部分
到	定义不同级别的标题	主标题 , 副标题
	定义段落	这是一个段落。

可选语法 (实际上是不同的 HTML 版本和doctype)

虽然 是 HTML5 的标准声明，但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。

最佳实践

一个标准的 HTML 文档应该以 开头，并包含 、 和 标签，确保语义清晰和结构完整。

✅ Do this	❌ Don't do this
使用 声明 HTML5	忘记添加 声明
包含 和 标签	缺少 或 标签

HTML 标题

HTML 提供了六级标题标签

到

，用于表示不同级别的标题内容。

HTML 语法	作用	预览效果 (描述性)
一级标题	定义一级标题	页面中最主要的标题
二级标题	定义二级标题	次要的标题
三级标题	定义三级标题	更细分的标题
四级标题	定义四级标题
五级标题	定义五级标题
六级标题	定义六级标题

可选语法 (无直接对应，但强调语义化)

虽然可以使用 CSS 来改变标题的显示样式，但应该根据内容的逻辑结构来选择合适的标题标签，而不是仅仅为了改变字体大小而随意使用。

最佳实践

按照内容的逻辑重要性使用标题标签，

用于最重要的标题，依次递减。

✅ Do this	❌ Don't do this
使用 作为页面主标题	为了加大字体而使用 ，忽略语义化
按照标题层级嵌套使用 (h2 在 h1 下)	跳跃使用标题标签 (例如 h1 后直接使用 h4)

HTML 段落

标签用于定义段落，将文本内容组织成独立的段落块。

HTML 语法	作用	预览效果 (描述性)
这是一个段落。	定义一个段落	文本会分段显示
这是第一个句子。 这是第二个句子。	使用 换行	在段落内换行显示

段落（Paragraph）用法的最佳实践

使用

标签包裹文本内容，以清晰地划分段落。使用
标签在段落内进行换行。

✅ Do this	❌ Don't do this
使用 标签组织文本内容	依赖换行符或空格来分隔段落
在需要换行的地方使用	为了视觉效果而滥用 标签

HTML 文本格式化

HTML 提供多种标签用于格式化文本，例如加粗、斜体等。

HTML 语法	作用	预览效果 (描述性)
加粗文本	定义粗体文本	文本显示为粗体
重要文本	定义重要文本	文本显示为粗体 (强调语义)
斜体文本	定义斜体文本	文本显示为斜体
强调文本	定义强调文本	文本显示为斜体 (强调语义)
小号文本	定义小号文本	文本显示为较小字号
标记文本	定义标记文本	文本背景高亮显示
删除文本	定义删除文本	文本带有删除线
插入文本	定义插入文本	文本带有下划线
下标文本	定义下标文本	文本显示为下标
上标文本	定义上标文本	文本显示为上标

文本格式化（Text Formatting）用法的最佳实践

根据语义选择合适的文本格式化标签。 和 更侧重于语义强调，而 和 则更多是视觉呈现。

✅ Do this	❌ Don't do this
使用 标记重要的关键词或句子	仅为了加粗而使用 ，忽略语义化
使用 强调需要突出显示的文本	使用 代替 进行强调

HTML 列表

HTML 提供了有序列表、无序列表和描述列表三种类型的列表。

HTML 语法	作用	预览效果 (描述性)
项目 1 项目 2	定义无序列表	生成带有项目符号的列表
项目 A 项目 B	定义有序列表	生成带有数字编号的列表
术语 描述	定义描述列表	生成带有术语和描述的列表
	定义列表项	包含在 或 中
	定义描述列表中的术语	包含在 中
	定义描述列表中术语的描述	包含在 中

列表（List）用法的最佳实践

根据信息的组织方式选择合适的列表类型。使用嵌套列表可以清晰地表示层级关系。

✅ Do this	❌ Don't do this
使用 创建无需特定顺序的项目列表	使用段落和 标签模拟列表
使用 创建需要排序的项目列表	混淆无序列表和有序列表的使用场景
使用 创建术语及其解释的列表	在无序或有序列表中尝试模拟描述列表的效果

HTML 链接

标签用于创建超链接，将用户导向其他网页、文件或同一页面的不同位置。

HTML 语法	作用	预览效果 (描述性)
链接文本	创建指向 URL 的链接	"链接文本"显示为可点击的链接，跳转到 URL
链接文本	在新标签页打开链接	点击链接将在新的浏览器标签页中打开
发送邮件	创建邮件链接	点击链接将打开用户的邮件客户端并填写收件人
跳转到Section	创建内部链接	点击链接将滚动到页面中 ID 为 "section" 的元素

链接（Link）用法的最佳实践

为链接添加清晰的链接文本，并根据需要使用 target 属性来控制链接的打开方式。

✅ Do this	❌ Don't do this
使用描述性的链接文本 (例如 "了解更多")	使用 "点击这里" 等模糊的链接文本
外部链接使用 target="_blank" 在新标签页打开	所有链接都强制在新标签页打开，影响用户体验

HTML 图片

标签用于在网页中嵌入图片。

HTML 语法	作用	预览效果 (描述性)
	插入图片	在指定位置显示图片
	指定图片尺寸	按照指定的宽度和高度显示图片

图片（Image）用法的最佳实践

为 标签提供 src 属性指定图片路径，并使用 alt 属性提供图片描述，这对于可访问性和 SEO 非常重要。

✅ Do this	❌ Don't do this
为所有 标签添加 alt 属性	忽略 alt 属性，影响可访问性
使用有意义的 alt 文本描述图片内容	使用 "图片" 或空 alt 属性
尽量优化图片大小，提高网页加载速度	插入过大的图片，导致网页加载缓慢

HTML 代码

HTML 提供了 和

 标签用于在网页中显示代码。
 
  
 
   
 
    
 
     
HTML 语法
 
     
作用
 
     
预览效果 (描述性)
 
    
 
   
 
   
 
    
 
     
行内代码
 
     
表示行内代码
 
     
代码以等宽字体显示在文本中
 
    
 
    
 
     
多行代码
 
     
表示预格式化的文本
 
     
代码块以原始格式显示，保留空格和换行符
 
    
 
    
 
     
带语法的代码
 
     
显示带语法的代码
 
     
通常与 JavaScript 库一起使用以进行语法高亮
 
    
 
   
 
  
 
  
代码（Code）用法的最佳实践
 
  
使用  标签包裹行内代码，使用 
 标签包裹多行代码块。结合 JavaScript 库可以实现代码语法高亮。
 
  
 
   
 
    
 
     
✅ Do this
 
     
❌ Don't do this
 
    
 
   
 
   
 
    
 
     
使用  标签标记行内代码
 
     
直接在文本中输入代码，导致格式不易区分
 
    
 
    
 
     
使用 
 标签显示多行代码
 
     
手动使用空格和换行符来模拟代码显示
 
    
 
    
 
     
考虑使用代码高亮库提升代码的可读性
 
     
在技术文档中直接粘贴未格式化的代码
 
    
 
   
 
  
 
  
HTML 语义化标签
 
  
HTML5 引入了一些语义化标签，用于更清晰地描述文档的结构和内容，提高可访问性和 SEO。
 
  
 
   
 
    
 
     
HTML 语法
 
     
作用
 
     
示例
 
    
 
   
 
   
 
    
 
     
 
     
表示文档、页面或应用程序中独立的、完整的、可以独立分发或复用的内容
 
     
一篇博客文章、一篇新闻报道
 
    
 
    
 
     
 
     
表示与周围内容相关但不属于主要内容的辅助信息
 
     
侧边栏、广告、相关链接
 
    
 
    
 
     
 
     
表示用户可以展开或收起的内容摘要
 
     
常见问题解答、产品详情
 
    
 
    
 
     
 
     
表示 
 元素的标题
 
     
图片的描述或标题
 
    
 
    
 
     
 
     
表示独立的流内容（图像、图表等），通常带有标题
 
     
一张图片及其标题
 
    
 
    
 
     
 
     
表示文档或节的页脚
 
     
版权信息、联系方式
 
    
 
    
 
     
 
     
表示文档或节的头部
 
     
网站 Logo、导航菜单
 
    
 
    
 
     
 
     
表示文档的主要内容
 
     
网页的主要信息区域
 
    
 
    
 
     
 
     
表示页面的导航链接
 
     
网站的导航栏
 
    
 
    
 
     
 
     
表示文档中的一个 тематический 分组内容
 
     
章节、主题分组
 
    
 
    
 
     
 
     
为 
 元素定义一个可见的标题
 
     
常见问题解答的标题
 
    
 
    
 
     
 
     
表示日期或时间
 
     
发布日期、活动时间
 
    
 
   
 
  
 
  
语义化标签（Semantic Tags）用法的最佳实践
 
  
使用语义化标签来组织 HTML 结构，提高代码的可读性和可维护性，并提升网页的可访问性。
 
  
 
   
 
    
 
     
✅ Do this
 
     
❌ Don't do this
 
    
 
   
 
   
 
    
 
     
使用 
 包裹独立的文章内容
 
     
使用 
 替代所有语义化标签
 
    
 
    
 
     
使用 
 包裹导航链接
 
     
使用无序列表 
 模拟导航，缺少语义信息
 
    
 
    
 
     
使用 
 标记页脚信息
 
     
将所有内容都放在  中，缺乏结构
 
    
 
   
 
  
 
  
HTML 元素和属性
 
  
HTML 文档由一系列嵌套的元素组成。元素由开始标签、内容和结束标签构成。标签可以拥有属性，提供关于元素的额外信息。
 
  
 
   
 
    
 
     
HTML 语法
 
     
作用
 
     
示例
 
    
 
   
 
   
 
    
 
     
<标签名>内容
 
     
定义一个 HTML 元素
 
     
这是一个段落。
 
    
 
    
 
     
<标签名 属性名="属性值">内容
 
     
带有属性的 HTML 元素
 
     
链接
 
    
 
    
 
     
class="类名"
 
     
定义元素的类名 (用于 CSS 样式)
 
     
 
    
 
    
 
     
id="唯一ID"
 
     
定义元素的唯一 ID (用于 CSS 和 JavaScript)
 
     
 
    
 
    
 
     
style="CSS 样式"
 
     
定义元素的内联样式
 
     
红色文本
 
    
 
   
 
  
 
  
元素和属性（Elements and Attributes）用法的最佳实践
 
  
合理使用 HTML 元素和属性来描述网页内容。避免过度使用内联样式，推荐使用外部 CSS 文件来管理样式。
 
  
 
   
 
    
 
     
✅ Do this
 
     
❌ Don't do this
 
    
 
   
 
   
 
    
 
     
使用合适的 HTML 元素来表达内容语义
 
     
为了样式效果而滥用 
 和 
 
    
 
    
 
     
使用 class 属性为元素添加类名，方便 CSS 管理
 
     
大量使用 id 选择器，提高 CSS 优先级，不易维护
 
    
 
    
 
     
尽量避免使用内联样式，保持 HTML 结构的清晰
 
     
将所有样式都写在 style 属性中，导致 HTML 臃肿
 
    
 
   
 
  
 
  
就是这些基本的标签结构，却能让人优雅地组织你的网页内容，专注于信息的呈现而不是纠结于如何显示，达到“心中有页，落笔成型”的境界。
 
  
 
  
好的，这次的内容就到这里啦
 
  
感谢你的阅读，欢迎点赞、关注、转发
 
  
我们，下次再见！