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

HTML-CSS-js教程

news 2025/8/27 8:13:25

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

循环冗余码校验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…...

编程新知 2025/8/22 3:51:05

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/8/22 3:51:21

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/8/22 3:51:29

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/8/22 22:03:32

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/8/16 12:53:56

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/8/25 16:05:17

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/8/22 3:17:50

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/8/22 5:22:57