HTML5(Web前端开发笔记第一期)
p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解
目录
- 三件套
- 标签
- 标题标签
- 段落标签
- 文本格式化标签
- 图像标签
- 超链接标签
- 锚点链接
- 默认链接地址
- 音频标签
- 视频标签
- HTML基本骨架
- 综合案例->个人简介
- 列表
- 表格
- 表单
- input标签
- 单选框radio
- 上传文件file
- 多选框checkbox
- 下拉菜单
- 文本域
- label标签
- 按钮
- 无语义的布局标签
- 字符实体
- 综合案例->写一个注册信息
三件套
Web三件套功能说明
1. HTML（超文本标记语言）
核心功能：定义网页的内容与结构，如标题、段落、列表、图片等元素的层级关系。
实现方式：通过标签搭建文档骨架，形成树状结构供浏览器解析
2. CSS（层叠样式表）
核心功能：控制网页的外观与布局，包括颜色、字体、间距、响应式设计等视觉效果。
实现方式：通过选择器（如类、ID）和属性（如 color、margin）为HTML元素添加样式规则
3. JavaScript（JS）
核心功能：实现网页的交互与动态功能，如表单验证、数据更新、动画效果等。
实现方式：通过操作DOM（文档对象模型）动态修改页面内容，或通过事件监听（如点击、输入）响应用户行为。
。
HTML负责结构，CSS控制样式，JavaScript处理交互和动态功能。
三者共同构建完整的Web页面：HTML提供内容基础，CSS提升视觉体验，JavaScript增强交互性，形成现代Web开发的核心技术体系。
。
比喻说明，HTML是骨骼，CSS是皮肤，JavaScript是器官
标签
HTML:超文本标记语言
超文本，即链接
标记，也叫标签，即带尖括号的文本
语法:</strong> 需要加粗的文字 <strong>
双标签：标签通常成对出现，中间包裹内容
单标签：只有开始标签，没有结束标签
<>里面 放英文字母(标签名)
结束标签比开始标签多"/"
举例
<strong>Hello World</strong><!-- 这是一个注释，它不会在浏览器中显示 --><!-- 换行(注意！浏览器不识别代码中的Enter换行) --><br><strong>Hello World</strong><!-- 添加水平线 --><hr>
嵌套关系：一个标签里面包含了其他标签的写法
并列关系：两个平级别的标签
举例
<html><!-- 嵌套关系 --><head></head><body></body><!-- 平级关系 -->
</html>
标题标签
标签名:h1~h6(双标签)
特点：文字加粗、字号逐渐缩小、独占一行(换行)
h1标签在一个网页中尽量只用一次，用来放新闻标题或网页logo
h2之后的无限制使用
<body><h1>Hello World</h1><h2>Hello World</h2>
</body>
段落标签
一般用在新闻段落、文章段落、产品描述信息等
标签名:p(双标签)
特点：独占一行、段落之间存在间隙
<body><p>这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解</p><!-- 段落之间有间隙 --><p>这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解</p>
</body>
文本格式化标签
为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等
<body><strong>加粗</strong>
<br>
<em>倾斜</em>
<br>
<ins>下划线</ins>
<br>
<del>删除线</del></body>
图像标签
在网页中插入图片
标签名<img src="图片的URL">
src用于指定图像的位置和名称，是图像标签的必须属性
属性名=“属性值”
属性写在尖括号里，标签名后面，标签名和属性之间用空格分开，不区分先后顺序
<body><img src="./1.1.jpg" alt="123" title="我老婆" width="50" height="50" >
<img src="./1.1.jpg" alt="123" title="我老婆" width="100" height="100"></body>
超链接标签
点击跳转其他页面
<!-- 将此窗口跳转到b站 -->
<a href="https://www.bilibili.com/">点击此处跳转b站</a><!-- 新开一个窗口跳转 -->
<a href="1.1.jpg" target="_blank">点击此处跳转</a><!-- herf写#，表示一个空连接 -->
<a href="#" >点击</a>
锚点链接
锚点链接
默认链接地址
默认链接地址
音频标签
标签名<audio src="音频的URL"></audio>
src用于指定音频的位置和名称，是音频标签的必须属性
<body><audio src="2023-09-24%2016-07-36.mp3" controls="controls"></audio>
<audio src="2023-09-24%2016-07-36.mp3" controls></audio>
<!-- 二者等同，这时因为如果属性名和属性值完全一样，可以简写为一个单词--></body>
视频标签
标签名<video src="视频的URL"></video>
src用于指定视频的位置和名称，是视频标签的必须属性
<body><video src="2023-09-24%2016-07-36.mp4" controls width="500" height="500"></video>
<!-- 想要自动播放，就必须要有muted属性 --></body>
HTML基本骨架
HTML的基本骨架是网页模板
html:整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主题，存放给用户看的代码，，例如图片、文字
title:网页标题
综合案例->个人简介
网页制作思路:从上到下、先整体再局部，逐步分析制作
分析内容->写代码->保存->刷新浏览器，看效果
声明：简介及图片完全虚构，如有雷同纯属巧合
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>个人简介</title>
</head>
<body><h1>张三</h1><hr><p>张三（1992年出生），中国<a href="#">人工智能</a>领域青年专家，现任中国<a href="#">人工智能</a>产业发展联盟理事、XX大学客座教授。</p><img src="./img.png" alt="张三照片" title="张三" width="200" height="200"><h2>学习经历</h2><p>2010-2014年：就读于XX大学计算机科学与技术专业，获学士学位， 期间连续四年获学术奖学金，并在核心期刊发表多篇人工智能领域论文 。<br>2014-2017年：攻读同校人工智能方向硕士学位，研究领域聚焦机器学习与自然语言处理，参与多项国家级科研项目</p><h2>主要成就</h2><p>技术创新：<ins>主导开发基于AI的医疗诊断系统，应用于三甲医院，显著提升早期疾病筛查准确率至95%以上</ins>。<br>行业影响：在金融领域推动智能风控模型落地，协助某银行降低30%信贷风险，相关成果获省级科技进步一等奖。<br>学术贡献：发表20余篇SCI论文，出版专著《人工智能跨领域实践》，被多所高校列为教材。</p><h2>社会任职</h2><p>2022年至今：<strong>担任中国人工智能产业发展联盟理事</strong>，参与制定行业技术标准与伦理规范。<br>2024年起：受聘为XX大学客座教授，联合培养硕博研究生，并主导校企合作实验室建设。<br>2025年：入选“青年科技领军人才计划”，兼任市政府数字化转型顾问团成员，推动智慧城市建设。</p></body>
</html>
列表
列表
列表作用：布局内容排列整齐的区域
列表分为：无序列表、有序列表、定义列表
无序列表：布局整齐的不需要规定顺序的区域
标签:ul嵌套li，ul是无序列表，li是列表条目
ul标签里面只能包含li标签；li标签里面可以包裹任何内容
<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul><hr><ul><li>这是第一条新闻</li><li>这是第二条新闻</li><li>这是第三条新闻</li>
</ul>
有序列表：布局整齐的需要规定顺序的区域
标签:ol嵌套li，ol是无序列表，li是列表条目
ol标签里面只能包含li标签；li标签里面可以包裹任何内容
<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol><hr><ol><li>这是第一条新闻</li><li>这是第二条新闻</li><li>这是第三条新闻</li>
</ol>
定义列表
标签:dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
dl里面只能包含dt和dd
dt和dd里面能包裹任何内容
表格
网页中的表格于Excel表格类似，用来展示数据
标签:table嵌套tr，tr嵌套td/th
在网页中表格默认没有边框线，使用border属性可以为表格添加边框线
<table border="1"><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr><tr><td>张三</td><td>2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>2</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr><tr><td>赵六</td><td>2</td><td>18</td><td>10</td></tr></table>
表格结构标签:用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰
<table border="1"><thead><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr></thead><tbody><tr><td>张三</td><td>2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>2</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr></tbody><tfoot><tr><td>总结</td><td>总结</td><td>总结</td><td>总结</td></tr></tfoot></table>
合并单元格：将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤：
1：明确合并的目标
2：保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量)
跨行合并：保留最上单元格，添加属性rowspa
跨列合并：保留最左单元格，添加属性colspan
3：删除其他单元格
<table border="1"><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr><tr><td>张三</td><td rowspan="2">2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr><tr><td colspan="4">总结</td></tr></table>
表单
表单
表单：收集用户信息
使用场景：登陆页面、注册页面、搜索区域
标签:<form></form>
input标签
input标签type属性值不同，则功能不同
标签:<input type = "...">
<!-- 特点：输入什么就显示什么-->
文本框：<input type="text">
<br>
<!-- 特点：不显示输入-->
密码框：<input type="password">
<br>
单选框：<input type="radio">
<br>
多选框：<input type="checkbox">
<br>
上传文件：<input type="file">
input标签占位文本：提示信息
标签:<input type = "..." placeholder="提示信息">
多用于文本框和密码框
文本框：<input type="text" placeholder="请输入用户名">
<br>
密码框：<input type="password" placeholder="请输入密码">
单选框radio
<input type="radio" checked name="gender">男
<input type="radio" name="gender">女
上传文件file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能
上传文件：<input type="file" multiple>
多选框checkbox
多选框也叫复选框；默认选中：checked
<input type="checkbox" checked>选项A
<input type="checkbox" checked>选项B
<input type="checkbox">选项C
下拉菜单
标签:select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
<select><option>高一</option><option selected>高二</option><!-- 加了selected，默认选中 --><option>高三</option><option>大一</option>
</select>
文本域
作用：多行输入文本的表单控件
标签:<textarea>默认提示文字</textarea>
label标签
作用：网页中，某个标签的说明文本
用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
label标签-增大点击范围
写法一：label标签只包含内容，不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
写法二：使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">男</label>
支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
按钮
标签:<button type="">按钮</button>
<!-- form表单区域 -->
<form>用户名:<input type="text"><br>密码:<input type="password"><br><button type="submit">提交</button><button type="reset">重置</button></form>
无语义的布局标签
作用：布局网页(划分网页区域，摆放内容)
div：独占一行
span：不换行
两个都是双标签
<div>这是div标签</div><!--独占一行-->
你好,世界!
<span>这是span标签</span><!--不会换行-->
字符实体
作用：在网页中显示预留字符(显示出特殊符号，如<、>)
<!--在网页中敲键盘的空格，网页只识别一个-->
你好 世界！
<br>
<>
综合案例->写一个注册信息
<body>
<!----------------------><h1>注册信息</h1><!---------表单控件-->
<form><!--个人信息-->
<h2>个人信息</h2><label>姓名:</label> <input type="text" placeholder="请输入姓名"><br><label>密码:</label> <input type="password" placeholder="请输入密码"><br><label>确认密码:</label> <input type="password" placeholder="请输入确认密码"><br><br><label>性别:</label><label><input type="radio" name="gender" checked>男</label><label><input type="radio" name="gender">女</label><br><br><label>居住城市:</label><select><option>乐山</option><option>重庆</option><option selected>成都</option><option>资阳</option><option>眉山</option></select><br><br><!--教育经历-->
<h2>教育经历</h2><label>最高学历</label><select><option>大学</option><option>博士</option><option selected>硕士</option><option>高中</option></select><br><br><label>学校:</label> <input type="text" placeholder="请输入学校"><br><label>专业:</label> <input type="text" placeholder="请输入专业"><br><br><label>在校时间</label><select><option>2015</option><option>2016</option><option selected>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option selected>2021</option><option>2022</option></select><br><br><!--工作经历-->
<h2>工作经历</h2><label>公司名称：</label><input type="text" placeholder="请输入公司名称"><br><label>工作描述：</label> <br> <textarea></textarea><br><br><!--协议--><input type="checkbox"><label>已阅读并同意下协议</label><ul><li><a href="#"><ins>《用户服务协议》</ins></a></li><li><a href="#"><ins>《隐私政策》</ins></a></li></ul><br><br><br><br><!--按钮--><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
<!---------------------->
</body>
相关文章：
HTML5(Web前端开发笔记第一期)
p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例->个人简介列表表格表单input标签单选框radio上传…...
【AIGC】计算机视觉-YOLO系列家族
YOLO系列家族 （1）YOLO发展史（2） YOLOX（3） YOLOv6（4） YOLOv7（5） YOLOv8（6） YOLOv9（7）YOLOv10（8&…...
Qt5中视口（ViewPort）与窗口（Window）
在Qt中，setViewport和setWindow是用于控制坐标系映射的核心方法，二者共同决定了绘图逻辑与物理设备之间的转换关系。以下是关键点总结： 1. 视口（Viewport）与窗口（Window）的核心区别 视口…...
The First项目报告：重塑 DeFi 流动性的革新者，ELX 即将登陆 The First
随着去中心化金融（DeFi）的持续发展，流动性问题一直是各类去中心化交易所（DEX）和项目方面临的核心挑战。传统的做市模式往往需要依赖中心化流动性提供者，而这些机构的资金控制能力可能影响代币价格波动&…...
OpenCV连续数字识别—可运行验证
前言 文章开始，瞎说一点其他的东西，真的是很离谱，找了至少两三个小时，就一个简单的需求： 1、利用OpenCV 在Windows进行抓图 2、利用OpenCV 进行连续数字的检测。 3、使用C，Qt 3、将检测的结果显示出来 …...
LiveGBS流媒体平台GB/T28181功能-海康大华宇视华为像头GB28181国标语音对讲语音喊话需要的摄像头设备及服务HTTPS准备
LiveGBS海康大华宇视华为像头GB28181国标语音对讲语音喊话需要的摄像头设备及服务HTTPS准备 1、背景2、准备2.1、服务端必备条件（注意）2.2、准备语音对讲设备2.2.1、 大华摄像机2.2.1.1、 配置接入示例2.2.1.2、 配置音频通道编号 2.2.2、 海康摄像机2.2…...
第十五章：go package 包的管理
import f "fmt" // 注意 这里 f 是包的别名 init初始化函数 在每一个Go源文件中，都可以定义任意个如下格式的特殊函数： func init(){// ... } package：声明包的关键字 packagename：包名，可以不与文…...
面试基础---高并发/高可用架构下的分库分表实战：基于 ShardingSphere 的深度解析
高并发/高可用架构下的分库分表实战：基于 ShardingSphere 的深度解析 引言 在高并发、高可用的分布式系统中，单库单表的性能瓶颈日益凸显。分库分表（Sharding）作为一种常见的数据库水平拆分方案，能够有效提升系统的扩…...
deepseek的regflow安装mac版本
deepseek的ragflow部署安装 一:ollama安装,自行完成,我本地已安装 二:查看大模型情况oll::命令ollama list,我本地无ragflow 三:docker安装:命令docker version ,自行完成,我本地已安装 四:安装知识库软件ragflow: 简单科普下Ragflow 是一个基于深度学习模型的问答生成工具&…...
Facebook 的框架及技术栈
一、前端框架与技术 React.js 及其生态系统 核心原理与特点 React.js 是 Facebook 开源的用于构建用户界面的 JavaScript 库。它的核心概念是组件化，将用户界面拆分成一个个独立的、可复用的组件。每个组件都有自己的状态（state）和属性&#…...
文献分享: 对ColBERT段落多向量的剪枝——基于学习的方法
原论文 1. 导论 & \textbf{\&} &方法 1️⃣要干啥：在 ColBERT \text{ColBERT} ColBERT方法中，限制每个段落要保留的 Token \text{Token} Token的数量，或者说对段落 Token \text{Token} Token进行剪枝 2️⃣怎么干：注…...
社交软件频繁更新，UI 设计在其中扮演什么角色？
在当今数字化时代，社交软件已成为人们日常生活中不可或缺的一部分。随着科技的飞速发展和用户需求的不断变化，社交软件更新频率日益加快。在这频繁更新的背后，UI 设计扮演着至关重要的角色，它如同社交软件的 “门面担当” 与 “交…...
Gemini Robotics：Google DeepMind 让 AI 机器人真正“动”起来！
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
概率论的基本知识
逆概率还不懂，改天再想想。 联合概率 联合概率（Joint Probability） 是概率论中的一个重要概念，用于描述多个随机变量同时取某些值的概率。联合概率可以帮助我们理解多个变量之间的关系。...
AI大数据挖掘的威力
通过AI挖掘大数据可以发现很多世界上用传统方法无法发现的潜在规律。 人类群体可以被精准的操控，这在AI发达的未来会越来越现实，甚至可以在社会动荡前夕精准清理权威节点。 基于AI与大数据的人类群体潜在规律发现 随着AI和大数据技术的深度结合…...
限流及熔断的场景？
限流（Rate Limiting）和熔断（Circuit Breaker）是高并发系统中常见的保护机制，用于防止系统过载和提高稳定性。它们适用于不同的场景： 限流（Rate Limiting）适用场景 限流主要用于控制…...
使用服务器如何DNS呢
莱卡云服务器 DNS 配置指南 一、配置云服务器本地 DNS 修改网络配置文件 Ubuntu/Debian： bashCopy Code sudo nano /etc/network/interfaces # 添加或修改 DNS 配置 dns-nameservers 8.8.8.8 8.8.4.4 *（保存后重启网络服务…...
【SpringBoot】实现登录功能
在上一篇博客中，我们讲解了注册页面的实现。在此基础上会跳转到登录页面，今天给大家带来的是使用 SpringBoot，MyBatis，Html，CSS，JavaScript，前后端交互实现一个登录功能。 目录 一、效果 二、…...
图论part3｜101.孤岛的总面积、沉没孤岛、417. 太平洋大西洋水流问题
101. 孤岛的总面积 🔗：101. 孤岛的总面积思路：和昨天的岛的区别是：是否有挨着边的岛屿 所以可以先遍历四条边挨着的岛屿，把他们标记为非孤岛再计算其他岛屿当中的最大面积 代码：（深度搜索&…...
选型消息队列（MQ）：ActiveMQ、RabbitMQ、RocketMQ、Kafka对比
选型消息队列（MQ）：ActiveMQ、RabbitMQ、RocketMQ、Kafka对比 选型消息队列（MQ）1. 引言2. 消息队列核心指标3. MQ 技术对比分析4. 详细分析及案例4.1 ActiveMQ：传统企业级 MQ 方案4.2 RabbitMQ：高…...
常见FUZZ姿势与工具实战：从未知目录到备份文件漏洞挖掘
本文仅供学习交流使用，严禁用于非法用途。未经授权，禁止对任何网站或系统进行未授权的测试或攻击。因使用本文所述技术造成的任何后果，由使用者自行承担。请严格遵守《网络安全法》及相关法律法规！ 目录 本文仅供学习交流使用&am…...
基于异构特征融合与轻量级集成学习的软件漏洞挖掘方案设计与Python实现
标题：基于异构特征融合与轻量级集成学习的软件漏洞挖掘方案设计与Python实现 一、方案设计原理 异构特征工程 静态特征：基于AST的代码属性图（CPG）解析（使用Joern+NetworkX）动态特征：内存访问模式分析（通过QEMU模拟执行）上下文特征：CWE漏洞模式匹配（集成Semgrep规则引…...
监控快手关注列表更新以及去视频水印视频
def printData(self):if len(self.UpdateDataList) > 0:self.UpdateDataList sorted(self.UpdateDataList, keylambda x: x[minutes]) # 先更新的在前sucess 0for index, video in enumerate(self.UpdateDataList):minutes video[minutes]if minutes > self.updateIn…...
【从零开始学习计算机科学】数据库系统（十一）云数据库、NoSQL 与 NewSQL
【从零开始学习计算机科学】数据库系统（十一）云数据库、NoSQL 与 NewSQL 云数据库云服务器的服务云数据库和传统的分布式数据库的异同NoSQLNoSQL数据库的特点CAP定理NoSQL的特性NoSQL数据库的分类NoSQL的适用场景Nosql数据库实例-RedisRedis的优势MongoDBMongoDB的特点NewSQL…...
江科大51单片机笔记【12】AT24C02（I2C总线）
写在前言 此为博主自学江科大51单片机（B站）的笔记，方便后续重温知识 在后面的章节中，为了防止篇幅过长和易于查找，我把一个小节分成两部分来发，上章节主要是关于本节课的硬件介绍、电路图、原理图等理论知识…...
【附JS、Python、C++题解】Leetcode面试150题（9）——三数之和
一、题目 15. 三数之和 给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足： i!j、i!k 且 j! k ，同时还满足：nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意…...
网络安全防护架构有哪些 网络安全防护措施包括
网络安全预防措施 网安措施 计算机网络安全措施主要包括保护网络安全、保护应用服务安全和保护系统安全三个方面，各个方面都要结合考虑安全防护的物理安全、防火墙、信息安全、Web安全、媒体安全等等。 (一)保护网络安全。 网络安全是为保护商务各方网络端系统之…...
多线程实现批量保存数据
首先注入 private final SqlSessionFactory sqlSessionFactory;private final static int BATCH_SIZE 200; //保存数据条数private final static int THREAD_POOL_SIZE 15; // 线程池大小然后把保存的数据根据BATCH_SIZE 切割成多个批次封装起来： /*** 将数据分成…...
ActiveMQ监听器在MQ重启后不再监听问题
应用的监听器注解 JmsListener(destination "TopicName",containerFactory "FactoryName")工厂代码 BeanJmsListenerContainerFactory<?> FactoryName(ConnectionFactory connectionFactory){SimpleJmsListenerContainerFactory factory new S…...
大模型架构记录5-向量数据库
一 倒排索引、KNN、PQ 1.1 基础版本 query -> requery 对问题做处理，处理上下文 对query 做 refined query 1.2 向量数据库 二 搜索逻辑 2.1 knn 2.2 近似KNN 先和N个空间的均值比较再和空间内部的所有点比较，计算最近值。 优化一： …...