前端三件套简单学习:HTML篇1

前端三件套简单学习:HTML篇1

前言

​ 笔者最近打算展开研究一下前后端作为自己的兴趣爱好技术栈,这里笔者打算先打牢自己三件套的基本工,为后面自己出于兴趣进行学习其他的Web框架打下坚实的基础。

从HTML文件的结构说起

​ HTML文件是骨架,他直接决定了我们会在界面上看到什么。一个完整的 HTML 文件通常包含以下几个主要部分:

  1. 文档类型声明<!DOCTYPE html>这个在我们传递HTML文件的时候,我们会看到这个文件是一个标准的HTML文件,方便我们后续展开对HTML文件的解析
  2. <html> 根元素 ,通常带有 lang 属性声明文档语言,这个标签尝试声明这个HTML文件的其他属性问题,比如说当我们要求翻译的时候,我们察觉到这个文档不是中文的,就是依靠lang属性完成的
  3. <head> 元素,用于放置元数据(metadata)
  4. <body> 元素,包含所有可见内容(文本、图像、链接等)

这些标签和结构保证浏览器能够正确解析和呈现页面内容。


文档类型声明 <!DOCTYPE html>

​ 一般而言,这是声明确认这是一个 HTML5 文档,有助于浏览器启用标准模式(避免"怪异模式")

<html> 元素

是整个 HTML 文档的根。所有内容(除 <!DOCTYPE> 外)都应嵌套在它内部。通常使用 lang 属性指定页面所用语言,有利于辅助工具、搜索引擎与翻译服务识别

<head> 元素

此部分虽然不直接呈现于页面上,但极为重要,包含:

  • 字符编码声明 (如 <meta charset="utf-8">),确保文档中的字符(尤其是标题)能够正确显示
  • 文档标题 :通过 <title> 标签定义,显示在浏览器标签页、搜索结果中等
  • 其他元数据:如 viewport 设置、描述、外部样式表链接、图标、关键词等

2.4 <body> 元素

包含网页所有可视内容:段落、标题、图片、链接、表格、表单等,我们一般的工作就集中在这里完成。


示例结构

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
</body>
</html>
  • 文档声明使页面声明为 HTML5。
  • <head> 中包含编码、视口设置、标题。
  • <body> 部分为页面可见内容。

Tips:笔者使用的VSCode写前后端,您可以安装LiveServer插件来完成这个HTML页面通过开设服务器的方式完成实时查看,这有助于我们的调试


HTML 标签概览:结构与语义分类

HTML 标签是 HTML 文档的基本构建块,用于定义内容和结构。常见标签按用途可以分为以下几大类:

基本结构标签(Basic Structure)

这些标签构成 HTML 文档的骨架:

  • <!DOCTYPE>:声明文档类型(如 HTML5),确保浏览器使用标准模式渲染
  • <html>:根元素,所有内容应嵌套于此
  • <head>:包含文档元数据,如编码、标题、链接引用等
  • <title>:定义页面标题,在浏览器标签页及搜索结果中显示
  • <body>:包含所有可见内容,如文本、图像、链接等

2. 文本与格式化标签(Text & Formatting)

用于控制文本内容与样式:

  • 标题标签:<h1><h6>(依次递减为副标题)
  • 段落标签:<p>,用于分段文本
  • 强调与强调级别:<strong>(语义强调,通常加粗)、<em>(文本重点,通常斜体)
  • 代码块:<code><pre>(保留空格与换行)
  • 行内元素:<span>(用于行内内容加样式),<div>(块级容器)
  • 其他:<br>(换行)、<hr>(主题分隔线)

3. 列表标签(Lists)

整理项目或定义:

  • 无序列表:<ul> 包含 <li> 列表项
  • 有序列表:<ol> 包含 <li>
  • 描述列表:<dl> 包含 <dt>(术语)和 <dd>(描述)

用于创建跳转与引用:

  • <a>:锚点,定义超链接,需使用 href 属性
  • <link>:用于关联外部资源(如 CSS 样式表)
  • <nav>:表示导航链接的语义区域

5. 媒体标签(Media)

嵌入音视频与图像:

  • 图像:<img>,可添加 src, alt 等属性
  • 媒体容器:<audio><video>,配合 <source><track> 标签使用
  • 多媒体与图形:<canvas>(绘图)、<svg>(矢量图形)

6. 表格标签(Tables)

用于展示二维数据:

  • <table>:表格容器;
  • <thead><tbody><tfoot>:分别定义表头、主体、表尾;
  • <tr> 表格行、<th> 表头单元格、<td> 表体单元格;
  • <caption> 表格标题、<colgroup><col> 设置列属性

7.表单与交互输入(Forms & Inputs)

用于用户沟通和交互:

  • 容器:<form>
  • 基础控件:<input><textarea><button>
  • 选项:<select><option><optgroup>
  • 辅助标签:<label><fieldset><legend><datalist><output>

8. 脚本与嵌入标签(Scripting & Embeds)

用于扩展功能与嵌入内容:

  • <script>:加载或嵌入 JavaScript;
  • <noscript>:浏览器不支持脚本时显示内容;
  • <object><embed><param>:嵌入外部内容(如插件)

HTML的Header标签

<h1> ~ <h6> 标签是 HTML 标题标签(Heading Elements)

用于表示文档或内容中的标题,具有层级关系:

  • <h1> 表示最高级标题(最重要)。
  • <h6> 表示最低级标题(最不重要)。

​ 它们既影响页面的视觉层次(通常浏览器会自动加粗,并逐级缩小字号),也具有 语义价值,帮助搜索引擎和辅助工具理解内容结构。

​ 使用上如下,您可以复制到自己的HTML文件

html 复制代码
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

在浏览器中,<h1> 会显示得最大,<h6> 最小。


特点

  1. 语义性强:不仅仅是字体大小不同,还表示结构层级。
  2. SEO 影响 :搜索引擎会重点抓取 <h1><h2>,因为它们通常代表页面主题和主要内容。
  3. 可访问性:屏幕阅读器会根据标题层级生成目录,方便用户快速跳转。

使用规范与最佳实践

  • 一个页面 通常只使用一个 <h1>,用来表示网页的核心标题(如文章标题)。
  • <h2> ~ <h6> 可以根据需要多次使用,用来表示小节、副标题。
  • 标题层级应 逐级嵌套 ,不要跳跃式使用(例如从 <h1> 直接到 <h4>)。
  • 不要用标题标签来单纯改变字体大小,如果只是样式需求,应使用 CSS

示例:文章结构

html 复制代码
<h1>我的博客文章标题</h1>
<p>文章简介...</p>

<h2>第一章:HTML 基础</h2>
<p>介绍 HTML 的基本结构...</p>

<h3>1.1 文档声明</h3>
<p>说明 <!DOCTYPE html> 的作用...</p>

<h3>1.2 head 部分</h3>
<p>介绍 meta、title 等标签...</p>

<h2>第二章:HTML 标签</h2>
<p>详细说明常用标签...</p>

<p><b><i><s><u> 五个标签

​ 我们下面进一步说明一下Paragraph的标签,这个标签包裹的就是一个段落,后面的四个标签依次对包裹的文字进行修饰

<p> --- 段落(Paragraph)

定义与作用

  • 表示文档中的一个段落,是一个块级(block-level)元素,用来承载"段落式"的文本或内联内容。

特点

  • 会在前后产生换行(默认为块级布局)。
  • 只能包含"短语内容"(phrasing content,例如文本、<a><strong><em><span> 等),不应直接包含其他块级元素(如另一个 <p><div><section> 等)。
  • 当在源码中遇到另一个块级元素时,浏览器会自动关闭当前未闭合的 <p>

示例

html 复制代码
<p>这是一个段落。可以包含 <a href="#">链接</a>、<strong>强调</strong> 等行内元素。</p>

建议

  • 用于组织文本内容,语义化比用 <div> 更好(便于可访问性与 SEO)。
  • 控制间距、对齐等视觉效果应使用 CSS(margintext-align 等)。

<b> --- 视觉加粗(Bold, non-semantic)

定义与作用

  • 表示样式性加重(通常表现为加粗),但在语义上并不表示强调或重要性。HTML5 将其定义为"无语义的括起文本,用于视觉突出但不传递强调含义"的标签(例如关键字、术语、产品名等的视觉突出)。

浏览器默认

  • 文本加粗(font-weight: bold 的效果)。

可访问性 / 语义建议

  • 如果你想表达"强调/重要"(即对内容有语义意义),应使用 <strong>(语义强调,会被屏幕阅读器识别)。
  • 若只是为了视觉样式,使用 <b> 合理;但更推荐用 CSS(font-weight)以分离结构与表现。

示例

html 复制代码
<p>价格: <b>$9.99</b></p>
<!-- 或用 CSS -->
<p>价格: <span class="price">$9.99</span></p>

<i> --- 斜体(Italic, non-semantic)

定义与作用

  • 表示样式性斜体 ,HTML5 将 <i> 用于标注"语气、术语、书名、外来词、技术用语或类似需要区分的文本",但本身不代表强调(非语义强调)。

浏览器默认

  • 文本斜体(font-style: italic 的效果)。

可访问性 / 语义建议

  • 如果需要语义强调(强调发声或重要性),应使用 <em>,因为 <em> 会被屏幕阅读器识别为强调。
  • 如果只是视觉效果或特定类型的文本(如术语、外来词),使用 <i> 合适;否则优先用 CSS。

示例

html 复制代码
<p>书名:<i>小王子</i></p>
<p>外来词:这是个 <i>résumé</i></p>

<s> --- 删除线 / 不再准确的内容(Strikethrough)

定义与作用

  • 通常表示"已不再准确或已被删除/废弃的文本",在视觉上呈现为删除线(strike-through)。HTML5 的语义是"内容不再正确或相关"。

<del> 的关系

  • 如果你要表达"历史上被删除"或"编辑上移除的文本"并希望提供变更记录(可带时间信息),优先使用 <del>(可以加 datetime 属性)。
  • <s> 更适用于表示"视觉上的删除/不再适用",但不一定表示有编辑历史。

示例

html 复制代码
<p>原价:<s>$19.99</s> 现价:$9.99</p>

<!-- 如果确实是编辑删除且要记录时间 -->
<del datetime="2025-09-01">这句已删除的文字</del>

建议

  • 对于表明"已废弃/不再适用"的内容,<s> 可以用;但若涉及版本/编辑历史,用 <del> 更语义化。

<u> --- 下划线(Underline)

定义与作用

  • 表示文本带下划线的样式。HTML5 重新定义 <u>:用于表示有"非语义的文本注解"或"拼写/语义需要下划线标识"的文本(不过常见用法仍是下划线样式)。

浏览器默认

  • 文本带下划线(text-decoration: underline)。

可访问性 / 语义建议

  • 避免用 <u> 仅仅为了样式(下划线通常与链接混淆),推荐使用 CSS(text-decoration)或更语义化元素(如表示"插入"的 <ins>)。
  • 对于需要表示"被插入的文本"(语义上),使用 <ins>(可带 datetime)更合适。

示例

html 复制代码
<p><u>重要标注</u></p>

<!-- 更推荐用 CSS -->
<p><span class="underline">重要标注</span></p>

小例子

html 复制代码
<article>
  <h1>产品更新</h1>
  <p>我们的新型号售价为 <b>$299</b>,并且包含改进的电池技术(见下文的 <i>技术说明</i>)。</p>

  <p>特别活动:原价 <s>$399</s>,现价 <b>$299</b>。</p>

  <p>注:<u>产品颜色仅限黑色和银色</u>(仅视觉标注)。</p>

  <p>注意:如果你想强调"重要性",请使用 <strong>或</strong> <em>而不是</em> <b>/<i>。</p>
</article>

一句话说完

  • <p>:用来分段,块级语义标签。
  • <b> / <i>:主要用于视觉效果或特定类型文本(非语义强调)。屏幕阅读器通常不会把它们当作"强调"。
  • 想表达"强调/重要"请用 <strong>(强调重要)或 <em>(语气强调)。
  • <s>:表示文本不再准确或已废弃;若需要记录删除时间或编辑历史,使用 <del>
  • <u>:表示下划线样式或特定非语义注解;若只是样式,优先用 CSS;若是"插入"含义,请用 <ins>

好------下面把 HTML 的 <ul><ol><li> 三个标签讲清楚:定义、用法、属性、嵌套、样式与无障碍(accessibility)注意点,并给出实战示例与常见误区。

列表标签

定义与语义

  • <ul>(unordered list)------无序列表 ,用于表示项之间没有先后顺序或顺序不重要的集合。默认显示圆点(bullet)。
  • <ol>(ordered list)------有序列表 ,用于表示有序序列(步骤、排名、顺序说明等)。默认显示数字(1., 2., 3.)。
  • <li>(list item)------列表项,必须作为 <ul><ol> 的直接子元素,用来表示单个条目。

语义很重要:浏览器、搜索引擎和辅助技术(屏幕阅读器)会把这些元素当作"列表"来处理,所以用于表示集合/步骤/多项条目 时要用列表,而不要用一堆 <div> 或换行符模拟列表。

基本语法

html 复制代码
<!-- 无序列表示例 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

<!-- 有序列表示例 -->
<ol>
  <li>第一步:安装依赖</li>
  <li>第二步:运行脚本</li>
  <li>第三步:检查输出</li>
</ol>

<ol> 的常用属性(常见与实用)

  • start:设置起始数字(例如 start="3" 从 3 开始编号)。
  • reversed:布尔属性,表示倒序(例如 5,4,3...)。
  • 在单个 <li> 上可以使用 value(数字)来强制该项的编号(只在 <ol> 中有意义)。

示例:

html 复制代码
<ol start="3">
  <li>第三项(显示为 3)</li>
  <li value="10">本项显示为 10</li>
  <li>下一项显示为 11</li>
</ol>

<ol reversed>
  <li>最后一步</li>
  <li>倒数第二步</li>
</ol>

小贴士:尽量用 start / value 等属性仅为必要情形(如从特定编号继续);常规样式变化用 CSS 来做。

嵌套列表(多级列表)

列表可以嵌套,常用于目录、子任务、分组条目。嵌套时,子列表放在父 <li> 内部:

html 复制代码
<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>后端</li>
</ul>

浏览器会对不同层级使用不同的默认样式(例如第一层圆点,第二层圆圈或方块),但更好的做法是使用 CSS 明确控制。

无障碍(Accessibility)与语义建议

  • 保持语义化:用 <ul>/<ol> 表示真正的列表。屏幕阅读器会读出"list with N items",便于盲人理解页面结构。

  • 在可交互的导航或菜单中,配合合适的容器(如 <nav>)和 ARIA(当需要自定义行为时):

    html 复制代码
    <nav>
      <ul>
        <li><a href="/home">首页</a></li>
        ...
      </ul>
    </nav>
  • 避免把 <ul> 当作布局工具(不要把它用于纯视觉的网格排布而忽略语义)。

  • 如果用 CSS 隐藏列表项或改变顺序,注意仍保持 DOM 中的语义顺序或提供屏幕阅读器可用的替代信息。

常见场景建议

  • 步骤、流程、说明顺序:用 <ol>(有先后)。
  • 项目集合、要点、特征列表:用 <ul>(无序)。
  • 菜单、导航(结构化链接):通常用 <ul> 放在 <nav> 中。
  • 表格式数据不要用列表表示,用 <table>

常见误区与避免

  • 不要<ul>/<ol> 包裹非 <li> 子元素(应为直接子元素)。
  • 不要只为外观使用列表:如果只是想缩进或加点样式,应考虑用语义更合适的标签配合 CSS。
  • 不要 滥用 start/value 来"造序号",除非确实需要让浏览器输出特定编号;很多视觉编号问题用 CSS 计数器(CSS counters)更灵活且可控。

一句话总结

  • <ul>:无序列表(点符号),用于无先后关系的项目集合。
  • <ol>:有序列表(编号),用于有先后顺序的步骤或序列。支持 startreversedli value 等属性以控制编号。
  • <li>:列表项,必须放在 <ul><ol> 内。
  • 用 CSS 控制展示样式;保持语义化以利于可访问性与 SEO。

HTML 表格(<table><tr> 等)标签

表格的基本概念与用途

HTML 表格用于展示二维表格数据(行×列)------例如财务报表、日程、数据列表等。不要用表格做页面布局(那是历史遗留做法),表格应主要用于表现结构化数据。


核心元素与作用

  • <table>:表格容器(整个表格)。
  • <caption>:表格标题(可选,但对可访问性非常重要)。
  • <thead>:表头区域(通常包含列标题)。
  • <tbody>:表体区域(数据行)。
  • <tfoot>:表尾区域(汇总行等,可放在源码末尾或表头之前以便打印友好)。
  • <tr>:表格行(table row)。
  • <th>:表头单元格(table header cell),通常用于列标题或行标题,语义上表示"表头"。
  • <td>:表体单元格(table data cell)。
  • <colgroup> / <col>:定义列组或单列属性(例如宽度、样式),便于统一控制列的样式或宽度。

常用属性(语义与布局)

  • rowspan(在 <td> / <th> 上):跨越多行。例如 rowspan="2"
  • colspan:跨越多列。例如 colspan="3"
  • scope(在 <th> 上):辅助说明该 <th> 的作用:scope="col"(列标题)、scope="row"(行标题)、scope="colgroup"scope="rowgroup"。对屏幕阅读器友好。
  • headers(在 <td> 上):可与带有 id<th> 关联(更精确的无障碍映射,适用于复杂表格)。
  • <col> 支持 span 属性来合并列组设置。
  • 全局属性也可用(如 classiddata-* 等)。

无障碍(Accessibility)要点

表格常被辅助技术读取,下面是关键注意事项:

  1. 总要提供 <caption>(简短描述表格内容)。

  2. 为表头使用 <th> ,并加上 scope(最简单且强烈推荐)。例如:

    html 复制代码
    <th scope="col">姓名</th>
    <th scope="row">合计</th>
  3. 对于复杂表格(多级表头、交叉表),使用 id<th> 上并在相应 <td> 上用 headers="id1 id2" 显式关联。

  4. 避免用表格做布局;如果非数据表格而仅为布局(不含语义数据),考虑用 role="presentation" 或用 CSS 布局替代。

  5. 确保足够的键盘导航与对比度,若表格可排序、可展开,提供 ARIA 提示(例如 aria-sort 等)和清晰的可视焦点样式。


示例一:简单表格
html 复制代码
<table>
  <caption>2025 年第 3 季度销售</caption>
  <thead>
    <tr>
      <th scope="col">产品</th>
      <th scope="col">数量</th>
      <th scope="col">金额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>产品 A</td>
      <td>120</td>
      <td>¥12,000</td>
    </tr>
    <tr>
      <td>产品 B</td>
      <td>80</td>
      <td>¥8,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>200</td>
      <td>¥20,000</td>
    </tr>
  </tfoot>
</table>

示例二:跨行跨列(rowspan / colspan
html 复制代码
<table>
  <caption>班级考试成绩</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">语文</th>
      <th scope="col">数学</th>
      <th scope="col">英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">张三</td>
      <td>85</td>
      <td>90</td>
      <td>88</td>
    </tr>
    <tr>
      <td colspan="3">备注:该学生数学提高明显</td>
    </tr>
  </tbody>
</table>

注意:使用 rowspan / colspan 时要确保每一行的单元格总数在视觉和语义上都对齐------不正确的合并会导致表格结构混乱,影响屏幕阅读器和布局。

相关推荐
很多石头4 小时前
前端img与background-image渲染图片对H5页面性能的影响
前端·css
yenggd4 小时前
3种XSS攻击简单案例
前端·xss
盖头盖4 小时前
【xss基本介绍】
前端·xss
我命由我123454 小时前
Photoshop - Photoshop 创建图层蒙版
运维·学习·ui·课程设计·设计·ps·美工
一枚前端小能手4 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖4 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
kebeiovo4 小时前
项目必备流程图,类图,E-R图实例速通
开发语言·r语言·流程图
软件开发-NETKF88884 小时前
JSP到Tomcat特详细教程
java·开发语言·tomcat·jsp·项目运行
柯南二号4 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js