DAY04 HTMLCSS

2024-06-17 21:44
文章标签 css html frontend day04

本文主要是介绍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 用于添加音视频的控制组件

这篇关于DAY04 HTMLCSS的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1070559

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,