HTML 01 【基础语法学习】

HTML 01 【基础语法学习】 - 详解

news/2025/11/11 9:51:42/文章来源:https://www.cnblogs.com/gccbuaa/p/19209110

并不规范的学习笔记，只是供边学边记录。

1 参考手册

HTML标签参考手册https://www.runoob.com/tags/html-reference.html

href

在HTML中，href是超链接（Hypertext Reference）的缩写。它的读音可以分为两个部分：h和ref。

2 分割符

hr 元素可用于分隔内容。

这是一个段落。

这是一个段落。

这是一个段落。

3 HTML 提示 - 如何查看源代码

“你是否看过一些网页然后惊叹它是如何实现的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。”

4 文本格式化

HTML文本格式化https://www.runoob.com/html/html-formatting.html

5 HTML 链接

HTML 链接（Anchor）是网页之间跳转的核心部分。

HTML 使用链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

HTML 链接通过 <a> 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。

基本语法

链接文本

<a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。

以下实例演示来如何在 HTML 文档中创建链接：

实例

本文本 是一个指向本网站中的一个页面的链接。
本文本 是一个指向万维网上的页面的链接。

6 HTML 链接属性

HTML链接属性https://www.runoob.com/html/html-links.html

"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接

文本链接：最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：

访问示例网站

图像链接：您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：

锚点链接：除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

跳转到第二部分

下载链接：如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：

下载文档

7 HTML 表格

HTML 表格 | 菜鸟教程https://www.runoob.com/html/html-tables.html

8 我错误百出的第一个HTML

BIG TXT

hello
hi

printf ( " hello world ")
Bing

无法显示表格。
你提供的 HTML 代码中，body内容无法正常显示，核心原因是HTML 结构存在根本性错误，导致浏览器解析时无法识别正确的文档结构，进而忽略或错误渲染body内的内容。以下是具体问题分析和修复方案：
一、核心错误：文档结构混乱（最关键原因）
HTML 有严格的文档结构规范，正确的基本结构应为：<!DOCTYPE html>（文档声明）→ <html>（根标签）→ 子标签<head>（头部信息）和<body>（主体内容）。
而你的代码存在 2 个致命结构问题：
body标签被错误嵌套在head标签内你的代码开头是 <head>...</head>，但在<head>闭合前，直接写了<body>标签 —— 浏览器解析时会认为<body>是<head>的子元素，而<head>标签的作用是存放元数据（如标题、样式、脚本），不会渲染其内部的<body>内容，导致body被 “隐藏”。
缺少根标签<html><head>和<body>必须是根标签<html>的直接子元素，缺少<html>会让浏览器无法识别文档的 “主体区域”，进一步破坏渲染逻辑。
二、其他次要问题（影响显示细节）
除了核心结构错误，代码中还有 2 个细节问题，即使修复结构后也可能导致显示异常：
<i>标签未闭合标题中的 <i>BIG TXT<i> 第二个<i>应为闭合标签 </i>，未闭合会导致后续文本（如hello、hi）都被错误设置为斜体，影响样式。
表格无内容且结构顺序不当表格的<colgroup>标签应放在<tbody>之前（规范要求列定义在内容之前），且<td>内无内容，会显示为 “空表格边框”（若后续添加内容需调整顺序）。
三、修复后的完整代码（可正常显示）

页面标题 BIG TXT hello hi printf ( " hello world ") Bing 行1列1 行1列2 行1列3 行2列1 行2列2 行2列3

四、修复后效果说明
可见内容：hello、hi文本、水平分隔线、代码片段、Bing 超链接、猫咪图片、带内容的表格都会正常显示。
样式细节：图片会右对齐（float:inline-end），表格显示边框（border="1"，方便查看，可删除），超链接点击后在新窗口打开（target="_blank"）。
总结
HTML 显示异常的排查优先级：先检查文档结构（是否有<html>、<head>和<body>的正确嵌套）→ 再检查标签是否闭合 → 最后检查样式 / 内容问题。只要遵循 “根标签→头部→主体” 的层级规范，大部分显示问题都能解决。
9 body就是页面，head就是小窗口？
你的理解很形象，抓住了 <head> 和 <body> 最核心的 “功能分工” 差异！不过为了更准确地对应 HTML 规范，我们可以把这个比喻再细化一点，避免后续写代码时混淆：
更精准的比喻：把整个网页看作 “一份报纸”
HTML 标签对应报纸的部分核心作用（为什么这么比喻）能否被用户直接看到？
<head> 报纸的 “中缝 / 版权页” 存放 “幕后信息”：比如报纸的报名（对应网页标题，显示在浏览器标签栏）、排版规则（CSS 样式）、引用的工具（JS 脚本）、作者信息等 —— 这些内容是为了让报纸（网页）能正常呈现，但读者不会直接在 “正文区域” 看到它们。 ❌ 不能（仅作用于幕后，不参与页面渲染）
<body> 报纸的 “正文 + 图片 + 广告区” 存放所有 “用户能直接看到、摸到的内容”：比如文章文字（对应网页的 <p>）、照片（对应 <img>）、按钮（对应 <button>）、链接（对应 <a>）—— 用户打开网页后看到的所有内容，都在 <body> 里。 ✅ 能（网页的 “可视化区域”）
补充：为什么你的原代码里 <body> 没显示？
结合这个比喻就能更清楚：你原代码把 <body> 写在了 <head> 里面（相当于把 “报纸正文” 塞到了 “版权页” 里），而浏览器的规则是 “只渲染 <body> 里的内容，忽略 <head> 里的可视化内容”—— 所以哪怕 <body> 里有文字、图片，也会因为 “放错了地方” 而被浏览器 “藏起来”。
----------------------------------------------
只要记住：所有想让用户看到的内容，都必须放进 <body>；所有 “幕后配置信息”，都放进 <head>，网页就能正常显示了。
10 HTML 区块
HTML 区块 | 菜鸟教程https://www.runoob.com/html/html-blocks.html
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
11 为什么要有id？

菜鸟教程(runoob.com) 主要的网页标题菜单 HTML CSS JavaScript 内容在这里版权 © runoob.com

在你提供的这段 HTML 代码中，id 看似只是给 <div> 加了个 “名字”（比如 header、menu），但实际上是 HTML 中核心的 “元素标识工具”，它的作用贯穿 “代码可读性”“样式控制”“交互逻辑” 三个关键场景，具体原因可以拆解为以下 4 点：
1. 最基础：给元素 “起名字”，让代码更易读（对开发者友好）
你这段代码是一个简单的网页布局（标题栏 + 菜单 + 内容区 + 版权栏），如果没有 id，代码会变成：

... ... ...

此时开发者需要逐行看 style 或内容才能判断每个 <div> 的作用，效率很低。
而加上 id="header"「标题栏」、id="menu"「菜单」、id="footer"「版权栏」后，光看 id 就能立刻定位元素的功能—— 哪怕代码量变大（比如几百行 HTML），也能快速找到 “我要改的标题栏在哪”“菜单的容器是哪个”，极大降低了代码的维护成本。
2. 核心作用 1：精准控制样式（配合 CSS）
你当前的代码用了 “行内样式”（style="..."），但实际开发中，我们更习惯把样式写在单独的 CSS 里（或 <head> 的 <style> 标签中）。此时 id 就成了 “精准定位元素” 的钥匙。
比如想单独修改 “菜单” 的背景色，用 id 就能直接定位到它，不会影响其他元素：

菜单... 版权...

如果没有 id，想单独改某个 <div> 的样式会非常麻烦（可能需要写复杂的选择器，还容易误改其他元素）。
3. 核心作用 2：实现交互逻辑（配合 JavaScript）
如果想给网页加 “动态效果”（比如点击菜单显示隐藏内容、点击标题栏跳转），就必须用 JavaScript—— 而 JavaScript 要操作某个元素，前提是 “找到它”，id 就是最快捷的 “查找方式”。
比如想实现 “点击版权栏弹出提示”，用 id 就能轻松做到：

<script>// 通过id快速找到footer元素const footer = document.getElementById("footer");// 给footer加点击事件footer.onclick = function() {alert("这是菜鸟教程的版权信息～");}; </script>版权 © runoob.com

如果没有 id，JavaScript 要找到目标元素会很繁琐（比如需要通过 “标签名 + 层级” 查找，代码变复杂且容易出错）。
4. 特殊场景：实现页面内跳转
如果网页很长（比如一篇万字文章），想点击某个链接直接跳转到页面内的 “某一部分”，也需要用 id 来实现 “锚点跳转”。
比如你的代码中，想加一个 “回到顶部” 的链接，就可以给标题栏加 id，然后通过链接定位到它：

回到顶部主要的网页标题菜单... 很长很长的内容...

点击 “回到顶部” 后，页面会直接滚动到 id="header" 的标题栏位置，这是没有 id 很难实现的功能。
总结：id 的本质是 “元素的唯一身份证”
HTML 中每个元素的 id 必须是唯一的（比如不能有两个 <div id="menu">），就像每个人的身份证号唯一一样 —— 通过这个 “唯一标识”，开发者能快速读懂代码、CSS 能精准控制样式、JavaScript 能轻松操作元素。
你当前的代码虽然用行内样式能运行，但如果后续要改样式、加交互，id 就会成为必不可少的 “工具”，这也是为什么实际开发中几乎每个关键元素（如头部、导航、内容区）都会加 id 的原因。
12 HTML 速查列表
HTML 速查列表 | 菜鸟教程https://www.runoob.com/html/html-quicklist.html
13 HTML 标签简写及全称
HTML 标签简写及全称 | 菜鸟教程https://www.runoob.com/html/html-tag-name.html
14 HTML 总结、后续学习路线
HTML 总结 | 菜鸟教程https://www.runoob.com/html/html-summary.html

HTML 标签	对应报纸的部分	核心作用（为什么这么比喻）	能否被用户直接看到？
`<head>`	报纸的 “中缝 / 版权页”	存放 “幕后信息”：比如报纸的报名（对应网页标题，显示在浏览器标签栏）、排版规则（CSS 样式）、引用的工具（JS 脚本）、作者信息等 —— 这些内容是为了让报纸（网页）能正常呈现，但读者不会直接在 “正文区域” 看到它们。	❌ 不能（仅作用于幕后，不参与页面渲染）
`<body>`	报纸的 “正文 + 图片 + 广告区”	存放所有 “用户能直接看到、摸到的内容”：比如文章文字（对应网页的 `<p>`）、照片（对应 `<img>`）、按钮（对应 `<button>`）、链接（对应 `<a>`）—— 用户打开网页后看到的所有内容，都在 `<body>` 里。	✅ 能（网页的 “可视化区域”）