web开发——前端html、css、JavaScript学习总结(持续更新中.......)
目录模版
- 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:
特殊符号
空格: 元信息: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中各种标签/属性的英文扩…...
LeetCode 2044.统计按位或能得到最大值的子集数目
给你一个整数数组 nums ，请你找出 nums 子集 按位或 可能得到的 最大值 ，并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素（或不删除）得到，则认为数组 a 是数组 b 的一个 子集…...
Selenium自动化测试细节讲解
与以前瀑布式开发模式不同，现在软件测试人员具有使用自动化工具执行测试用例套件的优势，而以前，测试人员习惯于通过测试脚本执行来完成测试。 但自动化测试的目的不是完全摆脱手动测试，而是最大程度地减少手动运行的测试。自动化…...
强化学习工具箱（Matlab）
1、Get Started 1.1、MDP环境下训练强化学习智能体 MDP环境如下图 每个圆圈代表一个状态每个状态都有上或下的选择智能体从状态 1 开始智能体接收的奖励值为图中状态转移的值训练目标是最大化累计奖励 （1）创建 MDP 环境 创建一个具有 8 个状态和 2 …...
程序人生 - 爬虫者，教育也！
作为一个站长，你是不是对爬虫不胜其烦？爬虫天天来爬，速度又快，频率又高，服务器的大量资源被白白浪费。 看这篇文章的你有福了，我们今天一起来报复一下爬虫，直接把爬虫的服务器给干死机。 本文有…...
OKLink2月安全月报| 2起典型漏洞攻击案例分析
在本月初我们发布的2024年2月安全月报中提到，2月全网累计造成损失约1.03亿美元。其中钓鱼诈骗事件损失占比11.76%。 OKLink提醒大家，在参与Web3项目时，应当仔细调研项目的真实性、可靠性，提升对钓鱼网站和风险项目的甄别能力&…...
可视化表单流程编辑器为啥好用？
想要提升办公率、提高数据资源的利用率，可以采用可视化表单流程编辑器的优势特点，实现心中愿望。伴随着社会的进步和发展，提质增效的办公效果一直都是很多职场办公团队的发展需求，作为低代码技术平台服务商，流辰信息团…...
【代码】Android｜获取存储权限并创建、存储文件
版本：Android 11及以上，gradle 7.0以上，Android SDK > 29 获取存储权限 获取存储权限参考：Android 11 外部存储权限适配指南及方案，这篇文章直接翻到最下面，用XXPermissions框架。它漏了这个框架的使用方…...
每日一练 | 华为认证真题练习Day196
1、在如图所示的网络中，三台交换机运行RSTP，配置情况如图所示 根据图中配置情况判断根交换机为 A. SWA B. SWB C. SWC D. 无法确定 2、如图所示，在RT1路由器上配置OSPF多进程，其中RT1的进程100通过骨干区域和RT2建立OSPF邻居&…...
如何在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…...
论哪个行业官网颜值普遍较高，装修设计第二，无人敢称第一。
装饰设计公司官网普遍颜值较高的原因主要包括以下几点： 1. 美学要求： 装饰设计公司本身就是从事美学和艺术的行业，他们对于视觉效果和美感有着较高的要求，因此他们的官网在设计上往往会更加注重颜值。 2. 品牌形象：…...
Elastic Stack--08--SpringData框架
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 SpringData[官网： https://spring.io/projects/spring-data](https://spring.io/projects/spring-data) Spring Data Elasticsearch 介绍 1.SpringData-…...
华为OD机试 - 模拟数据序列化传输（Java JS Python C C++）
题目描述 模拟一套简化的序列化传输方式，请实现下面的数据编码与解码过程 编码前数据格式为 [位置,类型,值]，多个数据的时候用逗号分隔，位置仅支持数字，不考虑重复等场景；类型仅支持：Integer / String / Compose（Compose的数据类型表示该存储的数据也需要编码）编码后数…...
使用Tokeniser估算GPT和LLM服务的查询成本
将LLM集成到项目所花费的成本主要是我们通过API获取LLM返回结果的成本，而这些成本通常是根据处理的令牌数量计算的。我们如何预估我们的令牌数量呢？Tokeniser包可以有效地计算文本输入中的令牌来估算这些成本。本文将介绍如何使用Tokeniser有效地预测和管…...
2-Docker-应用-多容器部署Django+Vue项目（nginx+uwsgi+mysql）
摘要： 本文详细介绍了如何使用Docker部署一个多容器DjangoVue项目，包括nginx、uwsgi和mysql。文章内容涵盖了基础知识回顾、需求分析、设计方案、实现步骤、技巧与实践、性能优化与测试、常见问题与解答以及结论与展望。 阅读时长：约60分钟…...
Vue 中的 key：列表渲染的秘诀
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
Linux系统架构----nginx的服务基础
一.Nginx的概述 Nginx是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx稳定性高，而且系统资源消耗少Nginx相对于Apache主要处理静态请求，而apache主要处理动态请求Nginx是一款轻量级的Web 服务器/反向代理服务…...
项目管理工具及模板(甘特图、OKR周报、任务管理、头脑风暴等)
项目管理常用模板大全： 1. 项目组OKR周报 2. 项目组传统周报工作法 3. 项目甘特图 4. 团队名单 5. 招聘跟进表 6. 出勤统计 7. 年度工作日历 8. 项目工作年计划 9. 版本排期 10. 项目组任务管理 11. 项目规划模板 12. 产品分析报告 13. 头脑风暴 信息化项目建设全套…...
MySQL--索引底层数据结构详解
索引是什么？ 索引是帮助MySQL高效获取数据的排好序的数据结构，因此可知索引是数据结构。 概念很抽象，但是类比生活中的例子就很容易理解，比如一本厚厚的书，我们想取找某一小节，我们可以根据目录去快速找到…...
如何解决爬虫程序访问速度受限问题
目录 前言 一、代理IP的获取 1. 自建代理IP池 2. 购买付费代理IP 3. 使用免费代理IP网站 二、代理IP的验证 三、使用代理IP进行爬取 四、常见问题和解决方法 1. 代理IP不可用 2. 代理IP速度慢 3. 代理IP被封禁 总结 前言 解决爬虫程序访问速度受限问题的一种常用方…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
阿里云Ubuntu 22.04 64位搭建Flask流程（亲测）
cd /home 进入home盘 安装虚拟环境： 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境： virtualenv myenv 3、激活虚拟环境（激活环境可以在当前环境下安装包） source myenv/bin/activate 此时，终端…...