当前位置： 首页 > news >正文

【web前端HTML+CSS+JS】--- HTML学习笔记01

news 2026/3/28 0:27:37

学习链接：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

学习文档：

Web 开发技术 | MDN (mozilla.org)

一、前后端工作流程

WEB模型：前端用于采集和展示信息，中间的数据请求由后端负责

CS架构：客服端-服务器，通过APP/软件访问

BS架构：浏览器-服务器，通过网站访问

浏览器内核用来解析前端代码

二、HTML5+CSS+JS

1.语言功能

HTML用来搭建页面内容和结构

CSS用来添加样式，比如字体颜色大小、背景颜色、字体间距等

JS用来实现网页的行为，让页面动起来

2.前端开发工具

常用vscode来开发

3.插件

vscode中可安装一些插件：Auto Rename Tag（自动修改尾标签），会了吧（翻译单词）

Live Server插件工作原理：html文件要放到文件夹里，用vscode打开文件夹，右键可以在vscode中打开页面，修改内容之后保存会在页面实时更新

三、HTML5

1.HTML和XHTML

具有根结构、头结构、体结构标签

HTML的语法较松散，可以没有根结构，XHTML的语法很严格，现有绝大多数还是用HTML

2.注释：快捷键ctrl+/

<!--注释-->

3.标签

（1）语法

所有的指令都需要标签（开始标签，内容/标签体，结束标签，元素），标签不区分大小写，推荐使用小写

（2）分类

按照标签的结构来分：①围堵标签，如段落<p></p>②自闭合标签，如水平分割线<hr>

按照标签效果来分：①行内（内联）标签：不会独占一行，会和其他标签共享一行。表示斜体

我是<em>第一名</em>

②块级标签：会独立成为一行，不和其他标签共享一行。

（3）嵌套

一个标签中可以写另一个标签：行内嵌套行内，块级嵌套行内，块级嵌套块级

行内不可以嵌套块级，行内会失效

<!--行内嵌套行内-->
我是<em><strong>第一名<strong/></em>

（4）常见标签

标题标签：<h1></h1>  <h2></h2>.........字体大小不同

段落标签：<p></p>

4.常规属性（有值）

（1）单引号/双引号

属性是作用在标签上的，属性不会直接作用在内容上，属性值的引号可以省略，但不建议

属性的值可以用单引号或者双引号，但同类型的引号是不能嵌套的

（2）以超链接标签为例

href属性：表示跳转到哪个网址

title属性：给元素添加提示信息，鼠标悬停时可以提示内容

target属性：_blank 让页面在新的窗口打开，_self在当前页面加载（默认）

可以给图片、标题添加超链接

<a href="https://developer.mozilla.org/zh-CN/docs/Web" title="这是web开发文档" target="_blank">这是链接</a>

5. 布尔属性（无值）

是属性的一种简化写法，常见于表单标签中，没有值，比如下面的disabled

<!--表示输入框不可用-->
<input type="text" disabled> 请输入名字

6.实体字符

如何表示html语法中的字符

7.空格的处理

无论写多个空格，都会只展示一个空格，所以需要用实体字符&nbsp;

<p>My&nbsp;&nbsp;&nbsp;&nbsp;cat is very grumpy</p>

8.HTML结构

<!--<!DOCTYPE html> 是最短的有效文档声明-->
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的测试站点</title></head><body><p>这是我的页面</p></body>
</html>

meta标签（元标签）：用于指定元数据，即网页的描述，关键词，文件的最后修改时间，作者及其他元数据，不会显示在客户端。

字符集：字符和二进制在计算机中的存储关系，英文用ascii，中文用gbk，通用用utf-8

9.列表（可以嵌套）

（1）无序列表

通过属性可以更换前面圆圈的样式，嵌套时自动更换图标

（2）有序列表

通过属性可以更换前面序号的样式，嵌套时不会自动更换图标

10.语义化

语义：表示该标签的意义，比如h1表示一级标题

标签效果：给用户看到的效果，可以通过css控制样式

任何效果都可以通过控制标签实现，所以语义是最重要的

<em>和<i>标签都可以表示斜体，更推荐使用<em>，因为不止有斜体效果

<strong>和<b>标签都可以表示加粗，更推荐使用<strong>，因为不止有加粗效果

11.插入图片

插入本地图片或链接指向的图片，推荐本地图片

一般不会直接修改图片的大小，会糊

12.相对路径和绝对路径

./当前路径  可省略

../上一级路径

13.表格

（1）结构

（2）属性与样式

cellspacing：设置每个数据边框之间的距离

cellpadding：设置数据与边框之间的距离

表头改为<th>：对数据加粗居中

align属性：数据居中

bgcolor属性：设置背景颜色

（3）跨行跨列（单元格合并）

跨列操作

跨行操作

14.表单

作用：采集信息

相关文章：

【web前端HTML+CSS+JS】--- HTML学习笔记01

学习链接&#xff1a;黑马程序员pink老师前端入门教程&#xff0c;零基础必看的h5(html5)css3移动端前端视频教程_哔哩哔哩_bilibili 学习文档&#xff1a; Web 开发技术 | MDN (mozilla.org) 一、前后端工作流程 WEB模型&#xff1a;前端用于采集和展示信息&#xff0c;中…...

编程日记 2024/7/7 1:31:26

Go 语言入门（一）

Go Modules依赖包查找机制 下载的第三方的依赖存储在 $GOPATH/pkg/mod 下go install 生成的可执行文件存储在 $GOPATH/bin下依赖查找顺序&#xff1a; 工作目录$GOPATH/pkg/mod$GOPATH/src 一、Go语言基础 1.标识符与关键字 1.1 命名方式 ​ go变量、常量、自定义类型、包…...

编程日记 2024/7/7 1:30:24

爬虫笔记20——票星球抢票脚本的实现

以下内容仅供交流学习使用&#xff01;&#xff01;&#xff01; 思路分析 前面的爬虫笔记一步一步走过来我们的技术水平也有了较大的提升了&#xff0c;现在我们来进行一下票星球抢票实战项目&#xff0c;实现票星球的自动抢票。 我们打开票星球的移动端页面&#xff0c;分…...

编程日记 2024/7/7 1:28:21

DDR3（三）

目录 1 预取1.1 什么是预取1.2 预取有哪些好处1.3 结构框图1.4 总结 2 突发2.1 什么是突发2.2 突发与预取 本文讲解DDR中常见的两个术语&#xff1a;预取和突发&#xff0c;对这两个概念理解的关键在于地址线的低位是否参与译码&#xff0c;具体内容请继续往下看。 1 预取 1.1…...

编程日记 2024/7/7 1:27:20

JDK都出到20多了，你还不会使用JDK8的Stream流写代码吗？

目录 前言 Stream流 是什么&#xff1f; 为什么要用Steam流 常见stream流使用案例 映射 map() & 集合 collect() 单字段映射 多字段映射 映射为其他的对象 映射为 Map 去重 distinct() 过滤 filter() Stream流的其他方法 使用Stream流的弊端 前言 当你某天看…...

编程日记 2024/7/7 1:25:17

QT slots 函数

文章目录 概述小结 概述 在Qt中&#xff0c;slots 是一种特殊的成员函数&#xff0c;它们可以与对象发出的信号连接。当信号被触发时&#xff0c;连接的槽函数会被调用。 来个简单的示例吧&#xff0c;如下图&#xff1a; #include <QObject> #include <QDebug>…...

编程日记 2024/7/7 1:24:16

pycharm如何使用jupyter

目录 配置jupyter新建jupyter文件别人写的方法&#xff08;在pycharm种安装&#xff0c;在网页中使用&#xff09; pycharm专业版 配置jupyter 在pycharm终端启动一个conda虚拟环境&#xff0c;输入 conda install jupyter会有很多前置包需要安装&#xff1a; 新建jupyter…...

编程日记 2024/7/7 1:22:15

机器学习——无监督学习(k-means算法)

1、K-Means聚类算法 K表示超参数个数&#xff0c;如分成几个类别&#xff0c;K值就取多少。若无需求&#xff0c;可使用网格搜索找到最佳的K。 步骤&#xff1a; 1、随机设置K个特征空间内的点作为初始聚类中心&#xff1b; 2、对于其他每个点计算到K个中心的距离&#xff0c;…...

编程日记 2024/7/7 1:21:14

强化学习-6 DDPG、PPO、SAC算法

文章目录 1 DPG方法2 DDPG算法3 DDPG算法的优缺点4 TD3算法4.1 双Q网络4.2 延迟更新4.3 噪声正则 5 附15.1 Ornstein-Uhlenbeck (OU) 噪声5.1.1 定义5.1.2 特性5.1.3 直观理解5.1.4 数学性质5.1.5 代码示例5.1.6 总结 6 重要性采样7 PPO算法8 附28.1 重要性采样方差计算8.1.1 公…...

编程日记 2024/7/7 1:19:12

vue3实现多表头列表el-table，拖拽，鼠标滑轮滚动条优化

需求背景解决效果index.vue 需求背景 需要实现多表头列表的用户体验优化 解决效果 index.vue <!--/** * author: liuk * date: 2024-07-03 * describe:**** 多表头列表 */--> <template><el-table ref"tableRef" height"calc(100% - 80px)&qu…...

编程日记 2024/7/7 1:16:10

Micron近期发布了32Gb DDR5 DRAM

Micron Technology近期发布了一项内存技术的重大突破——一款32Gb DDR5 DRAM芯片&#xff0c;这项创新不仅将存储容量翻倍&#xff0c;还显著提升了针对人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、高性能计算&#xff08;HPC&#xff09;以及数…...

编程日记 2024/7/7 1:14:08

SQL Server时间转换

第一种&#xff1a;format --转化成年月日 select format( GETDATE(),yyyy-MM-dd) --转化年月日&#xff0c;时分秒&#xff0c;这里的HH指24小时的&#xff0c;hh是12小时的 select format( GETDATE(),yyyy-MM-dd HH:mm:ss) --转化成时分秒的&#xff0c;这里就不一样的&…...

编程日记 2024/7/7 1:13:07

kubernetes集群部署：node节点部署和CRI-O运行时安装（三）

关于CRI-O Kubernetes最初使用Docker作为默认的容器运行时。然而&#xff0c;随着Kubernetes的发展和OCI标准的确立&#xff0c;社区开始寻找更专门化的解决方案&#xff0c;以减少复杂性和提高性能。CRI-O的主要目标是提供一个轻量级的容器运行时&#xff0c;它可以直接运行O…...

编程日记 2024/7/7 1:12:06

03：Spring MVC

文章目录 一&#xff1a;Spring MVC简介1&#xff1a;说说自己对于Spring MVC的了解&#xff1f;1.1&#xff1a;流程说明&#xff1a; 一&#xff1a;Spring MVC简介 Spring MVC就是一个MVC框架&#xff0c;Spring MVC annotation式的开发比Struts2方便&#xff0c;可以直接代…...

编程日记 2024/7/7 1:11:05

玩转springboot之springboot注册servlet

springboot注册servlet 有时候在springboot中依然需要注册servlet&#xff0c;filter&#xff0c;listener&#xff0c;就以servlet为例来进行说明&#xff0c;另外两个也都类似 使用WebServlet注解 在servlet3.0之后&#xff0c;servlet注册支持注解注册&#xff0c;而不需要在…...

编程日记 2024/7/7 1:10:04

推荐好玩的工具之OhMyPosh使用

解除禁止脚本 Set-ExecutionPolicy RemoteSigned 下载Oh My Posh winget install oh-my-posh 或者 Install-Module oh-my-posh -Scope AllUsers 下载Git提示 Install-Module posh-git -Scope CurrentUser 或者 Install-Module posh-git -Scope AllUser 下载命令提示 Install-Mo…...

编程日记 2024/7/7 1:09:03

pydub、ffmpeg 音频文件声道选择转换、采样率更改

快速查看音频通道数和每个通道能力判断具体哪个通道说话&#xff1b;一般能量大的那个算是说话 import wave from pydub import AudioSegment import numpy as npdef read_wav_file(file_path):with wave.open(file_path, rb) as wav_file:params wav_file.getparams()num_cha…...

编程日记 2024/7/7 1:08:02

0803实操-Windows Server系统管理

Windows Server系统管理 系统管理与基础配置 查看系统信息、更改计算机名称 网络配置 启用网络发现 Windows启用网络发现是指在网络设置中启用一个功能&#xff0c;该功能允许您的计算机在网络上识别和访问其他设备和计算机。具体来说&#xff0c;启用网络发现后&#xff…...

编程日记 2024/7/7 1:07:00

使用Java构建物联网应用的最佳实践

使用Java构建物联网应用的最佳实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着物联网&#xff08;IoT&#xff09;技术的快速发展&#xff0c;越来越…...

编程日记 2024/7/7 1:05:59

价格预言机的使用总结（一）：Chainlink篇

文章首发于公众号&#xff1a;Keegan小钢 前言 价格预言机已经成为了 DeFi 中不可获取的基础设施&#xff0c;很多 DeFi 应用都需要从价格预言机来获取稳定可信的价格数据&#xff0c;包括借贷协议 Compound、AAVE、Liquity &#xff0c;也包括衍生品交易所 dYdX、PERP 等等。…...

编程日记 2024/7/7 1:04:58

Phi-4-Reasoning-Vision基础教程：双卡4090环境安装、镜像拉取与端口映射

Phi-4-Reasoning-Vision基础教程&#xff1a;双卡4090环境安装、镜像拉取与端口映射 1. 环境准备与快速部署 在开始之前&#xff0c;请确保您的系统满足以下要求&#xff1a; 硬件配置&#xff1a;至少两张NVIDIA RTX 4090显卡&#xff08;24GB显存&#xff09;软件环境&…...

编程新知 2026/3/27 23:22:38

从AlexNet到ResNet：图解十大经典CV网络模型，帮你快速选对项目‘骨架’

从AlexNet到ResNet&#xff1a;十大经典CV网络模型实战选型指南 当你第一次面对ImageNet数据集时&#xff0c;可能会被各种网络架构的选择弄得眼花缭乱。VGG的深度堆叠、GoogLeNet的并行结构、ResNet的短路连接——这些设计理念背后&#xff0c;是计算机视觉领域十年来的智慧结…...

编程新知 2026/3/27 23:16:37

抖音批量下载终极指南：免费无水印视频一键获取

抖音批量下载终极指南&#xff1a;免费无水印视频一键获取 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是否曾为保存喜欢的抖音视频而烦恼&#xff1f;面对心仪的内容创作者&#xff0c;想要收藏他们的…...

编程新知 2026/3/27 22:48:24

2026年小红书文案降AI工具怎么选？自媒体人亲测这4款最靠谱

开始做小红书内容之前&#xff0c;我以为降AI只是学生的事。后来才发现&#xff0c;品牌方审稿也在查AI率&#xff0c;小红书平台自己也有AI检测机制。 自媒体文案的降AI需求和论文不一样&#xff0c;核心要求是&#xff1a;保留口语化语感&#xff0c;不能变成学术腔。降完还…...

编程新知 2026/3/27 22:36:22

新手避坑指南：用Prometheus+PX4+ROS在Gazebo里复现无人机追踪小车（保姆级流程）

新手避坑指南&#xff1a;用PrometheusPX4ROS在Gazebo里复现无人机追踪小车&#xff08;保姆级流程&#xff09; 当第一次接触无人机仿真开发时&#xff0c;很多人会被复杂的工具链和晦涩的错误信息劝退。本文将手把手带你完成从零搭建仿真环境到实现视觉追踪的全过程&#xff…...

编程新知 2026/3/27 21:33:56

OpenClaw硬件监控：nanobot定时报告系统资源使用情况

OpenClaw硬件监控&#xff1a;nanobot定时报告系统资源使用情况 1. 为什么需要自动化硬件监控 去年夏天&#xff0c;我的开发机因为内存泄漏问题突然宕机&#xff0c;导致一个重要的线上演示被迫推迟。当时我就意识到&#xff0c;手动检查系统资源的方式既不及时也不可靠。直…...

编程新知 2026/3/27 21:23:48

中兴光猫配置解密工具：轻松破解网络限制，完全掌控家庭网络

中兴光猫配置解密工具&#xff1a;轻松破解网络限制&#xff0c;完全掌控家庭网络 【免费下载链接】ZET-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/ze/ZET-Optical-Network-Terminal-Decoder 你是否遇到过想要修改光猫设置却找不到入…...

编程新知 2026/3/27 21:17:47

SWF逆向工程标准化文档：JPEXS Free Flash Decompiler实施指南

SWF逆向工程标准化文档&#xff1a;JPEXS Free Flash Decompiler实施指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的SWF逆向工程工具&…...

编程新知 2026/3/27 21:11:46

如何构建你的第一个Python高频交易模型：完整实战指南

如何构建你的第一个Python高频交易模型&#xff1a;完整实战指南 【免费下载链接】High-Frequency-Trading-Model-with-IB A high-frequency trading model using Interactive Brokers API with pairs and mean-reversion in Python 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/3/27 20:41:38

如何高效使用抖音批量下载器：3分钟快速上手完整指南

如何高效使用抖音批量下载器&#xff1a;3分钟快速上手完整指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 还在为手动保存抖音视频而烦恼吗&#xff1f;每次看到喜欢的合集都要一个个点击分享保存&…...

编程新知 2026/3/27 20:31:33