HTML 01 【基础语法学习】 - 详解
并不规范的学习笔记，只是供边学边记录。
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 代码中，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>
如果没有 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
浙公网安备 33010602011771号