HTML5和CSS3笔记

news2024/9/25 11:22:05

一:网页结构(html):

1.1:页面结构:

1.2:标签类型:

1.2.1:块标签:

 1.2.2:行内标签:

1.2.3:行内块标签:

1.2.4:块标签与行内标签的转换:

(可以设置在不在同一行和隐藏)

1.3:表单与表格标签:

 

表单: 

 

表格: 

 1.4:H5标签:

1.4.1:语义标签:

 

1.4.2:多媒体标签:

(音频audio和视频video)

1.4.3:新表单组件:

(type属性选择对应的类型后会有相应的校验或其他功能)

 

1.4.4:新属性:

(form:选择哪一个表单进行提交;autofocus:自动对焦;placeholder:输入框内的提示内容;)

1.4.5:本地存储:

localStorage与sessionStorage用法一致,只是两者的存储有点区别。使用localStorage存储在一个页面,存储好后如果该页面跳到新页面,里面内容就无了,而sessionStorage存储好后跳转新页面存储的东西还在,只是重新打开浏览器之后内容会消失。(比如设置登录页面登录后将账号信息保存在本地如果使用localStorage存储,跳转新页面存储的账号信息就无了,而使用sessionStorage存储登录跳转后依然可以获取保存的账号信息)

二:网页样式(css):

2.1:网页样式引入方式:

 2.2:基础选择器:

2.3:复合选择器: 

2.3.1:并集选择器:

两个同时都有样式

2.3.2:后代选择器:

 一个标签下所有的某种标签都有样式

2.3.3:子代选择器:

某标签下子代的标签有样式,再往下一层子代就没有了

2.3.4:伪类选择器:

常与a标签合用,用来设置对a标签一些样式的设置

2.4:字体样式属性:

 

2.5:文本属性:

2.6:背景样式:

 

2.7: CSS进阶:

2.7.1:盒子模型:

margin:外边距

border:边框

padding:内边距 

2.7.2:float浮动:

比如说给一个div添加这个属性,他就会浮起来,下面的标签会上移,浮起来的标签显示在下面标签的上面

 overflow:清除浮动,如果子盒子1和2都是float的,那么父盒子就没有高度会隐藏导致下面的导航显示在子盒子右边,如果添加了overflow清除浮动,那么底下的绿色父盒子又会显示出来

2.7.3:position定位:

 

相对定位:

 绝对定位:

固定定位:如果整个页面有滚动条,往下滚动的话也会看到子盒子2一直显示在页面上的这个位置

 2.8:CSS3:

2.8.1:新增的选择器:

 属性选择器:

子元素伪类选择器:
 UI伪类选择器:

2.8.2:flex布局:

display:flex:伸缩布局,会按比例缩放,即使两个盒子宽度之和超过了父盒子也不会放不进去

 

2.8.3:其他常用:

 

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

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

相关文章

钡铼R40工业4G路由器保障智能物流仓储系统高效运行

随着物流行业的不断发展和智能化技术的广泛应用,智能物流仓储系统已成为提升物流效率、降低成本、提高服务质量的重要手段。在这样的背景下,钡铼R40工业4G路由器作为一种先进的网络通信设备,在智能物流仓储系统中扮演着关键的角色&#xff0c…

【小米汽车SU7实测】 小米汽车su7到底行不行?小米新能源轿车体验感怎么样?

小米汽车SU7是小米汽车的首款车型,定位“C级高性能生态科技轿车”,也是小米迈入新能源赛道的首次成果落地。 首先,让我们来谈谈它的性能。试驾过程中,小米SU7展现出了惊人的加速能力,0-100km/h加速仅需2.78秒&#xf…

【设计】 【数学】1622 奇妙序列

本文涉及知识点 设计 数学 LeetCode1622. 奇妙序列 请你实现三个 API append,addAll 和 multAll 来实现奇妙序列。 请实现 Fancy 类 : Fancy() 初始化一个空序列对象。 void append(val) 将整数 val 添加在序列末尾。 void addAll(inc) 将所有序列中的…

2024 年 5 个 Linux 开源数字化学习平台

与其他行业一样,教育界多年来一直在经历数字化转型的过程。随着数字化学习平台的建立,目前只要能上网,任何人都可以接受教育。 “e-learning”一词的意思是“数字化学习”,是当今最常用的词之一。 它指的是通常在互联网上进行的培…

[c++] c++ 中的一些关键字:explicit, delete, default, override, final, noexcept

1 explicit explicit 的意思是清楚的,明显的。一般用在类的构造函数中,防止隐式转换。 explicit specifier - cppreference.com 如下代码, (1) 类 A 的两个构造函数都没有使用 explicit 修饰,所以如下两行代码,隐式…

ubuntu 如何使用阿里云盘

你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…

网络学习:IPV6基础配置

目录 一、配置接口的全球单播地址 二、配置接口本地链路地址 三、配置接口任播地址 四、配置接口PMTU 配置静态PMTU: 配置动态PMTU: 五、接口配置IPV6地址示例: 一、配置接口的全球单播地址 全球单播地址类似于IPv4公网地址&#xff0…

postman下载汉化以及使用

【2023全网最牛教程】10分钟快速上手Postman(建议收藏)_macbook postman打开慢-CSDN博客 Postman 汉化教程(小白)配置的具体操作_postman怎么设置中文-CSDN博客 上面是两篇参考的博客 postman是一款支持http协议的接口调试与测试…

100道面试必会算法-10-K 个一组翻转链表

100道面试必会算法-10-K 个一组翻转链表 题目描述 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 k 是一个正整数,它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍,那么请将最后剩余的节点…

活动图高阶讲解-09

1 00:00:00,000 --> 00:00:04,000 上次的练习不知道大家做了没有 2 00:00:04,000 --> 00:00:07,000 没有做的话赶紧做 3 00:00:07,000 --> 00:00:09,000 把它发过来 4 00:00:09,000 --> 00:00:11,000 接下来,下一个 5 00:00:11,000 --> 00:00:16…

ARM实验 LED流水灯

.text .global _start _start: 使能GPIOE GPIOF的外设时钟 RCC_MP_AHB4ENSETR的第[4][5]设置为1即可使能GPIOE GPIOF时钟 LDR R0,0X50000A28 指定寄存器地址 LDR R1,[R0] 将寄存器原来的数值读取出来&#xff0c;保存到R1中 ORR R1,R1,#(0x3<<4) 将第4位设置为1 S…

开源项目ChatGPT-Next-Web的容器化部署(一)-- 优化Dockerfile

一、背景 最近比较火的无疑是chatgpt了&#xff0c;找到一款开源github项目&#xff0c;在其基础上修改&#xff0c;定制出适合于自身业务的系统。 它是nodejs后端项目&#xff0c;github地址是&#xff1a;https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web&#xff0c;依…

面试算法-87-分隔链表

题目 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&#xff1a;head [1,4,3,2,5,2], x …

(力扣)删除链表的倒数第N个节点 C++

1、题目描述 2、三种方法 &#xff08;1&#xff09;方法一&#xff1a;计算链表长度 创建一个虚拟节点来处理删除头节点的情况通过计算链表的长度确定要删除节点的位置。使用双指针中的一个指针&#xff0c;移动到要删除节点的前一个位置。将指针后面的节点跳过&#xff0c;…

深度学习 线性神经网络(线性回归 从零开始实现)

介绍&#xff1a; 在线性神经网络中&#xff0c;线性回归是一种常见的任务&#xff0c;用于预测一个连续的数值输出。其目标是根据输入特征来拟合一个线性函数&#xff0c;使得预测值与真实值之间的误差最小化。 线性回归的数学表达式为&#xff1a; y w1x1 w2x2 ... wnxn …

openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint

文章目录 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint249.1 功能描述249.2 语法格式249.3 参数说明249.4 示例 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint 249.1 功能描述 指明join的顺序&#xff0…

内存卡的照片怎么突然就找不到了,内存卡照片突然找不到如何恢复

最近,我遇到了一个令人困惑的问题,就是我的内存卡中的照片突然间找不到了。作为一个热爱摄影的人,我经常使用内存卡来存储我的珍贵照片。然而,最近我发现,无论我如何搜索和浏览,这些照片似乎就像消失了一样。内存卡照片突然找不到如何恢复?虽然挺沮丧的,但幸好遇上了以…

五分钟快速搭建个人游戏网站(1Panel)

五分钟快速搭建个人游戏网站&#xff08;1Panel&#xff09; 环境要求&#xff1a;主流 Linux 发行版本&#xff08;基于 Debian / RedHat&#xff0c;包括国产操作系统&#xff09;&#xff1b; 如果是Windows OS的可以通过WSL来实现安装。 1 介绍 1Panel 是一个基于 Web 的 L…

OpenCV+OpenCV-Contrib源码编译

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、OpenCV是什么&#xff1f;二、OpenCV 源码编译1.前期准备1.1 源码下载1.2 cmake安装1.3 vscode 安装1.4 git 安装1.5 mingw安装 2.源码编译2.1 打开cmake2.…

[ESP32]:基于HTTP实现百度AI识图

[ESP32]&#xff1a;基于HTTP实现百度AI识图 测试环境&#xff1a; esp32-s3esp idf 5.1 首先&#xff0c;先配置sdk&#xff0c;可以写入到sdkconfig.defaults CONFIG_IDF_TARGET"esp32s3" CONFIG_IDF_TARGET_ESP32S3yCONFIG_PARTITION_TABLE_CUSTOMy CONFIG_PA…