本文是基于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和通配符选择器

画盒子案例

关系选择器

后代和自带选择器

兄弟选择器

# 前端
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

智能体通信协议MCP

智能体通信协议解决了工具集成、能力扩展和多智能体协作的核心问题MCP、A2A、ANP 三种协议分别针对不同场景，互为补充HelloAgents 框架通过三层架构实现了协议的标准化集成MCP 协议作为应用最成熟的协议，提供了灵活的工具访问能力和多种传输方式实际应用中应根据具体需求选择合适的协议，并利用框架提供的工具封装简化开发通过掌握这些通信协议，能够构建更灵活、可扩展、协同工作的智能体系统，突破单

avatar 2048 AI社区
cover

智能体架构设计与开发实战：从理论到实现

avatar 2048 AI社区

C语言—指针

基类型指针名；int* p;// int*表示的是类型说明符int a=100;p =&a;p指针中存储了a的地址，p指向了aint c = *p;读出指针指向内容*p = 200;*p int ,左值情况*p == a向指针指向的内存，写入新的数据。char*p;//p -

avatar 2048 AI社区