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

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

news 2025/11/3 15:19:02

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/10/31 8:43:16

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/11/1 22:53:57

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/27 0:21:52

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/10/31 1:15:07

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/11/3 2:08:02

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/10/29 17:36:05

MinIO Docker 部署：仅开放一个端口

MinIO Docker 部署：仅开放一个端口 在实际的服务器部署中，出于安全和管理的考虑，我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务，支持 Docker 部署，但默认情况下它需要两个端口：一个是 API 端口（用于存储和访问数据），另一个是控制台端口（用于管理界面…...

编程新知 2025/10/12 2:43:11

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2025/10/29 10:26:57