0
点赞
收藏
分享

微信扫一扫

图像分割 人脸分割CVPR2023笔记

小禹说财 2023-10-25 阅读 42

请添加图片描述

目 录

一. 标签

用 HTML 写一个 hello world 的程序

  1. 首先创建一个文本文档
    在这里插入图片描述
  2. 重命名文件名为 hello.html
    在这里插入图片描述
  3. 在记事本中打开并且输入以下内容
    在这里插入图片描述
  4. 用浏览器打开此文件
    在这里插入图片描述
  5. 一个 HTML 代码就写好了,但是并不规范,真正规范的代码应该是如下
    在这里插入图片描述
  6. 在浏览器中运行出来的结果就是
    在这里插入图片描述

哪为什么对于规范的写法来说,不规范的写法表现得也和标准的一样,没有啥区别?

把一个 html 文件视为是文档,文档里面有很多的 “标签” (tag),每个标签也可以称为是一个 “元素” (element),同时每个元素也对应到一个 “对象”(对象里面有属性,也有方法,这些对象都可以在 JS 中进行操作)

例如:

  • <head> 开始标签
  • </head> 结束标签

这两者之间,就是标签的内容,内容也可以是文本,也可以是一些其他的标签!

HTML 中大部分标签是成对出现的,但是也有少数标签,不成对(单身狗),单标签~

  • <html> 这是 html 文件的顶层标签(根节点)

  • <html> 需要有 <head> <body>

  • <head> 标签主要存放一些属性信息(元信息)

  • <body> 存放界面上要显示的内容

但是我们上面写代码是在笔记本上,并不好,不符合我们有那种编译器的能力,所以此处我推荐使用 vscode ,是极其方便的一款编译器。

我们在文件夹中创建一个 hello.html 文本文件,用 vscode 打开,每次编写代码之后出现如下情况有白点点,说明代码没保存,我们的代码要保存之后才可以运行!
在这里插入图片描述

HTML 文件不需要编译器来编译,是直接在浏览器上运行的,直接使用浏览器打开这个 html 即可

在 vscode 中有一些技巧可以提高编写效率

在这里插入图片描述

例如 一个感叹号加上 Tab 键 就可以生成如下的代码

在这里插入图片描述

  • <!DOCTYPE html> 描述了文件内容是啥类型 / 格式(html 后缀不是就描述了嘛~,其实不然,不够完全,如当前是表示的是 HTML5 这个版本,也是当前最主流最新的版本)
  • lang 表示的是 language,en 表示的是 english 。描述了这个网页的语言使用的是 “英语” ,可以触发浏览器的翻译功能
  • meta 表示 元 ,就是指 “属性数据”,是页面的属性,和展示内容无关。
  • charset 页面使用 UTF-8 编码

大部分 html 标签是成对出现的,开始标签 + 结束标签,有些是单身狗 “单标签”

在 html 的开始标签中可以写一些属性信息,键值对,键值对之间使用空格分割,键和值之间使用 = 分割


注释标签

在代码中加入注释之后就啥也没有了

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

那我们如何看它呢?使用浏览器的开发工具,可以更好地来分析清楚,页面的结构。

在网页 使用右键->检查或者直接F12就可以打开开发者工具!!!

在这里插入图片描述
当我们在代码中加入 hello world 的时候

在这里插入图片描述

最主要的是我们还可以在开发者工具中修改我们的代码

教给大家一个好玩的~,在浏览器中搜索我们的 ikun 哥哥,并且打开开发者工具

在这里插入图片描述

我们来对这些信息进行修改:我们对名字和介绍进行修改,名字改成 “bit me”,介绍改成 “学 Java 的小白一枚~”

先点击此处的开发者工具的箭头

在这里插入图片描述

再对左边介绍页面任意一处点击,它的对应开发者工具中的代码就会呈现在你面前,任由你修改~

在这里插入图片描述

此时我们修改为我们刚才要改的那种,如下呈现

在这里插入图片描述

在这里面甚至有一些 “彩蛋” 关于招聘的~,在我们的控制台中可以看到(链接在代码中)


标题标签:h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小.

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

这里生成几级标题代码快捷键就是 h几 加上 enter 或者 h几 加上 Tab键,注释快捷键是和 Java 一样 Ctrl 加上 / 。

段落标签: p

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

如上我们的段落不明显,为了看起来明显一点,我们使用长一点的文本,但是我们手动添加显得很笨,也有快捷键直接快速添加长段落,使用 lorem 就可以自动生成一串随机的长文本,对于排版测试很有帮助。但是我们要一段一段的添加长文本又太麻烦了,如何同时构造多个段落,同时构造一串随机的文本,采用的是 “列编辑” 模式,针对多个列同时进行编辑,按住 Alt 键加上鼠标左键点击你要添加的地方,每次点击就会多出一个光标,接下来的输入就在所有的光标的地方同时产生相同的输出。

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

两个 P 标签的内容不会出现在同一行,两个 P 标签之间,会有一定的段间距(此处的段落间距都是可以通过 CSS 来控制的)


换行标签: br

如果想在一个段落内部换行,直接使用 /n 或者 另起一行是行不通的,在 HTML 中要想让内容真正换行,需要使用 <br> 标签(单标签)


空格标签:nbsp;

六个字符共同构建了一个空格,这是 HTML 的转义字符的写法


格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签
  • 下划线: ins 标签 和 u 标签

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


图片标签: img

  • 在同级目录下

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

  • 图片保存到 image 文件夹中,此时图片是下一级路径,此时我们上述代码就运行出来图片就不能呈现在我们眼前了

在这里插入图片描述

这里要加上对应的目录名便又可以呈现出来,此处就是 “相对路径” 的写法。(相对路径涉及到 “工作目录”,当前的工作目录是啥,变数很大)(前面再加个 ./ 又是相同的)

  • 如果是存放到上一级路径,那就需要再重新写这个代码 ../hhh.jpg

  • image 的 src 也支持绝对路径 d:/hhh.jpg,虽然绝对路径也行,但是一般不建议,html 要能够在多个电脑上都能运行,如果是绝对路径的图片,发布给别人,别人的电脑不一定带有这个图片

image 更常见的写法,是使用网络途径(URL)

如下:我们随机搜索一张图片
在这里插入图片描述

把这个链接插入到我们的代码中

在这里插入图片描述

运行出来的结果就是

在这里插入图片描述

  • alt 的作用就是:如果图片正常加载,没啥效果;如果图片加载失败,这里的内容就会显示在图片位置上。

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

  • title 可以让图片有描述信息

在这里插入图片描述

在这里插入图片描述

  • width/height: 控制宽度高度

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

这里的单位是像素 px

HTML 虽然不难,但是很复杂,标签很多,那么如何查询某个HTML标签的一些具体用法?直接使用搜索引擎来搜索mdn img

在这里插入图片描述


超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.

链接的几种形式:

  • 外部链接: href 引用其他网站的地址
    在这里插入图片描述

此处代码写了一个搜狗的超链接,点击页面刷新即可看到如下:

在这里插入图片描述

此处链接点进去就可以跳转到搜狗的页面

在这里插入图片描述

a 标签中的 href 这个属性有很多种写法,可以写一个完整的网址,可以跳转到任意的网站。还可以只写一个 文件名 / 相对路径 ,则表示在当前网站内部跳转。还可以写成#,表示不进行任何跳转。还可以写成其他类型的文件(不一定是 html),这个时候会触发浏览器的 “下载" 功能!!!

怎么控制点击是打开一个新页面,而不是在当前页面跳转呢?

在这里插入图片描述

  • 内部链接: 网站内部页面之间的链接. 写相对路径即可.
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>

<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
  • 空链接: 使用 # 在 href 中占位.
  • 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)
  • 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

表格标签

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格得到主体区域.

在这里插入图片描述

在这里插入图片描述

但是如上表格制作不符合我们的审美,没有方格划线的这些,于是我们再进行相应的处理

加一个边框

在这里插入图片描述

在这里插入图片描述

但是此处仍然不是很好看,我们再进行相应的调整

在这里插入图片描述

在这里插入图片描述

如果我们不想要双层边框,那我们可以设置每个单元格之间的间距为 0,在条件后面添加一个cellspacing="0"

在这里插入图片描述

能否让表格中的文字居中对齐,纯 html 做不到,还需要搭配 CSS

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


列表标签

  • 无序列表[重要] ul li , .
  • 有序列表[用的不多] ol li
  • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

使用 li 标签表示一个"列表项"

在这里插入图片描述
在这里插入图片描述
注意

列表,尤其是无序列表,在开发的时候经常会用到(如下)

在这里插入图片描述


表单标签

在页面上填写信息并提交.这个操作就是通过表单标签来实现的,表单是让用户输入信息的重要途径.。

分成两个部分:

  • 表单域: 包含表单元素的区域. 重点是 form 标签.
  • 表单控件: 输入框, 提交按钮等. 重点是 input 标签

form 标签

form的功能是进行前后端交互,描述了提交给谁,如何提交等交互细节。

input 标签

input标签有很多种形态,这些形态就对应了不同的输入方式。

  1. 单行输入框
    在这里插入图片描述
    在这里插入图片描述

  2. 密码框
    在这里插入图片描述
    在这里插入图片描述

从此处我们可以展示一些小的技巧,例如登录某款软件,我们如果账号密码都在上面保存了,但是我们看不到密码是多少,于是乎我们可以通过开发者工具把 password 改为 text 就可以看到密码了(不一定每个场景都适用,有的经过加密可能看见的就是密文了)

  1. 单选框
    在这里插入图片描述
    在这里插入图片描述
    但是此处都可以选
    在这里插入图片描述
    作为一个单选框,这明显不符合逻辑,不应该能选择两个,如何让单选框排他
    在这里插入图片描述
    只要把 name 设成相同的值,此时就是"排他”的
    在这里插入图片描述
    由于圆圈比较小,可能点击不到,有点麻烦,于是做以下处理
    在这里插入图片描述
    使用 label,把文字和单选框绑定在一起了,媒介就是 id,效果就是点击文字也可以选择,而不仅仅只是圆圈

使用checked 属性,就可以做到,当页面加载的时候,就自动的选中一个选项
在这里插入图片描述

  1. 复选框
    在这里插入图片描述
    复选框里的选项是都可以选的
    在这里插入图片描述
    我们还可以默认设置勾选哪些选项
    在这里插入图片描述
    在这里插入图片描述

  2. 普通按钮
    在这里插入图片描述
    上述操作之后会得到一个按钮
    在这里插入图片描述
    添加对按钮的文本信息
    在这里插入图片描述
    在这里插入图片描述

  3. 提交按钮

  1. 文件选择器

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


select 标签

在这里插入图片描述
在这里插入图片描述
也可以像前面一样设置默认的选项
在这里插入图片描述
在这里插入图片描述


textarea 标签

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


无语义标签: div & span

在这里插入图片描述


二.综合案例

展示简历信息
在这里插入图片描述
在这里插入图片描述


填写简历信息

在这里插入图片描述

在这里插入图片描述

于是经过上述代码的描述 我们网站的简历页面也就做出来了

在这里插入图片描述

举报

相关推荐

0 条评论