<前端小白> 前端网页知识点总结

HTML

标签   

1. 标题标签  h1到h6 

2.  段落标签     p

3.  换行    br    水平线  hr

4.  加粗 strong   倾斜 em   下划线 ins   删除 del

5.  图像标签

     img   src-图像的位置    alt- 图片加载失败显示的文字    替换文本 

              title--- 鼠标放到图片上显示的文字   提示文本

              width  宽   heigh  高

6.路径   ./    或者   ../

7.超链接        

      a       herf --点击后就会跳转的地址

               target = “_blank”  点击后会打开一个新的网页

8.音频标签

     audio     src --音频的位置

                  controls   显示音频控制面板

                  loop循环播放

                  autoplay  自动播放  浏览器设置调

9.视频

video     src  位置  

              loop    autoplay     muted静音播放

10.   无序列表   

                ul嵌套li   

11.    有序列表

        ol嵌套li  

          

12. 表格   感觉没啥迪奥用 不写了

13.    输入框

        input       type=“ text文本框    password密码   radio单选框    checkbox多选框  file上传文件”

加上  placeholder   使提示的文本    

单选框外边加上label 这个让它成为label的子类   扩大其点击范围 

14.单选框的单选属性    name 弄相同的  只能选一个   checked使默认选中

15.多文件上传  加 mutiple 

16.多选框     checkbox

17.下拉菜单    selection嵌套option    selected默认显示

        

18.   文本域   textarea

19.label 标签   某个标签的说明文本   增大点击范围

20. 按钮    button

           submit   把数据提交到后台

           resert    重置   一般用于注册

           button  普通标签

    按钮应该放在   form  action  中       form表单空间    action 提交地址

                    

21。标签布局   div  span

             div 独占一行  

             span    不换行

22.   字符实体      小于号   <

                             大于号  >

                              空格     

23.  以下是CSS内容

      写法      style标签

                    link  + rel(类型) +  herf(路径)

24.   类选择器      . 类名{}

                然后在标签名后边加 class=“类名”

25.    id选择器      #类名{}

                标签后边加id = “id名"  和类选择器差不多   和js搭配使用

26.  通配符选择器   对于所有标签进行同一个操作     *{ }  

     用于清除格式

27.画盒子    宽 width   

                    高height     

                   背景色 background-color

28.字体      大小 font-size

                粗细    font-weight   一般400细  700粗

                 倾斜  font-style    normal   italic 

                 行高文字之间    line-height     让文本垂直居中  就让行高值等于盒子的高度的值 只适用单行文字

                字体样式:  font-family   

                 字体复合样式:  font : 是否倾斜     是否加粗   字体间行高(必写)     字体(必写)       

29.  文本缩进   text-indent       加    数字px     em(字号大小)

30.   文本对齐   text-align        左对齐 默认  left    

                                                 水平居中   center 

                                                  右对齐    right

31. 图片对齐       图片放在父级标签中  进行text-align

32.修饰线   text-decoration       无none 

                                                   下划线   underline

                                                   删除线   line-through

                                                    顶划线    over-line

33.文字颜色    color      + 颜色   或  调色板    rgb(红绿蓝)  rgba(红绿蓝 ,透明度)  或  十六进制

34. 复合选择器

           后代选择器    选择器1 然后空格 选择器2       父代 空格  子代

                相当于选择使用选择器1的标签里边的使用选择器2的标签 对他进行操作 

        

   

   子代选择器      选择器1>选择器2         父代  >  子代

                  

并集 和 交集懒得写了

伪类选择器     表示元素状态   

                        选择器:hover{CSS属性}   这个是对于超链接啥的设置的鼠标悬停状态

这个会变色 只是截图接不出来

伪类超链接  :      按顺序写 LVHA

                             :link  访问前

                             :visited  访问后

                             : hover  悬停

                              :active  点击时

35.CSS的特性

                继承性: 对于父代的所有操作会影响子代

                层叠性: 相同的属性往后写的话会进行覆盖  不同的属性会增加

                优先级   能选择的范围越大优先级就会越低  懒得写

36.  背景属性       背景色:  background-color  前边提到过

                              背景图 :  background-img  

                              平铺方式:   默认是平铺的 repeat

                                                   取消平铺:  background-repeat: no-repeat

                                                 根据水平 垂直方向平铺   background-repeat: repeat-x;

                                                                                        background-repeat: repeat-y;

                            背景图的位置: 见下图

        

                        背景图的缩放 :  bckground-size   

                                                cover  全屏  但是图片可能会覆盖不全

                                                contain   宽高有一个存在相等的  就会停止

                        背景图的固定:  就是上下滚动鼠标图不动 然后文字会随鼠标上下滚动

                                  background-attachment: fixed;

                         背景图的复合属性:就空格隔开就行  对于缩放要前边加上 / 

37. 块级元素 行内元素 行内块元素

    块级元素:  

  • 独占一行,前后会自动换行

  • 默认宽度和父元素相同  (是父元素宽度的100%)

  • 可以包含其他块级元素和行内元素

  • 可以设置宽度(width)、高度(height)、内外边距(margin/padding)

  • 常见的

    <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>,

行内元素

  • 不会独占一行,与其他行内元素排在同一行

  • 默认宽度由内容决定

  • 设置宽度(width)、高度(height)无效

  • 水平方向的内外边距有效,垂直方向的外边距无效

  • 只能包含文本和其他行内元素

  • 常见的 

    <span>, <a>, <strong>, <em>, <img>, <input>, <label>, <br>

行内块元素

  • 结合了块级和行内元素的特性

  • 不独占一行,与其他元素排在同一行

  • 可以设置宽度(width)、高度(height)、内外边距(margin/padding)

  • 默认宽度由内容决定

  • 常见的: 

    <img>, <input>, <button>, <select>, <textarea>

转换:  diplay:   块级 block      行内块 inline-block     行内: inline

38. 结构伪类选择器    就是对一个父级里边的多个相同的子级标签单独拿出来操作

      子级::first-child        :last-child        :nth-child(5)第五个

39.伪元素选择器:  before  after  不知道有damn用??

40.盒子模型: 内容区域  用width  height

                         内边距  padding      -left     -right   -bottom   -top    多值顺时针转动 

                          外边距 margin    -left     -right   -bottom   -top      多值顺时针转动 

                         边框线   border   粗细   样式solid  dashed  dotted   颜色   

41.清除默认样式     

对于边距和无序列表 

42.元素溢出:   控制溢出元素的显示方式

                overflow  :      隐藏hidden 

                                        scroll 无论溢出不溢出都有滚动条 水平加垂直

                                        auto  没有水平的

43.合并现象:  对于两个同级标签  当同时在垂直方向时  两者之间的相交的margin取较大的

44.塌陷问题:  子级加上了外边距导致父级往下移动了

                  解决: 1 子级不加margin   父级加内边距

                            2 父级加   overflow:hidden

                              3 父级 加边框 

45。行内元素的垂直位置        line-height  和28文字那点一样

46.  圆角效果     头像啥的用

                border-radious   也是顺时针转       

                                头像 : 正方形 前提  然后 值写    50%

                                 胶囊 :  高度写成盒子高度的一半

先写到这里   2025.5.18   过几天学完学透彻再来再来

                                

 

  

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

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

相关文章

tomcat查看状态页及调优信息

准备工作 先准备一台已经安装好tomcat的虚拟机&#xff0c;tomcat默认是状态页是默认被禁用的 1.添加授权用户 vim /usr/local/tomcat/conf/tomcat-users.xml22 <role rolename"manager-gui"/>23 <user username"admin" password"tomcat&q…

.NET NativeAOT 指南

目录 1. 引言 2. 什么是 .NET NativeAOT&#xff1f; 2.1 NativeAOT 的定义 2.2 NativeAOT 与传统 JIT 的对比 2.3 NativeAOT 的适用场景 3. NativeAOT 的核心优势 3.1 性能提升 3.2 简化部署 3.3 更小的应用体积 3.4 知识产权保护 4. NativeAOT 的基本用法 4.1 环境…

产品周围的几面墙

不能把排序&#xff0c;当单选题做。 2025年的杭州咖啡馆&#xff0c;味道最浓的不是咖啡&#xff0c;是聊各种项目和创业的卷味。 在过去几年&#xff0c;聊项目的也不少&#xff0c;那时候带着更加浓烈的自信和松弛感&#xff0c;不过今年略带几分忐忑和试探的口吻。 看到网…

例举3种强制类型转换和2种隐式

1. 强制类型转换 强制类型转换是指程序员显式地将一个数据类型的值转换为另一种数据类型。这种转换通常是通过使用特定的函数或运算符来完成的。 常用的强制类型转换方法&#xff1a; 使用Number()函数 let value "123"; let num Number(value); // 强制转换为数字…

UI-TARS本地部署

UI-TARS本地部署 UI-TARS本地部署 UI-TARS 论文&#xff08;arXiv&#xff09; UI-TARS 官方仓库&#xff1a;包含部署指南、模型下载链接及示例代码。 UI-TARS-Desktop 客户端&#xff1a;支持本地桌面应用的交互控制。 模型部署框架&#xff1a;vLLM本地部署 1.下载项目…

新电脑软件配置三 pycharm

快捷键放大和缩小字体 按住ctrl鼠标滚轮向上 缩小同理

华为OD机试真题——考勤信息(2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现

2025 A卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式; 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析; 本文收录于专栏:《2025华为OD真题目录+全流程解析+备考攻略+经验分…

Python语法规则:缩进、代码块与空格规范

在众多编程语言中&#xff0c;Python 以其“简洁而优雅”的语法风格独树一帜。然而&#xff0c;这种“简洁”并非轻率随意&#xff0c;而是建立在一套严谨的语法哲学之上。缩进、代码块与空格规范&#xff0c;不仅是 Python 的语法基础&#xff0c;更是它传达代码意图、塑造开发…

Baklib智能知识管理增效方案

Baklib智能知识管理核心优势 基于Baklib构建的知识中台&#xff0c;通过多维度结构化处理与智能语义引擎&#xff0c;重构了企业知识管理范式。该系统支持文档、表格、音视频等多格式内容聚合&#xff0c;利用自然语言处理技术实现知识资产的自动化分类与标签匹配&#xff0c;…

【导航信号模拟器】【MATLAB APP】MATLAB AppDesigner基本使用教程

MATLAB AppDesigner基本使用教程 作者&#xff1a;齐花Guyc(CAUC) 文章目录 MATLAB AppDesigner基本使用教程一、创建项目二、编写回调函数1. 按钮——获取选择文件路径2. 按钮——保存文件路径3. 单选按钮组4. 复选框5. 文本框显示 三、打包APP 一、创建项目 建立空文件夹—…

ImgShrink:摄影暗房里的在线图片压缩工具开发记

我正在参加CodeBuddy「首席试玩官」内容创作大赛&#xff0c;本文所使用的 CodeBuddy 免费下载链接&#xff1a;腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 在一次 CodeBuddy 的项目试玩官活动中&#xff0c;我决定构建一个实用又不失视觉特色的小工具——ImgShrink。它…

利用systemd启动部署在服务器上的web应用

0.背景 系统环境&#xff1a; Ubuntu 22.04 web应用情况&#xff1a; 前后端分类&#xff0c;前端采用react&#xff0c;后端采用fastapi 1.具体配置 1.1 前端配置 开发态运行&#xff08;启动命令是npm run dev&#xff09;,创建systemd服务文件 sudo nano /etc/systemd/…

在vue3中使用Cesium的保姆教程

1. 软件下载与安装 1. node安装 Vue.js 的开发依赖于 Node.js 环境&#xff0c;因此我们首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它允许你在服务器端运行 JavaScript 代码&#xff0c;同时也为前端开发提供了强大的工具支…

基于LabVIEW的双音多频系统设计

目录 1 系统设计概述 双音多频(Dual-Tone Multi-Frequency, DTMF)信号是一种广泛应用于电话系统中的音频信号,通过不同的频率组合表示不同的按键。每个按键对应两个频率,一个低频和一个高频,共同组成独特的信号。在虚拟仪器技术快速发展的背景下,利用LabVIEW等图形化编程…

【笔记】端口转发

echo off :loop ssh -N -L 13306:192.168.0.3:23306 -o ServerAliveInterval60 admin192.168.0.2 timeout /t 5 goto loop 代码功能剖析 1、基础设置&#xff1a; echo off 此命令的作用是让批处理脚本在执行过程中不显示命令行&#xff0c;从而使输出更为简洁。 2、定义循环…

Flink Table SQL

Apache Flink 提供了强大的 Table API 和 SQL 接口&#xff0c;用于统一处理批数据和流数据。它们为开发者提供了类 SQL 的编程方式&#xff0c;简化了复杂的数据处理逻辑&#xff0c;并支持与外部系统集成。 &#x1f9e9; 一、Flink Table & SQL 核心概念 概念描述Table…

【AWS入门】Amazon SageMaker简介

【AWS入门】Amazon SageMaker简介 [AWS Essentials] Brief Introduction to Amazon SageMaker By JacksonML 机器学习(Machine Learning&#xff0c;简称ML) 是当代流行的计算机科学分支技术。通常&#xff0c;人们在本地部署搭建环境&#xff0c;以满足机器学习的要求。 AWS…

解决 Go 构建依赖超时问题:使用 GOPROXY 提升 Docker 构建稳定性

目录 解决 Go 构建依赖超时问题&#xff1a;使用 GOPROXY 提升 Docker 构建稳定性 ✅ 问题背景 ✅ 正确做法&#xff1a;多阶段中在 Go 阶段设置 GOPROXY ✅ 实际收获 &#x1f9ea; 小技巧&#xff1a;验证 GOPROXY 设置是否生效 ✅ 总结 解决 Go 构建依赖超时问题&#x…

【周输入】510周阅读推荐-3

前文 【周输入】510周阅读推荐-1-CSDN博客 【周输入】510周阅读推荐-2-CSDN博客 本次推荐 目录 前文 本次推荐 算法技术 模型产品 算法技术 vLLM和DeepSpeed部署模型的优缺点_vllm deepspeed-CSDN博客 优点缺点总结vLLM 适用于推理 优化内存管理 高效并行化 功能单…

Kubernetes控制平面组件:Kubelet详解(七):容器网络接口 CNI

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes架构原则和对象设计&#xff08;三&#xff09;Kubernetes控…