JavaEE

网络原理——No.4 传输层_TCP协议中的延迟应答, 捎带应答, 面向字节流与TCP的异常处理

网络原理——网络层与数据链路层

目录

• 网站
• HTML
• • 认识 HTML 标签
  • HTML 常见标签
  • • 注释标签
    • 标题标签
    • 段落标签
    • 换行标签
    • 格式化标签
    • 图片标签
    • 超链接标签
    • 表格标签
    • 列表标签
    • 表单标签
    • • form 标签
      • input 标签
      • select 标签
      • textarea 标签
    • 无语义标签: div & span

网站

网站 = 前端(网页) + 后端(服务器)

• 前端: 展示给用户来看

  HTML: 描述页面结构

  CSS: 描述页面的样式(大小, 位置, 颜色, 背景…)

  JavaScript: 描述的页面的动态交互

• 后端: 存储数据/ 组织业务逻辑

HTML

HTML 是一个标签化 的语言(非常类似于 XML)

# 我们现在创建一个 hello.html 文件

# 我们使用记事本打开, 输入 “hello world”.

# 这时, 我们双击这个 hello.html 文件.

html 这样的代码是通过浏览器来运行的, 只需要用浏览器打开对应的 html 文件就可以执行其中的代码, 不需要安装额外的运行环境.

html 不需要编译, 浏览器读取之后就能执行.

# 注意 #

上述代码并不是严格符合 HTML 语法的, 但是 HTML 不像别的语言那样, 即使语法中存在一些问题, 浏览器也会尽可能的执行. (浏览器的 鲁棒性)

更科学的写法

认识 HTML 标签

1. html 是由一些标签构成的

2. 标签名 (body) 放到 < > 中

3. 每个标签都有开始标签和结束标签, 也有部分标签只有开始标签, 没有结束标签 (单标签)

4. 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

5. 标签之间可以嵌套,

   html 是 head 和 body 的父标签

   head 和 body 就是 html 的子标签

   html 的标签(tag), 也可以称为元素

编写 html 也有很多的现成的开发工具

1. IDEA

2. VSCode (小而美, 一个编辑器)

   可以在 VSCode 上安装一些额外的扩展(插件), 通过这些插件就可以支持更多的功能.

   • VSCode 目前是最主流的开发工具之一

   • VSCode 严重动摇了 JB 的统治地位

     IDEA, Clion, GoLand, PyCharm, WebStorm

   • VScode 更厉害的是, 自身是基于前端的技术栈来开发的. 可以把 VSCode 嵌入到网页中, (打开浏览器, 打开个网页, 就可以写代码)

HTML 常见标签

VSCode 快捷键

在 VSCode 上新建一个 hello.html. 按键盘 shift+!+TAB , 快捷生成 html 初始模板.

# 注意 #

html 标签是可以在 开始标签 (第2行) 中写一些属性的(键值对), 使用 空格来分割键值对, 使用 = 来分割键和值 (注意, 这里= 两侧不能有空格).

title 标签中的是 html 的标题

将其更改后, 双击打开 hello.html, 我们可以发现, 页面的标题变成了 Gujiu.

注释标签

并不会参与运行只是起到一个提示的作用

我们刷新一下界面, 我们可以发现 “我是注释” 这四个字并没有出现在页面上.

我们也可以在页面中, 右键 -> 查看网页源代码, 查看源代码中是否有这行注释.

快捷方式

ctrl + / 快速生成注释, 快速取消注释.

标题标签

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

数字越小, 越大越粗

数字越大, 越小越细

段落标签

这是一个段落

• 每一个段落独占一行
• 段落和段落之间有明显的段落间距

换行标签

• html 对于 制表符. 换行符, 连续多个空格, 都不会当成是代码内容. (会自动给这些东西忽略)
• 在 html 里面直接进行换行是没有作用的, 必须使用 br 标签来换行
• br 标签是一个单标签, 只有开始时标签, 没有结束标签

格式化标签

加粗
加粗倾斜
倾斜删除线
删除线下划线
下划线

# 注意 #

• 独占一行的标签, 也叫做 “块级元素”(如 h1, h2…标签)
• 不独占一行的标签, 也叫做 “行内原色”(如 strong, b, em…标签)
• 这里的块级/ 行内可以转换

图片标签

• img 单标签
• img 必须要有一个 src 属性, 通过这个属性来指定要显示的图片路径

src 中的图片路径:

• 绝对路径
• 相对路径 (基准目录就是 当前 html 所在的目录)
• 网络路径

绝对路径

在此路径下有一张图片

使用 width 和 height 调整图片大小

px 就是像素, 是屏幕上最基本的单位. 屏幕有很多非常小的光点, 每个光点都是能显示出一种颜色 (自由变换)

相对路径

当前文件夹下有一个 hh.jpg 文件

网络路径

我们在网上搜索一张图片, 之后右键, 复制图像连接

如果我们图片连接有误, 就会显示 alt 中的文字

超链接标签

• 链接(Link) : 快捷方式, 通过链接就可以找到另一个资源

点我进入链接

超链接还可以链接自己的内部网页

比如： 我们新建一个 hello2.html

可以给图片等任何元素添加链接

表格标签

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

姓名
电话
小Gujiu
555
大GUJIU
999

页面展示, 我们发现这里没有边框, 有点小丑.

# 我们给 table 变好看一点, 在 table 标签中添加一些属性

 
width: 表格宽
height: 表格高
border: 表格边框
 
页面展示
# 我们想要文字居中, 这时就要使用 CSS 了

姓名
电话
小Gujiu
555
大GUJIU
999

有序列表
无序列表

男
女

复选框

吃饭喝奶茶睡大觉其他

吃饭喝奶茶睡大觉其他