我的web之旅--day02

关注

原创最新推荐文章于 2025-05-27 09:37:13 发布 245 阅读 AI 写同款· GEO 优化 ›

印度国内航班延误分析预测数据集本数据集提供2023年1月至2025年12月印度航班飞行记录，结构化为机器学习模型输入格式，适用于预测分析和航空性能研究。主要航空公司包括IndiGo（约40%）和印度航空（约18%），路由信息覆盖德里（DEL）和孟买（BOM）等高流量枢纽。包含航班日期、月份、星期、计划出发时间和分钟数等粒度时间数据，以及是否周末等工程特征。使用场景：训练机器学习算法预测航班延误、比较航空公司准点绩效趋势和延误频率、分析主要枢纽高峰出行时间和瓶颈路线以优化出行规划。立即下载

1、textarea：多行文本域
<textarea></textarea>
cols：列，一行多少字符
rows：行，初始化时能显示的行数
name：控件名称，一般给服务器用

2、select，option元素
(1)选项框：下拉选择框、滚动列表
(2)语法：<select>
<option></option>
</select>
1）select属性：
name：名称
size：大于1，则为滚动列表
multiple：多选，不需要给值
2）option属性：
value：值
selected：选中

3、按钮
(1)提交按钮
<input type="submit">
(2)重置按钮
<input type="reset">
(3)普通按钮
<input type="button">

4、摘要与细节
--用于展开和收缩网页内容
标签：
<details>
<summary></summary>
<div></div>
</details>

5、度量元素
--用于在页面中定义一个度量衡
(1)标签：<meter></meter>
(2)属性：
1）min：范围的最小值，默认为0
2）max：范围的最大值，默认为1
3）value：值

6、高亮文本显示
--在标识出来的文本上，以突出的背景颜色来显示
标签：<mark></mark>

！注：所有表单控件都必须设置name属性
除了单选按钮和复选框外，其它的name属性都不能重复
除了文本框密码框和多行文本域之外，其它在创建时就必须写上value属性

****************************************************************************************************************************************************

CSS --层叠样式表
1、作用
(1)定义页面中元素的样式
(2)实现内容与表现的分离
(3)实现代码的可重用性和可维护性
2、使用css样式表
(1)使用css样式表的方式
1）内联模式（内行模式）
i）实现：将样式表定义在html元素style属性中
ii）语法：<p style="color:red; background-color:blue"></p>
iiv）常用属性：color：文本颜色
background-color：背景颜色
font-size：字体大小，取值，单位为px
2）内部样式表
i）实现：将样式定义在html文档的头部<style></style>
ii）用法：在head中增加一对<style></style>，然后再<style>元素中增加很多“样式规则”
iiv）样式规则：由选择器和样式声明来组成
选择器：规范了页面中哪些元素使用声明好的样式
如：标签选择器，由标签名作为选择器，
完整语法结构
选择器{
color:red;
background-color:blue;
}
2）外部样式表
i）实现：将样式定义在外部的css文件中，在页面对css文件进行引入
ii）用法：
创建css文件(.css)，随后在页面引入css文件，即<link rel="stylesheet" href="引入文件url"/>，最后在head中进行引入

*webStorm快捷键：ctrl+d 删除当前行 ctrl+alt+上箭头

3、css语法
(1)css样式特征
1）继承性
--大部分的属性可以被继承
2）层叠性
--为一个元素设置多个样式规则
3）优先级
--样式冲突时，会按照不同样式的优先级来应用样式
内联样式优先级最高
内部样式表与外部样式表优先级相同。谁离得近用谁的样式
(2)css基础选择器
--匹配页面中的元素
1）通用选择器：匹配页面中所有元素
语法：*{
margin: 0;
}
2）元素选择器：用元素名称作为选择器
p{}
div{}
span{}
3）类选择器：通过元素所附带的class属性值，对类选择器进行引用
语法： .类选择器名称{}
注意：名称不能以数字开头
可以将多个类选择器应用在同一个元素中
4）id选择器：通过元素所附带的id属性值，对样式进行声明定义
语法：#id值{}
注意：不能以数字开头，页面中的id名称不允许重复
5）群组选择器：为了定义一组选择器的公共样式
语法：sel1,sel2,sel3{}
eg.p,div,span{
font-size:20px;
}
6）后代选择器：多于一级以及一级的层级关系
语法：sel1 sel2{}
7）子代选择器：缩小匹配范围
语法：sel1>sel2{}
eg.div>span{}
注：>表示子代关系
8）伪类选择器：匹配元素的不同状态
语法：
:伪类选择器{}
分类：
链接伪类：匹配超链接元素
：link 适用于尚未访问的超链接样式
：visited适用于访问过的超链接样式
动态伪类：
：hover 适用于鼠标悬停在元素上时的状态
：active 适用于元素被点击时的状态
：focus 适用于元素获取焦点时的样式

4、选择器优先级 --权值
元素选择器 1
类选择器 10
伪类选择器 10
id选择器 100
内联样式 1000
选择器的权值加到一起，大的优先
如果权值相同，以后定义为主

边界属性：
border-bottom: 1px solid green;
border-left: dotted;
border-left-color: blue;

margin（外边距）用法：
margin:value; 20px;
margin:v1 v2; 上下左右
margin:v1 v2 v3;上左右下
margin:v1 v2 v3 v4;上下左右
margin:0 auto;水平居中
margin-top/bottom/left/right
如果两个垂直方向的margin相遇，以大的为主

收录于