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.hqwc.cn/news/562697.html

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

相关文章

微信小程序 - picker-viewer实现省市选择器

简介 本文会基于微信小程序picker viewer组件实现省市选择器的功能。 实现效果 实现代码 布局 <picker-view value"{{value}}" bindchange"bindChange" indicator-style"height: 50px;" style"width: 100%; height: 300px;" &…

鸿蒙Harmony应用开发—ArkTS-LazyForEach:数据懒加载

LazyForEach从提供的数据源中按需迭代数据&#xff0c;并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach&#xff0c;框架会根据滚动容器可视区域按需创建组件&#xff0c;当组件滑出可视区域外时&#xff0c;框架会进行组件销毁回收以降低内存占用。 接口…

Excel数字乱码怎么回事 Excel数字乱码怎么调回来

在日常工作中&#xff0c;Excel是我们最常使用的数据处理软件之一&#xff0c;它强大的功能使得数据处理变得既简单又高效。然而&#xff0c;用户在使用Excel时偶尔会遇到数字显示为乱码的问题&#xff0c;这不仅影响了数据的阅读&#xff0c;也大大降低了工作效率。那么&#…

架构整洁之道-读书总结

1 概述 1.1 关于本书 《架构整洁之道》&#xff08;Clean Architecture: A Craftsman’s Guide to Software Structure and Design&#xff09;是由著名的软件工程师Robert C. Martin&#xff08;又称为Uncle Bob&#xff09;所著。这本书提供了软件开发和架构设计的指导原则…

Linux :环境基础开发工具

目录: 1. Linux 软件包管理器 yum 1. 什么是软件包 2. 查看软件包 3. 如何安装软件 4. 如何卸载软件 2. Linux开发工具 1. Linux编辑器-vim的基本概念 2. vim使用 3. vim的基本操作 4. vim正常模式命令集 5. vim末行模式命令集 6. 简单vim配置 3. Linux编译器-gcc/…

【WEEK4】 【DAY4】AJAX第一部分【中文版】

【WEEK4】 【DAY4】AJAX第一部分【中文版】 2024.3.21 Thursday 目录 8.AJAX8.1.简介8.2.伪造ajax8.2.1.新建module&#xff1a;springmvc-06-ajax8.2.2.添加web支持&#xff0c;导入pom依赖8.2.2.1.修改web.xml8.2.2.2.新建jsp文件夹 8.2.3.新建applicationContext.xml8.2.4.…

阿里云效流水线—发布公用jar到Maven私仓

后端项目发布 1.选择流水线 2.新建流水线 3.选择模板 4.选择代码仓库 5.调整构建命令 添加mvn install 重新构建项目 6.添加镜像 在wms-app目录下新建Dockerfile文件(Dockerfile文件名中的D一定要是大写的&#xff09;文件&#xff0c;重新推送项目 #基础镜像 FROM openjd…

Python界面库Flet(1)介绍和快速使用

Python界面库Flet(1)快速上手使用 Author&#xff1a;Once Day Date&#xff1a;2024年3月19日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: Pyt…

记录‘No module named ‘notebook.notebookapp‘’导致jupyter打不开的解决方法

最初是因为无法重命名文件的问题&#xff0c;更新了notebook&#xff0c;但是更新之后打不开了 在终端输入 jupyter notebook 报错 File "/Users/maclin/Library/Python/3.8/bin/jupyter-notebook", line 5, in <module> from notebook.notebookapp import ma…

19、【qlib】【其他组件/特性/主题】任务管理

简介 工作流部分介绍了如何松耦合地运行研究流程,但使用qrun时只能执行单个任务。为了自动地生成和执行不同的任务,任务管理模块提供了一整套流程,包括任务生成、任务存储、任务训练及任务收集。借助这个模块,用户可以在不同时间段、不同损失函数或甚至不同模型下自动运行…

SQL96 返回顾客名称和相关订单号(表的普通联结、内联结inner join..on..)

方法一&#xff1a;普通联结 select cust_name, order_num from Customers C,Orders O where C.cust_id O.cust_id order by cust_name,order_num;方法二&#xff1a;使用内连接 select cust_name,order_num from Customers C inner join Orders O on C.cust_id O.cust_id …

ubuntu arm qt 读取execl xls表格数据

一&#xff0c;ubuntu linux pc编译读取xls的库 1&#xff0c;安装libxls(读取xls文件 电脑版) 确保你已经安装了基本的编译工具&#xff0c;如gcc和make。如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; sudo apt-update sudo apt-get install build-essentia…