HTML5和CSS3笔记

一:网页结构(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.mzph.cn/news/766668.shtml

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

相关文章

如何用VSCode和Clangd与Clang-Format插件高效阅读Linux内核源码及写驱动

一、如何高效阅读Linux源码:基于clangd uboot/busybox等都可以用这种方式,理论上说所有基于Make和Cmake的源码工程都可以用这套方案 阅读Linux源码最大问题在于调用链太复杂,一个函数或变量引用太多,source insight和cscope等基于…

Pink老师Echarts教学笔记

可视化面板介绍 ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。 01-使用技术 完成该项目需…

阿里云服务器(Ubuntu22)上的MySQL8数据库下载,安装和远程连接

最近阿里云centos主机到期了改为使用Ubuntu操作系统,在上面安装mysql并远程连接出现了一系列问题并解决。 之前在centos系统上下载mysql8的教程如下: 阿里云服务器(centos7)上的MySQL8数据库下载,安装和远程连接 主机操…

【小沐学Python】Python实现Web图表功能(Lux)

文章目录 1、简介2、安装3、测试3.1 入门示例3.2 入门示例2 结语 1、简介 https://github.com/lux-org/lux 用于智能可视化发现的 Python API Lux 是一个 Python 库,通过自动化可视化和数据分析过程来促进快速简便的数据探索。通过简单地在 Jupyter 笔记本中打印出…

招聘自媒体编辑岗位的人才测评方案

人才测评工具在招聘入职的方案,在线工具网根据自媒体岗位的特性和需求来分析,并制定自媒体主编的测评方案。 自媒体作为互联网时代的产物,自然也为我们带来了很多的福利,例如:海量的信息、快捷的传媒方式,那…

百度网盘联盟申请盘主的方法

在百度网盘联盟目前有3种赚钱方式,第一种是自己售卡赚佣金;第二种是外链分享(分销联盟);第三种是邀请好友加盟,好友售卡,自己得提成收入,需要申请盘主后即可开始 申请盘主&#xff1…

3个Tips,用“AI”开启新生活

相信最近,很多朋友们都回归到了忙碌的生活节奏中。生活模式的切换,或多或少会带来身体或情绪状况的起伏。新技术正在为人们生活的方方面面带来便利。3个小Tips或许能让你也从新技术中获益,从身到心,用“AI”开启新生活。 关”A…

RAPTOR:树结构的索引和检索系统的递归抽象处理

论文地址:https://arxiv.org/pdf/2401.18059.pdf 摘 要 增强型检索语言模型能够更好地适应世界状态的变化,并整合长尾知识,然而现有大多数方法仅能从检索语料库中检索到较短的连续文本片段,这限制了对整个文档上下文的整体理解。…

强化学习之父Richard Sutton:通往AGI的另一种可能

2019年,强化学习之父、阿尔伯塔大学教授Richard Sutton发表了后来被AI领域奉为经典的The Bitter lesson,这也是OpenAI研究员的必读文章。 在这篇文章中,Richard指出,过去 70 年来,AI 研究的一大教训是过于重视人类既有…

文件包含一-WEB攻防-PHP应用文件包含LFIRFI伪协议编码算法无文件利用黑白盒

演示案例: 文件包含-原理&分类&利用&修复黑盒利用-VULWEB-有无包含文件白盒利用-CTFSHOW-伪协议玩法 #文件包含-原理&分类&利用&修复 1、原理 程序开发人员通常会把可重复使用的函数写到单个文件中,在使用某些函数时&#xff0c…

Webman全局异常捕获处理

最近在使用webman这个框架做项目开发,涉及到需要统一处理异常捕获。由于官网给的并不详细,于是自己实现了一下全局异常处理类。 一、配置效果 例如:我要在项目中统一返回json 格式数据,并不想在业务层写try,catch逻辑。 或者在业务…

下载安装anaconda和pytorch的详细方法,以及遇到的问题和解决办法

下载安装Anaconda 首先需要下载Anaconda,可以到官网Anaconda官网或者这里提供一个镜像网站去下载anaconda镜像网站 安装步骤可参考该文章:Anaconda安装步骤,本篇不再赘述 注意环境变量的配置,安装好Anaconda之后一定要在环境变量…

使用POI以OLE对象的形式向excel中插入附件(pdf为例)

前言: 最近在使用easyExcel操作excel文件时,一直想找到一个方法可以往excel中填充附件,但是目前只发现POI可以插入附件,于是将方法记录如下: 实现: 这个方法主要是使用 Apache POI 的 HSSFWorkbook 类来…

【Java初阶(四)】数组的定义和使用

❣博主主页: 33的博客❣ ▶文章专栏分类: Java从入门到精通◀ 🚚我的代码仓库: 33的代码仓库🚚 目录 1.前言2.数组的概念2.1数组的初始化2.2数组的使用2.2.1数组元素访问2.2.2遍历数组 3.数组是引用类型3.1实例3.2 认识null 4.数组的应用4.1 二分查找4.2…

AQS源码分析

前言 AbstractQueuedSynchronizer是抽象同步队列,其是实现同步机器的基础组件,并发包中的锁的底层就是使用AQS实现的。AQS中 维护了一个volatile int state(代表共享资源)和一个FIFO线程等待队列(多线程争用资源被阻塞…

MySQL面试题--开发(最全,涵盖SQL基础、架构、事务)

MySQL面试题--事务https://mp.csdn.net/mp_blog/creation/editor/136947072 MySQL面试题--MySQL内部技术架构https://blog.csdn.net/Timebro/article/details/136946046?spm1001.2014.3001.5501 MySQL面试题--最全面-索引https://blog.csdn.net/Timebro/article/details/136…

计算机实体安全

计算机实体安全定义: 对场地环境、设施、设备和载体、人员采取的安全对策和措施。 一、计算机可靠性与故障分析 1.1 计算机的可靠性 可靠性 (狭义) ■计算机在规定时间与条件下完成规定功能的 概率 ■规定条件:环境条件,使用条件&#xff0…

软件高级:软件架构评估-基于场景的评估方法

作者:明明如月学长, CSDN 博客专家,大厂高级 Java 工程师,《性能优化方法论》作者、《解锁大厂思维:剖析《阿里巴巴Java开发手册》》、《再学经典:《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

Android Studio 和 lombok 的版本适配、gradle依赖配置、插件安装及使用

文章目录 Intro注意事项Android Studio 和 lombok 的版本选择及下载下载链接 在 Android Studio 中安装一次 lombok 插件在每个 gradle 项目中添加 lombok 相关依赖(如要用到)使用ref Intro 用惯了 JavaMavenIDEA 开发后端服务,突然有一天用 JavaGradleAndroidStud…

C# WPF编程-事件

C# WPF编程-路由事件 路由事件概要路由事件的三种方式 WPF事件WPF最重要的5类事件:生命周期事件 鼠标事件键盘事件多点触控输入原始触控 路由事件概要 路由事件是具有更强传播能力的事件,它们可在元素树中向上冒泡和向下隧道传播,并沿着传播…