HTML(HyperText Markup Language)是构成网页内容的基础。它使用一系列的标签来描述网页的结构,包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。
在线体验一下 CodePen (在线 HTML 编辑器)。
千万不要被「超文本」、「标记语言」吓到,HTML 的语法非常直观,常用的标签结构并不复杂,用于构建基础网页已经足够,稍微了解一下就能上手。
就是这些基本的标签结构,却能让人优雅地组织你的网页内容,专注于信息的呈现而不是纠结于如何显示,达到“心中有页,落笔成型”的境界。
每个 HTML 文档都需要一个基本的结构,声明文档类型,并包含 、
和
等核心标签。
HTML 语法 | 作用 | 示例 |
---|---|---|
|
声明文档类型为 HTML5 | |
|
HTML 文档的根元素 | |
|
包含文档的元数据,如标题、字符编码等 | |
|
定义文档的标题,显示在浏览器标签上 |
|
|
定义字符编码为 UTF-8,支持多种字符集 | |
|
包含网页可见内容的主体部分 | |
到
|
定义不同级别的标题 | ,
|
|
定义段落 |
|
虽然 是 HTML5 的标准声明,但以前的 HTML 版本有不同的doctype声明方式。现在推荐使用 HTML5 的简洁声明。
一个标准的 HTML 文档应该以 开头,并包含
、
和
标签,确保语义清晰和结构完整。
✅ Do this | ❌ Don't do this |
---|---|
使用 声明 HTML5 |
忘记添加 声明 |
包含 和 标签 |
缺少 或 标签 |
HTML 提供了六级标题标签 到
,用于表示不同级别的标题内容。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
|
定义一级标题 | 页面中最主要的标题 |
|
定义二级标题 | 次要的标题 |
|
定义三级标题 | 更细分的标题 |
|
定义四级标题 | |
|
定义五级标题 | |
|
定义六级标题 |
虽然可以使用 CSS 来改变标题的显示样式,但应该根据内容的逻辑结构来选择合适的标题标签,而不是仅仅为了改变字体大小而随意使用。
按照内容的逻辑重要性使用标题标签, 用于最重要的标题,依次递减。
✅ Do this | ❌ Don't do this |
---|---|
使用 作为页面主标题 |
为了加大字体而使用 ,忽略语义化 |
按照标题层级嵌套使用 (h2 在 h1 下) |
跳跃使用标题标签 (例如 h1 后直接使用 h4 ) |
标签用于定义段落,将文本内容组织成独立的段落块。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
|
定义一个段落 | 文本会分段显示 |
|
使用 换行 |
在段落内换行显示 |
使用 标签包裹文本内容,以清晰地划分段落。使用
标签在段落内进行换行。
✅ Do this | ❌ Don't do this |
---|---|
使用 标签组织文本内容 |
依赖换行符或空格来分隔段落 |
在需要换行的地方使用
|
为了视觉效果而滥用 标签 |
HTML 提供多种标签用于格式化文本,例如加粗、斜体等。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
加粗文本 |
定义粗体文本 | 文本显示为粗体 |
重要文本 |
定义重要文本 | 文本显示为粗体 (强调语义) |
斜体文本 |
定义斜体文本 | 文本显示为斜体 |
强调文本 |
定义强调文本 | 文本显示为斜体 (强调语义) |
小号文本 |
定义小号文本 | 文本显示为较小字号 |
标记文本 |
定义标记文本 | 文本背景高亮显示 |
|
定义删除文本 | 文本带有删除线 |
插入文本 |
定义插入文本 | 文本带有下划线 |
下标文本 |
定义下标文本 | 文本显示为下标 |
上标文本 |
定义上标文本 | 文本显示为上标 |
根据语义选择合适的文本格式化标签。 和
更侧重于语义强调,而
和
则更多是视觉呈现。
✅ Do this | ❌ Don't do this |
---|---|
使用 标记重要的关键词或句子 |
仅为了加粗而使用 ,忽略语义化 |
使用 强调需要突出显示的文本 |
使用 代替 进行强调 |
HTML 提供了有序列表、无序列表和描述列表三种类型的列表。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
|
定义无序列表 | 生成带有项目符号的列表 |
|
定义有序列表 | 生成带有数字编号的列表 |
|
定义描述列表 | 生成带有术语和描述的列表 |
|
定义列表项 | 包含在 或 中 |
|
定义描述列表中的术语 | 包含在 中 |
|
定义描述列表中术语的描述 | 包含在 中 |
根据信息的组织方式选择合适的列表类型。使用嵌套列表可以清晰地表示层级关系。
✅ Do this | ❌ Don't do this |
---|---|
使用 创建无需特定顺序的项目列表 |
使用段落和 标签模拟列表 |
使用 创建需要排序的项目列表 |
混淆无序列表和有序列表的使用场景 |
使用 创建术语及其解释的列表 |
在无序或有序列表中尝试模拟描述列表的效果 |
标签用于创建超链接,将用户导向其他网页、文件或同一页面的不同位置。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
链接文本 |
创建指向 URL 的链接 | "链接文本"显示为可点击的链接,跳转到 URL |
链接文本 |
在新标签页打开链接 | 点击链接将在新的浏览器标签页中打开 |
发送邮件 |
创建邮件链接 | 点击链接将打开用户的邮件客户端并填写收件人 |
跳转到Section |
创建内部链接 | 点击链接将滚动到页面中 ID 为 "section" 的元素 |
为链接添加清晰的链接文本,并根据需要使用 target
属性来控制链接的打开方式。
✅ Do this | ❌ Don't do this |
---|---|
使用描述性的链接文本 (例如 "了解更多") | 使用 "点击这里" 等模糊的链接文本 |
外部链接使用 target="_blank" 在新标签页打开 |
所有链接都强制在新标签页打开,影响用户体验 |
标签用于在网页中嵌入图片。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
|
插入图片 | 在指定位置显示图片 |
|
指定图片尺寸 | 按照指定的宽度和高度显示图片 |
为
标签提供 src
属性指定图片路径,并使用 alt
属性提供图片描述,这对于可访问性和 SEO 非常重要。
✅ Do this | ❌ Don't do this |
---|---|
为所有 标签添加 alt 属性 |
忽略 alt 属性,影响可访问性 |
使用有意义的 alt 文本描述图片内容 |
使用 "图片" 或空 alt 属性 |
尽量优化图片大小,提高网页加载速度 | 插入过大的图片,导致网页加载缓慢 |
HTML 提供了 和
标签用于在网页中显示代码。
HTML 语法 | 作用 | 预览效果 (描述性) |
---|---|---|
|
表示行内代码 | 代码以等宽字体显示在文本中 |
|
表示预格式化的文本 | 代码块以原始格式显示,保留空格和换行符 |
|
显示带语法的代码 | 通常与 JavaScript 库一起使用以进行语法高亮 |
使用 标签包裹行内代码,使用
标签包裹多行代码块。结合 JavaScript 库可以实现代码语法高亮。
✅ Do this | ❌ Don't do this |
---|---|
使用
|
直接在文本中输入代码,导致格式不易区分 |
使用 标签显示多行代码 |
手动使用空格和换行符来模拟代码显示 |
考虑使用代码高亮库提升代码的可读性 | 在技术文档中直接粘贴未格式化的代码 |
HTML5 引入了一些语义化标签,用于更清晰地描述文档的结构和内容,提高可访问性和 SEO。
HTML 语法 | 作用 | 示例 |
---|---|---|
|
表示文档、页面或应用程序中独立的、完整的、可以独立分发或复用的内容 | 一篇博客文章、一篇新闻报道 |
|
表示与周围内容相关但不属于主要内容的辅助信息 | 侧边栏、广告、相关链接 |
|
表示用户可以展开或收起的内容摘要 | 常见问题解答、产品详情 |
|
表示 元素的标题 |
图片的描述或标题 |
|
表示独立的流内容(图像、图表等),通常带有标题 | 一张图片及其标题 |
|
表示文档或节的页脚 | 版权信息、联系方式 |
|
表示文档或节的头部 | 网站 Logo、导航菜单 |
|
表示文档的主要内容 | 网页的主要信息区域 |
|
表示页面的导航链接 | 网站的导航栏 |
|
表示文档中的一个 тематический 分组内容 | 章节、主题分组 |
|
为 元素定义一个可见的标题 |
常见问题解答的标题 |
|
表示日期或时间 | 发布日期、活动时间 |
使用语义化标签来组织 HTML 结构,提高代码的可读性和可维护性,并提升网页的可访问性。
✅ Do this | ❌ Don't do this |
---|---|
使用 包裹独立的文章内容 |
使用
|
使用 包裹导航链接 |
使用无序列表 模拟导航,缺少语义信息 |
使用 标记页脚信息 |
将所有内容都放在 中,缺乏结构 |
HTML 文档由一系列嵌套的元素组成。元素由开始标签、内容和结束标签构成。标签可以拥有属性,提供关于元素的额外信息。
HTML 语法 | 作用 | 示例 |
---|---|---|
<标签名>内容标签名> |
定义一个 HTML 元素 |
|
<标签名 属性名="属性值">内容标签名> |
带有属性的 HTML 元素 | 链接 |
class="类名" |
定义元素的类名 (用于 CSS 样式) |
|
id="唯一ID" |
定义元素的唯一 ID (用于 CSS 和 JavaScript) |
|
style="CSS 样式" |
定义元素的内联样式 |
|
合理使用 HTML 元素和属性来描述网页内容。避免过度使用内联样式,推荐使用外部 CSS 文件来管理样式。
✅ Do this | ❌ Don't do this |
---|---|
使用合适的 HTML 元素来表达内容语义 | 为了样式效果而滥用
|
使用 class 属性为元素添加类名,方便 CSS 管理 |
大量使用 id 选择器,提高 CSS 优先级,不易维护 |
尽量避免使用内联样式,保持 HTML 结构的清晰 | 将所有样式都写在 style 属性中,导致 HTML 臃肿 |
就是这些基本的标签结构,却能让人优雅地组织你的网页内容,专注于信息的呈现而不是纠结于如何显示,达到“心中有页,落笔成型”的境界。
好的,这次的内容就到这里啦
感谢你的阅读,欢迎点赞、关注、转发
我们,下次再见!