web前端开发基础入门html5+css3+js学习笔记（一）

目录

  • 1.第一个前端程序
  • 2.前端工具的选择与安装
  • 3.VSCode开发者工具快捷键
  • 4.HTML5简介与基础骨架
      • 4.1 HTML5的DOCTYPE声明
      • 4.2 HTML5基本骨架
        • 4.2.1 html标签
        • 4.2.2 head标签
        • 4.2.3 body标签
        • 4.2.4 title标签
        • 4.2.5 meta标签
  • 5.标签之标题
    • 5.1 快捷键
    • 5.1 标题标签位置摆放
  • 6.标签之段落、换行、水平线
    • 6.1 标签之段落
    • 6.2换行
    • 6.3 水平线
  • 7.标签之图片
  • 8.图片路径详解
    • 8.1 绝对路径
    • 8.2 相对路径
      • 8.2.1 子级`/`
      • 8.2.2 父级`../`
      • 8.2.3 同级`./`
    • 8.3 网络路径
  • 9.标签之超文本链接
    • 9.1 超链接描述
    • 9.2 超链接属性
    • 9.3 超链接表现
  • 10.标签之文本
    • 10.1 常用文本标签
  • 11. 列表标签之有序列表
    • 11.1 有序列表
    • 11.2 type属性
    • 11.3 有序列表嵌套
  • 12.列表标签之无序列表
    • 12.1 无序列表实现
    • 12.2 type属性
    • 12.3 无序列表嵌套
    • 12.4 常见应用场景
    • 12.5 快捷键
  • 13.标签之表格
    • 13.1 表格展示效果
    • 13.2 快捷键
    • 13.3 表格属性
  • 14.表格单元格合并
  • 15.Form表单
    • 15.1 表单元素（可理解为表单控件）
  • 16.表单元素
    • 16.1 文本框
    • 16.2 密码框
    • 16.3 提交按钮
  • 17.块元素与行内元素（内联元素）
  • 18.HTML5新增标签
    • 18.1 拓展知识
    • 18.2 H5新标签

1.第一个前端程序

用记事本创建文件名为Welcome.html

<html><head><title>我的第一个网页</title></head><body>欢迎来到网页制作</body>
</html>

2.前端工具的选择与安装

浏览器选择：谷歌浏览器（有开发者调试工具）
鼠标右键，选择检查，进入开发者调试工具

开发者工具：VSCode
安装中文，扩展，收索chinese，安装

3.VSCode开发者工具快捷键

生成浏览器文件.html的快捷方式

  1. ! + 回车（注意是英文的叹号）

VSCode常用快捷键列表

1.代码格式化：shift + alt + f
2.向上或向下移动一行：alt+up或alt+down
3.快速复制一行代码：shift+alt+up或shift+alt+down
4.快速保存：ctrl+s
5.快速查找：ctrl+f
6.快速替换：ctrl+h

4.HTML5简介与基础骨架

4.1 HTML5的DOCTYPE声明

避免浏览器怪异模式，防止不同浏览器渲染出不同效果来。

1. <!DOCTYPE html>

4.2 HTML5基本骨架

4.2.1 html标签

其他元素要包裹在它里面，限定了文档的开始点和结束点

1. <!DOCTYPE html>
2. <html>
3. </html>

4.2.2 head标签

head标签用于定义文档的头部，描述了文档的各种属性和信息，包括文档的标题、在Web中的文职以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

1. <!DOCTYPE html>
2. <html>
3. 		<head>
4. 		</head>
5. <html>

4.2.3 body标签

body元素定义文档的主体。
body元素包含文档中的所有内容（比如文本、超链接、图像、表格和列表等等）
它会直接在页面中显示出来，也就是用户可以直观看到的内容

 1. <!DOCTYPE html>2. <html>3. 		<head>4. 		</head>5. 		<body>6. 			我会显示在浏览器中7. 		</body>8. </html>

4.2.4 title标签

  1. 可定义文档的标题
  2. 它显示在浏览器窗口的标题栏或状态栏上
  3. <title>标签是<head>标签中唯一必须要求包含的东西，就是说写head一定要写title
  4. <title>的增加有利于SEO优化（收索引擎优化）
<!DOCTYPE html>
<html><head><title>我的网页</title>
</head>
<body>欢迎光临
</body></html>

4.2.5 meta标签

meta是一个单标签。meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8

<!DOCTYPE html>
<html><head><title>我的网页</title><meta charset="UTF-8">
</head><body>欢迎光临
</body></html>

5.标签之标题

总共有六级

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

5.1 快捷键

生成h1-h6的快捷键h$*6

快速打开浏览器安装插件
拓展，搜索open in browser，点击安装
正确使用标签可以提高seo

5.1 标题标签位置摆放

在标签中添加属性：align=left|center|right

6.标签之段落、换行、水平线

6.1 标签之段落

段落是通过<p>标签定义的
建议文本写在标签内，标签内可以修改其字体大小等，标签外无法控制

6.2换行

<br>或<br />单标签

6.3 水平线

<hr/>标签在html页面中创建水平线
属性：color,width,size,align

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>我是一个段<br>落标签</p><hr color="red" width="300px" size="20px"  align="left"> <!--宽度和高度的单位是像素-->
</body>
</html>

7.标签之图片

网站中最多的元素就是图片
<img>标签定义html页面中的图像，它是单标签
属性：

1 src:路径（图片地址与名字）
2 alt:规定图像的替代文本（当图片无法正常显示的时候，显示的文字）
3.width：图像的宽度
4. height：图像的高度
5. title：鼠标悬停在图片上给予提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="1.webp" alt="美丽的小姐姐" width="300px" title="小姐姐"><!--一般不同时规定宽度和高度-->
</body>
</html>

8.图片路径详解

8.1 绝对路径

从盘符开始

8.2 相对路径

8.2.1 子级/

8.2.2 父级../

8.2.3 同级./

8.3 网络路径

具体的网络地址

9.标签之超文本链接

9.1 超链接描述

html使用标签<a>来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。

9.2 超链接属性

在标签<a>中使用了href属性来描述链接的地址
<a href="url">链接文本</a>

默认情况下，链接未点是蓝色带下划线，点击后是紫色带下划线，点击时红色带下划线。后期可用css样式修改这些效果

9.3 超链接表现

鼠标移动到超链接上会变成小手

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://www.baidu.com">百度一下</a><a href="https://www.baidu.com"><img src="1.webp" width="300px"></a>
</body>
</html>

10.标签之文本

10.1 常用文本标签

标签描述
<em>定义着重文字
<b>定义粗体文本
<i>定义斜体字
<strong>定义家中语气
<del>定义删除字
<span>元素没有特定的含义（为了日后添加css样式方便）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>白菜</p><p>我喜欢吃<em>em白菜</em></p><i>i白菜</i><b>b白菜</b><strong>strong白菜</strong><span>span白菜</span><del>del白菜</del></body>
</html>

11. 列表标签之有序列表

11.1 有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签

11.2 type属性

<ol>的属性type拥有的选项

  1. 1 表示列表项目用数字标号（1，2，3…）
  2. a 表示列表项目用小写字母标号 （a,b,c…）
  3. A 表示列表项目用大写字母标号（A，B，C…）
  4. i 表示列表项目用小写罗马数字标号（i，ii，iii…）
  5. I 表示列表项目用大写罗马数字标号（I, II, III…）

11.3 有序列表嵌套

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ol type="a"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol><ol type="A"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol><ol type="1"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol><ol type="i"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol><ol type="I"><li>苹果</li><li>橘子</li><li>香蕉</li><li>火龙果</li></ol><ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li><li>辣椒</li><li>黄瓜</li></ol></li><li>肉类</li></ol>
</body>
</html>

12.列表标签之无序列表

12.1 无序列表实现

无序列表是一个项目的列表，此列项目使用粗体原点（典型的小黑圆圈）进行标记
无序列表始于<ul>标签。每个列表项始于<li>标签。

12.2 type属性

<ul>的属性type拥有的选项

  • disc 默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示

12.3 无序列表嵌套

12.4 常见应用场景

  • 无序的列表效果
  • 导航效果

12.5 快捷键

快速生成ul+li的布局：ul>li*3(数字根据自己的需要的li数量修改)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul type="disc"><li>香蕉</li><li>苹果</li></ul><ul type="circle"><li>香蕉</li><li>苹果</li></ul><ul type="square"><li>香蕉</li><li>苹果</li></ul><ul type="none"><li>香蕉</li><li>苹果</li></ul><ul><li>蔬菜</li><li>水果<ul><li>苹果</li><li>香蕉</li><li>橘子</li></ul></li><li>肉类</li></ul><ul><li></li><li></li><li></li><li></li><li></li></ul>
</body>
</html>

13.标签之表格

13.1 表格展示效果

表格：<table>
行：<tr>
单元格（列）：<td>

13.2 快捷键

快速生成表格结构:table>tr*4>td*5{单元格}

13.3 表格属性

  1. border：设置表格的边框
  2. width：设置表格的宽度
  3. height：设置表格的高度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1" width="400px" height="200px"><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr></table><table><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr></table>
</body>
</html>

14.表格单元格合并

单元格合并属性
在这里插入图片描述

  • 水平合并：colspan
  • 垂直合并: rowspan
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>合并单元格6和7：colspan</p><p>合并单元格15和20：rowspan</p><p>水平合并：保留左边，删除右边</p><p>垂直合并：保留上边，删除下边</p><table border="1" width="600px" height="400px"><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr><tr><td colspan="2">单元格6单元格7</td><td>单元格8</td><td>单元格9</td><td>单元格10</td></tr><tr><td>单元格11</td><td>单元格12</td><td rowspan="3">单元格13、18、23</td><td>单元格14</td><td rowspan="2">单元格15、20</td></tr><tr><td colspan="2" rowspan="2">单元格16、17、21、22</td><td>单元格19</td></tr><tr><td>单元格24</td><td>单元格25</td></tr></table>
</body>
</html>

15.Form表单

作用：让网站具有交互性
表单在Web网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，按钮等，这些输入框，按钮叫控件，表单就是容器，它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

属性说明
action服务器地址
name表单名称
method中Get和Post的区别

  1. 数据提交方式，get把提交的数据url可以看到，post看不到
  2. get一般用于提交少量数据，post用来提交大量数据

15.1 表单元素（可理解为表单控件）

一个完整的表单包含三个基本组成部分：表单标签（）、表单域（输入框）、表单按钮（button按钮）
1.表单标签
2.表单域
3.表单按钮

<form><input type="text"><input type="submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="url" method="get|post" name="myform"></form><form><!--表单标签--><input><!--表单域--><input type="submit"><!--表单按钮--><button>按钮</button><!--表单按钮--></form><form><input type="text"><input type="submit"></form>
</body>
</html>

16.表单元素

16.1 文本框

文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>First name:<input type="text" name="firstname"><br>Last name:<input type="test" name="lastname">
</form>

16.2 密码框

密码字段通过标签<input type="password">来定义

<form>Password:<input type="password" name="pwd">
</form>

16.3 提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="url" method="get">Username:<input type="text" name="user"><input type="submit" value="Submit">
</form>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form><input type="text"><input type="submit"></form><form>用户名：<input type="text"><br>密码：<input type="password"><br><input type="submit" value="登入"></form>
</body>
</html>

17.块元素与行内元素（内联元素）

html5之前元素分为块级元素和内联元素；
html5之后按内容模型来区分，分为元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的。

内联元素和块级元素的区别

块级元素内联元素
块元素会在页面中独占一行（自上向下垂直排列）行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性行内元素设置width，height属性无效
一般块级元素可以包含行内元素和其他块级元素一般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1~h6、hr、p、table、ul等

常见内联元素（行内元素）

a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）

button、img、input等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>标签</h1><p>段落</p><ul><li>列表1</li><li>列表2</li></ul><a href="#">超链接</a><span>内容</span><em width="400px">注重语气</em><!--行元素设置宽度并不能生效--><img  width="300px" src="2.webp" alt=""><img src="2.webp" alt=""><!--行内块级元素不换行，却能识别宽高--></body>
</html>

18.HTML5新增标签

目的：新增布局标签利于SEO

18.1 拓展知识

div容器元素，也是页面中见到的最多的元素。本身没有任何样式效果。

18.2 H5新标签

  1. <head></head>头部
  2. <nav></nav>导航
  3. <section></section>定义文档中的节，比如章节、页眉、页脚
  4. <aside></aside>侧边栏
  5. <footer></footer>脚部
  6. <article></article>代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h3>标签</h3><a href="#">超链接</a><strong>文本</strong><p>段落</p><ul><li>列表</li></ul><table><tr><td>单元格</td></tr></table><div><ul><li>导航1</li><li>导航2</li><li>导航3</li></ul></div><div><img src="" alt=""></div><div><img src="" alt=""><p> </p></div><!--传统布局--><div id="header"></div><div id="nav"></div><div id="article"><div id="section"></div></div> <div id="silder"></div><div id="footer"></div><!--新布局新标签--><header></header><nav></nav><article><section></section></article><aside></aside><footer></footer></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/93018.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Docker实战专栏简介

Docker实战专栏简介

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

#AIGC技术内容创作征文&#xff5c;全网寻找AI创作者&#xff0c;快来释放你的创作潜能吧&#xff01;# 文章目录 1 前言2 测试详情2.1 文案写作2.2 知识写作2.3 阅读理解2.4 语意测试&#xff08;重点关注&#xff09;2.5 常识性测试&#xff08;重点关注&#xff09;2.6 代码…
阅读更多...
深入学习SpringCloud Alibaba微服务架构，揭秘Nacos、Sentinel、Seata等核心技术，助力构建高效系统！

深入学习SpringCloud Alibaba微服务架构，揭秘Nacos、Sentinel、Seata等核心技术，助力构建高效系统！

课程链接&#xff1a; 链接: https://pan.baidu.com/s/1hRN0R8VFcwjyCTWCEsz-8Q?pwdj6ej 提取码: j6ej 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 --来自百度网盘超级会员v4的分享 课程介绍&#xff1a; &#x1f4da;【第01阶段】课程简介&#xff1a;全…
阅读更多...
flinksql实时统计程序背压延迟优化

flinksql实时统计程序背压延迟优化

问题&#xff1a; flinkcdcflinksql做实时读取sls日志和实时统计业务指标&#xff0c;今天发现程序背压了&#xff0c;业务延迟了6个小时。解决办法&#xff1a; 1、资源优化 作业并发大时&#xff1a;在作业的高级配置的资源配置中&#xff0c;增加JobManager的资源&#xf…
阅读更多...
2023国赛数学建模思路 - 复盘：校园消费行为分析

2023国赛数学建模思路 - 复盘：校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…
阅读更多...
创新零售，京东重新答题？

创新零售，京东重新答题？

继新一轮组织架构调整后&#xff0c;京东从低价到下沉动作不断。 新成立的创新零售部在京东老将闫小兵的带领下悄然完成了整合。近日&#xff0c;京喜拼拼已改名为京东拼拼&#xff0c;与七鲜、前置仓等业务共同承载起京东线上线下加速融合的梦想。 同时&#xff0c;拼拼的更…
阅读更多...
接口自动化测试

接口自动化测试

1、生活中面临的问题:当前我们面临的这个bug修改好了&#xff0c;但是在其他地方又出现了新的bug&#xff0c;如何能够提前发现bug那 1.1 功能测试----是通过页面发送请求 1.2 接口测试---可以直接利用工具向服务器发送数据做一个结果验证 1.3 功能测试是在联调通过后进行开展的…
阅读更多...
专访 BlockPI：共建账户抽象未来的新一代 RPC 基础设施

专访 BlockPI：共建账户抽象未来的新一代 RPC 基础设施

在传统 RPC 服务板块上&#xff0c;开发者一直饱受故障风险、运行环境混乱等难题的折磨。实现 RPC 服务的去中心化&#xff0c;且保持成本优势和可扩展性&#xff0c;始终是区块链基础设施建设的重要命题之一。从 2018 年观察中心化 RPC 供应商服务现状开始&#xff0c;BlockPI…
阅读更多...
VectorStyler for Mac: 让你的创意无限绽放的全新设计工具

VectorStyler for Mac: 让你的创意无限绽放的全新设计工具

VectorStyler for Mac是一款专为Mac用户打造的矢量设计工具&#xff0c;它结合了功能强大的矢量编辑器和创意无限的样式编辑器&#xff0c;让你的创意无限绽放。 VectorStyler for Mac拥有直观简洁的用户界面&#xff0c;让你能够轻松上手。它提供了丰富的矢量绘图工具&#x…
阅读更多...
[C++] 模板template

[C++] 模板template

目录 1、函数模板 1.1 函数模板概念 1.2 函数模板格式 1.3 函数模板的原理 1.4 函数模板的实例化 1.4.1 隐式实例化 1.4.2 显式实例化 1.5 模板参数的匹配原则 2、类模板 2.1 类模板的定义格式 2.2 类模板的实例化 讲模板之前呢&#xff0c;我们先来谈谈泛型编程&am…
阅读更多...
ABAP 新语法--Data Processing

ABAP 新语法--Data Processing

1. String Template 新语法引入了字符串模板&#xff0c;用于处理字符串连接以及格式转换 字符串模板在 | … | 之间定义&#xff0c;主要分为两部分&#xff0c;固定文本和变量 其中&#xff0c;变量只能在 { … } 内使用&#xff0c;大括号之外的所有字符均作为固定文本使用…
阅读更多...
STM32存储左右互搏 I2C总线FATS读写EEPROM ZD24C1MA

STM32存储左右互搏 I2C总线FATS读写EEPROM ZD24C1MA

STM32存储左右互搏 I2C总线FATS读写EEPROM ZD24C1MA 在较低容量存储领域&#xff0c;EEPROM是常用的存储介质&#xff0c;可以通过直接或者文件操作方式进行读写。不同容量的EEPROM的地址对应位数不同&#xff0c;在发送字节的格式上有所区别。EEPROM是非快速访问存储&#xf…
阅读更多...
【Spring 】了解Spring AOP

【Spring 】了解Spring AOP

目录 一、什么是Spring AOP 二、AOP的使用场景 三、AOP组成 四、Spring AOP的实现 1、添加Spring AOP依赖 2、定义切面和切点 3、定义相关通知 五、 AOP的实现原理 1、什么是动态代理 2、 JDK代理和CGLIB代理的区别 一、什么是Spring AOP AOP&#xff08;Aspect Ori…
阅读更多...
HarmonyOS NEXT新能力，一站式高效开发HarmonyOS应用

HarmonyOS NEXT新能力，一站式高效开发HarmonyOS应用

2023年8月6日华为开发者大会2023&#xff08;HDC.Together&#xff09;圆满收官&#xff0c;伴随着HarmonyOS 4的发布&#xff0c;华为向开发者发布了汇聚所有最新开发能力的HarmonyOS NEXT开发者预览版&#xff0c;并分享了围绕“一次开发&#xff0c;多端部署” “可分可合&a…
阅读更多...
Spring Boot业务代码中使用@Transactional事务失效踩坑点总结

Spring Boot业务代码中使用@Transactional事务失效踩坑点总结

1.概述 接着之前我们对Spring AOP以及基于AOP实现事务控制的上文&#xff0c;今天我们来看看平时在项目业务开发中使用声明式事务Transactional的失效场景&#xff0c;并分析其失效原因&#xff0c;从而帮助开发人员尽量避免踩坑。 我们知道 Spring 声明式事务功能提供了极其…
阅读更多...
面试之快速学习STL-deuqe和list

面试之快速学习STL-deuqe和list

1. deque deque 容器用数组&#xff08;数组名假设为 map&#xff09;存储着各个连续空间的首地址。也就是说&#xff0c;map 数组中存储的都是指针如果 map 数组满了怎么办&#xff1f;很简单&#xff0c;再申请一块更大的连续空间供 map 数组使用&#xff0c;将原有数据&…
阅读更多...
css3-grid：grid 布局 / 基础使用

css3-grid：grid 布局 / 基础使用

一、理解 grid 二、理解 css grid 布局 CSS Grid布局是一个二维的布局系统&#xff0c;它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统&#xff0c;它不仅可以用于构建网格布局&#xff0c;还可以用于定位元素&#xf…
阅读更多...
IC流程中 DFT 学习笔记（1）

IC流程中 DFT 学习笔记（1）

引言 DFT是ASIC芯片设计流程中不可或缺的环节。其主要目的是在芯片前端设计验证完成后插入一些诸如寄存器链等可供测试的逻辑&#xff0c;算是IC后端设计的范畴。主要是在ASIC芯片流片完成后&#xff0c;通过这些已插入的逻辑&#xff0c;检测流片得到的芯片的制造质量。检测一…
阅读更多...
Flink之Partitioner(分区规则)

Flink之Partitioner(分区规则)

Flink之Partitioner(分区规则) 方法注释global()全部发往1个taskbroadcast()广播(前面的文章讲解过,这里不做阐述)forward()上下游并行度一致时一对一发送,和同一个算子连中算子的OneToOne是一回事shuffle()随机分配(只是随机,同Spark的shuffle不同)rebalance()轮询分配,默认机…
阅读更多...
玩转VS code 之 C/C++ 环境配置篇

玩转VS code 之 C/C++ 环境配置篇

PS&#xff1a;俺是菜鸟&#xff0c;整理和踩坑试错花了不少时间&#xff0c;如果这篇文章对您有用的话&#xff0c;请麻烦您留下免费的赞赞&#xff0c;赠人玫瑰&#xff0c;手留余香&#xff0c;码字踩坑不易&#xff0c;望三连支持 上一篇&#xff1a;玩转 VS code 之下载篇…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023