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

HTML-CSS-js教程

news 2026/1/17 18:31:33

HTML

双标签<html> </html>
单标签<img>

html5的DOCTYPE声明

<!DOCTYPE html>

html的基本骨架

<!DOCTYPE html>
<html> 
</html>

head标签

用于定义文档的头部。文档的头部包含了各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者

<!DOCTYPE html>
<html> <head></head>
</html>

body标签
定义文档的主体，包含文档的所有内容，在页面中显示出来，用户可以直接看到的内容

<!DOCTYPE html>
<html> <head></head><body></body>
</html>

title标签
定义文档的标题，可以显示在浏览器的标签栏或状态栏上。<title>标签是<head>标签中唯一必须要求包含的东西，就是说head一定要写title，title的增加有利于SEO（搜索引擎优化）优化

<!DOCTYPE html>
<html> <head><title> </title></head><body></body>
</html>

meta标签
用来描述HTML网页文档的属性，关键词等。例如charset=“utf-8”

<!DOCTYPE html>
<html> <head><meta charset=utf-8"><title> </title></head><body></body>
</html>

标题

<h1></h1>
<h6></h6>

生成h1～h6快捷键：h$*6

  • 请确保将HTML标题标签只用于标题
  • 不要因为生成粗体或大号的文本而使用标题
  • 正确使用标题有益于SEO

标签位置
<h1 align="left"> </h1>

段落标签<p>
文本换行 <br>
水平线 <hr>

图片 <img src="" >

src：路径名称
alt：图片显示有问题后的替代文本
width，height 通常只更改width从而保持图片的原比例
title：鼠标悬停的提示

路径

  • 绝对路径
  • 相对路径
    • 子集关系 /
    • 父集关系 ../
    • 同集关系 ./ (可以省略)
  • 网络路径

超文本链接 <a href=""> name </a>

<a href=" "> 
<img > (可以放图文)</a>

文本标签

<em> 着重文字
<b> 粗体文字
<i> 斜体字
<strong> 加重语气
<del> 删除字
span 元素没有特定的含义

有序列表

<ol type="i"><li><li>
<ol>

type更改每列开头为数字或字母…

无序列表

<ul type="disc"><li><li>
<ul>

表格

<table><tr><td> </td> <td> </td> </tr><tr><td> </td> <td> </td> </tr>
</table>

快捷键生成 table>tr*8>td*2{sss}

合并单元格

水平合并colspan
垂直合并rowspan

表单

表达是由容器和控件组成，输入框叫做控件，表单就是容器，能够容纳各种各样的控件 <form action="url" method="get|post" name="myform"></form>

action：服务器地址
name：表单名称

method中get和post的区别

  • 数据提交方式，get把提交的数据url 可以看到，post看不到
  • get一般用于提交少量数据，post用来提交大量数据

表单元素：表单标签，表单域，表单按钮

文本框
提交按钮

    <form>username: <input type="text">password: <input type="password"><input type="submit" value="Login"></form>

元素分类

块元素与行内元素
请添加图片描述

请添加图片描述

HTML5新增标签

请添加图片描述

容器 <div>

H5新标签

头部 <header>
导航 <nav>
定义文档中的节，比如章节、页眉、页脚 <section>
侧边栏 <aside>
脚部 <footer>
代表一个独立、完整的相关内容块，比如完整的帖子，博客文章等 <article>

请添加图片描述

请添加图片描述

CSS

css (Cascading style sheets) 样式表 .css
用于html文档中元素样式的定义

语法

css规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

请添加图片描述

CSS的引入方式

内联样式

<p style="color:red; font-size: 20px;">内联样式</p>
  • 不建议。缺乏整体性和规划性，不利于维护，维护成本高

内部样式

使用 <style> 标签在文档头部定义内部样式表

  • 单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

外部样式（推荐）

请添加图片描述

<link rel="stylesheet" href="./public.css">

选择器一

CSS语法规则：选择器，以及一条或多条声明（样式）

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

        *{font-size: 30px;color: red;}

元素选择器

HTML文档中的元素，p，d，div，img

类选择器
用圆点. 来定义，针对你想要的所有标签使用
优点：灵活

选择器二

ID选择器
针对某一个特定的标签来使用，只能使用一次

#text{color: red;font-size: 30px;
}<p id="text">Hello</p>

请添加图片描述

关系选择器

后代选择器 E F{ }

直接子元素 E>F{ }

相邻兄弟选择器 E+F{ }：E元素之后紧邻的一个F

通用兄弟选择器 E~F{ }：E元素之后的所有F

CSS 盒子模型 Box Model

请添加图片描述

请添加图片描述

弹性盒子 flex box

JavaScript

Some Questions

Node.js 是什么：

  • 一种javascript的运行环境，能够使得javascript脱离浏览器运行
  • node.js就是一个前端觉得写个功能还要等后端捣鼓半天，然后干脆就自己用javascript把后端搞定的一个东西。

相关文章：

HTML-CSS-js教程

HTML 双标签<html> </html> 单标签<img> html5的DOCTYPE声明 <!DOCTYPE html>html的基本骨架 <!DOCTYPE html> <html> </html>head标签 用于定义文档的头部。文档的头部包含了各种属性和信息&#xff0c;包括文档的标题&#…...

编程日记 2023/2/10 22:41:19

【Nacos】Nacos配置中心客户端启动源码分析

SpringCloud项目启动过程中会解析bootstrop.properties、bootstrap.yaml配置文件&#xff0c;启动父容器&#xff0c;在子容器启动过程中会加入PropertySourceBootstrapConfiguration来读取配置中心的配置。 PropertySourceBootstrapConfiguration#initialize PropertySource…...

编程日记 2023/2/10 22:40:12

中国特色地流程管理系统，天翎让流程审批更简单

编者按&#xff1a;本文分析了国内企业在采购流程管理系统常遇到的一些难点&#xff0c;并从适应中国式流程管理模式的特点出发&#xff0c;介绍了符合中国特色的流程审批管理系统——天翎流程管理系统。关键词&#xff1a;可视化开发&#xff0c;拖拽建模&#xff0c;审批控制…...

编程日记 2023/2/10 22:39:07

Python算法：DFS排列与组合算法（手写模板）

自写排列算法&#xff1a; 例&#xff1a;前三个数的全排列&#xff08;从小到大&#xff09; def dfs(s,t):if st: #递归结束&#xff0c;输出一个全排列print(b[0:n])else:for i in range(t):if vis[i]False:vis[i]Trueb[s]a[i] #存排列dfs(s1,t)vis[i]Falsea[1,2,3,4,…...

编程日记 2023/2/10 22:38:03

拿来就用的Java海报生成器ImageCombiner（一）

背景如果您是UI美工大师或者PS大牛&#xff0c;那本文一定不适合你&#xff1b;如果当您需要自己做一张海报时&#xff0c;可以立马有小伙伴帮您实现&#xff0c;那本文大概率也不适合你。但是&#xff0c;如果你跟我一样&#xff0c;遇上到以下场景&#xff0c;最近公司上了不…...

编程日记 2023/2/10 22:37:00

【C++】类和对象（二）

目录 一、默认成员函数 二、构造函数 1、构造函数概念 2、构造函数编写 3、默认构造函数 4、内置类型成员的补丁 三、析构函数 1、析构函数概念 2、析构函数编写 3、默认析构函数 四、拷贝构造函数 1、拷贝构造函数概念及编写 2、默认拷贝构造函数 3、拷贝构造…...

编程日记 2023/2/10 22:35:55

UDP协议

文章目录一、前沿知识应用层传输层二、UDP协议一、前沿知识 应用层 应用层&#xff1a;描述了应用程序如何理解和使用网络中的通信数据。 我们程序员在应用层的主要工作是自定义协议&#xff0c;因为下面四层都在系统内核/驱动程序/硬件中已经实现好了&#xff0c;不能去修改…...

编程日记 2023/2/10 22:34:50

IT人的晋升之路——关于人际交往能力的培养

对于咱们的程序员来说&#xff0c;工作往往不是最难的&#xff0c;更难的是人际交往和关系的维护处理。很多时候我们都宁愿加班&#xff0c;也不愿意是社交&#xff0c;认识新的朋友&#xff0c;拓展自己的圈子。对外的感觉就好像我们丧失了人际交往能力&#xff0c;是个呆子&a…...

编程日记 2023/2/10 22:33:47

Docker进阶 - 8. docker network 网络模式之 container

目录 1. container 模式概述 2. 使用Alpine操作系统来验证 container 模式 1. container 模式概述 container网络模式新建的容器和已经存在的一个容器共享一个网络ip配置而不是和宿主机共享。新创建的容器不会创建自己的网卡&#xff0c;配置自己的IP&#xff0c;而是和一个…...

编程日记 2023/2/10 22:32:42

2年功能测试月薪9.5K，100多天自学自动化，跳槽涨薪4k后我的路还很长...

前言 其实最开始我并不是互联网从业者&#xff0c;是经历了一场六个月的培训才入的行&#xff0c;这个经历仿佛就是一个遮羞布&#xff0c;不能让任何人知道&#xff0c;就算有面试的时候被问到你是不是被培训的&#xff0c;我还是不能承认这段历史。我是为了生存&#xff0c;…...

编程日记 2023/2/10 22:31:37

“数字孪生”：为什么要仿真嵌入式系统？

​01.仿真是什么&#xff1f; 仿真的概念非常广泛&#xff0c;但归根结底都是使用可控的手段来模仿真实的情况&#xff0c;通常应用于现实世界中实施难度大甚至是无法实践的事物。 众所周知&#xff0c;嵌入式系统通常是形式多样的、面向特定应用的软硬件综合体&#xff0c;无…...

编程日记 2023/2/10 22:30:32

Java基础知识总结（上）

Java基础知识总结 1. Java语言的特点 简单易学&#xff0c;相较于python等语言具有较好的严谨性以及报错机制&#xff1b; 面向对象&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;&#xff0c;Java中所有内容都是基于类进行扩展的&#xff0c;由类创建的实体…...

编程日记 2023/2/10 22:29:27

MySQL 2：MySQL约束

一、定义 约束&#xff08;constraint&#xff09;&#xff0c;即表中数据的限制条件。在表设计中加入约束的目的是保证表中记录的完整性和有效性。 比如user表&#xff0c;有些列&#xff08;手机号&#xff09;的值不能为空&#xff0c;有些列&#xff08;身份证号&#xff…...

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

C4--Vivado添加列表中不存在的FLash器件2023-02-10

以华邦SPI FLASH W25Q128JVEIQ为例进行说明。&#xff08;其他Flash添加步骤一致&#xff09; 1.本地vivado安装目录D:\Softwares\xlinx_tools\Vivado\2020.2\data\xicom下&#xff0c;找到xicom_cfgmem_part_table.csv文件&#xff0c;这个表与vivado hardware manager中的器…...

编程日记 2023/2/10 22:27:16

php代码审计

准备工作 了解CMS的基本信息 该CMS使用的是什么设计模式&#xff1f;该CMS每个目录大概负责的功能(视图、缓存、控制器等)。该CMS处理请求的基本流程是如何走的&#xff1f;以及在系统中使用的全局过滤函数是如何对数据进行处理的&#xff1f; 代码审计方法 敏感函数回溯 …...

编程日记 2023/2/10 22:26:11

接口测试入门，如何划分接口文档

1.首先最主要的就是要分析接口测试文档&#xff0c;每一个公司的测试文档都是不一样的。具体的就要根据自己公司的接口而定&#xff0c;里面缺少的内容自己需要与开发进行确认。 我认为一针对于测试而言的主要的接口测试文档应该包含的内容分为以下几个方面。 a.具体的一个业…...

编程日记 2023/2/10 22:25:04

数据库学习第二天

第7章 系统预定义函数 函数&#xff1a;代表一个独立的可复用的功能。 和Java中的方法有所不同&#xff0c;不同点在于&#xff1a;MySQL中的函数必须有返回值&#xff0c;参数可以有可以没有。 MySQL中函数分为&#xff1a; &#xff08;1&#xff09;系统预定义函数&…...

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

NODE =＞ CORS跨域资源共享学习

1.CORS跨域资源共享 cors是Express的一个第三方中间件。通过安装和配置cors中间件&#xff0c;可以很方便地解决跨域问题 运行npm install cors 安装中间件使用const cors require(‘cors’) 导入中间件在路由之前调用 app.use&#xff08;cors&#xff08;&#xff09;&#…...

编程日记 2023/2/10 22:22:54

golang rabbitMQ 生产者复用channel以及生产者组分发策略

引用的是rabbitMQ官方示例的库&#xff1a;github.com/rabbitmq/amqp091-go在网络编程中我们知道tcp连接的创建、交互、销毁等相关操作的"代价"都是很高的&#xff0c;所以就要去实现如何复用这些连接&#xff0c;并要做到高效并可靠。预期效果&#xff1a;项目初始化…...

编程日记 2023/2/10 22:21:50

掌握了这项技能的性能测试师，90%都升职加薪了

初入职场的新人该怎么做才能让自己快速成长&#xff1f;在公司一直做着手工测试&#xff0c;如何才能提升自己&#xff0c;避免陷入“只涨年龄不涨经验”的尴尬&#xff1f;做为一名软件测试工程师&#xff0c;我们不得不去面对这些问题&#xff0c;有的人找到了答案&#xff0…...

编程日记 2023/2/10 22:20:44

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/1/16 14:12:57

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/1/15 8:42:09

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/1/15 5:00:50

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/15 4:58:56

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/16 23:06:05

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/1/16 20:36:48

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2026/1/15 5:03:38

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/11/3 2:51:56

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/1/15 6:36:42