![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTHL+CSS
文章平均质量分 73
html+css部分主要是以基础的知识点讲解为主,包括html5和css3的neir
小姚学前端
我是小姚学前端,我热衷于前端开发,并在 CSDN 上分享我的知识和经验,旨在帮助其他人学习和了解前端技术的魅力。作为一名热衷于前端的程序员,我对 HTML、CSS 和 JavaScript 等核心技术有着坚实的掌握。我在设计响应式网页、构建用户友好的界面以及优化网站性能方面有着丰富的经验。我的 CSDN 博客是我与他人分享前端开发教程、技术文章和个人见解的地方。如果你对前端开发、Web 技术和创新的解决方案感兴趣,或者你有任何对我博客中的文章或项目的问题和建议,我都非常期待与你进行交流。谢谢你浏览我的 CSDN 博客,希望我的文章对你有所帮助!
展开
-
前端必知:11.css选择器的使用以及选择器的优先级
E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容,m可以是E的。E>M {css内容} 通过E选择器找到 E选择器的子级M选择器,设置css内容。E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素,并。a的伪类,伪类是css系统创建好的内部的类,用来对标签的某个时机设置样式。如果多种选择器所表达的css内容是相同的,则可以把他们写成群组选择器。假设后面的数字是权重的值,那么在比较的时候,只需把选择器的值。子级,也可以是E的后代中的某一个选择器。原创 2023-07-10 19:58:00 · 2161 阅读 · 1 评论 -
前端必知:15vertical-align使行元素在垂直方向的对齐
和dispiay:inline-block 就可以。vertical-align 只能使用在行元素或者内联元素(inline-block)vertical-align:middle 就可以实现居中效果。2.如果父元素高度固定,不适用子元素撑开高度,则可以通过 添加。baseline 基线对齐 (以x的小写字母的底边线是基线)1.如果父元素的高度由其中一个子元素撑开,那么给其他元素设置。vertical-align 也可以解决img标签的缝隙。一个自定义标签,该标签的高度为父元素的高度,然后设置。原创 2023-07-19 20:08:15 · 173 阅读 · 0 评论 -
前端必知:21.弹性布局的认识及使用
弹性布局(Flexbox)是一种用于创建灵活的、自适应的网页布局的CSS模块。它提供了一种在容器和其中的元素之间建立弹性关系的方式,使得元素能够自动调整其大小、顺序和对齐方式,以适应不同的屏幕尺寸和设备。原创 2023-07-23 17:15:32 · 954 阅读 · 0 评论 -
前端必知:27.2D形变以及过渡动画
通过使用2D形变和过渡动画,开发者可以为网页添加各种交互和动态效果,为用户提供更好的体验和视觉吸引力。这些技术通常通过CSS来实现,提供了一种简单和高效的方式来创建动画效果,而不需要使用复杂的JavaScript动画库。原创 2023-07-25 13:32:24 · 122 阅读 · 0 评论 -
前端必知:12.盒子模型的探索与应用
盒子模型是前端开发中一个基础且重要的概念,它描述了一个网页元素在页面布局中的尺寸、边距和边框等属性。了解盒子模型的概念和原理对于掌握页面布局和样式调整是至关重要的。在盒子模型中,每个元素被视为一个矩形的盒子,包含了内容区域、内边距、边框和外边距这四个部分。这些部分相互嵌套,决定了盒子在页面中的尺寸和位置。在实际应用中,可以使用盒子模型进行元素布局和样式调整。原创 2023-07-12 20:20:41 · 606 阅读 · 1 评论 -
前端必知:10.dispiay属性
属性值,可以用于控制元素在页面布局中的显示方式。你可以根据需要灵活地使用这些属性来实现所需的布局效果。属性在前端开发中十分重要,它用于控制元素的布局和显示方式。原创 2023-07-09 17:15:06 · 869 阅读 · 3 评论 -
前端必知:20.相对单位及viewport视窗的认知
用户通过视窗可以看到浏览器渲染的内容常用于移动端的布局相对单位和viewport视窗在前端开发中扮演着非常重要的角色。它们为我们提供了灵活性和适应性,使我们能够创建响应式的网页和应用程序。相对单位,如em和rem,使我们能够根据父元素或根元素的字体大小来定义元素的大小。这种相对性非常有用,特别是在构建可扩展和可维护的布局时。例如,我们可以设置元素的宽度为50%或2em,而不必关心具体的像素值。这使得布局更具弹性,可以适应不同屏幕尺寸和设备。而vw和vh单位则是根据视窗的宽度和高度来定义元素的大小。原创 2023-07-23 17:07:58 · 234 阅读 · 0 评论 -
前端必知:24.设置圆角和设置阴影效果
设置圆角和设置阴影效果是前端开发中常用的技巧,用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧,我们可以创造出各种独特和吸引人的界面效果。然而,在使用这些样式技巧时,也需要注意不要过度使用,以免影响用户界面的可读性和可用性。原创 2023-07-23 18:44:37 · 3555 阅读 · 0 评论 -
前端必知:16居中专题
对于行元素和内联元素,可以通过设置父级元素的 text-align 属性为"center"来实现水平居中。对于行元素和内联元素,可以通过设置 vertical-align 属性为"middle"来实现垂直居中。平移子元素的一半距离(自身宽度和高度的一半),从而实现垂直和水平居中的效果。这种方法适用于具有固定宽度的块级元素,通过设置左右的边距为"auto"来实现水平居中。行元素和内联元素的水平居中,使用 text-align: center;父元素宽高固定,子元素绝对定位,可以实现水平绝对居中。原创 2023-07-19 20:14:48 · 27 阅读 · 0 评论 -
前端必知:23.属性/伪类/伪元素/结构伪类选择器
通过灵活地运用属性选择器、伪类选择器、伪元素和结构伪类选择器,我们可以实现各种样式的定位和样式的特殊效果。熟练使用这些选择器可以提高开发效率,并帮助我们创造出更加优雅和强大的用户界面。原创 2023-07-23 18:27:25 · 216 阅读 · 0 评论 -
前端必知:28,3D形变及关键帧动画
3D形变和关键帧动画在前端开发中扮演着重要的角色,能够为用户体验的提升、视觉效果的创造、交互性的增强以及品牌形象的塑造等方面带来积极的影响。这些技术的应用能够使前端界面更加生动有趣,同时也为前端开发者提供了更多的创作和展示空间原创 2023-07-25 17:13:39 · 456 阅读 · 0 评论 -
前端必知:14.定位元素的认识及使用
相对定位相对于元素初始位置进行定位,绝对定位和固定定位相对于祖先元素或视口进行定位,而粘性定位是一种特殊的相对和固定定位的组合。在使用定位时,建议根据具体需求选择合适的定位方式,并进行必要的调整与配合,以达到预期的布局效果。常见的定位方式有相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)。4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位。4.相对定位的元素,天然提升层级,比没有定位的元素层级高。原创 2023-07-16 22:30:46 · 655 阅读 · 2 评论 -
前端必知:17.表格
table 表示表格。原创 2023-07-19 20:18:27 · 160 阅读 · 0 评论 -
前端必知:18.form表单的认识与使用
则会在当前页面找到 id="abc"的input ,并且选中该input。不同的是disabled 它里面的值不能提交的使用,readonly。他的子级必须是option标签,每一个option标签表示一个选项。get: get请求可以把数据拼接到接口的url上,缺点是不安全。post:post请求,在post提交的数据信息中不会看到提交的。数据结构,相比较get是安全的,并且提交的数据较大。行标签,常和input 搭配使用,表示input标题。通过css的reaize属性,设置 拖拽的方向。原创 2023-07-19 20:23:44 · 213 阅读 · 1 评论 -
前端必知:26.渐变效果
通过合理运用渐变效果,可以为网页增加视觉吸引力,创建漂亮的过渡和效果,提升用户体验。要掌握渐变效果,需要熟悉CSS的渐变属性,并理解不同类型的渐变如何应用于不同的元素。原创 2023-07-23 19:18:01 · 163 阅读 · 0 评论 -
前端必知:25.设置背景/以及背景蒙版(09进阶)
设置背景和背景蒙版是前端开发中常用的技巧,可以为网页和应用程序增加视觉上的吸引力和个性化。通过灵活地运用背景图片、渐变、背景蒙版等属性和效果,我们可以创造出独特且令人印象深刻的用户界面。然而,需要注意在使用背景蒙版时要注意平衡透明度和可读性,确保内容仍然易于阅读和使用。原创 2023-07-23 19:01:19 · 871 阅读 · 0 评论 -
前端必知:19.H5新标签
学习HTML5的新标签对于前端开发者来说非常重要,因为它们提供了更好的语义化和结构化的网页内容。以下是关于学习H5新标签的一些总结要点:了解新标签的语义:HTML5的新标签主要用于增强网页的结构和表达意义。在学习新标签之前,先理解每个标签的语义和用途。这样可以更好地选择适当的标签来描述页面内容。了解浏览器的兼容性:虽然HTML5已成为主流标准,但不同的浏览器对新标签的支持可能有所差异。在使用新标签之前,务必检查各个浏览器的兼容性,并根据需要添加必要的兼容性代码或使用Polyfill来提供支持。原创 2023-07-23 16:53:56 · 779 阅读 · 0 评论 -
前端必知:22.流式布局和媒体查询(附加简单的自适应布局案例)
流式布局是一种在网页设计中常用的布局方式,它的目标是实现在不同屏幕尺寸下内容的自适应和流动性。在流式布局中,元素的大小和位置通过相对单位或百分比来定义,以便根据视窗大小的变化而调整。流式布局的好处是可以适应不同设备和屏幕尺寸,提供更好的用户体验。它可以使网页内容自动适应于不同屏幕宽度,避免了在小屏幕设备上出现滚动条或内容被截断的问题。而且,在大屏幕设备上,流式布局可以确保内容不会显得稀疏而留下大量空白区域。媒体查询是CSS3中的一个特性,它允许我们根据不同的媒体设备和视窗尺寸应用不同的CSS样式。原创 2023-07-23 18:22:33 · 247 阅读 · 0 评论 -
前端必知:13.浮动的使用与清浮动
防止ie低版本具有默认高度height: 0;原创 2023-07-12 20:30:13 · 448 阅读 · 1 评论 -
前端必知:33.css的hack
在前端开发中,CSS hack是一种常用的技巧,用于解决不同浏览器之间对CSS属性、选择器或特性支持的差异。通过使用CSS hack,可以针对特定的浏览器或浏览器版本提供特定的样式规则,以确保在不同浏览器中获得一致的显示效果。原创 2023-07-29 19:18:21 · 6262 阅读 · 0 评论 -
前端必知:29,改变鼠标手势及鼠标手势的应用
在 CSS 中,鼠标手势(Mouse cursor)是指在光标悬停在特定元素上时,鼠标光标的外观样式。它可以通过 CSS 样式属性来定义,使开发者能够控制光标在不同情况下的外观,从而增强用户体验和交互性。原创 2023-07-27 19:42:54 · 2064 阅读 · 0 评论 -
前端必知:36.如何使用bootstrap框架
Bootstrap框架是一个功能强大而易于使用的工具,能够帮助开发者快速构建现代化的网站和应用程序。它提供了响应式设计、预定义样式和组件、浏览器兼容性、定制主题以及集成的JavaScript插件等功能。通过使用Bootstrap,你可以节省大量的开发时间,同时确保你的网站在不同设备上获得出色的显示效果。希望通过本文的介绍,你对Bootstrap框架有了更深入的了解,并能够在你的项目中充分利用它的优势。Bootstrap提供了丰富的预定义样式和组件,使得网站的开发变得轻松。原创 2023-08-02 19:22:24 · 1888 阅读 · 0 评论 -
前端必知:32.多列布局
css3中最新给出的多列布局方案,他是css块元素布局的一个新的扩展。多列布局是一种网页布局方式,可以将内容分为多个列进行展示。在多列布局中,内容可以按照一定的规则被分割为多个列,并在水平方向上进行排列。原创 2023-07-29 19:07:03 · 753 阅读 · 0 评论 -
前端必知:34.网格布局认识与探索
目的是介绍网格布局作为一种强大的CSS布局技术,它提供了灵活和高效的布局结构,能够满足各种复杂布局需求和响应式设计。通过深入讨论网格布局的基本概念、特点和用法,以及与传统布局方法的对比,我们将探究网格布局在现代前端开发中的重要性和应用领域。原创 2023-07-29 20:00:29 · 496 阅读 · 1 评论 -
前端必知:37.sass
Sass(Syntactically Awesome Stylesheets)是一种 CSS 的预处理器,提供了一种扩展和增强 CSS 的方式。Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量(variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。原创 2023-08-05 09:07:53 · 541 阅读 · 0 评论 -
前端必知:30.引入外部字体以及文字阴影
引入外部字体和使用文字阴影是前端开发中的重要知识点之一,下面我将介绍它们的意义和用法。原创 2023-07-27 20:03:40 · 2271 阅读 · 2 评论 -
前端必知:38.对BFC的认识与理解
BFC(Block Formatting Context)是 CSS 中的一个概念,用于描述页面中块级元素如何布局和相互影响的规则和上下文。BFC 是页面渲染时创建的一个独立的布局环境,它决定了块级元素在其内部如何排列、定位和相互作用。原创 2023-08-06 17:53:26 · 111 阅读 · 0 评论 -
前端必知:35.修改input默认效果
二.修改方法 。原创 2023-08-01 13:13:34 · 6529 阅读 · 1 评论 -
前端必知:31. animate动画库 及 iconfont矢量库的使用
网站首页在animate动画库我们能看到丰富多样的动画效果,对于工作和学习而言有很大的参考价值,并且他的使用方法也很简便。具体来说,Animate提供了一组预定义的动画效果和转换功能,您可以轻松地使用这些效果来为网页元素添加动画。您可以通过指定动画名称、持续时间、延迟、重复次数等参数来定制和控制动画的行为。Animate支持各种常见的动画效果,例如淡入淡出、移动、旋转、缩放、颜色变化等。您还可以创建复杂的动画序列,通过链式调用不同的动画效果来实现更多样化和连贯的动画效果。原创 2023-07-27 20:28:02 · 2032 阅读 · 0 评论 -
前端必知:2.html中常用的基础标签-块
HTML是网页开发的基础语言,使用标签来定义网页的结构和内容。本文将介绍一些常见的块级元素标签。原创 2023-07-04 22:39:08 · 691 阅读 · 1 评论 -
前端必知:9.背景的设置
这些是常用的背景设置属性,可以用于定制网页的背景样式。你可以根据需求使用这些属性来创建各种各样的背景效果,包括颜色、图片、重复方式、位置、尺寸、滚动效果以及其他高级特性如模糊效果等。在前端开发中,背景的设置是一个重要的方面,可以通过 CSS 来实现。原创 2023-07-09 17:12:03 · 1994 阅读 · 1 评论 -
前端必知:8.字体的设置
这些是一些常用的CSS字体设置属性,可以帮助你自定义字体的外观和样式。你可以根据需求使用这些属性来创建所需的字体效果。当涉及到CSS字体设置时,有很多属性可以用来调整字体的外观和样式。原创 2023-07-09 17:08:30 · 2203 阅读 · 1 评论 -
前端必知:7.overflow 属性
属性用于控制溢出内容的显示方式。它有多个可选值,用于不同的情况和需求。例如,如果你希望内容溢出时自动显示滚动条以便查看,可以使用。,以控制其内部内容的显示方式。可以根据实际需求选择适当的。如果你希望内容溢出时隐藏,可以使用。当元素内容超出其容器大小时,CSS。这些属性通常用于容器元素,例如。原创 2023-07-09 17:04:49 · 2647 阅读 · 3 评论 -
前端必知:6.css文本操作 (100个文本操作)
CSS文本操作是前端开发中的一个关键领域。通过运用各种文本样式和排版技巧,我们可以为网页中的文本内容增添视觉效果和良好的用户体验。掌握CSS文本操作的知识,将为我们打开一扇全新的创作大门,使我们能够轻松地调整字体样式、颜色、对齐方式、装饰效果等,以及处理文字溢出和换行等问题。在本篇文章中,我们将深入了解六种重要的CSS文本操作技术,帮助您提升前端开发技能,并创建出令人印象深刻的网页文本效果。让我们一起来探索这些必知的CSS文本操作技巧,为您的前端项目注入新的创意和魅力。原创 2023-07-09 16:56:03 · 989 阅读 · 1 评论 -
前端必知:5.css样式表及css的引入方式
盒模型(Box Model):通过CSS样式表可以控制元素的盒模型,包括边距(margin)、边框(border)、填充(padding)和尺寸(width、height)。响应式设计(Responsive Design):通过使用CSS媒体查询(Media Queries),可以根据设备的屏幕大小和特性来应用不同的样式,以实现响应式设计,使网页在不同的设备上呈现最佳的显示效果。通过CSS样式表,可以定义网页元素的外观、布局和动画效果,从而实现对网页的美化和样式控制。等,用于实现不同的布局方案和元素定位。原创 2023-07-09 16:41:12 · 95 阅读 · 1 评论 -
前端必知:4.emmet语法
Emmet是一种快速书写HTML和CSS代码的工具,它使用简洁而强大的语法,可以大大提高前端开发者的编码效率。Emmet提供了一种类似缩写的方式来生成HTML和CSS代码,减少了重复输入和手动编写的工作量。这只是Emmet语法的一小部分,它提供了更多强大的功能,例如自动生成样式、快速生成内容占位符等。使用Emmet可以大幅提高前端开发的编码速度和效率,减少重复性劳动。符号表示兄弟关系,用于在同一级别上创建兄弟元素。表示创建一个无序列表,其中包含一个列表项。表示创建一个无序列表,其中有三个列表项。原创 2023-07-05 22:30:48 · 127 阅读 · 0 评论 -
前端必知:1.探索HTML中 <head> 标签的作用和常用元素
“在这篇文章中,我们将深入解析HTML头部文件,这是构成网页结构的重要组成部分。我们将一起探索 、 标签的作用以及如何优化头部文件以提升网页性能和SEO。无论您是初学者还是经验丰富的前端开发者,本文将为您提供实用的技巧和最佳实践。通过理解字符编码、正确使用描述和关键词标签、引入外部资源等,您将能够创建出更优雅、高效的网页。点击阅读全文,了解如何使用HTML头部文件来优化您的网页并提升用户体验。”当然,您可以根据您的具体文章内容和风格进行修改和调整。希望这对您有帮助!原创 2023-07-04 22:27:11 · 609 阅读 · 0 评论 -
前端必知:3.html中常用的基础标签-行
在HTML中,常用的基础标签中的行(inline)标签是用于包裹文本或其他行内元素的标签。这些标签不会独占一行,而是根据文档流的布局在同一行显示,不会自动换行。: 用于包裹文本或其他行内元素,并进行样式设置。: 用于创建超链接。: 用于表示强调的重要文本。通常以加粗显示。: 用于表示强调的文本。通常以斜体显示。: 用于表示计算机代码或程序代码。: 用于插入图像。: 用于创建用户输入字段,如文本框、复选框等。原创 2023-07-05 22:10:05 · 3095 阅读 · 0 评论