HTML5入门学习
一、初始HTML
定义
HTML（超文本标记语言）是用于创建和设计网页的标准标记语言。它通过标签（如 <p>, <h1>, <a> 等）定义网页内容的结构和语义，如文本段落、标题、链接等。HTML 是网页的基础，与 CSS（样式）和 JavaScript（交互）共同构建现代网页。超文本包括文字图片、音频、视频、动画等。目前网页常用的是HTML5，HTML5提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
优势
1、语义化标签
HTML5 引入了更丰富的语义化标签（如 <header>, <footer>, <article>, <section>, <nav>），使网页结构更清晰，对 SEO（搜索引擎优化）和屏幕阅读器更友好。
如：
<header>网页头部</header> <nav>导航栏</nav> <article>主要内容</article> <aside>侧边栏</aside> <footer>底部信息</footer> |
2、原生多媒体支持
无需依赖 Flash 等插件，直接通过标签嵌入音视频：
<video>：嵌入视频（支持 MP4、WebM 等格式）
<audio>：嵌入音频（支持 MP3、WAV 等格式）
如：
<video controls> <source src="video.mp4" type="video/mp4"> </video> |
W3C标准
W3C标准 是由 万维网联盟（World Wide Web Consortium, W3C）制定和维护的国际化技术规范，旨在确保 Web 技术的一致性和互操作性，使不同浏览器、设备和应用能无缝协作。
W3C标准包括：
①结构化标准语言(HTML、XML)
②表现标准语言(CSS)
③行为标准(DOM、ECMAScript）
二、网页基本信息
HTML 文档分为两部分：**<head>（头部）** 和 **<body>（主体）**，二者分工明确：
<head>：存放元信息（metadata），用于描述网页属性（如标题、编码、SEO 信息等）。
<body>：存放可见内容 ---（如文本、图片、链接等），由浏览器渲染并展示给用户。
<meta> 标签的作用：
<meta> 标签是 <head> 中的核心元素，用于定义不可见的网页元数据，例如：
字符编码：<meta charset="UTF-8">
关键词：<meta name="keywords" content="...">
描述：<meta name="description" content="...">
移动端适配：<meta name="viewport" content="...">
这些信息的主要使用者是 浏览器 和 搜索引擎爬虫，而非普通用户。
三、网页基本标签
标题标签（Heading Tags）
作用：定义标题层级（<h1> 到 <h6>），<h1> 级别最高，一个页面建议仅一个 <h1>，用于主标题。
示例：
<h1>主标题（通常用于页面核心标题）</h1> <h2>二级标题（用于章节标题）</h2> <h3>三级标题（子章节）</h3> <!-- 依此类推至 h6 --> |
段落标签（Paragraph Tag）
作用：定义文本段落，自动换行并添加段落间距。
示例：
<p>这是一个段落，用于包裹多行文本。浏览器会自动在段落前后添加空白间距。</p> <p>这是另一个段落。</p> |
换行标签（Line Break Tag）
作用：强制文本换行，无需闭合标签（自闭合标签）。
示例：
<p>第一行文本<br>第二行文本<br>第三行文本</p> |
水平线标签（Horizontal Rule Tag）
作用：插入一条水平分隔线，语义化表示内容分隔。
示例：
<h2>章节标题</h2> <hr> <p>分隔线下方的段落内容...</p> |
字体样式标签（Text Formatting Tags）
注释与特殊符号
注释
作用：添加代码说明，不渲染到页面。
语法：<!-- 注释内容 -->
示例：
<!-- 这是一个注释，不会显示在浏览器中 --> <p>可见内容</p> |
特殊符号
需转义字符：使用 实体名称（Entity Name）或 实体编号。
常见符号：
完整实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!-- 移动端适配（建议添加） --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 关键词 --><meta name="keywords" content="狂神说Java, 西部开源"><!-- 网页描述 --><meta name="description" content="来这个地方可以学习Java"><!-- 标题 --><title>网页基本标签学习</title>
</head>
<body>Hello, World!<!-- 标题标签（Heading Tags） --><hr><br>标题标签（Heading Tags）<h1>主标题（通常用于页面核心标题）</h1><h2>二级标题（用于章节标题）</h2><h3>三级标题（子章节）</h3><!-- 依此类推至 h6 --><!-- 段落标签（Paragraph Tag） --><hr><br>段落标签（Paragraph Tag）<p>这是一个段落，用于包裹多行文本。浏览器会自动在段落前后添加空白间距。</p><p>这是另一个段落。</p><!-- 换行标签（Line Break Tag） --><hr><br>换行标签（Line Break Tag）<p>第一行文本<br>第二行文本<br>第三行文本</p><!-- 水平线标签（Horizontal Rule Tag） --><hr><br>水平线标签（Horizontal Rule Tag）<h2>章节标题</h2><hr><p>分隔线下方的段落内容...</p><!-- 字体样式标签（Text Formatting Tags） --><hr><br>字体样式标签（Text Formatting Tags）<br><strong>警告！</strong><br><em>请注意</em><br><u>需要重点标注</u><br><code>print("Hello")</code><br><!-- 特殊符号 --><hr><br>特殊符号<p>3 < 5</p><p>5 > 3</p>连续 空格<br>版权所有©2023<br>价格：¥100<br></body>
</html>输出：
四、图像标签 <img>
图像标签 <img> 是 HTML 中用于嵌入图片的核心标签，无需闭合（自闭合标签）。
<img src="图片地址" alt="替代文字" title="悬停提示文字" width="宽度" height="高度"
>>常见的图像格式
>JPG
>GIF
>PNG
>BMP(位图)--->画图软件生成的
完整实例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!-- 移动端适配（建议添加） --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 标题 --><title>图像标签学习</title>
</head>
<body><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100">
</body>
</html>现象：
五、超链接标签<a> </a>
基础语法
<a href="链接地址" target="打开方式" _self(本页跳转)/_blank(下一页跳转)title="悬停提示" rel="关联说明" "nofollow"（告知搜索引擎不追踪） / "noopener"（防钓鱼攻击）
>链接文本或图像</a>类型
完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>超链接标签学习</title>
</head>
<body><h2 id="top">首页</h2><br><!-- 1. 页面间链接 --><a href="https://www.baidu.com" title="关于我们" rel="noopener">跳转到关于页</a><br> <!-- 本页跳转 --><a href="https://github.com" target="_blank" rel="noopener">GitHub（新标签页打开）</a><br><!-- 下一页跳转 --><a href="https://www.csdn.net/" target="_blank" rel="noopener"><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a><br><!-- 2. 锚链接 --><a href="#contact">底部</a><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><p><img src="C:\Users\Administrator\Desktop\eye.jpeg" alt="眼睛" title="悬停提示文字" width="100" height="100"></a></p><!-- 模拟长页面 --><h2 id="contact">联系方式</h2><p>邮箱：contact@example.com</p><a href="#top">顶部</a><br><!-- 3. 功能性链接 ①邮件链接：mailto ②QQ链接：QQ推广 ③电话链接：tel ④下载文件链接--><a href="mailto:contact@example.com">发送邮件</a><a href="tel:400-123-4567">拨打电话</a><a href="document.pdf" download>下载文件</a>
</body>
</html>显示过长，省略
六、列表标签
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息，以下是核心列表类型：
无序列表（Unordered List）
表示无顺序关系的项目列表（默认符号为圆点）
标签结构：<ul>（父标签） + <li>（子标签）
有序列表（Ordered List）
表示有顺序或步骤的列表（默认符号为数字）
标签结构：<ol>（父标签） + <li>（子标签）
定义列表（Definition List）
表示术语及其描述的成对内容
标签结构：<dl>（父标签） + <dt>（术语） + <dd>（描述）
完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>列表标签学习</title>
</head>
<body><!-- 无序列表（Unordered List） -->无序列表（Unordered List）<br><ul><li>C/C++</li><li>MCU</li><li>LINUX</li><li>HTML</li></ul><hr><!-- 有序列表（Ordered List） -->有序列表（Ordered List）<br><ol><li>第一步：准备材料</li><li>第二步：搅拌混合</li><li>第三步：放入烤箱</li></ol><hr><!-- 定义列表（Definition List） -->定义列表（Definition List）<br><dl><dt>HTML</dt><dd>超文本标记语言，用于构建网页结构。</dd><dt>CSS</dt><dd>层叠样式表，用于设计页面视觉效果。</dd></dl></body>
</html>输出：
七、表格标签
核心标签
跨行跨列属性
border 属性
功能：控制表格及其单元格的边框显示。
使用场景：在 <table> 标签中直接添加 border 属性，快速为表格添加基础边框。
border 属性的局限性：
·仅支持简单数值：
border="1" 表示边框宽度为 1 像素，无法设置颜色、样式（如虚线）。
更高数值（如 border="5"）仅增加边框宽度，视觉效果粗糙。
·默认双线边框：
浏览器会为表格和单元格分别渲染边框，导致相邻边框重叠（双线效果）。
完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表格标签学习</title>
</head>
<body><table border="1"><!-- 跨列标题 --><tr><th colspan="2">学生信息</th><th colspan="2">成绩</th></tr><!-- 子标题 --><tr><th>姓名</th><th>班级</th><th>语文</th><th>数学</th></tr><!-- 跨行数据 --><tr><td>大神</td><td rowspan="2">1班</td><td>100</td><td>100</td></tr><tr><td>秦疆</td><!-- 因上一行已合并，此行省略班级单元格 --><td>100</td><td>100</td></tr><!-- 跨行数据 --><tr><td>萨达</td><td rowspan="2">2班</td><td>100</td><td>100</td></tr><tr><td>飒飒</td><!-- 因上一行已合并，此行省略班级单元格 --><td>100</td><td>100</td></tr></table></body>
</html>输出：
八、媒体元素
视频元素 <video>
核心属性
示例：
<video src="https://www.bilibili.com/video/BV1me411A7Hk?spm_id_from=333.788.player.player_end_recommend_autoplay&vd_source=8590d26084376f4c47d30270c0ebda52o8590d26084376f4c47d30270c0ebda52" controls autoplay loop poster="C:\Users\Administrator\Desktop\eye.jpeg"> </video> 音频元素 <audio>
核心属性
与 <video> 类似，支持 controls、autoplay、loop，但不支持宽高和封面设置。
示例：
<audio src="E:\RECORD\R20250322-101812.WAV" controls autoplay> </audio>九、网页结构分析
语义化标签：
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>网页分析学习</title>
</head>
<body><!-- 全局页眉 --><header><h1>技术博客</h1><nav><a href="/">首页</a><a href="/tutorial">教程</a></nav></header><!-- 主体内容 --><main><!-- 独立文章 --><article><header><h2>HTML5语义化指南</h2><p>发布日期：2023-10-01</p></header><section><h3>什么是语义化标签？</h3><p>语义化标签让代码更易读...</p></section><footer><p>作者：技术达人</p></footer></article><!-- 侧边栏 --><aside><h3>推荐阅读</h3><ul><li><a href="#">CSS布局技巧</a></li></ul></aside></main><!-- 全局页脚 --><footer><p>© 2023 技术博客</p></footer>
</body>
</html>输出：
十、iframe内联框架
iframe（Inline Frame，内联框架）是 HTML 中的一个核心元素，用于在当前 HTML 文档中嵌入另一个独立的 HTML 文档（可来自同一域名或不同域名），实现 “页面嵌套页面” 的效果。它本质上创建了一个独立的浏览上下文，嵌套的文档拥有自己的 DOM、CSS 样式表、JavaScript 执行环境，与父文档的环境相互隔离（受浏览器安全策略限制）。
<!-- 修正后代码 --> <iframe src="" name="hello" frameborder="0" width="800px" height="600px"> </iframe> <a href="https://blog.kuangstudy.com" target="hello">点击跳转</a> |
**<a> 标签的联动**
点击链接时，target="hello" 会指示浏览器在 name="hello" 的 <iframe> 中打开 href 指定的 URL。
结果：点击链接后，https://blog.kuangstudy.com 的内容将显示在 <iframe> 内，而非新窗口。
随着前端技术发展，部分场景下 iframe 可被更轻量的方案替代：
- 嵌入媒体内容：用
<video>（视频）、<img>（图片）、<audio>（音频）替代 iframe； - 局部加载内容：用 AJAX/Fetch + DOM 插入替代 iframe 的局部刷新；
- 组件化嵌入：用 Web Components（如自定义元素）封装独立功能，替代 iframe 的模块隔离；
- 弹窗 / 模态框：用 CSS 实现的弹窗（如
position: fixed）替代 iframe 弹窗，体验更优。
十一、表单
简单说，表单就是网页收集用户信息的 “容器”，靠 method 和 action 实现数据传递，搭配各种输入元素，完成交互闭环，是网页和用户、服务器交互的基础工具 ，现在前后端分离项目里，常和 Ajax 结合，异步提交数据，让页面体验更流畅 。
GET 与 POST
敏感操作用 POST，公开查询用 GET
input
<input> 是表单中最灵活的元素，通过 type 属性可以实现多种输入形式，用于收集不同类型的用户数据。
基础语法
<inputtype="输入类型"name="参数名"value="默认值"[其他属性]>常用 type 类型
类型 作用 示例
text 文本输入框(单行) <input type="text" name="username" placeholder="请输入用户名">
password 密码输入框(内容隐藏) <input type="password" name="pwd" required>
submit 提交按钮(发送表单数据) <input type="submit" value="提交">
reset 重置按钮(清空表单内容) <input type="reset" value="重置">
email 邮箱输入(自动格式验证) <input type="email" name="email" patt ern=".+@example.com">
number 数字输入(可设置范围) <input type="number" min="1" max="100" step="1">
file 文件上传 <input type="file" name="参数名" [属性]>
radio 单选按钮(同 name 的选项互斥) <input type="radio" name="gender" value="male"> 男
checkbox 复选框（允许多选） <input type="checkbox" name="hobby" value="reading"> 阅读
button 普通按钮 <input type="button" value="点击" onclick="绑定点击事件（触发 JavaScript 函数）">
range 滑块 <input type="range" name="参数名" min="最小值" max="最大值" step="步长" value="默认值">
search 搜索框 <input type="search" name="参数名" placeholder="搜索提示" [其他属性]>关键属性
属性 作用
name 必填，定义参数名（后端通过此名称获取数据）
value 设置默认值（如按钮文字、输入框初始值）
placeholder 输入框提示文本（用户输入后消失）
required 标记字段为必填项（浏览器强制验证）
disabled 禁用输入框（数据不会提交）
maxlength 限制最大输入字符数（如 maxlength="20"）
pattern 正则表达式验证输入格式（如手机号、邮箱）
列表框 <select>
基本语法
<select name="参数名" [属性]><option value="值1">选项1</option><option value="值2" selected>选项2（默认选中）</option><option value="值3">选项3</option>
</select>核心属性
文本域 <textarea>
基本语法
<textarea name="参数名" rows="行数" cols="列数" [其他属性]>默认文本</textarea>核心属性
表单应用
隐藏域hidden
用途：
·传递用户无需看到但后端需要的数据（如用户ID、令牌、页面来源等）。
·配合 JavaScript 动态存储临时数据。
<input type="hidden" name="user_id" value="12345"> |
只读域readonly
用途：
·展示固定信息（如订单号、计算结果），用户可查看但不可修改。
·防止用户误改关键数据（如账户名、创建时间）。
<label>订单号：</label> <input type="text" name="order_id" value="ORDER-20231001" readonly> |
禁用disabled
用途：
·根据条件禁用表单控件（如未勾选协议时禁用提交按钮）。
·防止重复提交表单（点击后禁用按钮）。
<!-- 禁用输入框 --> <input type="text" name="legacy_field" value="旧数据" disabled> |
表单初级验证
为什么需要表单验证？
·防止无效数据提交：拦截用户输入错误（如格式错误的邮箱、空必填字段），减少服务器无效请求。
·提升用户体验：即时反馈错误，避免用户反复提交失败。
·增强安全性：过滤恶意输入（如 SQL 注入、XSS 攻击）。
·节省资源：减少服务器端验证压力，优化性能。
提示信息placeholder
作用：在输入框为空时显示引导性提示，告知用户输入格式或内容要求。
注意事项：
placeholder 不是真正的验证，仅起提示作用。
非空判断required
作用：强制用户填写指定字段，否则阻止表单提交。
正则表达式验证pattern
作用：通过正则表达式（Regex）匹配输入格式，确保数据符合规则。
完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单学习</title>
</head>
<body><form action="https://www.csdn.net/" method="get"><!-- 文本框 --><!-- 文本输入框 --><p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p><!-- 密码输入框 --><p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p><!-- 单选框 name需要相同，否则可多选--><p>性别：<input type="radio" name="gender" value="boy"> 男<input type="radio" name="gender" value="girl"> 女<p><!-- 多选框 --><p>兴趣：<input type="checkbox" name="hobby" value="reading"> 阅读<input type="checkbox" name="hobby" value="sporting"> 运动<input type="checkbox" name="hobby" value="shexiang"> 摄像<input type="checkbox" name="hobby" value="run"> 跑步</p><!-- 按钮 --><p>按钮：<input type="button" name="bu" value="单击"><input type="button" name="bu" value="双击"><br>提交按钮：<input type="image" src="C:\Users\Administrator\Desktop\eye.jpeg" alt="提交按钮" width="30" height="30"></p><!-- 下拉框 --><p>国家：<select name="country" [属性]><option value="China"selected>中国</option><option value="USA" >美国</option><option value="Franch">法国</option></select></p><!-- 文本域 --><p>反馈：<textarea name="comment" rows="4" cols="50" placeholder="请输入您的评论..."></textarea></p><!-- 文件域 --><p>文件选择：<input type="file" name="files" accept=".pdf,.docx" multiple><input type="submit" value="上传"></p><!-- 邮箱 --><p>邮箱：<input type="email" name="email" placeholder="请输入有效的邮箱地址" pattern=".+@example.com"></p><!-- 数字 --><p>数字：<input type="number" name="number" min="0" max="100" step="10"></p><!-- 滑块 --><p>音量：<input type="range" name="volume" min="0" max="100" step="10" value="50"></p><!-- 搜索框 --><p>搜索：<input type="search" name="search" placeholder="请输入搜索内容" ><button type="submit">搜索</button></p><!-- 手机号验证（11位数字，以1开头） --><p>手机号码：<input type="tel" name="phone" pattern="^1[3-9]\d{9}$" placeholder="请输入11位有效的手机号"title="请输入11位有效的手机号"required></p><!-- 操作按钮 --><p><input type="submit" value="提交"><input type="reset" value="重置"></p> </form></body>
</html>
