JavaWeb中HTML的知识总结
<html>
<head>
<title>HTML快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="img/023b5bb5c9ea15ce36d361053d492df33a87e950142f.jpg">
</body>
</html>
这是html的一个基本结构
输入！+enter会自动生成一段结构
<!-- -->为下一段的解释内容
<!-- 申明文档的类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 设置网页在移动设备上的显示宽度及缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML</h1>
<img src="img/1.jpg">
</body>
</html>
知识点：
a 超链接标签：
href：链接地址 - ur1地址
target： 打开方式
_blank:新窗口打开
_self:本窗口打开（默认）
CSS样式 颜色控制
1.在直接定义一处
2，在head处定义所有span
3，设置一个css外部文件定义
<link rel="stylesheet" href="news.css"> stylesheet引入的是一个层叠样式表，href指定css的ur地址，哪个是你要配的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倍行高
手动首行缩进  ；
用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
更多推荐
10
0- 0
已为社区贡献4条内容
所有评论(0)