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

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

news 2026/6/1 8:01:26

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

【DeepSeek测试用例生成实战指南】：20年QA专家亲授5大高覆盖率生成模式与3个避坑红线

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek测试用例生成的核心价值与适用边界 DeepSeek系列大模型在代码理解与生成任务中展现出显著的上下文建模能力&#xff0c;其测试用例生成功能并非通用“黑盒测试器”&#xff0c;而是聚焦于**单元级、函…...

编程新知 2026/5/26 1:53:13

AI算力要上天？别笑，太空数据中心真能干翻地球电费！

前言你有没有算过&#xff0c;训练一个大模型&#xff0c;相当于烧掉多少吨煤&#xff1f;如今AI狂飙突进&#xff0c;算力需求指数级增长&#xff0c;可地球上的电——不够用了&#xff01;更别说建个数据中心还得跟地方政府“斗智斗勇”&#xff0c;抢地皮、配储能、扛审批&a…...

编程新知 2026/5/25 23:27:16

Godot4 2D游戏开发避坑指南：TileMap绘制、节点顺序与相机设置的三个常见问题

Godot4 2D游戏开发避坑指南&#xff1a;TileMap绘制、节点顺序与相机设置的三个常见问题当你第一次用Godot4完成一个2D场景搭建时&#xff0c;那种成就感往往会被几个突如其来的bug瞬间击碎——角色神秘消失、背景纹丝不动、屏幕边缘出现诡异黑边。这些问题看似简单&#xff0c…...

编程新知 2026/5/27 6:45:15

基于MAX78000的医疗紧急呼叫系统：边缘AI与低功耗设计实战

1. 项目概述与核心价值大家好&#xff0c;我是Victor Hugo&#xff0c;一名电子工程师。今天我想和大家分享一个我最近完成并参与设计竞赛的项目&#xff1a;一个基于MAX78000 FTHR开发板的医疗紧急呼叫辅助系统。这个项目的核心&#xff0c;不是从零开始造一个新轮子&#xff…...

编程新知 2026/5/25 23:00:46

Performance-Fish：让你的《环世界》后期游戏帧率提升400%的终极优化方案

Performance-Fish&#xff1a;让你的《环世界》后期游戏帧率提升400%的终极优化方案 【免费下载链接】Performance-Fish Performance Mod for RimWorld 项目地址: https://gitcode.com/gh_mirrors/pe/Performance-Fish 你是否曾在《环世界》游戏后期&#xff0c;面对庞大…...

编程新知 2026/5/25 21:29:49

别再死记公式了！用Python手写一个卷积层，彻底搞懂CNN里的‘卷’是怎么算的

用Python手写卷积层&#xff1a;从零理解CNN的"卷"运算 当你第一次看到卷积神经网络(CNN)的数学公式时&#xff0c;那些复杂的符号和下标是否让你望而却步&#xff1f;作为计算机视觉领域的基石&#xff0c;CNN的核心在于理解卷积运算的本质。本文将带你用NumPy从零实…...

编程新知 2026/5/25 21:05:25

基于SMD与贝壳的微型音频装置：从电路设计到嵌入式开发的完整实践

1. 项目概述&#xff1a;一个藏在贝壳里的声音世界你小时候有没有捡起一个海螺壳&#xff0c;把它贴在耳边&#xff0c;然后听到里面传来“呜呜”的海风声&#xff1f;那个瞬间&#xff0c;仿佛整个海洋都被装进了小小的贝壳里。今天这个项目&#xff0c;就是把那个童年的魔法&…...

编程新知 2026/5/25 21:01:15

开源三角洲机器人Delta-Robot One：从入门到精通的创客实践指南

1. 项目概述&#xff1a;一个为学习而生的开源三角洲机器人如果你对机器人感兴趣&#xff0c;但又觉得它高深莫测、无从下手&#xff0c;那么Delta-Robot One&#xff08;我们亲切地称它为“One”&#xff09;可能就是为你量身打造的入门项目。这不是一个遥不可及的工业设备&am…...

编程新知 2026/5/25 17:17:22

如何高效实现Windows自动化鼠标点击：AutoClicker完整实战指南

如何高效实现Windows自动化鼠标点击&#xff1a;AutoClicker完整实战指南 【免费下载链接】AutoClicker AutoClicker is a useful simple tool for automating mouse clicks. 项目地址: https://gitcode.com/gh_mirrors/au/AutoClicker AutoClicker是一款专业的Windows桌…...

编程新知 2026/5/26 21:52:56

低空旅游观光与低空通勤(eVTOL)运营管理与服务保障平台建设方案

本方案旨在为eVTOL载具构建集运营管理、空中交通管制、安全保障与乘客服务于一体的数字化平台。通过微服务架构、5G-A融合感知、空域网格化与零信任安全等核心技术&#xff0c;解决高密度飞行中的资源调度与安全冲突问题。目标实现毫秒级冲突解算与15分钟内快速周转&#xff0c…...

编程新知 2026/5/25 16:06:36