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

news2025/7/19 17:41:56

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.coloradmin.cn/o/2379214.html

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

相关文章

历史数据分析——宁波海运

运输服务 运输服务板块简介: 运输服务板块主要是为货物与人员流动提供核心服务的企业的集合,涵盖铁路、公路、航空、海运、物流等细分领域。该板块具有强周期属性,与经济复苏、政策调控、供需关系密切关联,尤其是海运领域。有不少国内股市的铁路、公路等相关的上市公司同…

小结:jvm 类加载过程

类加载过程 是Java虚拟机&#xff08;JVM&#xff09;将字节码文件&#xff08;.class文件&#xff09;加载到内存中&#xff0c;并转换为运行时数据结构的过程。这个过程可以分为多个步骤&#xff0c;每个步骤都有其特定的任务和目的。根据你提供的信息&#xff0c;以下是类加…

OpenCv高阶(八)——摄像头调用、摄像头OCR

文章目录 前言一、摄像头调用通用方法1、导入必要的库2、创建摄像头接口 二、摄像头OCR1.引入库2、定义函数&#xff08;1&#xff09;定义显示opencv显示函数&#xff08;2&#xff09;保持宽高比的缩放函数&#xff08;3&#xff09;坐标点排序函数&#xff08;4&#xff09;…

Java开发经验——阿里巴巴编码规范实践解析3

摘要 本文深入解析了阿里巴巴编码规范中关于错误码的制定与管理原则&#xff0c;强调错误码应便于快速溯源和沟通标准化&#xff0c;避免过于复杂。介绍了错误码的命名与设计示例&#xff0c;推荐采用模块前缀、错误类型码和业务编号的结构。同时&#xff0c;探讨了项目错误信…

MySQL——6、内置函数

内置函数 1、日期函数2、字符串函数3、数学函数4、其他函数 1、日期函数 1.1、获取当前日期&#xff1a; 1.2、获取当前时间&#xff1a; 1.3、获取当前时间戳&#xff1a; 1.4、获取当前日期时间&#xff1a; 1.5、提取出日期&#xff1a; 1.6、给日期添加天数或时间…

低延迟与高性能的技术优势解析:SmartPlayer VS VLC Media Player

在实时视频流的应用中&#xff0c;RTSP&#xff08;Real-Time Streaming Protocol&#xff09;播放器扮演着至关重要的角色&#xff0c;尤其是在视频监控、远程医疗、直播等高实时性需求的场景中。随着行业需求的不断升级&#xff0c;对播放器的低延迟、稳定性、兼容性等方面的…

【交互 / 差分约束】

题目 代码 #include <bits/stdc.h> using namespace std; using ll long long;const int N 10510; const int M 200 * 500 10; int h[N], ne[M], e[M], w[M], idx; ll d[N]; int n, m; bool st[N]; int cnt[N];void add(int a, int b, int c) {w[idx] c, e[idx] b…

宝塔面板部署前后端项目SpringBoot+Vue2

这篇博客主要用来记录宝塔部署前端后端项目的过程。因为宝塔部署有点麻烦&#xff0c;至少在我看来挺麻烦的。我还是喜欢原始的ssh连接服务器进行操作。但是公司有项目用到了宝塔&#xff0c;没办法啊&#xff0c;只能摸索记录一下。 我们需要提前准备好后端项目的jar包和前端项…

现代生活健康养生新视角

在科技飞速发展的今天&#xff0c;我们的生活方式发生巨大转变&#xff0c;健康养生也需要新视角。从光线、声音等生活细节入手&#xff0c;能为健康管理开辟新路径。​ 光线与健康密切相关。早晨接触自然光线&#xff0c;可调节生物钟&#xff0c;提升血清素水平&#xff0c;…

多模态大语言模型arxiv论文略读(八十一)

What is the Visual Cognition Gap between Humans and Multimodal LLMs? ➡️ 论文标题&#xff1a;What is the Visual Cognition Gap between Humans and Multimodal LLMs? ➡️ 论文作者&#xff1a;Xu Cao, Bolin Lai, Wenqian Ye, Yunsheng Ma, Joerg Heintz, Jintai …

3.4/Q2,Charls最新文章解读

文章题目&#xff1a;Associations between reversible and potentially reversible cognitive frailty and falls in community-dwelling older adults in China: a longitudinal study DOI&#xff1a;10.1186/s12877-025-05872-2 中文标题&#xff1a;中国社区老年人可逆性和…

通过觅思文档项目实现Obsidian文章浏览器在线访问

觅思文档项目开源地址 觅思文档项目开源地址&#xff1a;https://gitee.com/zmister/MrDoc 觅思文档部署步骤概览 服务器拉取代码&#xff1a; git clone https://gitee.com/zmister/mrdoc-install.git && cd mrdoc-install && chmod x docker-install.sh &a…

5月18总结

一.算法题总结 1. 解题思路&#xff1a;对于这个题&#xff0c;我最开始想到就是二分&#xff0c;但是头痛的是有三个解&#xff0c;如果我在-100到100之间二分&#xff0c;那么只能得出一个解&#xff0c;然后我就想了一下&#xff0c;这个要求精度&#xff0c;那么0.01这么小…

Linux Bash | Capture Output / Recall

注&#xff1a;本文为 “Linux Bash | Capture Output / Recall” 相关文章合辑。 英文引文&#xff0c;机翻未校。 中文引文&#xff0c;略作重排。 Automatically Capture Output of the Last Command Into a Variable Using Bash 使用 Bash自动将最后一个命令的输出捕获到…

2025/5/18

继续研究一下大佬的RAG项目。开始我的碎碎念。 RAG可以分成两部分&#xff1a;一个是问答&#xff0c;一个是数据处理。 问答是人提问&#xff0c;然后查数据库&#xff0c;把查的东西用大模型组织成人话&#xff0c;回答人的提问。 数据处理是把当下知识库里的东西&#xf…

基于Quicker构建从截图到公网图像链接获取的自动化流程

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言预备内容转webp程序PicGo设置Quicker设置视频演示总结互动致谢参考 前言 在自建博…

LeetCode算 法 实 战 - - - 双 指 针 与 移 除 元 素、快 慢 指 针 与 删 除 有 序 数 组 中 的 重 复 项

LeetCode算 法 实 战 - - - 双 指 针 与 移 除 元 素、快 慢 指 针 与 删 除 有 序 数 组 中 的 重 复 项 第 一 题 - - - 移 除 元 素方 法 一 - - - 双 重 循 环方 法 二 - - - 双 指 针方 法 三 - - - 相 向 双 指 针&#xff08;面 对 面 移 动&#xff09; 第 二 题 - - -…

uniapp自定义日历计划写法(vue2)

文章目录 uniapp自定义日历计划写法(vue2)1、效果2、实现源码前言:我们有时候需要实现的日历找不到相应的插件的时候,往往需要手动去写一个日历,以下就是我遇到这样的问题时,手搓出来的一个解决方案,希望可以帮助到更多的人。创作不易,请多多支持uniapp自定义日历计划写…

Java IO框架

I/O框架 流 流的分类&#xff1a; 按方向&#xff1a; 输入流&#xff1a;将存储设备的内容读入到内存中 输出流&#xff1a;将内存的内容写入到存储设备中 按单位&#xff1a; 字节流&#xff1a;以字节为单位&#xff0c;可以读取所有数据 字符流&#xff1a;以字符为单…

数据库2——查询

查询 学习内容学习感受 学习内容 一、实验目的与要求&#xff1a; 1、掌握SQL单表及多表之间的查询 2、掌握统计及分组函数 二、实验内容&#xff1a; 1.简单查询 ① 从fruits表中检索s_id为100的供货商所供货的水果名和价格 源码&#xff1a; SELECT f_name, f_price FROM…