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,一经查实,立即删除!

相关文章

独孤思维:流量暴涨,却惨遭违规

最近独孤操作虚拟资料短视频,有个很深的感悟。 每天发10条短视频,积累到20天左右,播放量和粉丝数开始暴涨。 虽然很多牛比的比我数据好,但是对于刚做短视频的独孤来说,我已经满足了。 但是又发了10来天,…

如何用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数据库下载,安装和远程连接 主机操…

rollup打包起手式

使用Rollup打包JavaScript rollup是一款小巧的javascript模块打包工具,更适合于库应用的构建工具;可以将小块代码编译成大块复杂的代码,基于ES6 modules,它可以让你的 bundle 最小化,有效减少文件请求大小,vue在开发的时候用的是webpack,但是…

【小沐学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 研究的一大教训是过于重视人类既有…

mysql 索引相关操

1、创建索引 第一种方式:在执行 CREATE TABLE 时创建索引,例如: CREATE TABLE test( id INT auto_increment PRIMARY KEY, name VARCHAR (16), last_name VARCHAR (16), id_card VARCHAR…

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

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

Webman全局异常捕获处理

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

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

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

【MySQL】数据操作语言 (DML) 和 数据定义语言 (DDL)

数据操作语言 (DML) 和 数据定义语言 (DDL) 在数据库管理系统中,DML (Data Manipulation Language) 和 DDL (Data Definition Language) 是两个核心的语言类型,用于管理数据库的数据和结构。本文将深入探讨这两种语言的概念、功能以及通过案例演示它们的…

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

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

opencv-python安装不上(附离线安装包网址和安装方法)

首先参考这个:安装opencv遇到的问题ERROR: Could not find a version that satisfies the requirement opencv (from versions: n-CSDN博客 如果尝试上面的方法也不行的话: 最好的方法就是从网上下载符合自己的操作系统和python版本的opencv-python包和…

2024最新华为OD机试试题库全 -【虚拟理财游戏】- C卷

1. 🌈题目详情 1.1 ⚠️题目 在一款虚拟游戏中生活,你必须进行投资以增强在虚拟游戏中的资产以免被淘汰出局。 现有一家Bank,它提供有若干理财产品 m 个,风险及投资回报不同,你有 N(元)进行投资,能接收的总风险值为X。 你要在可接受范围内选择最优的投资方式获得最…

java实现给Iphone推送消息

大家好我是咕噜美乐蒂,很高兴又和大家见面了! 对于 Java 开发者来说,要实现向 iPhone 推送消息,一种常见的方式是通过苹果的推送通知服务(APNs,Apple Push Notification service)来实现。APNs …