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

HTML-CSS-js教程

news 2026/5/14 6:19:45

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

白嫖使用 Claude Opus 4.7 一个月，新手保姆级教程

挖槽&#xff0c;最近亚马逊做了一次大善人&#xff0c;为它自家的 Kiro 做拉新活动&#xff0c;新注册账号可以直接获得一个月的 Kiro Pro 会员&#xff0c;价值 20 美刀。 教程非常详细&#xff0c;所以有点长&#xff0c;想看最短流程版的可以直接划到文章末尾。 Kiro 是什…...

编程新知 2026/5/14 6:14:42

图片怎么去水印？2026图片去水印方法实测 + 好用工具推荐

图片怎么去水印&#xff1f;2026图片去水印方法实测 好用工具推荐 前言 日常刷图、做设计、整理相册&#xff0c;总免不了碰到这个问题&#xff1a;图片上有水印&#xff0c;该怎么去掉&#xff1f;无论是摄影平台的版权标识、相机自动打上的日期戳、App 角标&#xff0c;还是…...

编程新知 2026/5/14 6:10:15

P1238 走迷宫【洛谷算法习题】

P1238 走迷宫 网页链接 P1238 走迷宫 题目描述 有一个 mnm\times nmn 格的迷宫(表示有 mmm 行、nnn 列)&#xff0c;其中有可走的也有不可走的&#xff0c;如果用 111 表示可以走&#xff0c;000 表示不可以走&#xff0c;文件读入这 mnm\times nmn 个数据和起始点、结束点…...

编程新知 2026/5/14 6:03:51

如何快速掌握co：异步代码复用与模块化终极指南

如何快速掌握co&#xff1a;异步代码复用与模块化终极指南 【免费下载链接】co The ultimate generator based flow-control goodness for nodejs (supports thunks, promises, etc) 项目地址: https://gitcode.com/gh_mirrors/co/co co是Node.js生态中一款强大的基于生…...

编程新知 2026/5/14 4:53:06

3种完整破解方案深度解析：Beyond Compare 5授权密钥生成技术实现指南

3种完整破解方案深度解析&#xff1a;Beyond Compare 5授权密钥生成技术实现指南 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen BCompare_Keygen是一个基于Python 3开发的Beyond Compare 5.x版…...

编程新知 2026/5/14 4:44:22

办公室翻新预算超支了怎么办

很多小微企业、创业团队翻修办公室。算来算去&#xff0c;最后发现预算超支了。这种情况真的太常见了。我们今天一步步理&#xff0c;给你实打实的解决办法。大家最关心的5个问题解答Q1&#xff1a;办公室翻新&#xff0c;哪块更容易超预算&#xff1f;A&#xff1a;大部分情况…...

编程新知 2026/5/14 3:06:08

GitHub MDC文件渲染优化：基于UserScript的Markdown预览增强方案

1. 项目概述&#xff1a;让GitHub读懂Cursor的“规则文件”如果你和我一样&#xff0c;是Cursor的深度用户&#xff0c;那你肯定没少和.mdc文件打交道。这些文件是Cursor AI的“规则集”&#xff08;Cursor Rules&#xff09;&#xff0c;本质上就是一份用Markdown语法写的项目…...

编程新知 2026/5/14 2:51:47

手把手教你配置i.MX RT1052的BOOT引脚：从HyperFlash到QSPI的启动选择实战

手把手教你配置i.MX RT1052的BOOT引脚&#xff1a;从HyperFlash到QSPI的启动选择实战 在嵌入式系统开发中&#xff0c;启动配置是硬件工程师和开发者面临的第一个关键挑战。i.MX RT1052作为一款高性能跨界处理器&#xff0c;其灵活的启动选项既带来了强大的适应性&#xff0c;也…...

编程新知 2026/5/14 2:51:47

E-GEO：基于多智能体架构的AI搜索引擎优化工具实战指南

1. 项目概述&#xff1a;E-GEO&#xff0c;一个为AI搜索引擎而生的零门槛优化工具 如果你和我一样&#xff0c;最近几个月一直在琢磨怎么让自家网站的内容在ChatGPT、Claude、Perplexity这些AI搜索引擎里排得更靠前&#xff0c;那你肯定听说过“生成式引擎优化”这个概念。传统…...

编程新知 2026/5/14 2:38:51

沈阳哪家GEO优化公司靠谱

2026年&#xff0c;AI搜索与生成式引擎普及&#xff0c;GEO优化成为企业获取精准流量的核心手段。在沈阳&#xff0c;如何筛选具备技术实力与落地能力的服务商&#xff0c;成为企业主关注焦点。以下基于公开信息与行业观察&#xff0c;梳理几家代表性机构供选型参考。辽宁云界数…...

编程新知 2026/5/14 2:36:40