黑马程序员Pink老师2025版HTML部分学习笔记

一、学习前言本篇为黑马Pink老师2025新版AI前端零基础教程的个人学习复盘笔记配套B站视频黑马Pink老师2025版AI前端零基础教程https://b23.tv/GC7VweJ。文中HTML相关知识点均来源于课程内容我结合自身实操踩坑经历重新梳理改写补充了代码排版、标签使用等实操问题解决方案仅作个人学习记录、免费分享交流课程版权归原讲师与黑马程序员所有无任何商用用途。二、博客正文框架第一章开发准备工作1.1 编辑器选择plain【传统编辑器】 - VS Code、WebStorm、Sublime、HBuilder 【AI编辑器推荐新手】 - Trae AI编辑器字节跳动出品 - 国内版 vs 国际版区别 - 核心功能智能问答、代码自动补全、Agent自动编程 - 下载地址https://www.trae.cn/ - 现阶段主要是AI辅助开发根据提示自动生成代码、根据错误检查修复代码、代码解读和分析、生成注释和代码优化、AI技术测评 【编辑器配置】 - 字体大小Ctrl放大 / Ctrl-缩小 - 代码字体文件→首选项→设置→Editor设置→Font Size - Tab缩进设置为2个字符与Vue衔接 - 保存自动格式化文本格式化→格式化→Format on Save1.2 浏览器选择plain- 推荐Chrome截止2025年3月市场份额66.16%稳居第一 - 下载地址https://www.google.cn/chrome/ - 开发者工具打开方式右键→检查 或 快捷键F121.3 必备插件与技巧plain【Live Server插件】 - 作用代码保存后浏览器自动刷新 - 使用右键HTML文件→Open with Live Server 【分屏技巧】 - WindowsWin键 左右箭头 - 效果左边写代码右边看效果第二章HTML初体验2.1 创建第一个网页plain【三步走】 1. 创建项目文件夹根目录 2. 快速编写代码使用Emmet语法 3. 浏览器预览通过Live Server 【什么是HTML】 - 全称HyperText Markup Language超文本标记语言 - 本质告知浏览器如何组织页面的标记语言 - 核心学习HTML 学习标签 【标签语法】 - 双标签h1内容/h1 - 单标签br、img、hr - 标签也称为元素 - 大小写都可以建议小写第三章HTML文档结构3.1 标准文档模板HTML!DOCTYPE html !-- 文档类型声明HTML5 -- html langzh-CN !-- 根元素lang声明语言 -- head meta charsetUTF-8 !-- 字符编码 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 移动端适配 -- title页面标题/title !-- 浏览器标签页显示 -- /head body !-- 页面可见内容都写在这里 -- /body /html3.2 文档结构解析plain【文档类型】!DOCTYPE htmlHTML5文档类型声明 【html元素】 - 包裹页面中所有内容有时被称为根元素 - lang属性en代表英语zh-CN代表中文 - 帮助浏览器、搜索引擎正确处理页面内容 【head元素】 - 头部元素包含文档的元meta数据 - 主要保存供机器处理的信息而非人类可读信息 【字符集】meta charsetUTF-8 - UTF-8包括绝大多数人类书面语言的大多数字符 - 不加这句话可能会引起乱码 【移动端适配】meta nameviewport ... - 确保网页在移动设备上以最佳状态呈现 【title元素】 - 设置页面标题出现在浏览器标签中 【body元素】 - 包含页面所有显示在页面上的内容 - 包含文本、图片、视频、游戏、可播放音频轨道等 【记忆技巧小猪佩奇结构图】 - html 整个佩奇 - head 佩奇的头部title是眼睛 - body 佩奇的身体第四章标签关系与AI工具排错4.1 标签关系plain【嵌套关系父子关系】 - 一个标签包含另一个标签 - 示例head包含title 【并列关系兄弟关系】 - 两个标签同级别并排 - 示例head和body并列4.2 AI工具辅助plain【实际开发中的问题】 - 多层嵌套最容易出问题 【解决方案】 - 利用小技巧或AI工具帮助我们理清标签关系第五章HTML的标题和段落5.1 标题标签 h1-h6plain【语法】 h1一级标题/h1 h2二级标题/h2 ... h6六级标题/h6 【显示特点】 - 标题文字会加粗显示 - 每行只显示一个独占一行 【使用规范】 - h1唯一性最好只对每个页面使用一次一般用于文章标题或logo - 层次性在现有六个标题层次中除非觉得有必要否则应该争取每页使用不超过三个5.2 段落标签plain【语法】p里面是段落文本/p 【特点】 - 每行只显示一个 - 文字显示不开会自动换行 - 段落的相关样式请用CSS设置5.3 语义化plain【定义】指根据内容的结构和含义选择恰当的HTML元素 【为什么需要结构化】 - 没有元素给内容结构浏览器不知道什么是标题什么是段落 - 用户在阅读网页时往往会快速浏览以查找相关内容 - 如果用户不能在几秒内看到一些有用的内容他们很可能会感到沮丧并离开 【为什么需要语义】 - 需要确保使用了正确的元素来给予内容正确的含义、作用以及外形 - h1元素也是一个语义元素它所包裹的文本具有页面上的顶级标题的作用 【语义化的好处】 1. 更清晰的代码结构 2. 对搜索引擎更友好 3. 更好的可访问性5.4 更多场景plain- 标题h2板块标题 - 标题h3商品名称 - 段落p商品描述、价格等第六章强调与重要性标签及注释标签6.1 强调标签plain【推荐使用的语义化标签】 strong/strong → 加粗强调重要性 em/em → 倾斜强调语气 ins/ins → 下划线表示插入 del/del → 删除线表示删除 【不推荐使用的无语义标签】 b/b → 加粗纯样式 i/i → 倾斜纯样式 u/u → 下划线纯样式 s/s → 删除线纯样式 【原则】 - 优先使用带有语义的标签 - 除非特殊情况否则不用纯样式标签6.2 注释标签plain【语法】!-- 注释内容 -- 【快捷键】Ctrl / 【特点】 - 不会在网页上显示 - 可以跨越多行 - 常用于代码说明、临时禁用代码、给其他开发者留言第七章元素分类及歌曲彩蛋7.1 块级元素和内联元素plain【块级元素Block】 - 独占一行 - 可以嵌套其他元素 - 常见p、h、div等 【内联元素Inline】 - 可以一行放多个通常与文本一起使用 - 不能嵌套块级元素可以嵌套其他内联元素 - 常见strong、em、a等 【注意事项】 - 段落p标签里面不要放其他块级元素 - 段落里面主要放文字相关比如内联元素 - 元素分类不是一直不可更改的后面的CSS可以通过display改变显示模式第八章图像标签以及常见格式8.1 图像标签 imgplain【语法】img src图片路径 alt替代文本 【核心属性】 ┌─────────┬─────────────────────────────────┐ │ 属性 │ 作用 │ ├─────────┼─────────────────────────────────┤ │ src │ 指向要插入到页面的图像地址 │ │ alt │ 备选文本图片无法显示时提示 │ │ width │ 设置图片宽度建议CSS修改 │ │ height │ 设置图片高度建议CSS修改 │ │ title │ 图像标题鼠标悬停显示的文本 │ └─────────┴─────────────────────────────────┘ 【属性写法】 - 属性采取键值对形式属性值 - 属性之间没有必要的先后顺序 - 但是属性之间必须有空格分隔8.2 常见图片格式plain┌──────────┬────────────────────────────────────────┐ │ 格式 │ 特点与适用场景 │ ├──────────┼────────────────────────────────────────┤ │ JPEG/JPG │ 有损压缩放大缩小会变模糊。适用场景 │ │ │ 摄影照片、网页图片非透明背景 │ │ PNG │ 无损压缩支持透明度。适用场景Logo、 │ │ │ 网页图形、需要透明度的图像 │ │ GIF │ 支持动画最多256色。适用场景简单动画、│ │ │ 表情包、低色彩图形 │ │ WebP │ Google开发的现代格式。支持有损/无损压缩、│ │ │ 透明度和动画。适用场景网页优化替代 │ │ │ JPEG/PNG/GIF代表淘宝等 │ │ AVIF │ 基于AV1视频编码支持高压缩率和HDR。 │ │ │ 压缩效率优于WebP。适用场景未来网页优化│ │ │ 需高性能压缩的场景B站、京东等 │ └──────────┴────────────────────────────────────────┘ 【选择建议】 - 网页优化优先WebP/AVIF兼容时备选JPEG/PNG - 透明图像PNG静态或WebP动态 - 动画WebP/GIF简单动画 - 其他格式SVG、HEIC等 - 开发中设计师提供图片我们直接使用即可第九章路径分类9.1 路径概念plain【定义】路径用于指定文件如图像、样式表或其他网页的位置 【白话】图片相对于html文件的位置html怎么找到图片 【分类】 1. 相对路径相对于当前文件位置的路径 2. 绝对路径从根目录开始的完整路径9.2 相对路径详解plain【同一目录】 - 直接使用文件名即可 - ./表示当前文件夹 - 示例img srcpig.jpg 或 img src./pig.jpg 【下级子目录重点】 - 使用目录名/文件名 - 示例img srcimg/pig.jpg 【上级目录】 - 使用../返回上一级 - 示例img src../pig.jpg第十章音视频标签以及下载方式10.1语法与属性框架内容plain【音频标签】audio 【视频标签】video 【常用属性】 - controls显示播放控件 - autoplay自动播放 - loop 循环播放 - muted 静音 - poster: 预览图像10.2视频标签兼容性写法video controls source srcvideo.mp4 typevideo/mp4 source srcvideo.ogg typevideo/ogg source srcvideo.webm typevideo/webm p您的浏览器不支持 HTML 5 Video 标签请升级浏览器。/p /video将 src 属性放在几个单独的source元素当中这些元素分别指向各自的资源。浏览器会检查source元素并且播放第一个与其自身相匹配的媒体。每个source元素都含有 type 属性浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性浏览器会尝试加载每一个文件直到找到一个能正确播放的格式但是这样会消耗掉大量的时间和资源。第十一章创建超级链接以及锚点链接11.1超链接写法及属性框架内容plaina href/a a hrefhttps://www.deepseek.com/DeepSeek官网/a 【超链接标签】a 【核心属性】 - hrefhref 属性也称为超文本引用或目标它将包含一个网址来创建一个基本链接。链接地址 - target打开方式_self 当前窗口打开(默认) _blank 新窗口打开11.2超链接的种类在 HTML 中超链接Hyperlink是通过a标签实现的根据链接目标的不同主要可以分为以下几种类型1. 外部链接指向其他网站或域名的页面。这是最常见的链接类型用于实现互联网上的跨站点跳转。写法必须使用完整的绝对路径URL通常以http://或https://开头。示例html预览1a hrefhttps://www.baidu.com访问百度/a2. 内部链接指向当前网站内部的其他页面或文件。这种链接用于构建网站自身的导航结构。写法通常使用相对路径。如果目标文件在同一目录下直接写文件名如果在子目录需加上路径前缀。示例html预览1!-- 同一目录下的 about.html -- 2a hrefabout.html关于我们/a 3 4!-- 上级目录下的 index.html -- 5a href../index.html返回首页/a3. 锚点链接指向当前页面内的特定位置或者另一个页面的特定位置。常用于长文章的目录导航或“返回顶部”功能。写法定义锚点在目标位置设置一个id属性旧标准用name属性。链接锚点href属性值以#开头后跟目标的id值。示例html预览1!-- 定义目标位置 -- 2h2 idchapter1第一章/h2 3 4!-- 点击跳转到该位置 -- 5a href#chapter1跳转到第一章/a4. 功能性链接这类链接不跳转到网页而是触发浏览器的特定功能或调用本地应用程序。邮件链接点击后会自动打开用户默认的邮件客户端如 Outlook、Mail并预填收件人地址。写法hrefmailto:邮箱地址示例html预览1a hrefmailto:supportexample.com联系客服/a电话链接主要在移动端设备上有效点击后会调起拨号界面。写法hreftel:电话号码示例html预览1a hreftel:10086拨打 10086/a下载链接当href指向一个浏览器无法直接预览的文件如.zip,.exe,.pdf等时浏览器会触发下载行为。也可以使用download属性强制下载。示例html预览1a hreffiles/report.pdf download下载报告/a5. 空链接与脚本链接主要用于开发过程中的占位或者配合 JavaScript 进行交互操作。空链接没有实际跳转目标的链接常用于 CSS 样式调试或作为 JS 事件的载体。写法href#或hrefjavascript:void(0);注意#会导致页面滚动到顶部javascript:void(0);则不会有任何动作。脚本链接直接在href中执行 JavaScript 代码现代开发中不推荐这种写法建议使用事件监听器。示例html预览1a hrefjavascript:alert(Hello!)点击弹窗/a11.3点击超链接后页面滑动效果html { scroll-behavior: smooth; }第十二章网页结构标签和无语义标签12.1 常见布局标签1.网站结构标签标签作用header网页页眉头部main网页内容。每个页面只能有一个nav导航栏article文章相关section分块aside侧边栏footer页面页脚底部2.无语义标签1.div(Division)含义文档划分、区块。特点它是一个块级元素Block-level element。默认情况下它会独占一行宽度撑满父容器。用途常用于网页的整体布局比如将页面的头部、侧边栏、主体内容区包裹起来或者作为 CSS 样式和 JavaScript 操作的容器。示例html预览1div stylebackground-color: lightblue; padding: 10px; 2 这是一个 div 容器 3/div2.span含义行内跨度。特点它是一个行内元素Inline element。它不会换行宽度仅由其内容决定。用途常用于在一行文本中包裹部分文字以便单独对这几个字进行样式修改如改变颜色、字体大小或绑定 JS 事件。示例html预览1p这是一段文字其中包含 span stylecolor: red;红色高亮/span 的部分。/p 补充其他常见的无语义标签除了div和span这两个最常用的布局标签外以下标签也属于无语义标签b仅表示文本加粗Bold不强调重要性。i仅表示文本斜体Italic不表示专业术语或引用。u仅表示下划线Underline。br仅表示换行。hr仅表示水平分割线。⚠️ 为什么现代开发提倡使用“语义化标签”在 HTML5 之前开发者大量使用div和span来搭建网页导致代码像“意大利面条”一样难以阅读。HTML5 引入了语义化标签如header、nav、article、footer来替代它们。第十三章列表标签-有序无序和描述列表13.1列表标签列表标签是 HTML 中专门用来将一组相关内容以结构化、条理化方式呈现出来的标签。它们在网页中非常常见比如导航菜单、文章目录、商品清单等。框架内容plain【无序列表】ul li ul li猪爸爸/li li猪妈妈/li li佩奇/li li乔治/li /ul 运行效果 ● 猪爸爸 ● 猪妈妈 ● 佩奇 ● 乔治 【有序列表】ol li ol li看视频/li li写代码/li li做笔记/li li多复习/li /ol 运行结果 1.看视频 2.写代码 3.做笔记 4.多复习 【描述列表】dl dt dd dl dt家电/dt dd电视/dd dd冰箱/dd dd空调/dd dd烟灶/dd /dl 家电 电视 冰箱 空调 烟灶 【使用场景】 - 无序列表导航菜单、商品列表 - 有序列表排行榜、步骤说明 - 描述列表术语解释、问答列表第十四章表格标签14.1 表格的作用表格作用 以结构化方式展示行列数据使信息清晰、易读且便于对比。 网页场景 主要用于数据展示或者后台管理系统的信息展示。框架内容plain【基础表格】table tr td 【表头】th 【表格分区】thead、tbody、tfoot 【合并单元格】 - colspan跨列合并 - rowspan跨行合并 【AI辅助】 - 利用AI工具帮助合并单元格14.2 表格的基本组成14.3 表格结构标签增强表格语义让表格结构更加清晰标签作用thead定义表格头部区域tbody定义表格的主体内容第十五章表单容器以及文本框和密码框属性15.1. 表单的作用表单的主要作用是收集、处理和提交用户输入的数据。通过表单网页不再是一个单向展示信息的静态页面而是变成了一个可以双向沟通的平台。用户在表单中填写的内容如文字、选择的选项、上传的文件等会被打包发送给服务器服务器处理后再返回相应的结果。15.2. 常见的使用场景表单在互联网上的应用几乎无处不在主要包括以下几类账号与身份认证如网站的“登录”、“注册”、“找回密码”页面。信息搜索与查询如百度/淘宝顶部的“搜索框”、航班查询、火车票查询等。用户反馈与沟通如“联系我们”页面、问卷调查、意见反馈、留言板等。电子商务与交易如购物车结算、填写收货地址、支付页面的信用卡信息输入等。内容发布与创建如发微博/朋友圈、写博客文章、上传头像或附件、填写个人简历等。系统设置与偏好如修改个人密码、调整网站主题颜色、订阅/退订邮件通知等。15.3 表单的组成15.4 表单容器1.form标签这是整个表单的“外壳”所有的表单控件都必须放在form和/form标签之间。它主要负责告诉浏览器数据提交给谁、用什么方式提交。action属性指定处理表单数据的服务器端程序的 URL 地址即数据提交到哪里。method属性指定数据的提交方式最常用的是GET数据附在 URL 后面适合搜索和POST数据在请求体中更安全适合登录、注册等。2.表单控件输入元素这是用户实际进行输入和操作的区域。主要包括以下几种①input标签最核心、最多变!-- 1. 表单容器定义数据提交的地址和方法 -- form action/register methodPOST !-- ① 单行文本输入框 -- label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 brbr !-- ② 密码输入框 -- label forpwd密码/label input typepassword idpwd namepassword placeholder请输入密码 brbr !-- ③ 单选按钮 (注意name 属性必须相同才能实现多选一) -- p性别/p input typeradio idmale namegender valuemale label formale男/label input typeradio idfemale namegender valuefemale label forfemale女/label brbr !-- ④ 复选框 (name 属性通常写成数组形式如 hobby[]) -- p兴趣爱好/p input typecheckbox idhobby1 namehobby valuereading label forhobby1阅读/label input typecheckbox idhobby2 namehobby valuegaming label forhobby2游戏/label input typecheckbox idhobby3 namehobby valuesports label forhobby3运动/label brbr !-- ⑤ 文件上传控件 -- label foravatar上传头像/label input typefile idavatar nameavatar brbr !-- ⑥ 重置按钮 -- input typereset value清空表单 !-- ⑦ 提交按钮 -- input typesubmit value立即注册 /form作用多行文本输入框。场景常用于个人简介、长篇留言、意见反馈等需要输入大量文字的地方。特点它是双标签默认大小可以通过cols列数和rows行数属性控制但现代开发中更推荐用 CSS 来控制宽高。②textarea标签多行文本输入!-- 正确写法 -- textarea namecomment rows4 cols50这里写默认内容/textarea !-- 错误写法value对textarea无效 -- textarea value这里写默认内容/textarea作用定义一个多行的文本输入控件。与单行的input typetext不同它允许用户输入大段的文字内容并支持换行。常见场景个人简介、文章内容编辑、留言反馈、地址填写等需要大量文字输入的场景。关键属性rows定义文本框可见的行数高度。cols定义文本框可见的列数宽度。注现代开发中通常使用 CSS 来控制宽高这两个属性用得较少。readonly只读属性用户可以看到内容但无法修改。disabled禁用属性文本框变灰且无法交互数据也不会被提交。特别注意textarea是双标签有开始也有结束默认值初始内容应该写在两个标签之间而不是使用value属性。③select标签下拉选择菜单作用创建一个下拉列表让用户从预定义的选项中选择一个或多个值。结构解析select外层容器相当于“框”。option具体的选项相当于框里的“条目”。optgroup进阶用于将选项分组例如按国家分组城市提升长列表的阅读体验。关键属性multiple允许用户按住 Ctrl (Windows) 或 Command (Mac) 键进行多选。size定义下拉列表中可见的行数。如果大于1通常会显示为滚动列表样式而非折叠的下拉框。selected加在某个option上表示页面加载时默认选中该项。场景如选择省份、出生年份、支付方式等能有效节省页面空间。④ button 标签按钮button typesubmit span classicon/span 立即提交 /button作用定义一个可点击的按钮。与 input typebutton 的区别内容丰富button 是双标签内部不仅可以包含纯文本还可以嵌套 HTML 元素如图片 (img)、图标 (i 或 svg) 甚至段落。这使得它在制作复杂的UI按钮时非常灵活。类型明确button 有一个 type 属性必须注意区分typesubmit默认值。点击后会提交表单数据。typereset点击后重置表单内容。typebutton普通按钮点击后没有任何默认行为通常需要配合 JavaScript 使用。⑤label标签辅助控件/关联标签!-- 点击“用户名”三个字输入框就会自动获得光标 -- label foruser_name用户名/label input typetext iduser_name nameusername作用为表单控件如 input, textarea, select提供文字说明。它是提升表单可用性和无障碍访问Accessibility的关键标签。核心机制绑定通过for属性与表单控件的id属性建立显式关联。用户体验优势扩大点击区域当用户点击label中的文字时浏览器会自动将焦点转移到对应的输入框上或者激活对应的单选/复选框。这对于移动端用户或鼠标操作不精准的用户非常友好。屏幕阅读器支持视障人士使用的屏幕阅读器在读到输入框时会朗读关联的 label 文字告诉用户这个框是填什么的。## 写在最后从打开 Trae 编辑器写下第一个 h1到能独立搭建一个包含标题、段落、图片、链接、列表、表格、表单的完整页面——这大概就是 HTML5 入门最扎实的路径了。回顾这 这些我觉得最有价值的不是记住了多少标签而是建立了**语义化思维**- 看到一段内容第一反应是该用什么标签表达它的含义- 而不是怎么让它看起来好看那是 CSS 的事 **给初学者的建议**不要急着背标签打开任意一个网站按 F12 看看它的 HTML 结构你会发现课堂上学的东西都在里面。**下一步计划**CSS 基础 → 选择器与盒模型 → Flex 布局 → 实战项目