当前位置：首页 > news >正文

HTML 01 【基础语法学习】

news 2025/10/13 11:29:29

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

1 参考手册

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

href

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

2 分割符

hr 元素可用于分隔内容。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

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 href="URL">链接文本</a>

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

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

实例

<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p><p><a href="https://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

6 HTML 链接属性

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

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

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

<a href="https://www.example.com">访问示例网站</a>

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

<a href="https://www.example.com"><img src="example.jpg" alt="示例图片">
</a>

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

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

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

<a href="document.pdf" download>下载文档</a>

7 HTML 表格

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

8 我错误百出的第一个HTML

<head><h1><i>BIG TXT<i></h1>
<div><p>hello</p><hr /><p>hi</p>
</div></head>
<body><code>printf ( " hello world ")</code>
<a href="https://cn.bing.com/hp/?mkt=zh-CN" target="_blank" title="click to Bing">Bing</a>
<img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.KqqriZXgjKK7FfDUjUtVkQHaHS?rs=1&pid=ImgDetMain&o=7&rm=3" alt="cat" style="float: inline-end;"></img>
<table><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><colgroup><col><col><col></colgroup>
</table>
</body>

无法显示表格。

你提供的 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>内无内容，会显示为 “空表格边框”（若后续添加内容需调整顺序）。

三、修复后的完整代码（可正常显示）

<!DOCTYPE html> <!-- 声明HTML文档类型，确保浏览器正常解析 -->
<html> <!-- 根标签，所有内容必须包裹在html内 --><head> <!-- 头部区域：存放标题、样式、脚本等（不渲染可见内容） --><meta charset="UTF-8"> <!-- 声明字符编码，避免中文乱码（可选但推荐） --><title>页面标题</title> <!-- 浏览器标签栏显示的标题（可选但推荐） --><h1><i>BIG TXT</i></h1> <!-- 修复<i>标签闭合（注：h1通常放body，此处仅为修正原结构） --></head><body> <!-- 主体区域：所有可见内容（文本、图片、链接等）放在这里 --><div><p>hello</p><hr /> <!-- 水平分隔线 --><p>hi</p></div><code>printf ( " hello world ")</code> <!-- 代码片段（默认等宽字体） --><!-- 超链接：点击跳转到必应，新窗口打开 --><a href="https://cn.bing.com/hp/?mkt=zh-CN" target="_blank" title="click to Bing">Bing</a><!-- 图片：float:inline-end 使图片右对齐，alt为图片加载失败时的提示文本 --><img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.KqqriZXgjKK7FfDUjUtVkQHaHS?rs=1&pid=ImgDetMain&o=7&rm=3" alt="cat" style="float: inline-end;"><!-- 表格：调整colgroup顺序到tbody前，添加示例内容方便查看 --><table border="1"> <!-- 添加border=1显示表格边框（可选，方便调试） --><colgroup> <!-- 列定义放在tbody之前（规范要求） --><col><col><col></colgroup><tbody><tr><td>行1列1</td><td>行1列2</td><td>行1列3</td></tr><tr><td>行2列1</td><td>行2列2</td><td>行2列3</td></tr></tbody></table></body>
</html>

四、修复后效果说明

可见内容：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？

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div></div></body>
</html>

在你提供的这段 HTML 代码中，id 看似只是给 <div> 加了个 “名字”（比如 header、menu），但实际上是 HTML 中核心的 “元素标识工具”，它的作用贯穿 “代码可读性”“样式控制”“交互逻辑” 三个关键场景，具体原因可以拆解为以下 4 点：

1. 最基础：给元素 “起名字”，让代码更易读（对开发者友好）

你这段代码是一个简单的网页布局（标题栏 + 菜单 + 内容区 + 版权栏），如果没有 id，代码会变成：

<!-- 没有id的情况 -->
<div style="width:500px"><div style="background-color:#FFA500;">...</div> <!-- 这是标题栏？菜单？ --><div style="background-color:#FFD700;">...</div> <!-- 这又是啥？ -->...
</div>

此时开发者需要逐行看 style 或内容才能判断每个 <div> 的作用，效率很低。

而加上 id="header"「标题栏」、id="menu"「菜单」、id="footer"「版权栏」后，光看 id 就能立刻定位元素的功能—— 哪怕代码量变大（比如几百行 HTML），也能快速找到 “我要改的标题栏在哪”“菜单的容器是哪个”，极大降低了代码的维护成本。

2. 核心作用 1：精准控制样式（配合 CSS）

你当前的代码用了 “行内样式”（style="..."），但实际开发中，我们更习惯把样式写在单独的 CSS 里（或 <head> 的 <style> 标签中）。此时 id 就成了 “精准定位元素” 的钥匙。

比如想单独修改 “菜单” 的背景色，用 id 就能直接定位到它，不会影响其他元素：

<head><style>/* #+id名：精准选中id为menu的元素 */#menu {background-color: #FFD700; /* 菜单背景色 */height: 200px;width: 100px;}/* 单独修改版权栏的文字颜色 */#footer {color: white; /* 版权文字变白色 */}</style>
</head>
<body><div id="menu">菜单...</div> <!-- 会被上面的CSS选中 --><div id="footer">版权...</div> <!-- 会被上面的CSS选中 -->
</body>

如果没有 id，想单独改某个 <div> 的样式会非常麻烦（可能需要写复杂的选择器，还容易误改其他元素）。

3. 核心作用 2：实现交互逻辑（配合 JavaScript）

如果想给网页加 “动态效果”（比如点击菜单显示隐藏内容、点击标题栏跳转），就必须用 JavaScript—— 而 JavaScript 要操作某个元素，前提是 “找到它”，id 就是最快捷的 “查找方式”。

比如想实现 “点击版权栏弹出提示”，用 id 就能轻松做到：

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

如果没有 id，JavaScript 要找到目标元素会很繁琐（比如需要通过 “标签名 + 层级” 查找，代码变复杂且容易出错）。

4. 特殊场景：实现页面内跳转

如果网页很长（比如一篇万字文章），想点击某个链接直接跳转到页面内的 “某一部分”，也需要用 id 来实现 “锚点跳转”。

比如你的代码中，想加一个 “回到顶部” 的链接，就可以给标题栏加 id，然后通过链接定位到它：

<body><!-- 锚点链接：href="#header" 表示跳转到id为header的元素 --><a href="#header">回到顶部</a><div id="header">主要的网页标题</div> <!-- 跳转目标 --><div id="menu">菜单...</div><div id="content">很长很长的内容...</div> <!-- 假设内容很多，页面会滚动 -->
</body>

点击 “回到顶部” 后，页面会直接滚动到 id="header" 的标题栏位置，这是没有 id 很难实现的功能。