周总结10.22

于 2022-10-22 18:43:21 发布
阅读量249 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64913137/article/details/127465057
版权

10.17

四个阶段

  1. 一阶段（认知阶段）：Java基础+Java高级特性（5周时间）Java语法等等 封装，继承，多态，java常用类

  2. 二阶段（知识蓄力阶段）对开发流程有一定的认识（5周时间）：JavaWEB（学习JavaEE的核心技术+前端基础）mysql/jdbc/serviet/jsp 前端：html,css,js,ajax,Jquery,前端框架LayUI/boostrap

  3. 三阶段（主流阶段）：（6周）Spring/SpringMVC/Mybatis,SpringBoot+shiro+linux+Vue（前后端分离项目）

  4. 四阶段：（6周）SpringCloud 微服务（高并发应用场景）---为企业加分去用

本周内容

  • 1-3（包括周四上午）：把前端基础讲一些前端将一些基本的html标签以及CSS（网页修饰）---完成简单的登录、注册、一些首页的页面布局

  • 前端也得写，后端也得写（中小型企业） java工程师（半个全栈工程师）周五上午总结，下午测试

1.引入前端的扫盲（第一个内容HTML基础）

可以针对文本，动画，文档等等都可以标记（举例：设置图片大小、设置字体颜色....）

2.html的标准结构

通过访问www.biadu.com-->浏览器F12或者右键--》检查元素<!DOCYTPE html>html文档声明（默认h5的文档类型 还有h 4.0.1的版本）

<html>     根标签  
    <head>头标签     
        <title>标题标签 
        </title>       
    </head>
    <body>浏览器中显示的文本部分
    </body>
    </html>

3.前端开发工具HbuilderX开发工具的使用

3.1将Hbuilderxxx.zip--解压

3.2打开工具--创建WEB项目（一个网站--称为一个web项目：就是一个目录（文件夹）)

3.3在空的项目下--新建一个网页

3.4可以看到页面结构就自动创建好了

3.5运行页面

10.18

1.HTML文本标签之标题标签

<h1> - <h6> 从大到小来标记"标题"

几乎所有的标签都是有start tag(开始标签),end tag(结束标签)

<h1> 一级标题 </h1>
...
六级标题
<h6>六级标题 </h6>

2.给HTML标签加上文字描述,提高阅读性---注释

注释:本身不会被解析, 任何程序员(后端/前端)--都需要对我们的书写的代码进行简易

的信息描述-----方便自己.也方便他人!

html中的注释

<!-- 注释的文字 -->

今日内容

1.HTML的常见的文本标签

<!-- 标题标签 h1-h6 从大到小的标题 -->

    <h1>今天天气不错!</h1>
    <h2>今天天气不错!</h2>
    <h3>今天天气不错!</h3>
    <h4>今天天气不错!</h4>
    <h5>今天天气不错!</h5>
    <h6>今天天气不错!</h6>

<!-- 水平线标签(分割线) hr -->

​

​

  • 段落标签 p标签 在插入段落标签的时候,前后会给我们加入空行

  • 注意事项:像html中标签如果有开始有结束,结束标签不要忘记(建议还是写上,即使没有写浏览器也会自动去加上)

  • 换行标签 br 没有开始标签,它会在浏览器中标记一个空行

  • 文本格式化标签常见的一些文本格式化标签:i标签,b标签,strong标签,em标签

  • b和strong的区别:

共同点:都是加粗的意思,对某段文本内容进行加粗标记

不同点:如果没有语义上的一种强调那么就去使用b标签(通用加粗标签:使用b 标签)

如果有语义上的一种强调那么就使用strong

  • i标签和em同上:

共同点:都是标记斜体标签

不同点:如果没有语义强调就使用i标签(通用斜体标记)

如果有语义强调,使用em标签

  • 引用标签 短引用,q元素 被引入的元素加入引号

​

我的女神:高圆圆

​

  • 引用标签 长引用 blockquote,将它包括内容进行"缩进"处理 类似于键盘上tab键效果一样

    2.文本标签之列表标签

  • 无序列表 ul 和li

    ul是父标签,li是列表项(子标签)

  • ul标签默认的属性

type:给列表项前面的标记值(默认disc,实习圆点)不写就是默认值,circle:空心圆点,square:实心的小正方形

  • 有序列表ol和li

li是ol子标签,列表项元素

ol的默认属性type,默认值是1,其他的值 A,a,I,i

  • 自定义列表

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始

3.文本标签之滚动标签

  • 滚动标签 marquee属性:

背景色bgcolor

behavior:滚动的方式 默认值scroll :连续滚动

滑动一次到浏览器边框停止掉 slide

alternate:来回滚动

direction:滚动的方式 :默认属性值 left(从右到左),right:(从左到右),up,down

scrollamount 表示运动速度，值是正整数 ,默认值是6

scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒

4.文本标签之块元素

  • div和span有什么区别?

div:块元素,占一行空间,多个div之间会自带换行效果

div应用场景 :结合css(给html标签进行修饰的),完成层级页面布局

span:行内标签 ,不会像div元素一一;处在同一行上的

span应用场景:前端完成表单校验去做的;

举例: 用户在输入用户名之后,后面会有提示信息

使用span标签动态完成文本内容的设置

  • pre 原样输出标签

将我们写的文本内容使用pre包裹起来,浏览器就会按照我们文本的格式进行展示;

  • html中常用的转义字符

&nbsp ;相当于在敲了一个空格 ,&ensp ;相当于两个空格

&gt ; 在浏览器将 ">"进行转义,&lt ; "<" 进行转义

  • 网站底部会有些版权所有或者注册商品的符号 使用转义字符的

版权所有 &copy ; 转义成 ©

注册商标 &reg ; 转义成 ®

  • 上下标标签 sup和sub

X2 H2

5.HTML之图像标签以及它的应用场景

  • 语法规则

src:连接到的图片地址 url(统一字符定位符)

src:使用相对路径

相对路径:在当前这个WEB项目下的路径地址

当前这个页面要访问项目下img文件夹里面的高圆圆.jpg绝对路径:d:/EE_2211/10_18_code_resource/高圆圆.jpg

width:宽度height:高度可以指定像素px,还可以指定百分比(根据屏幕分辨率)

图像在设置的时候,本身就和图片尺寸有关系

(UI设计师 一张图像,给前端人员切图成各种尺寸)

title:当鼠标悬浮在图片上的文字提示

atl:替代文本 :当图片链接失效了,这个时候替代文本起作用,显示文字描述什么图片

  • 加载本地图片:img文件夹下面子文件夹 jpg 下面才有具体图片文件 <img src="img/jpg/高圆圆.jpg />

  • 现在当前页面是在图像标签文件夹里面,现在这个文件需要访问img里面的jpg的高圆圆.jpg

    ../ 回退上一级目录

    <img src="../img/jpg/高圆圆.jpg" alt="这是高圆圆的图像"title="这是女神" width="500px%" height="600px" />

  • 图像链接 给img图像标签外面使用a标签包裹

6.超链接标签以及的它的应用场景

HTML 超链接（链接）

  • a标签来表示

    通过使用 href 属性 - 创建指向另一个文档的链接

href="url" url 称为 "网络资源定位符号",可以使用本地地址也可以是网络地址

target:打开资源地址的方式

默认打开方式：_self（当前窗口直接打开新地址）

_blank :新建一个窗口打开

  • 超链接的第二种用法:

通过使用 name 属性 - 创建文档内的书签作为"锚链接来使用"

  • 在同一个html下

1)打锚点---(创建一个锚点(标记/书签))

<a name="锚点名称"></a>

2)创建跳转链接(需要从某个位置跳转到上面的锚点位置)

<!-- <a href="文件地址#锚点名称">跳转到锚点</a>-->

  • 在不同页面下进行锚点跳转

  • 1)在另一个页面的某个位置 打锚点---(创建一个锚点(标记/书签))

2)当前页面创建跳转连接,跳转到另一个页面的那个锚点位置

10.19

1.表格标签 table 行标签tr 单元格td**(能够熟练写出来)

  • 早期table 可以布局,table布局 不好,因为整个表格宽度确定了之后,单元格td一旦改变了,整个表格就出问题了

  • 表格标签

表格:使用table表示,下面有子标签tr:行

属性:align:将td中的内容进行对齐方式

  • 行的子标签

caption:给表格中设置标题

td:一行指定的单元格 (普通单元格)

th:给单元格设置表头信息(自动居中加粗效果)

按照上面的信息写了表格,但是没有表格格式出现

  • table里面有一些属性

border:表格边框线 单位为像素大小(指定1-5px,值越大,边框线越粗)

cellspacing:设置表格单元格和边框之间的空隙,设置0,将单元格边框和表格的边框合并了

width和height:宽度和高度 像素大小或者占整个分辨率的百分比

align:给表格设置对齐方式 center 中间对齐

bgcolor:设置背景颜色

  • 单元格合并td标签的属性

rowspan:行合并(合并行) 你当前这个单元格行合并所占的格子数量

colspan:列合并(合并列) 你当前这个单元格列合并所占的格子数量

2.表单标签(很重要)

  • form 标签---提交数据的 (给后端服务器程序提交 JavaEE核心技术)

大量表单项:文本输入框,密码输入框,日期组件,单选按钮,下拉菜单,复选框....

按钮:普通按钮/特殊按钮

  • 表单提交get和post面试题

get提交和post提交有什么区别? (面试题)

get提交:

1)会将用户的信息提交到地址栏上

格式 是在action的url地址后面?表单项标签中name属性值1=输入的内容值1&name属性的属性值2=输入内容2...

2)get提交,不适合提交用户的私密数据(像登录密码,需要进行处理加密(Java中--MD5加密的工具))

3)get提交由于在地址栏上的,所以提交的数据小有限制!

post提交:HbuilerX运行,提交,找不到地址

手动方式去运行这个页面(不要使用工具运行)

1)不会将用户信息提交到地址栏上

2)相对get安全,安全一些,但是密码的信息还需要加密的(后期通过工具加密)

3)相对get来说不会将信息提交地址栏上,所以提交数据大小无限制的!页面原码

  • 表单标签 form

属性:action="url服务器地址"method="提交方式"

两种:get/post(默认提交方式就是get:在浏览器直接输入访问地址都是默认get提交)

提交按钮将用户表单中的所有的表单项的内容提交到url地址上,进行服务器校验

  • placeholder h5的新增属性:提示信息

自带一种效果:当鼠标点击进去写内容时候,提示文字消失了

value:设置输入框的默认值 没有上面的那种效果

  • 表单项的所有标签 都需要加上name属性(必填)

给后端服务器程序标记 用户输入的内容值是什么

3.常用的表单标签的元素

  • 表单标签中的元素

都需要必填name属性="值" ,服务器地址就能够知道了用户输入的信息是什么

  • 输入类型元素input

属性:type="text" 文本输入框

type="password" 密码输入框

type="radio" 单项按钮

type="checkbox" 复选框

type="date" 日期组件

type="file" 文件上传组件

type="button" 普通按钮 结合value去使用 ,给按钮默认值

type="submit" 结合value属性="登录/注册" 特殊的提交按钮,将用户的信息提交到了

action="服务器地址"

type="reset" 重置按钮

type="hidden" 隐藏域,没有效果,但是可以提交数据

  • 下拉菜单select标签

子标签option:下拉选项

  • 文本域:textarea

rows:指定书写的行数

cols:一行有多个字符

  • radio 单项按钮:男或者女同一组代表性别,给后端标记,指定相同的name属性

<input type="radio" name="sex" value="0" />男
​
<input type="radio" name="sex" value="1" />女<br/>

  • 看成同一组信息,指定相同的name属性,给后端标记,用户选的哪些

<input type="checkbox" name="hobby" value="0" />篮球
​
<input type="checkbox" name="hobby" value="1" />足球
​
<input type="checkbox" name="hobby" value="2" />羽毛球
​
<input type="checkbox" name="hobby" value="3" />跑步
​
<input type="checkbox" name="hobby" value="4" />健身<br/>

籍  贯:

<select name="city">
​
<option value="请选择">请选择</option>
​
<option value="宝鸡市">宝鸡市</option>
​
<option value="西安市鄠邑区">西安市鄠邑区</option>
​
<option value="周至">周至</option>
​
<option value="长安区">长安区</option>
​
</select><br/>

自我介绍:

<textarea rows="5" name="intro" cols="20">周小林,帅!</textarea><br/>
​
<input type="button" value="普通按钮" />
​
<br/>
​
<input type="submit" value="注册" />
​
<input type="reset" value="重置清空" />
​
</form>
​
</body>
</html>

4. 格式优雅的表单(注册/登录页面/添加数据/修改数据) (应用场景)

  • form里面嵌套table

  • 每一个被标签都有一个Style属性:行内样式 指定一些样式内容

  • 邮箱组件: 如果你写的内容不包含@符号,不能提交 会提示

<input type="email" name="email" />

  • 验证码

<input type="text" value="yyds" />

10.20

1.框架标签(将我们的框架模板效果先展示出来)

  • 模拟后台管理模板

框架标签 frame

框架集标签:frameset

<frameset rows="20%,*,10%">
​
<frame src="logo.html" />

  • frame里面一个属性name:给框架包含的页面起名字

<frame src="中间页面.html" name="main" />

  • a标签超链接

target:打开方式 _self:默认值在当前窗口打开

_blank:新建一个窗口打开

如果超链接需要在指定的框架的页面中打开

需要指定为target="框架标签的name属性值"

2.CSS(Cascading Style Sheet:层叠样式表)

  • CSS的常见选择器

CSS的常见样式属性---通过样式来操作html中要给网页设置背景图片

body background="图片地址"

table 表格加入背景 bgcolor属性="图片地址"

  • 前端三剑客

Html:理解"房屋的主体结构"

CSS :理解"具体的房屋里面加入修饰"

Js(Javascript):理解 "具体房屋里面的功能(前端自己的逻辑)"

js:变量,数据类型

CSS:Cascading Style Sheet:层叠样式表

我们自己书写的样式一定是系统里面有的样式(样式库规定的)

  • CSS使用方式

第一种:行内样式

html的每一个标签都有style属性:设置样式的style="样式属性名称1:属性值1;样式属性名称2:属性值2;..."

弊端:一次只能控制一个标签去进行修饰(如果在实际操作过程中,仅仅给某个标签去设置,就直接用这个方式)

第二种:内联样式(内部样式)

在head标签体中书写

<style>
使用css选择器{ //可以直接是标签名称(标签选择器)
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
样式属性名称3:值3;
​
...
​
}
</style>

存在弊端:当前这个html只是写html标签元素的,样式代码style标签和html标签元素混合了,不利于管理!(后端人员,这种方式够用了)

第三种:外联样式(外部样式)

前端开发人员:这种推荐,将css样式代码和html标签代码分离了

1)单独需要在项目下创建css文件夹,然后里面创建后缀名.css文件\

2)css文件书写

选择器{
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
样式属性名称3:值3;
...
}

3)在当前html页面中导入css文件

<link rel="stylesheet"/>

rel:关联样式库中的样式(关联层叠样式表):固定写法

  • css注释 ctrl+/或者是ctrl+shift+/

css注释:注释不能嵌套下面代码就是css样式代码

  • css文件

选择器{
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
样式属性名称3:值3;
​
...
​
}

10.21

1.CSS常用选择器

  • 最基础的选择器

标签名称选择器,class类选择器,id选择器

  • 优先级:

id选择器>class类选择器>标签选择器

  • 其他选择器:

  • 并集选择器(同时选中多个标签设置样式)

选择器1,选择器2,选择器3....{
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
...
​
}

  • 子元素选择器(给选择器2标记的标签一定选择器1标记的标签的子标签 设置样式)

选择器1 选择器2{
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
...
​
}

  • 后代选择器: (选择器2一定是选择器1标记标签的后代元素)

选择器1 > 选择器2{
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
...
​
}

2. CSS**里面特殊的选择器(伪类选择器)

  • 伪类用于定义元素的特殊状态

状态:

1)link状态:鼠标未访问状态

2)hover状态(使用居多):鼠标经过状态

3)avtive状态:鼠标获取焦点状态(激活,点击了,但是没有松开),超链接就是这种

4)visited状态:鼠标访问过了状态(举例:超链接点了松开后,就访问了)

  • css代码书写格式:

选择器:状态名称{
​
样式属性名称1:值1;
​
样式属性名称2:值2;
​
...
​
}

  • 注意:

    1)状态名称不区分大小写,但是建议小写

    2)注意： 规定这个先后顺序: 才能出现循环的效果

    a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！

    a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

3. CSS中常用的样式属性

3.1CSS文本样式

  • 文本颜色 color: red;

  • 文本对齐样式 text-align

    left center right

  • 文本修饰 text-decoration 属性用于设置或删除文本装饰。

underline:设置下划线

none:不设置任何修饰

overline:上划线

line-through:中划线(电商平台:打折之后原件上面的中划线)

text-transform:文本转换 (了解)

capitalize:将每个单词首字母大写

uppercase:将英文单词转换成大写

lowercase:将英文单词转换成小写

text-indent:文本缩进

letter-spacing:指定文本中字符之间的间距。

letter-spacing: 10px;文本阴影

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px)后面添加文本颜色

text-shadow: 2px 2px red;

4. Java(重点--目的学习JavaEE)中---软件开发工具包jdk(安装一下jdk)

  • jdk

    Java Development Kit:软件开发工具包

    包含一个JRE(Java Runtime Environment: Java运行环境)

    JRE 包含JVM(Java虚拟机:假象计算机)和运行Java程序的核心类库!

  • 卸载jdk

    不是说直接把jdk安装路径右键删除就完了!需要从控制面板卸载,注册表的信息删除了!

    windows键+r键--->输入control ,打开控制面板

chen@~
关注
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
汇总常用的jQuery操作Table tr td方法
Masha
07-07 547
虽然现在DIV+CSS进行页的布局大行其道，但是很多地方使用table还是有很多优势，用table展示数据是比较方便的，下面汇总了jQuery操作Table tr td常用的方法，熟记这些操作技巧，下次再使用的到时候，会让你如鱼得水，提高开发效率。 1.鼠标移动行变色  $("#table1 tr").hover(function(){    $(this).children("...
jquery 怎么获取tr下的第二个td元素？
丰的博客
01-11 1万+
jquery 怎么获取tr下的第二个td元素？ https://zhidao.baidu.com/question/235781000.html
excel合并多个工作表_将多个 Excel工作表合并到一个 Pandas 数据帧中
weixin_39949297的博客
11-18 202
今日是程序员节，祝广大程序员们工作开心吧！虽然小编觉得跟日常没什么区别，也没看到有程序员小哥哥们放假或者不加班，那么今日就分享一个实用的日常小技巧希望对大家的工作有帮助让工作更轻松。简介最常用的 pandas 函数之一是 read_excel。本文展示了如何读入一个 Excel 工作簿中的所有选项卡，并使用一条命令将它们合并到一个 pandas 数据帧中。对于那些太长不想读的人来说，以下是该命令:...
jQuery操作table tr td
weixin_33756418的博客
07-11 200
1.鼠标移动行变色 $("#tab tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children("td").removeClass("hover") }); 方法二： $("#tab tr:gt(0)").hover(function(...
10.22 学习总结.docx
11-24
10.22 学习总结.docx
MySQL练习10.22
10-22
MySQL练习10.22
Vuforia工具10.22.zip.002
最新发布
05-09
Vuforia工具（10.22）文件使用360压缩分割成两个压缩包，必须一起下载使用: part1：https://download.csdn.net/download/weixin_43800734/89284308 part2：...
Gobang 10.22.zip
10-27
C# Winform
最新版windows node-v10.22.0-x64.zip
07-23
最新版windows node-v10.22.0-x64.zip
html如何让tr自动换行,js和css如何让table自动换行但是不是超出td？
weixin_42361733的博客
06-01 562
您好,请您试试下面的方法{CSS设定} /*自动换行，IE,Chrome通用，FireFox连续英文不换行(遇空格换一行)*/。AutoNewline_break{word-wrap:break-word; word-break:break-all; }。AutoNewline_normal{word-wrap:break-word; word-break:normal; } /*强制不换行，IE...
网页开发中如何获取tabel中tr下的第一个td？
S_Chen
12-20 6768
近期开始编写web前端代码，发现在用tabel布局中，时常需要将table中tr下的第一个td，设置成与其他td不同的样式。如何设置呢？ 请看代码：            TD #0TD #1TD #2     TD #3TD #4TD #5     TD #6TD #7TD #8     TD #9TD #7TD #8     TD #6TD #7TD #8     T
tr或者td里没有id，如何取固定的某一tr或者td？
longqiyuye925的博客
06-27 2211
tr或者td里没有id，如何取固定的某一tr或者td？ function get(){ txt=$("table").find("tr:eq(1)").find('td:eq(1)').text(); alert("txt"); }
鼠标拖拽表格table的tr上下移动
sdiudui的博客
04-12 4760
小伙伴们肯定在某个项目里遇到要拖拽table表格的tr或者td那么下面就来讲一下，话不多说直接上代码1，引用插件&lt;script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;这两个是主要插件百度自行下载去吧，要放在jquery.min.js下面哦&lt;link rel="styleshee...
58种网页常用小技巧(javascript)
yyd841122的专栏
02-23 2435
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. IE地址栏前换成自己的图标6. 可以
SSH中后台传到前台一个信息集合，tr td中怎么进行排列，类似在一个div里排列书籍...
weixin_33924220的博客
01-23 103
　　总觉得描述问题不对，这里详细说一下，就是把下面图片变成排列整齐，一行四个，多出来的两个排到下一行。 　　我问过群里的，给的答案都有些简介：1：后台排好了，前台循环出来； 　　　　　　　　　　　　　　　　　　　2：前台直接循环，多出来的加</tr><tr>； 　　第一种方法给我了一个方向，然后第二种方法感觉很简单，想了一下，先if判断是否整除，一个tr加四...
jq中关于在table表中如何通过td取同tr中另一个td的内容
热门推荐
xiaoye23333的博客
08-17 1万+
在开发过程中，我们经常会遇到表格，今天我说下我踩过的坑，项目中有个需求需要对表格进行编辑，删除功能，类似如下 附上HTML代码： 我的需求是取点击编辑，取得是name=“model”这个td的内容，之前我的做法直接将此td加个ID=model，然后使用 document.getElementById(“model”)。innerHTML的方法取值，发现无论点击表格哪行的编辑栏，发现打...
获取表格里面的tr 的第二个td
weixin_34239169的博客
11-09 2448
原生的js（javaScript）一般较复杂。 所以我们应尽量采用jQuery，因为几乎所有的项目中都引入了jQuery的资源的。 ======如何在前台JS判断传的参数是否为空==== 1 2 3 4 5 functiontest(){ if(id!=0&&!id){ alert('i...
javascript 55种小技巧
It's my life
07-21 9224
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. IE地址栏前换成自己的图标6. 可以在收
数字图像处理第二版课后习题10.22
06-07
题目描述：一张灰度图像中目标的边缘有两条，分别为A和B，边缘A上的点对应的法向量为NA，边缘B上的点对应的法向量为NB。试写出一种方法，用于估计这两条边缘的夹角。 解题思路：由于边缘A和边缘B都可以看做是一组点的集合，因此我们可以先计算出这两条边缘的法向量，然后再计算它们之间的夹角。 具体地，对于边缘A上的每个点p，可以计算出它的法向量NA(p)，然后将所有的法向量取平均值，得到边缘A的平均法向量NA_avg。同理，对于边缘B上的每个点q，可以计算出它的法向量NB(q)，然后将所有的法向量取平均值，得到边缘B的平均法向量NB_avg。最后，边缘A和边缘B的夹角θ可以通过计算它们的平均法向量之间的夹角得到，即： cosθ = dot(NB_avg, NA_avg) / (||NA_avg|| * ||NB_avg||) 其中，dot(NB_avg, NA_avg)表示两个向量的点积，||NA_avg||和||NB_avg||表示两个向量的模长。 代码实现如下： ```python import numpy as np # 计算向量的模长 def norm(x): return np.sqrt(np.sum(x**2)) # 计算向量的夹角 def angle_between(u, v): cos_theta = np.dot(u, v) / (norm(u) * norm(v)) return np.arccos(cos_theta) # 计算边缘的平均法向量 def average_normal(points, normals): sum_normal = np.zeros_like(normals[0]) for i in range(len(points)): sum_normal += normals[i] avg_normal = sum_normal / len(points) return avg_normal # 边缘A的点集和法向量集合 points_A = [[10, 10], [20, 20], [30, 30]] normals_A = [[-1, 1], [-1, 1], [-1, 1]] # 边缘B的点集和法向量集合 points_B = [[10, 30], [20, 20], [30, 10]] normals_B = [[-1, -1], [-1, -1], [-1, -1]] # 计算边缘A和边缘B的平均法向量 NA_avg = average_normal(points_A, normals_A) NB_avg = average_normal(points_B, normals_B) # 计算边缘A和边缘B的夹角 theta = angle_between(NA_avg, NB_avg) print("边缘A和边缘B的夹角为：", np.degrees(theta)) ``` 上述代码中，points_A和points_B分别表示边缘A和边缘B上的点集，normals_A和normals_B分别表示边缘A和边缘B上的法向量集合，NA_avg和NB_avg分别表示边缘A和边缘B的平均法向量，theta表示边缘A和边缘B的夹角。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值