今天想着建一个网站，因为想自己做一个个人博客，顺便给实验室做一个主页
于是就有了今天的html学习记录
2. HTML 基础骨架
HTML (HyperText Markup Language) 是网页的骨架。一个标准的 HTML5 页面结构如下：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>网页标题</title></head><body><!-- 这里写网页的主体内容 --></body>
</html>
核心结构解析
<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个 HTML5 网页。<html>：根标签，所有内容都包裹在这里面。lang="zh-CN"表示网页语言为简体中文。<head>：头部标签。存放网页的元数据（如字符集、标题、CSS 链接），内容不会直接显示在网页正文中。<body>：主体标签。存放网页真正显示给用户看的内容（文字、图片、视频等）。
关于标签语法：
HTML 标签主要分为两类：
- 双标签：成对出现，有开始和结束，如
<body>...</body>。- 单标签：不需要结束标签，通常用于空元素，如
<br>、<hr>、<img>。
3. 常用文本标签
3.1 布局与排版
| 标签 | 类型 | 作用 | 备注 |
|---|---|---|---|
<h1> ~ <h6> |
双标签 | 标题 | h1 级别最高（字最大），h6 最小。h1 一个页面通常只用一次。 |
<p> |
双标签 | 段落 (Paragraph) | 独占一行，段落之间会有默认间距。 |
<br> |
单标签 | 换行 (Break) | 强制文字换行。 |
<hr> |
单标签 | 水平线 (Horizontal Rule) | 显示一条分割线。 |
3.2 文本格式化（语义化标签）
HTML5 提倡使用具有语义的标签，而不仅仅是修改样式。
| 标签 | 效果 | 语义/作用 |
|---|---|---|
<strong> |
加粗 | 表示重要的内容（比 <b> 更好）。 |
<em> |
倾斜 | 表示强调的内容（比 <i> 更好）。 |
<ins> |
下划线 | 表示新插入的内容（Insert）。 |
<del> |
表示已删除的内容（Delete）。 |
4. 超链接与路径
4.1 超链接 <a>
超链接是互联网的核心，使用 <a> (Anchor) 标签。
<a href="./online.html" target="_blank">点击播放视频</a>
href(必填)：Hypertext Reference，指定跳转的目标地址。- 如果暂时不知道填什么，可以用
#占位（空链接）。
- 如果暂时不知道填什么，可以用
target：指定窗口打开方式。_self：默认值，在当前窗口打开。_blank：在新标签页打开。
4.2 路径知识 (Path)
在引用图片、音频或链接时，路径非常重要。
- 相对路径（推荐）：以当前文件为基准。
.或./：代表当前目录（例如./image/pic.png）。..或../：代表上一级目录（父级目录）。/：表示进入下一级目录。
- 绝对路径：从盘符或域名开始的完整路径（例如
C:/Users/Desktop/img.png或http://www.baidu.com），通常不建议在本地开发中使用盘符路径。
5. 多媒体标签
5.1 图像 <img>
<img src="image/photo.png" alt="图片描述" title="提示文字" width="500">
| 属性 | 作用 | 重要性 |
|---|---|---|
src |
图片的路径。 | 必填 |
alt |
图片加载失败时显示的替换文本（对 SEO 和盲人读屏很重要）。 | 推荐 |
title |
鼠标悬停在图片上时显示的提示文字。 | 可选 |
width / height |
设置宽高。只设置其中一个时，另一个会按比例自动缩放。 | 可选 |
5.2 音频 <audio> 与 视频 <video>
HTML5 原生支持音视频播放，无需 Flash。
<!-- 音频 -->
<audio src="music.mp3" controls loop></audio><!-- 视频 -->
<video src="movie.mp4" controls muted autoplay></video>
| 属性 | 作用 | 说明 |
|---|---|---|
src |
资源路径 | 支持 mp3, ogg, mp4, webm 等格式。 |
controls |
显示播放控件 | 如果不写，用户无法看到暂停/进度条。 |
loop |
循环播放 | 播放结束后自动重播。 |
autoplay |
自动播放 | 注意：大部分浏览器默认禁止有声视频自动播放。 |
muted |
静音 | 技巧：设置静音后，通常可以实现视频的自动播放。 |
提示：像
controls、loop、autoplay这种属性，如果属性名和属性值一样（例如loop="loop"），在 HTML5 中可以简写，直接写属性名即可。
全代码：
<!DOCTYPE html>
<html lang = "ch">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>训练标题</title>
</head>
<body><h1>is as base web struct haha</h1><!-- 这是一个注释 --><h1>测试换行和分割</h1><hr><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>这是好东西</p><!-- 段落标签p，独占一行，分段会隔开 --><!-- 文本格式化 --><strong>strong 这是加粗</strong><br><em>em 这是倾斜</em><br><ins>ins 这是下划线</ins><br><del>del 这是删除线</del><br><!-- 加入图像 --><img src="image/成品3.png" alt="图片加载不出显示的文字" title="鼠标悬停在上面显示的东西" width = 1000> <br><!-- src表示文件的路径和文件名 --><strong> 相对路径的知识:</strong><br>用.表示当前文件夹，./即进入当前文件夹 <br> 用..表示父级文件夹， ../即进入父级文件夹 <br>/表示进入的意思 <br>如果是从盘符开始的路径，则表示绝对路径 <br><a href="./online.html" target="_blank">点击播放视频</a><!-- href 是一个必填的参数，表示跳到哪里 --><!-- target 的参数blank，表示打开一个新窗口进入跳转的链接 --><!-- herf 里填 # 表示跳转到一个空链接，在不知道填什么的时候写这个 --><audio src="audio/図書室の夢.ogg" controls loop ></audio><!-- controls 如果参数名和参数完全一样，就可以不用写 = 号 -->
</body>
</html>