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

html笔记（一）

news 2025/9/19 21:23:00

一、html简介

什么是HTML？
Hyper Text Markup Language
超文本标记语言

超文本？超级文本，例如流媒体，声音、视频、图片等。
标记语言？这种语言是由大量的标签组成。

   任何一个标签都有开始标签和结束标签，例如：
       <标签> : 开始标签
       </标签> : 结束标签

   HTML严格意义上来只能说是一种规范，一种浏览器上的规范，
   标签语言，不能称为编程语言，因为HTML中没有变量、数据类型
   控制语句if 、for，这些都没有的。

二、第一个html代码

<!--这是HTML的注释信息-->
<!--这是根-->
<html><!--头--><head><!--标题栏--><title>my first html page</title></head><!--网页体--><body><!--这里的内容显示到网页上！-->这是我的第一个HTML页面！</body></html>

运行效果

三、基本标签

下列代码展示了段落标记、标题字、换行、水平线、预留格式、粗体字、斜体字、插入字、删除字、右上角加字、右下角加字、font(格式)标签的用法

<html><head><meta charset="gbk" /><title>基本标签</title></head><body><!--段落标记--><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><!--标题字--><h1>标题字</h1><h2>标题字</h2><h3>标题字</h3><h4>标题字</h4><h5>标题字</h5><h6>标题字</h6><!--换行标记-->hello world!<!--长了一只眼睛，独目标记-->hello<br> world!<!--水平线，独目标签--><hr><!--color是一个属性，用来指定颜色值--><!--color是属性的名字，red是属性的值--><hr color="red"><!--HTML中的字符串可以使用单引号，也可以使用双引号--><hr color='red'><!--HTML的语法很松散，不严格，去掉单引号双引号也行！--><hr color=green ><!--HTML不区分大小写！--><HR><!--预留格式--><!--保留格式，在HTML源码上是什么格式，到网页上还是这个格式，不变。--><pre>for(int i = 0; i < 100; i++){System.out.println("i = " + i);}</pre><!--粗体字--><b>粗体字</b><!--斜体字--><i>斜体字</i><ins>插入字</ins><del>删除字</del>10<sup>2</sup>m<sub>2</sub><!--font字体标签--><!--color是字体颜色，size是字号--><font color="red" size="12">hello world!</font><br><br><br><br><br><br><br><br><br><br></body>
</HTML>

四、实体符号

下列代码展示了空格、大于号、小于号的用法及运行结果

<!-- 凡是HTML页面中第一行是以下代码的表示该页面是一个HTML5页面：H5。 -->
<!DOCTYPE html>
<html><head><!-- 这个是告诉浏览器采用哪一种字符编码方式打开该页面。一般这个编码方式要和文件的编码方式相同，不然会乱码。 --><!-- windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文的方式打开，这是因为我们的windows操作系统是简体中文环境。 --><!-- 而我们程序员，一般工作区当中文件的编码方式都是UTF-8，因为unicode更加通用。 --><!-- 当前这个文件就是utf8的编码方式，如果不写以下代码，浏览器会采用GBK的方式打开，就会出现乱码。 --><meta charset="utf-8"><title>实体符号</title></head><body><!-- 空格 --><!-- &nbsp;  这是一个空格。属于实体符号！ -->a                                                                bc<br>a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bc<br><!-- 小于号呢 -->b<a>c<br><!-- &lt; 这是小于号 --><!-- &gt; 这是大于号 -->b&lt;a&gt;c</body>
</html>

五、表格

1.表格——基本概念

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表格</title></head><body><!-- 3行3列的table --><!-- border用来设置边框的宽度，1px表示1像素 --><!-- <table border="1px" width="300px" height="200px"> --><!-- 还可以写成百分比的方式。 --><!--align设置剧中方式，设置表格居中--><table border="1px" width="50%" height="200px" align="center"><!-- 第一行 --><tr><!-- 第一个单元格 --><td>1</td><td>2</td><td>3</td></tr><!-- 第二行中的数字居中 --><tr align="center"><!-- 第一个单元格 --><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><!-- 这个单独的数字居中 --><td align="center">3</td></tr></table></body>
</html>

2.表格——单元格的合并

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格单元格的合并</title></head><body><table width="50%" border="1px"><tr><td>1</td><!-- colspan表示列合并，合并2个。 --><td colspan="2">xy</td><!-- <td>y</td> --></tr><tr><td>1</td><td>1</td><!-- rowspan表示行合并，2表示合并两个。 --><td rowspan="2">KINGford</td></tr><tr><td>1</td><td>1</td><!-- <td>ford</td> --></tr></table></body>
</html>

3.表格——th标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>th标签</title></head><body><table border="1px" width="50%"><tr><!-- <td>员工编号</td><td>员工姓名</td><td>员工薪资</td> --><!-- th可以代替td做单元格，th中的内容会自动加粗，会自动居中。 --><th>员工编号</th><th>员工姓名</th><th>员工薪资</th></tr><tr><td>7369</td><td>SMITH</td><td>800.0</td></tr><tr><td>7370</td><td>KING</td><td>8000.0</td></tr></table></body>
</html>

4.表格——thead-tbody-tfoot

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>thead tbody tfoot</title></head><body><!-- 一个table可以被thead tbody tfoot分隔为三部分。 --><!-- 这个语法主要是为了后期javascript提供方便。 --><table border="1px" width="50%"><thead><tr><th>员工编号</th><th>员工姓名</th><th>员工薪资</th></tr></thead><tbody><tr><td>7369</td><td>SMITH</td><td>800.0</td></tr><tr><td>7370</td><td>KING</td><td>8000.0</td></tr></tbody><tfoot><tr><td>x</td><td>y</td><td>z</td></tr></tfoot></table></body>
</html>

html笔记（一）

一、html简介什么是HTML？ Hyper Text Markup Language 超文本标记语言超文本？超级文本，例如流媒体，声音、视频、图片等。标记语言？这种语言是由大量的标签组成。任何一个标签都有开始标签和结束标签&…...

编程日记 2023/2/22 9:36:37

索引的情况

select * from A left join B on A.c B.c where A.employee_id 3 1.一句sql中是可能走多次索引的，具体的一般表连接 ，或者说生成临时表的时候，会走索引然后条件过滤的时候也会走索引，具体的还是要具体分析 2.表连接字段…...

编程日记 2023/2/22 9:35:29

Verilog 学习第五节（串口发送部分）

小梅哥串口部分学习part1 串口通信发送原理串口通信发送的Verilog设计与调试串口发送应用之发送数据串口发送应用之采用状态机实现多字节数据发送串口通信发送原理 1：串口通信模块设计的目的是用来发送数据的，因此需要有一个数据输入端口 2：…...

编程日记 2023/2/22 9:34:22

破解遗留系统快速重构的5步心法（附实例）

前两天和一个架构师朋友闲聊，说到了「重构」这个话题，他们公司早年间上线的项目系统，因一直没专人在演进过程中为代码质量负责，导致现在代码越来越混乱，逐渐堆积成“屎山”，目前的维护成本已远高于重新开…...

编程日记 2023/2/22 9:33:16

信号量（上）实验

实验1：解决订票终端的临界区管理订票终端是解决冲突问题，所以信号量的值是1 #include <stdio.h> #include <pthread.h> #include <unistd.h> #include <semaphore.h> int ticketAmout 2; // 票的数量: 全局变量 sem_t mutex…...

编程日记 2023/2/22 9:32:08

阿里5年，一个女工对软件测试的理解

成为一个优秀的测试工程师需要具备哪些知识和经验？ 针对这个问题，可以直接拆分以下三个小问题来详细说明： 1、优秀软件测试工程师的标准是什么？ 2、一个合格的测试工程师需要具备哪些专业知识？ 3、一个合格的测试工程…...

编程日记 2023/2/22 9:31:01

30 Web Projects 30 多个带有 HTML、CSS 和 JavaScript 的 Web 项目，由 Packt Publishing 提供 https://github.com/PacktPublishing/30-Web-Projects-with-HTML-CSS-and-JavaScript Small projects https://github.com/WebDevVikramChoudhary/small_projects_for_…...

编程日记 2023/2/22 9:29:56

sql复习（set运算符、高级子查询）

一、set运算符 union：得到两个查询结果的并集，并且⾃动去掉重复⾏。不会排序 union all：得到两个查询结果的并集，不会去掉重复⾏。也不会排序 intersect：得到两个查询结果的交集，并且按照结果集的第⼀个列进…...

编程日记 2023/2/22 9:28:46

整车电源的几种模式：OFF/ACC/RUN/CRANK

本文框架1.前言2. 四种电源模式2.1 OFF模式2.2 ACC模式2.3 ON模式2.4 CRANK模式3. KL15/KL301.前言在诊断或者网络管理相关模块开发对客户的需求进行梳理时，经常会看到客户对不同车辆模式下处理策略的需求，如果前期没接触过这几种模式，可能…...

编程日记 2023/2/22 9:27:38

踩了大坑：wordpress后台无法将上传的文件移动至wp-content

一、问题描述今天迁移了wordpress站点至新服务器，结果上传图片出现“无法将上传的文件移动至wp-content/uploads”的提示，这是怎么回事，为什么会这样。报错如下： 2023/02/20 08:57:48 [error] 9861#9861: *79624 FastCGI sen…...

编程日记 2023/2/22 9:26:32

page cache设计及实现

你好，我是安然无虞。 page cache的设计及实现 page cache 本质上也是一个哈希桶, 它是按照页的数量进行映射的. 当 central cache 向 page cache 申请内存时, page cache 先检查对应位置是否有span, 如果没有则向更大页去寻找一个span, 如果找到则分裂成两个. 比如…...

编程日记 2023/2/22 9:25:21

使用seata来解决分布式事务

文章目录目录文章目录前言一、Seata的执行流程如下二、使用步骤三、配置微服务客户端总结前言 Seata部署指南 Seata 是一款开源的分布式事务解决方案，致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模…...

编程日记 2023/2/22 9:24:17

推荐一款新的自动化测试框架：DrissionPage

今天给大家推荐一款基于Python的网页自动化工具：DrissionPage。这款工具既能控制浏览器，也能收发数据包，甚至能把两者合而为一，简单来说：集合了WEB浏览器自动化的便利性和 requests 的高效率。一、DrissionPage产生背…...

编程日记 2023/2/22 9:23:10

MQ系列面试

先来说说什么是MQ，MQ与多线程之间的区别MQ是消息中间件可以实现异步多线程也可以实现异步使用传统http协议方式调用接口存在的缺点如果服务器端没有及时的响应给客户端的时候，容易造成客户端阻塞等待。服务器响应超时客户端发送重试机制需要考虑避免…...

编程日记 2023/2/22 9:22:01

一句话设计模式2:原型模式

原型模式:每次得到一个新对象。文章目录原型模式:每次得到一个新对象。前言一、原型模式和new的区别二、如何实现原型模式1. 什么clone接口2. 开始使用,并验证浅clone效果3. 深度clone(也就是address也要复制一份)总结前言原型模式可以说是目前接触的设计模式中,比较无用的…...

编程日记 2023/2/22 9:20:55

c++11特性与c++17特性

1、自动类型推导auto // C11 auto func1() -> int // 需要指定返回值类型 {return 10; }auto func2() -> std::function<void()> {auto lambda []() { };return lambda; }// c17 // 之后无需指定返回值类型 auto func1() {return 10; }auto func2() {auto lambda…...

编程日记 2023/2/22 9:19:47

Redis02: Redis基础命令

一、基础命令先启动redis服务，使用redis-cli客户端连到redis数据库里面 1. 获取符合规则的键: keys 要点： （1）keys 后面可以指定正则表达式 （2）在生产环境下建议禁用keys命令，因为这个命令会查…...

编程日记 2023/2/22 9:18:38

MDK的HardFault硬件异常和NMI异常原因总结

发出来，出现问题自行比对，现在一些代码，也会对这个进行分析。硬件异常原因： Unaligned load or store Load 或者 store 指令访问未对齐地址 Undefined Instruction 执行 ARM 未定义的指令 EPSR Fault 当前程序没有在 Thumb 状态下…...

编程日记 2023/2/22 9:17:30

视频图像质量诊断

视频图像质量诊断有哪些原理，视频图像质量诊断有哪些算法？ 视频图像质量诊断技术支持对视频黑屏、视频干扰、视频卡顿、视频遮挡、亮度异常、图像偏色、视频模糊、视频冻结、视频抖动、场景变更、无字符叠加等20种视频图像质量异常进行诊断，…...

编程日记 2023/2/22 9:16:21

make、Makefile项目自动化构建工具

环境：centos7.6，腾讯云服务器Linux文章都放在了专栏：【Linux】欢迎支持订阅🌹前言自动化构建工具是干什么的呢？主要是为了让我们对指令进行一些设置，就比如说，假如一个项目里有很多个源文件&…...

编程日记 2023/2/22 9:15:11

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...

编程新知 2025/9/8 8:54:14

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/7/22 6:12:57

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因常见解决方法更好的解决方法设计精妙之处登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/9/18 12:51:12

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构代码结构代码详情功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/9/2 18:28:40

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10