本文是基于b站up 黑马pink讲前端 的最新视频制作的笔记。
使用的开发平台是 Trae CN
视频链接：2025版pink老师最新AI+前端入门教程，零基础必看的html5、css3、grid、flex布局、响应式、移动端，bootstrap5框架，AI工具

HTML简介及HTML文档

标签关系

包括并列关系和嵌套关系

标题和段落标签及语义化介绍

标题标签h

段落标签p

语义化

增加可读性，可访问性

强调与重要性标签

如：加粗，倾斜，下划线效果

知识点

使用示例

注释标签

跨越多行的注释直接换行就行

块级元素和内联元素

HTML中主要的两种元素类别：块级元素和内联元素

段落p标签里不要放其他块级元素。
p也是块级元素。
段落里面主要放文字相关，比如内联元素。
p里面嵌套块级元素（比如p、h、div）会出现嵌套了3级的问题


元素分类不是不可更改的，css可以通过display改变显示模式。

图像标签及常见格式

img标签

属性采取键值对的形式，属性=“值”
属性之间没有必要的先后顺序
属性之间必须有空格分隔
html文件和图片文件需要放在同一个文件夹中
alt相当于一个提高用户体验的东西

图片属性

但是一般建议通过CSS来修改

比例会拉伸！ 一般不用同时修改宽度和高度，让另一边等比例缩放。

属性之间必须有空格
alt是备选文本，title是鼠标悬停图片上时会出现的文本

常见的图片格式

• webp画质清晰，并且图像小。比如 淘宝使用的。
• avif图片更小。 如 b站和京东使用的。
• 不同格式的图片（包括gif），的插入方式都是相同的。

总结

路径分类

音视频标签以及下载方式

主要属性

大小也是通过width和height调整
controls=“controls” 是播放控件
在h5中如果属性的键和值是相同的，则可以省略值

其他属性

使用示例

注意：浏览器默认如果需要自动播放，必须先静音

带有设置封面的代码示例

视频属性小结

7个属性

属性	作用
src	视频地址
controls	播放控件
width/height	宽度/高度
autoplay	自动播放
loop	循环播放
muted	静音
poster	预览图像

支持的格式

html5主要支持mp4、ogg、webm格式的视频，主要是mp4

实际开发中视频标签的兼容性写法

采取更兼容性的写法：
src不写在vedio的里面，而是使用source标签
（source是单标签）。

为浏览器准备多种格式的视频，保证兼容性！
注意：source元素的type属性能够让浏览器通过检查这个属性来迅速跳过不支持的格式。
如果没有type属性，浏览器会先加载，后判断，会耗费大量的时间和资源。

实际应用

实际开发中音频标签的兼容性写法

兼容性

自动播放

音频标签浏览器不允许自动播放，后续通过js实现。【待补充】

创建超级链接以及锚点链接

超链接使文档能够链接到任何文档或资源，也可以链接到文档的指定部分。

href 属性 也称为超文本引用或目标，包含一个网址，来创建一个基本链接。

使用示例

问题 当前是在本标签页上打开链接，原本的html被关闭了 /(ㄒoㄒ)/~~ 这通常不是我们想要的效果！解决方案：设置属性

属性

一般会给页面中的logo添加title。

使用示例

链接类型

外部链接

内部链接

空链接

没有实际指向目标的超链接，符号是#

<a href="#">商品列表</a>

下载链接

如果是exe或者压缩包点击是下载

<a href="download.exe">下载window版本</a>

邮件链接

简单场景或者个人使用情况下使用。
公司或者流量大的网站慎用。

<a href="mailto:邮箱地址">给我发邮件</a>

这里的 mailto: 是固定用法

锚点链接

注意"#"

使用示例

把需要点击的部分设置为链接

页面的滑动效果及使用示例CSS实现

使用示例

网页结构标签和无语义标签

类别	说明
网站结构标签	网页的外观多种多样，但是大概都包含：页眉、导航栏、主内容、侧边栏、页脚
无语义标签	没有合适语义标签时，在进行一些布局时可以选择：div和span标签
列表标签	显示内容更加整齐有序

网站结构标签

标签介绍

这些标签都是双标签！o((>ω< ))o

布局

无语义标签

标签介绍

• div一般用于适应低版本的浏览器。
• div和span最大的区别在于一个是块级，一个是行内。
• span用来在行内修改样式。
  o((>ω< ))o

使用案例

1. 小米
   
2. span不独占一行。
   

列表标签-有序无序和描述列表

无序列表

• 顺序无关紧要的列表
• 常用于一些整齐对齐的模块中使用

使用示例

语法

外部大标签ul，内部用li，且ul标签内部只能写li

有序列表 ol 【了解即可】(^_)

• 顺序有关紧要的列表
• 实际开发中用的较少，也可以通过表格来实现相同效果。
• 自动编号

语法

描述列表

• 标记一组项目及相关描述
• 类似于小标题

使用场景

语法

表格标签和AI合并单元格

• 表格作用：以结构化方式展示行列数据，使信息清晰、易读且便于对比。
• 网页场景：主要用于数据展示或者后台管理系统的信息展示。

表格的基本组成

表格没有列的概念，而是用单元格。
美化表格是CSS的工作而不是HTML！(╯▔皿▔)╯

使用示例

表格样式通过CSS实现而不是HTML！！

表头也用tr行标签

表头用th表头单元格

区别在于表头会垂直居中并加粗

表格结构标签

• 增强表格语义，让表格结构更清晰。

语法

• 让结构更清楚，实际显示没太大区别。
  

单元格合并

左上原则

手动合并

使用示例

表单容器以及文本框和密码框属性

表单：用于收集用户输入的数据，并将数据提交到后端进行处理。

核心组成

form标签

• 作用：定义表单的容器，包裹所有表单控件。

<form action=""></form>

action属性定义在提交表单时，应该把所收集的数据送给哪一个URL去处理。

表单控件

1. input
   

• 文本框和密码框
• 
• 使用示例
• 
• access key 就是相当于一个快捷键，能够快速定位到这个元素。
  比如京东网页版源码：
  
  在该页面使用alt+s能够快速定位到搜索框！o(=•ェ•=)m
• autocomplete 是自动填充，一般设为off，防止泄露。

input表单-单选复选和文件域

单选框和复选框

单选框使用示例 audio

name用来分组，这样同一组的单选框只能选中一个。
value用来传递用户输入的值。

复选框使用示例 checkbox

checkbox可以多选

文件域 file

• 文件域默认只能选择一个文件，如果要选择多个文件要用multiple。
• 可接受的文件格式用逗号隔开
  

使用示例

<li>
	头像：
	<input type="file" name="file“ multiple accept=".gif,.jpg,.mp4">
</li>

文本域和下拉表单以及button按钮

辅助标签label和字符实体

科技日报综合案例

类型选择器

类选择器

id和通配符选择器

画盒子案例

关系选择器

后代和自带选择器

兄弟选择器