JavaWeb中HTML的知识总结

pyx&

303人浏览 · 2026-05-05 18:43:24

pyx& · 2026-05-05 18:43:24 发布

<html>
<head>
<title>HTML快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="img/023b5bb5c9ea15ce36d361053d492df33a87e950142f.jpg">
</body>
</html>

这是html的一个基本结构

输入！+enter会自动生成一段结构

为下一段的解释内容

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

知识点：

a 超链接标签：

href：链接地址 - ur1地址

target：打开方式

_blank:新窗口打开

_self:本窗口打开（默认）

CSS样式颜色控制

1.在直接定义一处

2，在head处定义所有span

3，设置一个css外部文件定义

颜色的描述形式

十六进制表示0-255 因为16*16 = 256

前两个表示红色取值，中间两个表示绿色取值，最后两个表示黄色取值

color: rgb(128, 128, 128);

color：rgba(255,120,0,0.5); 最后一个是透明度

十六进制表示 color: #0000ff;

截图自带的调色器，用来识别网站的三元色或者是十六进制颜色

多个span元素，要分别设置css样式

用css选择器来选取设置这样的元素

cls 类选择器，只能选择第一个元素

id选择器，span里面加了一个time的id

id="time"

#time{

color:#0000ff;

}

去除超链接下面的下划线

清晰描绘需求，让ai解决

正文排版

视频播放器video标签属性 src:视频地址 controls：显示播放控件

width：视频宽度 height：视频高度

单位： px:像素点 %：百分比（相对于父元素的百分比）body区间，body下面还有div的话，变成div区间

音频播放器audio

换行标签<br>

段落标签<p>

src图片访问地址一.绝对路径

1.1绝对磁盘路径：打开文件所在位置，属性->安全 //不推荐

1.2绝对网络路径：从网络上访问

二.相对路径

2.1 ./：当前目录，如：./img/1.git

2.2 ../: 上一级目录

加粗+首行缩进两个字符

<b>，<strong> 加粗展示

css控制行高 line-height:2; // 2倍行高

手动首行缩进 &nbsp；

用css样式首行缩进 test-indent: 2em; //首行缩进两个字符

直接输> , < 会被识别成标签

div容器元素，确保html结构所有内容放置在容器内

盒子模型

为什么要四个？因为包含上右下左四个方向

border solid 代表的是线条的类型

页面原型：指在应用程序开发初期，由产品经理制作的一个早期项目模型，它用于抢占式项目的基本布局，功能和交互设计。

一.顶部导航栏

你是一名前端开发工程师，现需要制作HTML页面，页面一共分为4个部分，先实现第一个部分 - 顶部导航栏。具体的需求如下： 1.内容：要展示一个醒目的标题（加大加粗展示）的标题，标题的内容：Tlias智能学习辅助；还要展示以一个“退出登陆”的超链接
2.布局：标题和退出登陆的超链接，展示在一行里面，标题居左显示。退出的超链接居右显示。
3.给整个导航栏，设置一个灰色的背景色。
请帮我生成整个HTML页面 //把ai当人，写出标准的提示词

引出flex弹性布局

flex要么行要么列，下面为实例

搜索表单区域

表单标签<form> 表单项 <Input>: 定义表单项，通过type属性控制输入形式（text/password/.....)

<select>: 定义下拉列表

<textarea>: 定义文本域

例子

表格数据展示区

表单标签-表单项

代码实现

搜索表单区域

用ai构造处框架，然后根据目标在search-from中微调

提示词：接下来，在帮我生成第二个部分-搜索表单区域，具体说明如下：
1，组成：包括三个表单项和两个操作按钮
1.1表单项具体为：姓名（文本输入框），性别（下拉选项，选项包括男/女，
默认为空），职位（下拉选择，选项包括班主任，讲师，学工主管，教研主管，咨询师，默认为空）。
1.2 两个按钮：“查询”与“清空”按钮，用于提交表单或重置表单项。
2，布局：所有表单项及按钮需水平排列于一行，确保美观大气。

表格数据展示区

标签table表示表格，form是用来展示表单

tr定义行的，一个tr就是定义一行

th来定义表头单元格，由加粗效果

td普通单元格

tbody定义表格的主题内容

快速定位某一处，ctrl+F

底部版权展示区域

关键词查找footer，借助ai并改造

课程总结 https://www.bilibili.com/video/BV1yGydYEE3H/p=16&share_source=copy_web&vd_source=c1f7f89b3645ed967ff0ce40c057370b