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页面
属性:

  1. src="被引入的资源的url "
  2. width="设置被引入资源在本页面的宽度"
  3. height="设置被引入资源在本页面的高度"
  4. scrolling="no" 是否需要拖拽条,no表示不要
  5. frameborder="0" 去掉被引入资源的边框线

优劣势:

  1. 我们可以直接引用已经写好的页面,比较方便
  2. 一个页面可以被多个页面使用,复用性高
  3. 样式不好控制
  4. 有额外的链接,请求的次数会增加,速度会变慢

三 结构化标签

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中。

五 作业

  1. 思考并实验:
    相同选择器,不同的样式,会如何渲染?
    相同选择器,相同的样式,会如何渲染?
    id选择器 标签名选择器 class选择器 通用选择器 优先级如何排列?
  2. 写一个用户名输入框,提示文字"请验证自己的用户名是否正确"
    样式要求:提示文字的默认颜色为透明色transparent,当输入框获得焦点时,将输入框的背景颜色改为黄色,提示文字字体颜色改为红色
  3. 仿写学子商城首页导航条的效果,实现效果:
    默认颜色#ccc 悬停颜色#B8B8B8 访问过后颜色#ccc
    在这里插入图片描述
    激活颜色 #0aa1ed
    在这里插入图片描述

六 拓展

多媒体标签
在这里插入图片描述
属性
src 是指被引入资源的路径
controls 用于添加音视频的控制组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/28976.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NumPy 差分、最小公倍数、最大公约数、三角函数详解

NumPy 差分 离散差分意味着相邻元素之间的减法。 例如&#xff0c;对于 [1, 2, 3, 4]&#xff0c;离散差分将是 [2-1, 3-2, 4-3] [1, 1, 1] 要找到离散差分&#xff0c;使用 diff() 函数。 示例&#xff1a; import numpy as nparr np.array([10, 15, 25, 5])newarr np…

一个示例学习C语言到汇编层面

给出以下代码 #include<stdio.h> int main() {int x 0, y 0, z 0;while (1) {x 0;y 1;do {printf("%d\n", x);z x y;x y;y z;} while (x < 255);}return 0; }我们把这个程序编写成32位程序&#xff0c;然后我们放入IDA中进行分析 .text:0080187…

Mysql开启查询日志(General Log)

1、增加配置&#xff1a; /etc/my.cnf [mysqld] general_log1 general_log_file/var/log/mysql/query.log 2、增加目录和文件&#xff0c;并且授权 可以使用以下命令修改权限&#xff1a; 创建目录&#xff1a;sudo mkdir -p /var/log/mysql 更改目录所有者&#xff1a;sudo…

okcc呼叫中心系统如何对客户进行按键标记?呼叫系统搭建

要在OKCC呼叫中心系统中对客户进行按键标记&#xff0c;可以按照以下步骤操作&#xff1a; 登录系统&#xff1a;首先&#xff0c;使用管理员或具有相应权限的账户登录OKCC呼叫中心系统。 搜索客户&#xff1a;在系统的主界面或客户管理界面&#xff0c;通过搜索功能找到需要标…

【日常记录】【插件】prisma 链接MySQL数据库 简单入门

文章目录 1、新建项目&#xff0c;使用prisma链接数据库1.1、先创建一个项目1.2、初始化 npm 配置文件及下载依赖1.3、初始化TS配置文件1.4、初始化 prisma1.5、更改 prisma/schema.prisma1.6 更改.env 文件1.7 编写 prisma/schema.prisma1.8 将编写的 prisma/schema.prisma 映…

OSPF被动接口配置(华为)

#交换设备 OSPF被动接口配置 一、基本概念 OSPF被动接口&#xff0c;也称为抑制接口&#xff0c;即将路由器某一接口配置为被动接口后&#xff0c;该接口不会再接受和发送OSPF报文 二、使用场景 在路由器与终端相近或者直接相连的一侧配置被动接口 因为OSPF会定期发送报文…

ensp防火墙web密码重置(前提通过console可以登录)

客户电脑是命令行没有用户名直接输入密码就可以登录了&#xff0c;但是web端不知道admin的密码 前两天遇到运维单位的一台防火墙web网页不知道用户名密码&#xff0c;默认的登录不了&#xff0c;但是通过console可以登录命令行&#xff0c;今天就记录下如何通过命令行修改web页…

海康视觉算法平台VisionMaster 4.3.0 C# 二次开发01 加载方案并获取结果

前言 第一次使用海康视觉算法平台VisionMaster 4.3.0&#xff0c;项目中要使用这个平台进行视觉处理并获取结果。 运行效果 开发环境 C#&#xff0c; WPF&#xff0c; vs2022, 海康视觉算法平台VisionMaster 4.3.0 基本概念 上图这些.sol为后缀的是vm的方案文件。 打开方案文…

NSNumber转float或double类型避免小数点后补0

问题 假设NSNumber初始值是12&#xff0c;直接采用 [NSString stringWithFormat:"%f", number.doubleValue] ; str的值为12.0000000 解决方法 采用一下方法可以避免补0情况 NSNumber *number [NSNumber numberWithFloat:12]; NSNumberFormatter *formatter […

鸿蒙开发过程中出现很多.js或者.js.map怎么办

学习HarmonyOS应用开发已有几天了, 今天在打开DevEco Studio正常开发的过程中, 预览、修改、刷新, 然后就出现了大量的.js以及.js.map文件 这个虽然不影响开发&#xff0c;但是影响体验 问题原因&#xff1a; 编译/预览过程产生的缓存文件, 已反馈给鸿蒙的IDE团队 解决办法…

ollama部署文字转sql,并使用fastapi提供外部接口访问

根据你提供的官方文档中的调用方法&#xff0c;可以使用 Ollama 的 chat 方法来与模型进行交互。我们将调整 FastAPI 应用代码以使用 ollama 模块的 chat 方法。 1. 安装必要的库 确保你已经安装了 FastAPI 和 Ollama Python 客户端库&#xff1a; pip install fastapi uvic…

树莓派pico入坑笔记,快捷键键盘制作

使用usb_hid功能制作快捷键小键盘&#xff0c;定义了6个键&#xff0c;分别是 ctrlz ctrlv ctrlc ctrla ctrlw ctrln 对应引脚 board.GP4, board.GP8, board.GP13 board.GP28, board.GP20, board.GP17 需要用到的库&#xff0c;记得复制进单片机存储里面 然后是main主程…

3dmax2025能用云渲染吗?2025最新云渲染渲染100使用方法

3dmax2025还没用上云渲染&#xff1f;简单3步用上云渲染。 第一步&#xff0c;打开浏览器搜索渲染100&#xff0c;并进入下载客户端并安装 第二步&#xff0c;打开已安装的客户端进行安装&#xff0c;点击登录&#xff0c;未登录注册个账号即可&#xff08;注册账号时邀请码填…

记录一下GMT时间转北京时间

GMT时间比北京时间慢8小时 1. dayjs import dayjs from dayjs dateFormat () (value: Parameters<typeof dayjs>[0],format YYYY-MM-DD HH:mm:ss) > (value ? dayjs(value).format(format) : )2. new Date timeDate(time){return new Date(time) // time 必须是字…

Sermant标签路由能力在同城双活场景的应用

作者&#xff1a;聂子雄 华为云高级软件工程师 摘要&#xff1a;目前应用上云已成为趋势&#xff0c;用户也对应用在云上的高可靠方案有更高追求&#xff0c;目前同城双活场景作为应用高可靠方案中的一种常见实践方案&#xff0c;对微服务流量提出了数据中心亲和性的要求&…

浙江电信联合中兴通讯取得新突破,完成融合边缘商用验证

前不久&#xff0c;浙江电信联合中兴通讯在融合边缘方面取得新突破&#xff0c;在嘉兴完成了融合边缘的商用验证&#xff0c;并发布了商用版本。接下来&#xff0c;双方在融合边缘方面正式进入商用阶段&#xff0c;有效赋能新质生产力。    随着数字经济的快速发展&#xff0…

数据结构与算法笔记:基础篇 -字符串匹配(下):如何借助BM算法轻松理解KMP算法?

概述 上篇文章讲了 BM 算法&#xff0c;尽管他复杂&#xff0c;也不好理解&#xff0c;但确实工程中非常好用的一种高效字符串匹配算法。有统计说&#xff0c;它是最搞笑、最常用的字符串匹配算法。不过&#xff0c;在所有的字符串匹配算法里&#xff0c;要说最知名的一种的话…

【C++】认识STL

【C】认识STL STL的概念STL的版本STL的六大组件STL的三个境界STL的缺陷 STL的概念 SLT(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个保罗数据结构与算法的软件框架。 STL的版本 原…

便携式手持气象仪:低功耗设计

TH-LSZ05便携式手持气象仪是一款轻便、操作简便的气象监测工具&#xff0c;集成了风向、风速、大气压、温度、湿度五项气象要素的测量功能。这些设备通常设计为体积小、重量轻&#xff0c;以便于用户随时携带并使用。通过使用手持气象仪&#xff0c;用户可以实时获取关键的气象…

列表(list)(Python)

文章目录 一、定义二、列表常用操作 一、定义 list ["张三", "李四", "王五", "赵六"]二、列表常用操作 分类关键字/函数/方法说明增加列表.append(值)在列表末尾追加值列表.insert(索引&#xff0c; 值)在指定位置插入值&#xff…