DAY04 HTMLCSS
文章目录
- 一 表单
- (1) 数字控件
- (2) 颜色控件
- (3) 日期控件
- (4) 月份控件
- (5) 星期控件
- (6) 搜索控件
- (7) 范围控件
- 二 浮动框架
- 三 结构化标签
- 四 CSS
- 1 CSS概述
- 2 CSS的编写位置
- 1. inline style 行内样式
- 2. inner style 内部样式
- 3. outer style 外部样式
- 4. 小结
- 3 CSS选择器
- 1. 通用选择器
- 2. 标签选择器
- 3. id选择器
- 4. 类选择器
- 5. 群组选择器
- 6. 伪类选择器
- 7. 并列选择器
- 8. 后代(包含)选择器
- 五 作业
- 六 拓展
一 表单
input新表单元素
(1) 数字控件
<input type="number" step="7" min="10" max="30"/>
属性:
min
: 最小值
max
: 最大值
step
: 步长,值每次递增或递减的大小,默认的步长为1
注意
:此控件无法阻止用户自行输入数据
(2) 颜色控件
<input type="color"/>
提供了一个取色器,默认的颜色是黑色
(3) 日期控件
<input type="date"/>
只出现日期的(年月日)的选择,后续还可以使用更加美观的日期插件
(4) 月份控件
<input type="month"/>
只出现年月的选择
(5) 星期控件
<input type="week"/>
只出现年周的选择
(6) 搜索控件
<input type="search"/>
提供了一个快速删除所有输入数据的小叉叉
(7) 范围控件
<input type="range" min="0" max="20" step="2"/>
属性:
min
: 最小值,表示区间的最开始的值
max
: 最大值,表示区间的最末尾的值
step
: 步长,表示数字移动的范围跨度
作用
: 可以控制区间,比如:音量 地图缩放 进度
注意
:设置步长的时候尽量选取可以除得尽的值,否则区间中会有部分值无法选中
二 浮动框架
iframe 是指在一个html页面中,引入其它的html页面
属性:
src="被引入的资源的url "
width="设置被引入资源在本页面的宽度"
height="设置被引入资源在本页面的高度"
scrolling="no" 是否需要拖拽条,no表示不要
frameborder="0" 去掉被引入资源的边框线
优劣势:
- 我们可以直接引用已经写好的页面,比较方便
- 一个页面可以被多个页面使用,复用性高
- 样式不好控制
- 有额外的链接,请求的次数会增加,速度会变慢
三 结构化标签
h5新增了带有结构语义的标签,来取代div.
虽然在用户看来和之前使用div没有区别,但带语义的标签可以增加代码的可读性,而且方便实现页面各个部分的划分,让网络爬虫更快找到.
但注意:低版本的浏览器可能会出现不兼容的问题.
<header></header>
定义网页的头部,或者某个区域的顶部
<nav><nav/>
定义网页的导航区域
<section></section>
定义网页的主体区域
<aside></aside>
定义网页的侧边栏
<article><article>
定义与文字相关的内容,比如论坛、回帖
<footer></footer>
定义网页的尾部,或者某个区域的底部
四 CSS
1 CSS概述
CSS
:Cascading Style Sheet 级联样式表
样式: 元素的背景 大小 位置 边框 阴影…
1995年诞生,目前学习的是CSS3
HTML负责页面内容 CSS负责页面的样式
也就是说,我们用CSS修饰HTML的内容
2 CSS的编写位置
1. inline style 行内样式
<标签名 style=“color:red;”
></标签名>
color指的是属性名 red指的是属性值
行内样式只能渲染当前元素,不能与其他元素共享
因为是单独渲染该标签,所以优先级非常高,但不利于修改,复用性很差
2. inner style 内部样式
在html文件的head标签中,添加style标签,在style标签中写CSS样式
内部样式可以供当前页面中多个元素共享,但不能给其他页面的元素共享
3. outer style 外部样式
把样式声明在一个独立的.css文件中,需要此样式的HTML页面在自己的head标签中,添加link标签,引入该CSS样式即可
<link rel="stylesheet" href="01.css">
rel
:表示引入的文件时什么类型 必写属性 stylesheet样式表
href
:表示被引入的CSS文件的路径
4. 小结
CSS的基础语法
属性名:属性值;
属性名:值1 值2 值n…;
编写CSS的三种方式:
1.行内样式inline style:给指定的某一个元素加样式
2.内部样式inner style:写在style标签中,整个页面都生效
3.外部样式outer style: 写在独立的CSS文件中,谁引入,谁生效
生效范围:
行内样式<
内部样式<
外部样式
样式优先级:
行内样式>
(内部样式=外部样式)>
浏览器的专有样式
3 CSS选择器
CSS选择器用在内部或外部样式中,告诉浏览器这些样式要渲染在哪些HTML元素上
1. 通用选择器
*
表示所有
表示当前页面上所有的标签都应用该样式
因为选中的是所有的元素,所以优先级非常低,性能低
2. 标签选择器
选中某类特定的HTML标签,选择器的名字就是标签名
优点
:快速为当前页面中同种类型的标签统一样式
缺点
:选择太广泛,不能设计差异化样式
3. id选择器
选中页面上唯一一个元素,注意
:id值与#之间不能有空格!
要先在标签中加id属性,再让CSS选中
优点:能够非常直观的找到该元素,优先级非常高
但是推荐少用,因为习惯上id值经常用于绑定JS代码,较少用于样式
4. 类选择器
选中某一类指定的元素,这个类名是可以自定义的
一个class属性的值,可以写多个,值与值之间使用空格隔开
注意
:使用选择器时(.)与class值之间不能有空格!
5. 群组选择器
一次使用多个选择器选中多个元素,选择器间使用逗号分隔
注意
:群组选择器不限制选择器必须是同一类型的,可以在一个群组选择器中使用多种不同类型的选择器
6. 伪类选择器
“假的类”——注意伪类选择器的类名是固定的,不能自定义,表示选中某个时刻/状态
:hover{ }
选中"鼠标悬停在元素上方时"的状态
:active{ }
选中"元素被激活时"的状态(鼠标按住元素不松开)
:link{ }
选中"超链接未被访问过"的状态
:visited{ }
选中"超链接已经被访问过"的状态
注意
:a标签的伪类有优先级:link visited hover active
如果想要看到四个状态的效果,必须按照此指定顺序来写
超链接自己是有默认样式的,未被访问过是蓝色的,激活是红色的,访问过后是紫色的
:focus{ }
选中"输入框获得焦点时"的状态
7. 并列选择器
选中可以同时被多个选择器选中的元素
注意
:多个选择器之间不能有空格,必须紧挨着写!
8. 后代(包含)选择器
这部分在第五天的 DAY05 CSS中。
五 作业
- 思考并实验:
相同选择器,不同的样式,会如何渲染?
相同选择器,相同的样式,会如何渲染?
id选择器 标签名选择器 class选择器 通用选择器 优先级如何排列? - 写一个用户名输入框,提示文字"请验证自己的用户名是否正确"
样式要求:提示文字的默认颜色为透明色transparent,当输入框获得焦点时,将输入框的背景颜色改为黄色,提示文字字体颜色改为红色 - 仿写学子商城首页导航条的效果,实现效果:
默认颜色#ccc 悬停颜色#B8B8B8 访问过后颜色#ccc
激活颜色 #0aa1ed
六 拓展
多媒体标签
属性
src 是指被引入资源的路径
controls 用于添加音视频的控制组件
相关文章:
DAY04 HTMLCSS
文章目录 一 表单(1) 数字控件(2) 颜色控件(3) 日期控件(4) 月份控件(5) 星期控件(6) 搜索控件(7) 范围控件 二 浮动框架三 结构化标签四 CSS1 CSS概述2 CSS的编写位置1. inline style 行内样式2. inner style 内部样式3. outer style 外部样式4. 小结 3 CSS选择器1. 通用选择器…...
Linux_理解程序地址空间和页表
目录 1、进程地址空间示意图 2、验证进程地址空间的结构 3、验证进程地址空间是虚拟地址 4、页表-虚拟地址与物理地址 5、什么是进程地址空间 6、进程地址空间和页表的存在意义 6.1 原因一(效率性) 6.2 原因二(安全性) …...
NAND闪存市场彻底复苏
在全球内存市场逐渐走出阴霾、迎来复苏曙光之际,日本存储巨头铠侠(Kioxia)凭借敏锐的市场洞察力和及时的战略调整,成功实现了从生产紧缩到全面复苏的华丽转身。这一转变不仅彰显了企业在逆境中的生存智慧,也为全球半导…...
过拟合与正则化
Location Beijing 过拟合 对于一个模型 A A A,解向量空间为 θ \theta θ,误差函数用式1表示 J ( θ ) J a c c [ y θ ( x ) − y ] 2 (1) J(\theta)J_{acc}[y_\theta(x)-y]^2\tag{1} J(θ)Jacc[yθ(x)−y]2(1) 首先我们考虑用模型 A A A拟合下…...
VMware挂载NAS存储异常处理
问题概述 由于非法关机或恢复,NFS存储可能会出现以下问题: 数据存储处于挂起状态或无法正常识别。虚拟机的配置文件或虚拟磁盘仍然注册在异常数据存储上。系统误认为有虚拟机在使用该数据存储。 问题对策 下面是详细的排查步骤和解决对策:…...
Redis 7.x 系列【4】命令手册
有道无术,术尚可求,有术无道,止于术。 本系列Redis 版本 7.2.5 源码地址:https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 说明2. 命令手册2.1 Generic2.2 数据类型2.2.1 String2.2.2 Hash2.2.3 List2.2.4 S…...
走进Elasticsearch
什么是ES 是一个分布式、RESTful风格的搜索和数据分析引擎 中文参考文档: 《Elasticsearch中文文档》 | Elasticsearch 技术论坛 elasticSearch官网: Functions and Operators | Elasticsearch Guide [7.11] | Elastic查询方式 Kibana查询(原…...
QT TCP服务器和客户端示例程序
下面是一个简单的 Qt TCP 服务器和客户端示例,演示了如何使用 vSetDriver、vSetListener 和 vTcpServerStart 函数。假设 vSetDriver 和 vSetListener 是你定义的自定义函数。 TCP 服务器部分 tcpserver.h #ifndef TCPSERVER_H #define TCPSERVER_H#include <QT…...
Xlua三方库Android编译出错解决办法
Xlua三方库Android编译出错解决办法 最近听老师的热更教程,讲到xlua编译android平台会报错,也是看了老师的博客,按照方法去解决,然而问题并没有解决。应该是因为代码更新或者版本不一样,在此简单记录一下解决过程。 参…...
美国犹他州立大学《Nature Geoscience》(IF=18)!揭示草本植物对土壤有机碳的重要贡献!
随着全球变暖的影响越来越显著,碳固定成为了一个备受关注的话题。在这个背景下,热带草原被认为是一个潜在的碳固定区域。然而,目前的研究主要关注于在热带草原中种植树木,以期望增加土壤有机碳含量。但是,热带草原中的…...
高考专业抉择计算机专业热度不减,兴趣、实力与挑战并存。
作为一名即将步入大学校门的高考生,我对于计算机相关专业是否仍是热门选择感到困惑。在过去几年里,计算机科学与技术、人工智能、网络安全、软件工程等专业一直备受追捧,吸引了无数学生。然而,随着市场竞争加剧和市场饱和度提高&a…...
Flask-RQ
Flask-RQ库教程 Flask-RQ 是一个用于在 Flask 应用中集成 RQ(Redis Queue)的扩展。RQ 是一个简单的 Python 库,用于将任务排入 Redis 队列并异步执行这些任务。这对于处理长时间运行的任务(如发送电子邮件、生成报告等࿰…...
LeetCode 58. 最后一个单词的长度
LeetCode 58. 最后一个单词的长度 你一个字符串 s,由若干单词组成,单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串 示例 1: 输入:s “Hello World”…...
3阶段提交协议(3pc)
3阶段提交协议(3pc) 1 简介 三阶段提交协议是一个强一致、中心化的原子提交协议。解决了分布式事务、副本容错等分布式问题。其核心思想是将2PC的二阶段提交协议的“准备阶段”一分为二,形成了由CanCommit、PreCommit、DoCommit三个阶段组成…...
802.11中的各种帧
在无线网络中,802.11协议定义了三种类型的帧:管理帧(Management Frames)、控制帧(Control Frames)和数据帧(Data Frames)。每种类型的帧都有其特定的功能,帮助维护和管理…...
SAP PP学习笔记21 - 计划策略的Customize:策略组 > 策略 > 需求类型 > 需求类(消费区分,计划区分)
上面几章讲了MTS,MTO,ATO的计划策略。 本章来讲一下它的后台 Customize。 1,Customizeing:Planned Indep.Reqmts Management 这是配置计划策略的整个过程: - Requirements Type / Class 需求类型 / 需求类 - Plann…...
axure9设置组件自适应浏览器大小
问题:预览时不展示下方的滚动条 方法一:转化为动态面板 1.在页面上创建一个矩形 2.右键-转化为动态面板 3.双击进入动态面板设置 4.设置动态面板矩形的颜色 5.删除原来的矩形 6.关闭动态面板,点击预览 7.此时可以发现底部没有滚动条了 方法…...
示例:WPF中TreeView自定义TreeNode泛型绑定对象来实现级联勾选
一、目的:在绑定TreeView的功能中经常会遇到需要在树节点前增加勾选CheckBox框,勾选本节点的同时也要同步显示父节点和子节点状态 二、实现 三、环境 VS2022 四、示例 定义如下节点类 public partial class TreeNodeBase<T> : SelectBindable<…...
C++ explicit关键字的用法
在C中,explicit关键字用于构造函数和转换运算符,以防止隐式转换。它可以帮助我们避免意外的类型转换,从而提高代码的安全性和可读性。explicit关键字只能用于单参数构造函数和转换运算符。 使用explicit的场景 单参数构造函数: 当…...
51.Python-web框架-Django开始第一个应用的增删改查
目录 1.概述 2.创建应用 创建app01 在settings.py里引用app01 3.定义模型 在app01\models.py里创建模型 数据库迁移 4.创建视图 引用头 部门列表视图 部门添加视图 部门编辑视图 部门删除视图 5.创建Template 在app01下创建目录templates 部门列表模板depart.ht…...
Redis之线程IO模型
引言 Redis是个单线程程序!这点必须铭记。除了Redis之外,Node.js也是单线程,Nginx也是单线程,但是他们都是服务器高性能的典范。 Redis单线程为什么能够这么快! 因为他所有的数据都在内存中,所有的运算都…...
针对微电网中可时移,柔性,基础负荷的电价响应模型---代码解析
前言: 在上两篇帖子中,讲解了我对于粒子群算法的理解,站在巨人的肩膀上去回望:科研前辈们确实非常牛逼,所以它才成为了非常经典的算法。这篇帖子主要是想分享一下,对于微电网、电力系统的论文中,…...
git使用http协议时免密pull和push方法
1、创建文件 在项目目录下创建.git-credentials文件,内容如下,填入自己的用户名和密码即可,如果是gitlab,把地址换成自己的gitlab的地址即可。 https://{用户名}:{密码}github.com2、终端执行 git config --global credential.…...
编译期间生成代码(Lombok原理)
通过在编译期间,修改Java的AST(Abstract Syntax Tree)树,可以往类中,添加/修改(覆盖)方法、属性等。 现在比较常见的三方依赖例子有:Lobbok的Data可以生成get、set方法,Sl4j2可以生成静态常量l…...
第2讲:pixi.js 绘制HelloWorld
基于第0讲和第1讲,我们增添了vite.config.ts文件。并配置了其他的http端口。 此时,我们删除掉没用的东西。 删除 conter.ts、typescript.svg 在main.ts中改成如下内容: import {Application, Text} from pixi.js import ./style.css// 指明…...
golang HTTP2 https测试POST变GET问题小记
概述 因为工作需要协助修改某个golang程序,添加双向认证。但是在调整的过程遇到一个HTTP POST请求变成GET诡异的问题,最后各种搜索,总算解决,博文记录,用于备忘。 代码 服务端 因工作内容,代码有删减&a…...
Linux下的lvm镜像与快照
lvm镜像(mirror) (1)划分三个PV,其中2个PV大小要一模一样 Disk /dev/sdb: 21.5 GB, 21474836480 bytes 255 heads, 63 sectors/track, 2610 cylinders Units cylinders of 16065 * 512 8225280 bytes Sector size (logical/physical): 512 bytes / 512 bytes I/…...
嵌入式linux系统中SPI子系统原理分析01
大家好,今天给大家分享一下,如何使用linux系统中的SPI通信协议,实现主从设备之间的信息传递。 SPI是一种常见的设备通用通信协议。它是一个独特优势就是可以无中断发送数据,可以连续发送或接收任意数量的位。而在I2C和UART中,数据以数据包的形式发送,有限定位数。 …...
Part 4.2 背包动态规划
->背包模型模板(0/1,分组,完全,多重)<- [NOIP2018 提高组] 货币系统 题目背景 NOIP2018 提高组 D1T2 题目描述 在网友的国度中共有 n n n 种不同面额的货币,第 i i i 种货币的面额为 a [ i ] a[i] a[i],你可以假设每…...
Elasticsearch-使用Logstash同步Mysql
1.安装logstash es服务器版本必须和logstash版本一致 7.9.2 在/usr/local/src/下新建logstash文件夹,解压 下载logstash后查看是否安装成功,在logstash的bin目录下输入指令: ./logstash -e input { stdin { } } output { stdout {} }2.my…...
如何复制wordpress主题/合肥关键词排名工具
小米公开亮度调校方法,友商请速度跟进除了 1.08 亿像素、高刷新率屏幕以及骁龙 865 处理器外,小米10 还有很多细节值得赞赏。比如小米在发布会上花了不少篇幅介绍的小米10 双光线传感器 4096 级别亮度调节方案。更精准、舒适的亮度调节让别家品牌的用户都…...
网站源码可以做淘宝客/下载优化大师
索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录。这种扫描全集合的查询效率是非常低的,特别在处理大量的数据时,查询可以要花费几十秒甚至几分钟&…...
诚信网站体系建设工作/淘宝seo搜索排名优化
2019独角兽企业重金招聘Python工程师标准>>> JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。 setTimeout("function",time) 设置一个超时对象 setInterval("…...
一个网站怎么做pc和移动端/推广普通话手抄报内容资料
基于计算机技术的电气自动化控制系统设计研究-电子设计工程.PDF第26卷 第16期 电子设计工程 2018年8月Vol.26 No.16 ElectronicDesignEngineering Aug.2018基于计算机技术的电气自动化控制系统设计研究张娟荣(咸阳职业技术学院 陕西咸阳712000)摘要:针对现代传统电气…...
wordpress 主题目录/微友圈推广平台怎么加入
最近越來越多病毒會主動感染USB隨身碟,只要電腦插上受病毒感染的USB隨身碟後,主機本身也會跟著中毒,造成嚴重的災害。請問病毒是如何從USB隨身碟感染電腦呢? USB隨身碟中的病毒通常是依賴Autorun.inf檔案***電腦,只…...
化妆培训学校网站源码 下载/小红书推广怎么做
1.如何让图表的Y轴不从0开始显示:有时一系列的数据差别很小,如果从0开始显示,在Y轴上,会一堆数据都堆在某一个区间。例如期货的蜡烛图。将ViewportRangeEnabled设为true即可解决此问题。代码: Axis axis new Axis(); …...