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

web开发——前端html、css、JavaScript学习总结(持续更新中.......)

news 2025/6/24 14:03:42

目录模版

1 html:结构
- 标签/属性
- - 文本标记: mark
  - 文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong
  - 超链接: a
  - 联系信息: address
  - div 定义文档中的分区或节: div
  - 行元素:span
  - html结构: main / section / article
  - nav
  - 表格:table
- html中各种标签/属性的英文扩写分别是?(如 tr,td,ol,ul,li; 方便记忆)
- 特殊符号
- - 元信息:meta
- 注意事项
- 总结
- - html 中如何删除空行?
  - HTML标签和元素的区别, 非(空)元素(标签)?
  - html中单选按钮radio、复选框checkbox是什么样子？
- 实战
- - html中如何让图片放左边,文字紧邻着放右边、 html中如何设置段落之间的间距和文字大小、 html中一行如何设置两种大小的字体?
  - 如何使用html 制作表格？表格要求: 最上边和最下边两框线加粗显示, 表格整体左右两端没有框线, 内部框线正常显示, 使用caption标签的标题与表头有段落间距.
  - 在html中如何在同个h1标签下设置同行文字之间的间隔?
  - 在html中如何在同一行内设置不同照片之间的间隔?
  - html 点击链接提示: The requested resource is not available.
- html 问题
- - html5手册(w3school手册)运行html代码时提示: 确保Web地址 //ieframe.dll/dnserrordiagoff.htm#正确此页面已被 Microsoft Edge 阻止 ERR_BLOCKED_BY_CLIENT
2 css:表现
- 选择器
- 标签+ 属性代码大全(解释)
- 布局
- 辅助sublime插件:emmet
3 javascript:行为
待续、更新中

1 html:结构

标签/属性

文本标记: mark

定义带有记号的文本,突出显示文本

<p>作为下一代Web标准，<mark>HTML5</mark>致力于为互联网开发者搭建更加便捷，开放的沟通平台。业界普遍认为，在未来几年内，<mark>HTML5</mark>无疑将成为移动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。</p>

效果图:
在这里插入图片描述

文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong

超链接: a

属性
href="#" , # 符号被用作占位符URL，通常表示超链接不指向任何特定位置

联系信息: address

为文档或 section 定义联系信息

div 定义文档中的分区或节: div

div
块元素,标签定义文档中的 division/section 
一个元素就占一整行

行元素:span

span: 
组合文档中的行内元素
多个元素占一行元素

html结构: main / section / article

main:
呈现网页的主体内容，且每个页面只能有一个section
用于对与主题相关的内容进行分组; 有联系的内容组div
内容组article
定义 article 以外的内容, 独立完整的内容

nav

nav
定义导航链接的部分

表格:table

属性:
cellspacing="0"： ( 间距，指单元格之间的距离 )设置单元格之间的间距为0像素，即单元格之间没有间隔。
border="1"： ( 边境 )设置表格边框的大小为1个像素。colspan="2"   单元格跨越的列数rowspan="2"  单元格跨越的行数

html中各种标签/属性的英文扩写分别是?(如 tr,td,ol,ul,li; 方便记忆)

table标签中的 tr,td…等的英文扩写分别是

	<td> 是table data  的缩写，数据单元格<tr>是table row 的缩写，表格中的一行<th> 是table heading 的缩写，表头单元格

列表标签中 ol ul li …等的英文扩写分别是

ol 有序列表,ordered list
ul 无序列表, unordered list 
li 列表项目, list
自定义列表:
dl 定义列表, definition list
dt 定义标题,definition title
dd 定义描述,definition description

其他:

div: division 部门,分开
span:

特殊符号

空格: &nbsp;

元信息:meta

 <meta charset="utf-8">
设置文件编码方式: utf-8

注意事项

属性不可交叉
input 
该空元素表标签中，type=“radio” 或其他类似情况，name（标识input） 的值一般相同
type=reset 、 sublime 时， name属性不设置

总结

html 中如何删除空行?

HTML标签和元素的区别, 非(空)元素(标签)?

区别

标签：形如<p>，由一对尖括号和表示标签含义的“关键字”构成。
元素：形如<p>一些内容</p>，由开始标签、结束标签以及标签中包含的内容构成。
元素( 范围 )  > 标签

非(空)元素(标签)

元素可按有无元素内容分为非空元素和空元素两类，对应的标签为非空标签与空标签
非空元素: 指含有内容的元素, <title>测试页</title>
非空标签:  指标识非空元素的标签，有开始和结束两个标签,   <title>   </title>
空元素:指不含内容的元素,一个空元素只有一个标签
空标签: 指标识空元素的标签

例

空元素
<img src="lena.gif" /> 
<br /> 
<hr />空标签
<hr />

html中单选按钮radio、复选框checkbox是什么样子？

单选按钮
在这里插入图片描述

复选框
在这里插入图片描述

实战

html中如何让图片放左边,文字紧邻着放右边、 html中如何设置段落之间的间距和文字大小、 html中一行如何设置两种大小的字体?

看上传的文件html:  李白曰道德.zip

如何使用html 制作表格？表格要求: 最上边和最下边两框线加粗显示, 表格整体左右两端没有框线, 内部框线正常显示, 使用caption标签的标题与表头有段落间距.

在html中如何在同个h1标签下设置同行文字之间的间隔?


<html><head><title>  四季轮回</title><meta charset="GB18030">
<style>/* 设置span元素之间的间隔 */h1 span {margin-right: 260px; /* 设置间隔大小 */}
</style></head><body><h1> <span>csdn</span> <span>博客园</span><span>w3cschool</span>         <span>github</span></h1></body>
</html>

效果图:
在这里插入图片描述

在html中如何在同一行内设置不同照片之间的间隔?


<!DOCTYPE html>
<html><head><title>  四客轮回</title><meta charset="GB18030"><style>/* 设置span元素之间的间隔 */h1 span {margin-right: 150px; /* 设置间隔大小 */margin-left:  150px;}img {margin-right: 130px;}</style></head><body><h1> <span>csdn</span> <span>博客园</span><span>w3cschool</span>         <span>github</span></h1><br/><br/><div><img src="../img/csdn1.png" width="300" height="500" />         <img src="../img/bokeyuan2.png" width="300" height="500"   /><img src="../img/w3cschool3.png" width="300" height="500"     /><img src="../img/github4.png" width="300" height="500"   /></div></body>
</html>

效果图
在这里插入图片描述

html 点击链接提示: The requested resource is not available.

如图:
在这里插入图片描述

html 问题

html5手册(w3school手册)运行html代码时提示: 确保Web地址 //ieframe.dll/dnserrordiagoff.htm#正确此页面已被 Microsoft Edge 阻止 ERR_BLOCKED_BY_CLIENT

设置--隐私---安全性,管理 Microsoft Edge 的安全设置
找到Microsoft Defender Smartscreen  关闭该选项

2 css:表现

选择器

类型选择器:  h1{}
统配选择器: * ,全部 { }
包含选择器: div  span, 选择div标签内的 span标签
子元素选择器: div > span { }, 选择div标签下的 紧接着的第一个级别的span标签
相邻兄弟选择器: div+span, 同级标签<p></p> <h1></h1>
id选择器:  给某个特殊元素进行选择, 自定义选择器; 如:  id="自定义名" ;  选中: #自定义名{  }
class选择器: 类选择器,给多个元素进行原则 ; 
分组选择器: h1,h2,h3
属性选择器: h1[height] , 选择具有height属性的h1标签
属性选择器: height=10px , 选择具有height属性,且值为10px的标签
属性选择器: E1[attr^=value]  选择具有attr属性且属性值以value开头的每个元素
属性选择器: E1[attr$=value]  选择具有attr属性且属性值以value结尾的所有元素
属性选择器: E1[attr*=value]  选择具有attr属性且属性值包含value子串的每个元素

选择器优先级

优先级

	id>属性> 类选择器>*

提升优先级

 !important 例如: 
tr td:last-child { border-right: 0   !important }

标签+ 属性代码大全(解释)

代码示例:<style>table {border-top: 4px solid #0d0d0d( 也可以直接设置为英文颜色单词);border-bottom: 4px solid #0d0d0d;border-left: 1px solid #FFFFFF;border-right: 1px solid #FFFFFF;border-collapse: collapse;width: 100%;}tr td:first-child { border-left: 0; }tr td:last-child { border-right: 0; }.table-title {padding-top: 15px;padding-bottom: 15px;} </style><table class="table" cellspacing="0"  border="1"  >caption {caption-side: top;margin-bottom: 10px;  标题与表头之间的段落间距 font-weight: bold;}

分析:

选择器

table :  选择表格
first-child: 在一组兄弟元素中的第一个元素
tr td:first-child： 选择每一行（<tr>元素）中的第一个单元格（<td>元素）距离*距离:
border-top:  3px solid black;： ( 距离顶部边界距离 ) , 设置表格单元格的顶部边框宽度为3像素，样式为实线，颜色为黑色。 
border-left: 0 (none) ; : 距离左边边界距离, 为选中的单元格设置左边框为0 , 去除每行第一个单元格的左边框; (none): 表格单元格的左侧边框样式为无,这意味着左侧边框将不会显示
border-bottom:  距离底边边界距离
border-right:   距离右边边界距离线条
dashed: 虚线
solid: 实线,固体内边距:
cellspacing="0"：
(间距 ),  设置表格中单元格之间的空白距离。 设置为"0"，意味着单元格之间没有额外的空间。
border="1"：
(边界),  设置表格的边框宽度。 设置为"1"，意味着表格的每一边都会有1像素宽的边框。
padding-top: 15px;：( 顶部填补)设置元素的顶部内边距 为15像素。内边距是元素内容与其边框之间的空间。
padding-bottom: 15px;： (底部填补) 设置元素的底部内边距 为15像素。 border-collapse: collapse;： (折叠边缘), 设置表格的边框折叠属性为collapse。当边框折叠时，相邻单元格的边框会合并在一起，从而减少边框的宽度width: 100%;： 设置表格的宽度为100%。这意味着表格将占据其父元素（通常是<div>或<td>）的全部可用宽度。caption-side: top;： (标题边 ) 设置表格标题的位置为顶部。默认情况下，表格标题位于表格的底部。通过将caption-side设置为top，您可以将标题移动到表格的顶部。字体:
font-weight: bold;： (字体重量), 设置表格标题的字体粗细为粗体; 或数字900; 设置粗体重量
font-style: italic ( normal, dash );  (字体样式: 斜体/ 正常的/ 虚线  )text-align: center; : (文本排列 ) , 设置文本的水平对齐方式为居中对齐。这意味着文本将在其容器中水平居中。overflow: hidden;： （溢出：隐藏） 设置元素的溢出内容处理方式为隐藏（hidden）。这意味着当元素的内容超出其容器的边界时，超出部分将被隐藏，不会显示在屏幕上。浮动
float:  left ； (浮动：左边） 控制元素的浮动行为，向左浮动，直到遇到其前一个元素或者容器边界为止text-decoration:none;   	 /*清除下划线默认样式*/控制盒子之间的外边距, 段落间距:
margin-top/bottom/left/right: 50px;
margin: 10px(全)
margin:5px(上下)  10px(左右);
margin:5px(上)  10px(左右); 5px(下);
margin:5px(上)  10px(右); 5px(下); 10px(左);
如:
margin-bottom:20px;  (底部边缘) 标题与表头之间的段落间距....
margin-top: 10px; (顶部边缘)  标题与表头之间的段落间距 内边距:
padding-top/bottom/left/right: 10px;

布局

布局方式

table 标签(淘汰)1 盒子模型```bash
导航栏: 
nav 
盒子+ul + li li li , 左浮动
盒子+  ,右浮动nav
div
div
div从上往下,从左往右

2 绝对定位

3 弹性盒flexible box

## 注意事项
style中设置的格式, 也遵循编程中的顺序原则,代码放置的顺序不同,结果也不相同## 总结
###  写css ( style)代码的三种方式 ?1  head下写 style 标签添加<head> <style >  
```bash
<head>
<style>
#abc{color:orange;}

2 行内添加

<a id="abc" href="www.baidu.com"> 百度1</a>

<div> <div/>
<p style="color:red" > <p>
3  html中 引用文件 css文件

css www 目录下 写1.css 文件<head> <link type="text/css "  href="../abc.css " <head/>html文件中, head 标签下: <link rel="stylesheet" type="text/css" href="../css/1.css">

辅助sublime插件:emmet

sublime 快捷写html文件, 设置html插件:
ctrl+shift+p
package control: install package
emmet
使用:

div>span>a[ href=www.baidu.com]{百度} *3
按tab键

3 javascript:行为

待续、更新中

—————————————————————
以上就是今日博客的全部内容了
创作不易,若对您有帮助,可否点赞、关注一二呢,感谢支持.

web开发——前端html、css、JavaScript学习总结(持续更新中.......)

目录模版 1 html:结构标签/属性文本标记: mark文本设置:删除线del / 下划线ins/ 加粗b / 强调的文本em / 重要的文本 strong超链接: a联系信息: addressdiv 定义文档中的分区或节: div行元素:spanhtml结构: main / section / articlenav表格:table html中各种标签/属性的英文扩…...

编程日记 2024/3/12 17:29:37

LeetCode 2044.统计按位或能得到最大值的子集数目

给你一个整数数组 nums ，请你找出 nums 子集按位或可能得到的最大值 ，并返回按位或能得到最大值的不同非空子集的数目。如果数组 a 可以由数组 b 删除一些元素（或不删除）得到，则认为数组 a 是数组 b 的一个子集…...

编程日记 2024/3/12 17:28:36

Selenium自动化测试细节讲解

与以前瀑布式开发模式不同，现在软件测试人员具有使用自动化工具执行测试用例套件的优势，而以前，测试人员习惯于通过测试脚本执行来完成测试。但自动化测试的目的不是完全摆脱手动测试，而是最大程度地减少手动运行的测试。自动化…...

编程日记 2024/3/12 17:26:33

强化学习工具箱（Matlab）

1、Get Started 1.1、MDP环境下训练强化学习智能体 MDP环境如下图每个圆圈代表一个状态每个状态都有上或下的选择智能体从状态 1 开始智能体接收的奖励值为图中状态转移的值训练目标是最大化累计奖励 （1）创建 MDP 环境创建一个具有 8 个状态和 2 …...

编程日记 2024/3/12 17:24:30

程序人生 - 爬虫者，教育也！

作为一个站长，你是不是对爬虫不胜其烦？爬虫天天来爬，速度又快，频率又高，服务器的大量资源被白白浪费。看这篇文章的你有福了，我们今天一起来报复一下爬虫，直接把爬虫的服务器给干死机。本文有…...

编程日记 2024/3/12 17:23:29

OKLink2月安全月报| 2起典型漏洞攻击案例分析

在本月初我们发布的2024年2月安全月报中提到，2月全网累计造成损失约1.03亿美元。其中钓鱼诈骗事件损失占比11.76%。 OKLink提醒大家，在参与Web3项目时，应当仔细调研项目的真实性、可靠性，提升对钓鱼网站和风险项目的甄别能力&…...

编程日记 2024/3/12 17:22:28

可视化表单流程编辑器为啥好用？

想要提升办公率、提高数据资源的利用率，可以采用可视化表单流程编辑器的优势特点，实现心中愿望。伴随着社会的进步和发展，提质增效的办公效果一直都是很多职场办公团队的发展需求，作为低代码技术平台服务商，流辰信息团…...

编程日记 2024/3/12 17:19:25

【代码】Android｜获取存储权限并创建、存储文件

版本：Android 11及以上，gradle 7.0以上，Android SDK > 29 获取存储权限获取存储权限参考：Android 11 外部存储权限适配指南及方案，这篇文章直接翻到最下面，用XXPermissions框架。它漏了这个框架的使用方…...

编程日记 2024/3/12 17:17:23

每日一练 | 华为认证真题练习Day196

1、在如图所示的网络中，三台交换机运行RSTP，配置情况如图所示根据图中配置情况判断根交换机为 A. SWA B. SWB C. SWC D. 无法确定 2、如图所示，在RT1路由器上配置OSPF多进程，其中RT1的进程100通过骨干区域和RT2建立OSPF邻居&…...

编程日记 2024/3/12 17:16:22

如何在Linux本地搭建Tale网站并实现无公网ip远程访问

文章目录前言1. Tale网站搭建1.1 检查本地环境1.2 部署Tale个人博客系统1.3 启动Tale服务1.4 访问博客地址 2. Linux安装Cpolar内网穿透3. 创建Tale博客公网地址4. 使用公网地址访问Tale 前言今天给大家带来一款基于 Java 语言的轻量级博客开源项目——Tale，Tale…...

编程日记 2024/3/12 17:14:20

论哪个行业官网颜值普遍较高，装修设计第二，无人敢称第一。

装饰设计公司官网普遍颜值较高的原因主要包括以下几点： 1. 美学要求： 装饰设计公司本身就是从事美学和艺术的行业，他们对于视觉效果和美感有着较高的要求，因此他们的官网在设计上往往会更加注重颜值。 2. 品牌形象&#xff1a…...

编程日记 2024/3/12 17:12:18

Elastic Stack--08--SpringData框架

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 SpringData[官网： https://spring.io/projects/spring-data](https://spring.io/projects/spring-data) Spring Data Elasticsearch 介绍 1.SpringData-…...

编程日记 2024/3/12 17:09:13

华为OD机试 - 模拟数据序列化传输（Java JS Python C C++）

题目描述模拟一套简化的序列化传输方式，请实现下面的数据编码与解码过程编码前数据格式为 [位置,类型,值]，多个数据的时候用逗号分隔，位置仅支持数字，不考虑重复等场景；类型仅支持：Integer / String / Compose（Compose的数据类型表示该存储的数据也需要编码）编码后数…...

编程日记 2024/3/12 17:08:12

使用Tokeniser估算GPT和LLM服务的查询成本

将LLM集成到项目所花费的成本主要是我们通过API获取LLM返回结果的成本，而这些成本通常是根据处理的令牌数量计算的。我们如何预估我们的令牌数量呢？Tokeniser包可以有效地计算文本输入中的令牌来估算这些成本。本文将介绍如何使用Tokeniser有效地预测和管…...

编程日记 2024/3/12 17:06:10

2-Docker-应用-多容器部署Django+Vue项目（nginx+uwsgi+mysql）

摘要： 本文详细介绍了如何使用Docker部署一个多容器DjangoVue项目，包括nginx、uwsgi和mysql。文章内容涵盖了基础知识回顾、需求分析、设计方案、实现步骤、技巧与实践、性能优化与测试、常见问题与解答以及结论与展望。阅读时长：约60分钟…...

编程日记 2024/3/12 17:04:08

Vue 中的 key：列表渲染的秘诀

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/3/12 16:57:00

Linux系统架构----nginx的服务基础

一.Nginx的概述 Nginx是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx稳定性高，而且系统资源消耗少Nginx相对于Apache主要处理静态请求，而apache主要处理动态请求Nginx是一款轻量级的Web 服务器/反向代理服务…...

编程日记 2024/3/12 16:52:56

项目管理工具及模板(甘特图、OKR周报、任务管理、头脑风暴等)

项目管理常用模板大全： 1. 项目组OKR周报 2. 项目组传统周报工作法 3. 项目甘特图 4. 团队名单 5. 招聘跟进表 6. 出勤统计 7. 年度工作日历 8. 项目工作年计划 9. 版本排期 10. 项目组任务管理 11. 项目规划模板 12. 产品分析报告 13. 头脑风暴信息化项目建设全套…...

编程日记 2024/3/12 16:51:55

MySQL--索引底层数据结构详解

索引是什么？ 索引是帮助MySQL高效获取数据的排好序的数据结构，因此可知索引是数据结构。概念很抽象，但是类比生活中的例子就很容易理解，比如一本厚厚的书，我们想取找某一小节，我们可以根据目录去快速找到…...

编程日记 2024/3/12 16:50:54

如何解决爬虫程序访问速度受限问题

目录前言一、代理IP的获取 1. 自建代理IP池 2. 购买付费代理IP 3. 使用免费代理IP网站二、代理IP的验证三、使用代理IP进行爬取四、常见问题和解决方法 1. 代理IP不可用 2. 代理IP速度慢 3. 代理IP被封禁总结前言解决爬虫程序访问速度受限问题的一种常用方…...

编程日记 2024/3/12 16:46:50

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2025/6/20 23:15:03

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/6/17 7:02:51

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/6/22 10:49:49

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/6/21 1:16:50