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

HTML-CSS-js教程

news 文章来源：https://blog.csdn.net/qq_41103204/article/details/128895708 2024/12/29 4:18:53

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

linux中crontab定时任务导致磁盘满和云监控未报警的的坑

一个后台开发者&#xff0c;兼职运维工作中&#xff0c;配置linux中crontab定时任务&#xff0c;导致磁盘满和云监控未报警的问题的坑。 1.磁盘满 使用命令 df -h2.问题排查 2.1排查日志 命令 cat /var/log/messages日志文件的默认路径是&#xff1a;/var/log 下面是几个…...

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

vscode中安装python运行调试环境

在运行代码之前&#xff0c;需要到微软商店下载安装python环境&#xff0c;35m&#xff0c;都是自动的。 1、安装python 的extensions插件。 ctrlshiftx 输入 python 后点击 install 按钮。 2、新建文件夹spider文件夹。 3、在新建文件夹spider下新建文件spider.py源代码。…...

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

【微服务】微服务架构超强讲解，通俗易懂

微服务架构目录一、微服务架构介绍二、出现和发展三、传统开发模式和微服务的区别四、微服务的具体特征五、面向服务的架构SOA&#xff08;service oriented architecture&#xff09;和微服务的区别1、SOA喜欢重用&#xff0c;微服务喜欢重写2、SOA喜欢水平服务&#xff0c;微…...

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

内核中的竞态产生的原因和解决方法

产生原因&#xff1a; 由于多进程对临界资源的抢占 根本原因&#xff1a; 1、对于单核处理器而言&#xff0c;内核支持抢占就会出现竞态 2、对于多核处理器而言&#xff0c;是核与核的竞态 3、进程与中断间存在竞态 4、arm开发板不会出现中断与中断间的竞态&#xff08;目前&am…...

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

【微服务】Elasticsearch文档索引库操作(二)

&#x1f697;Es学习第二站~ &#x1f6a9;Es学习起始站&#xff1a;【微服务】Elasticsearch概述&环境搭建(一) &#x1f6a9;本文已收录至专栏&#xff1a;微服务探索之旅 &#x1f44d;希望您能有所收获 一.索引库操作 索引库就类似数据库表&#xff0c;mapping映射就类…...

编程日记 2023/2/10 22:14:09

【论文速递】NAACL2022-DEGREE: 一种基于生成的数据高效事件抽取模型

【论文速递】NAACL2022-DEGREE: 一种基于生成的数据高效事件抽取模型 【论文原文】&#xff1a;DEGREE A Data-Efficient Generation-Based Event Extraction Mode 【作者信息】&#xff1a;I-Hung Hsu &#xff0c; Kuan-Hao Huang&#xff0c; Elizabeth Boschee &#xff…...

编程日记 2023/2/10 22:13:05

C++类和对象（下）

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; C修行之路 &#x1f38a;每篇一句&#xff1a; 图片来源 I do not believe in taking the right decision. I take a decision and make it right. 我不相信什么正确的决定。我都是先做决定&#xff0c;然后把…...

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

Java常见的六种线程池、线程池-四种拒绝策略总结

点个关注&#xff0c;必回关 一、线程池的四种拒绝策略&#xff1a; CallerRunsPolicy - 当触发拒绝策略&#xff0c;只要线程池没有关闭的话&#xff0c;则使用调用线程直接运行任务。 一般并发比较小&#xff0c;性能要求不高&#xff0c;不允许失败。 但是&#xff0c;由于…...

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

Node=＞Express中间件分类 学习4

1.中间件分类 应用级别的中间件路由级别的中间件错误级别的中间件Express 内置的中间件第三方的中间件 通过app.use&#xff08;&#xff09;或app.get&#xff08;&#xff09;或app.post&#xff08;&#xff09;绑定到app实力上的中间件&#xff0c;叫做应用级别的中间件 …...

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

在阿里当外包，是一种什么工作体验？

上周和在阿里做外包的朋友一起吃饭&#xff0c;朋友吃着吃着&#xff0c;就开启了吐槽模式。 他一边喝酒一边说&#xff0c;自己现在做着这份工作&#xff0c;实在看不到前途。 看他状态不佳&#xff0c;问了才知道&#xff0c;是手上的项目太磨人。 他们现在做的项目&#…...

编程日记 2023/2/10 22:08:43

仿模板电影网站/新闻最近的大事10件

简述: Kafka模型产生自日志记录场景&#xff0c;受到场景所限&#xff0c;Kafka不需要太高的并发度。而在阿里这样的大规模应用中&#xff0c;我们经过实践发现&#xff0c;原有模型已经不能满足阿里的实际需要。ONS(RocketMQ)则比较好的解决了并发数问题&#xff0c;已经是内部…...

编程日记 2024/12/29 1:45:15

网站建设 典型材料/独立站seo是什么意思

这是我的一系列公开场合自愿发表的关于jac编译器的实现的文章中的第一篇,因为目前的编译器没有写完,当然已经完成了很大部分,就差收关了.所以这里提到的代码可能跟最终jac发布版的代码不同,但是设计思想不会有太大变化,而且对于理解一个编译器的实现来说这里的代码就足够了. 首…...

编程日记 2024/12/29 0:28:06

wordpress 购买主题/微信小程序建站

官方文档 qt只有在数据从系统io缓冲区到达Qt应用程序才能感知到有数据的到来&#xff0c;需要注意的是文档说的only once&#xff0c;也就是说当数据刚到达QTcpSocket时会提醒一次&#xff0c;而如果这时候还没有执行readyread信号&#xff0c;而这时候又来了很多次数据&#…...

编程日记 2024/12/29 0:27:05

网络销售型网站有哪些内容/百度怎么投放自己的广告

1、rocketmq的启动 进入rocketMQ解压目录下的bin文件夹 启动namesrv服务&#xff1a;nohup sh bin/mqnamesrv & 日志目录&#xff1a;{rocketMQ解压目录}/logs/rocketmqlogs/namesrv.log 启动broker服务&#xff1a;nohup sh bin/mqbroker & 日志目录&#xff1a;…...

编程日记 2024/12/28 21:54:51

开发是什么工作/seo

os 模块提供了非常丰富的方法用来处理文件和目录。常用的方法如下表所示&#xff1a;序号方法及描述os.access(path, mode)检验权限模式2. os.chdir(path)改变当前工作目录3. os.chflags(path, flags)设置路径的标记为数字标记。4. os.chmod(path, mode)更改权限5. os.chown(pa…...

编程日记 2024/12/28 21:34:27

c2c wordpress/邵阳seo排名

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#includemain(){int acount0,bcount0,ccount0,dcount0;char a;printf("请输入一行字符:\n");a getchar();while (a !\n){switch (a){caseq:casew:casee:caser:caset:casey:caseu:casei:caseo:casep:casea:cases:cased:c…...

编程日记 2024/12/28 15:56:41