前端html+css笔记

前端

Html:

html标签

  1. < strong >加粗 --文本格式化标签

  2. < em >倾斜

  3. < ins >下划线

  4. < del >删除

  5. < img src=“图片的url” >src用于指定图像的位置名称(属性名+属性值=属性)

  • alt 替换文本
  • title 提示文本
  • width 图片宽度
  1. < a href=“”>链接(段落内空格+
  • target="_blank"跳转新窗口
  1. < audio >音频
  • loop 循环播放
  • autoplay 自动播放 (禁用
  • controls 显示音频面板
  1. < video sec=>视频
  • muted 静音播放
  • 同(7)

9. 列表
无序列表:< ul > < li >
有序列表:< ol > < li >
定义列表:< dl > < dt(标题)> < dd(描述)>(一个标题对应多个内容

10. 表格

  • < table > < tr(行)> < td(内容)> < th(表头)>
  • < thead > < tbody > < tfoot > (表格结构标签-代码优化)
  • rowspan’ colspan’ (合并单元格)[ rowspan =“2” ]

11. 表单(登录,注册,搜索

  • < input type=“”>
  • placeholder’ (占位文本)
  • radio -name -checked’
  • file -multiple’
  • checkbox -checked’
type属性值说明
text文本框,输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

12. 下拉菜单

  • < select > < option > -selected’

13. 文本域

  • < textarea >
  1. < label >
  • 增大点击范围[input…id label…for] (*直接label包裹)

15. 按钮

type属性值说明
submit提交数据到后台(默认
reset重置
button普通
  1. < form >表单区域 -action=“”

无语义布局标签
17. < div >独占一行
18. < span >不换行

CTRL+/==注释

单标签

  1. < hr >水平线
  2. < br >换行

字符实体

  • 空格 - &nbsp;
  • < - &lt;
  • > - &gt;

CSS

引入
外部引入< link rel=“stylesheet” href=“” >
类选择器
一个标签可用多个类名
文字控制属性
(google默认大小16px

属性效果
font-family字体(最后 衬线)
text-indent文本缩进(em)
text-align水平对其方式-设置在父级
text-decoration修饰线
font-weight加粗‘数字
font-styleitalic倾斜
colorRGBA
  • text-decoration line-through’删除线 over…’ under…’

选择器

  • 通配<标签<类<id<行内<important

  • div span
  • div > span
  • span,div,p
  • p.box
  • hover:悬停
  • 超链接::hover :link :visited :hover :active

Emment
.box——
bgc——
w500——

背景属性

  • background-image url’
  • background-repeat no-…’ …-x’ …-y’
  • background-position x,y’
  • background-size contain/cover
  • background-attachment

显示模式

  • 块级 block;
  • 行内块 inline-block;
  • 行内 inline;

结构伪类选择器
E:nth-child(N) N—— 2n ;2n+1…
伪元素选择器
E::before / E::after (content‘

盒子模型

  • border
  • padding top,right,bottom,left/top,left-right,bottom/top-bottom,left-right
  • 尺寸 box-sizing:border-box
  • margin (0,auto(要有盒子宽度))
  • 元素溢出overflow hidden’ scroll’ auto’ 塌陷问题
  • 塌陷:父级设置 overflow:hidden/border-top;取消子级margin设置父级padding

浮动
块元素水平 添加后脱离标准流

  • 清除浮动 单/双微元素法

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

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

相关文章

Python—数据可视化Seaborn大全:参数详解与实战案例全解析【第52篇—python:Seaborn大全】

文章目录 Seaborn库常用绘图详解与实战引言安装与导入一、散点图参数说明实战案例 二、直方图参数说明实战案例 三、线性关系图参数说明实战案例 四、热力图参数说明实战案例 五、分布图参数说明实战案例 六、箱线图参数说明实战案例 七、联合分布图参数说明实战案例 八、小提琴…

护眼灯几a级的好?最佳的AA级护眼台灯推荐

玩文字游戏&#xff0c;有些商家都是大师级的。我们在各电商平台挑选护眼灯时&#xff0c;都会看到这样一种宣传描述&#xff1a;AAA级全光谱或AAA级健康照明等3个A的字眼。不良品牌厂商在虚假宣传&#xff0c;将国际照明委员会对台灯光线的一个健康认证&#xff0c;也就是AAA级…

网络服务综合实验项目

目录 实验要求 运行环境 基础配置 业务需求 实验步骤 一、基础配置 1.1、配置静态IP 1.1.1、 在192.168.159.130中配置 1.1.2、 在192.168.159.131中配置 ​编辑 1.2、修改主机名及hosts映射 1.2.1、在192.168.159.130中配置 1.2.2、 编辑配置hosts文件 1.2.3、重启…

LangChain 80 LangGraph 从入门到精通二

LangChain系列文章 LangChain 60 深入理解LangChain 表达式语言23 multiple chains链透传参数 LangChain Expression Language (LCEL)LangChain 61 深入理解LangChain 表达式语言24 multiple chains链透传参数 LangChain Expression Language (LCEL)LangChain 62 深入理解Lang…

深度神经网络加载 Caffe 框架模型

介绍 在本教程中&#xff0c;您将学习如何使用来自 Caffe 模型库的 GoogLeNet 训练网络opencv_dnn模块进行图像分类。 我们将在下图中演示此示例的结果。 暴风雪号航天飞机 源代码 我们将使用示例应用程序中的片段&#xff0c;可以在此处下载。 ​ #include < fstream>…

双目模组 - IMSEE SDK的配置实践:含Opencv的详细编译配置

IMSEE 的环境要求: CMake(3.0以上)(需要支持vs2019) Visual Studio 2019 opencv3.3.1 IMSEE-SDK 官网参考: Windows 源码安装 — IMSEE SDK 1.4.2 文档 (imsee-sdk-docs.readthedocs.io) 【案】按照IMSEE的建议进行安装: 1 Windows 安装: 1.1 环境准备: 1.1.1 CMake:in…

编程笔记 html5cssjs 070 JavaScript Null数据类型

编程笔记 html5&css&js 070 JavaScript Null数据类型 一、Null数据类型二、 类型运算小结 在JavaScript中&#xff0c;Null 是一种基本数据类型&#xff0c;它是JavaScript七种原始数据类型&#xff08;包括&#xff1a;Boolean、Number、String、Null、Undefined、Sym…

(策略游戏)

[CSP-S 2022] 策略游戏 题目描述 小 L 和小 Q 在玩一个策略游戏。 有一个长度为 n n n 的数组 A A A 和一个长度为 m m m 的数组 B B B&#xff0c;在此基础上定义一个大小为 n m n \times m nm 的矩阵 C C C&#xff0c;满足 C i j A i B j C_{i j} A_i \times …

多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测

多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测 目录 多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序…

springboot整合Sa-Token实现登录认证和权限校验(万字长文)

目前在国内的后端开发中&#xff0c;常用的安全框架有spring security、shiro。现在&#xff0c;介绍一款由国人开发的安全框架Sa-Token。这个框架完全由国人开发&#xff0c;所提供的Api文档和一些设置都是比较符合国人的开发习惯的&#xff0c;本次就来介绍一下如何在spring …

Multisim14.0仿真(四十五)AC220V转DC12V稳压电源设计

一、仿真原理图&#xff1a; 二、运行效果&#xff1a;

【Vue】组件间通信的7种方法(全)

目录 组件之前的通信方法 1. props/$emit 2.parent/children 3.ref 4.v-model 5.sync 6.attrs,attrs,attrs,listeners 7.provide/inject 7.eventBus 组件之前的通信方法 1. props/$emit 父传子 props 这个只能够接收父组件传来的数据 不能进行修改 可以静态传递 也可…

机器学习系列——(九)决策树

简介 决策树作为机器学习的一种经典算法&#xff0c;在数据挖掘、分类和回归等任务中广泛应用。本文将详细介绍机器学习中的决策树算法&#xff0c;包括其原理、构建过程和应用场景。 原理 决策树是一种基于树状结构的监督学习算法&#xff0c;它通过构建一棵树来对数据进行分…

【Rust】——基础Hello_world

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

68.Spring MVC的控制器是不是单例模式,如果是,有什么问题,怎么解决?

Spring MVC的控制器是不是单例模式,如果是,有什么问题,怎么解决&#xff1f; 在 Spring MVC 中&#xff0c;默认情况下控制器是单例模式&#xff0c;也就是说&#xff0c;每个控制器类只有一个实例&#xff0c;该实例在应用程序启动时创建&#xff0c;并在整个应用程序的生命周…

DBeaver添加阿里maven镜像

1、点击数据库->驱动管理器 2、选择任意数据库&#xff0c;点击编辑按钮 3、点击下载/更新(D) 4、点击下载配置 5、点击添加 6、添加阿里云地址 http://maven.aliyun.com/nexus/content/groups/public/ 7、将阿里云地址移动到首位并点击"应用并关闭"

笔记---容斥原理

AcWing,890.能被整除的数 给定一个整数 n n n 和 m m m 个不同的质数 p 1 , p 2 , … , p m p_{1},p_{2},…,p_{m} p1​,p2​,…,pm​。 请你求出 1 ∼ n 1∼n 1∼n 中能被 p 1 , p 2 , … , p m p_{1},p_{2},…,p_{m} p1​,p2​,…,pm​ 中的至少一个数整除的整数有多少…

【项目日记(八)】第三层: 页缓存的具体实现(下)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:项目日记-高并发内存池⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你做项目   &#x1f51d;&#x1f51d; 开发环境: Visual Studio 2022 项目日…

Android14 WMS-DisplayArea层级结构生成

每个手机可以有多个屏幕, 一个屏幕是一个displaycont, 下面从displaycont开始, 看下层级结构是如何构建的 02-02 19:55:04.258 3530 3530 V jinyanmeiWMS: java.lang.RuntimeException: jinyanmeiWMS 02-02 19:55:04.258 3530 3530 V jinyanmeiWMS: at com.android.serve…

【大数据面试题】001 Flink 的 Checkpoint 原理

一步一个脚印&#xff0c;一天一道大数据面试题。 Flink 是大数据实时处理计算框架。实时框架对检查点&#xff0c;错误恢复的功能要比离线的更复杂&#xff0c;所以一起来了解 Flink 的 Checkpoint 机制吧。 Checkpoint 机制 触发 Checkpoint 通过设置时间或数据量阈值来触…