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

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

news 2026/2/3 7:55:14

学习链接：黑马程序员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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/1 6:19:35

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/1/31 18:36:21

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2026/2/1 21:34:47

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/1/26 19:25:32

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03