首页
学习
活动
专区
圈层
工具
发布

我的前端学习历程

网页内容 减少http请求次数 避免页面跳转 减少DOM元素数量 避免404 服务器 Gzip压缩传输文件 避免空的图片src Cookie 减少Cookie大小 CSS 将样式表置顶 避免CSS...表达式 Javascript 将脚本置底 使用外部Javascirpt和CSS文件 精简Javascript和CSS 去除重复脚本 减少DOM访问 网页内容 减少http请求次数   80%的响应时间花在下载网页内容...CSS 将样式表置顶   经样式表(css)放在网页的HEAD中会让网页显得加载速度更快,因为这样做可以使浏览器逐步加载已将下载的网页内容。...如果将样式表放在底部,浏览器会拒绝渲染已经下载的网页,因为大多数浏览器在实现时都努力避免重绘,样式表中的内容是绘制网页的关键信息,没有下载下来之前只好对不起观众了。...使用外部Javascirpt和CSS文件   使用外部Javascript和CSS文件可以使这些文件被浏览器缓存,从而在不同的请求内容之间重用。

1.5K60

【Web前端】HTML样式 - CSS

CSS 可以通过以下三种方式应用于 HTML: 内联样式 - 直接在 HTML 元素中使用 ​​style​​ 属性。...内部样式表 - 在 HTML 文档的 ​​​​ 部分使用 ​​​​ 元素来包含 CSS。 外部样式表 - 通过引用外部的 CSS 文件来应用样式。...在这三种方法中,推荐使用外部样式表,因为它有助于更好地组织和维护 CSS 代码。 2.1 内联样式 当需要将特殊样式应用于个别元素时,可以使用内联样式。...2.3 外部样式表 外部样式表将 CSS 代码放在一个单独的 ​​.css​​ 文件中,通过 ​​​​​ 标签将其引入到 HTML 文档中。...在页面中添加一个产品的名称、描述和价格。 使用外部样式表,设置产品图片的宽度和边框样式。 示例代码结构: <!

59000
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Apriso 开发葵花宝典之四 CSS 篇

    在Apriso Process builder开发过程中,在HTML选项卡中,CSS样式应用于每个Operation实例,在CSS选项卡中,同一个操作的所有实例只应用一次CSS样式。...可以有以下几种方式引入CSS: 1、外部样式表(External Style Sheet)写在单独的文件(....此外,每个样式都应该缩进 3、语句结束后使用分号 4、首先编写html代码,首先编写整个HTML模型可以让您将整个视图可视化,并允许您以更全面,自上而下的方式考虑CSS 5、自上而下的结构组织样式表,按照...HTML代码中出现的样式编写样式,从头部到主内容再到页脚 6、如果样式表中的元素共享属性,建议将它们组合在同一个选择器中,如 H1, h2 { Color: red; } 7、最小化选择器,尽量不要超过...要添加注释,只需在注释后面添加/*,然后添加*/关闭注释 13、使用外部样式表文件统一管理,引入样式表文件统一保存到Portal目录下指定的文件夹中,便于打包发布

    50730

    掌握CSS引入方式:优化网页样式加载与性能

    在将CSS应用于网页时,有三种主要的引入方式: 内联样式(Inline Styles) :将CSS样式直接嵌入HTML元素的style属性中。...分离关注点:使用外部样式表可以将HTML结构与样式分离,使HTML更专注于内容,而CSS更专注于外观。...如何使用外部样式表 使用外部样式表非常简单,只需遵循以下步骤: 创建CSS文件:首先,创建一个新的.css文件,例如styles.css。... Click Me 这样,您就成功地将外部样式表应用于HTML文档。...总结 选择正确的CSS引入方式对于Web开发至关重要。外部样式表是最常用的方式,因为它有助于提高代码的可维护性和性能。通过将样式与内容分离,您可以更轻松地管理和更新网站的外观。

    74120

    前端面试题

    如要显示图片,请使用html插入到页面中。 最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。 隐藏掉不必要的内容。...()方法因为它被弃用了同时也会带来很多问题 事件注册到document上 使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理 新的.on()方法其实就是模拟...$.extend(obj);是为了扩展jquery本身,为类添加新的方法。 $.fn.extend(obj);给JQUERY对象添加方法。...+方法名 $.fn.extend(obj);对prototype进行扩展,为jquery类添加成员函数,jquery类的实例可以使用这个成员函数。...实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

    2K10

    全栈之前端 | 1.CSS3必备基础知识学习

    背景:初期由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难...CSS 有何特点? 描述: CSS(层叠样式表)具有以下特点: 分离内容和样式:CSS将网页的内容和样式分离开来,使得网页的结构更加清晰,易于维护和修改。...掌握语法规则:学习CSS的语法规则,了解如何使用选择器来选择HTML元素,并为其添加样式。了解CSS属性和值的用法,以及如何使用样式表来组织和管理样式。 实践练习:通过实际的练习来巩固所学知识。...:center; } 3.外部样式表 外部样式表则是将所有样式定义在一个独立的CSS文件中,并通过 标签将其引入到HTML文档中, 当样式需要被应用到很多页面的时候... 温馨提示:多重样式将层叠为一个样式表允许以多种方式规定样式信息,样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中, 甚至可以在同一个

    45730

    浏览器渲染页面与DOM相关常见的面试题以及问题

    中的对象,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签,这时,浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源,这些资源的地址都要经历一个和HTML读取类似的过程...2.CSS Rule Tree:浏览器将CSS解析成树形的数据结构,构建CSSOM tree,生成页面的样式表。  ...> js添加async属性之后,script加载的外部文件成为了异步加载,这时相当于它于原本的html解析过程同步进行。...另外,如果它要输出动态的dom节点,就无法保证节点的位置,因为它添加的节点,是在html已解析的节点下顺序添加的。...="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"> 我是内容

    1.4K30

    Web专题分享

    html> 外部样式表 内部样式表中定义的样式,只能在当前文件中使用,如果需要在多个文件中都想用到同一个样式,而不需要来回复制的情况下,可以在HTML 文件外创建... html> 3、样式优先级问题 当采用多种方式对同一个元素同一个样式定义了不同的效果时,优先级 行内样式 > 内部样式表 = 外部样式表 内部样式表和外部样式表,按照引入顺序有不同的优先级...引入方式优先级行内样式 > 内部样式表 = 外部样式表,其中内部样式表和外部样式表,按照引入顺序有不同的优先级,后引入的样式会覆盖先引入的样式。...完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。...JavaScript 被设计为向 HTML 页面增加交互性,创建动态更新的内容,控制多媒体,制作图像动画,还有很多。

    2.9K20

    前端语言串讲 | 青训营笔记

    HTML(Hypertext Markup Language)是用来描述文档结构和语义的标记语言。通过使用一系列的标签和属性,可以将页面划分成不同的区域,并为这些区域添加文本、图片、链接等内容。...HTML 定义了网页的结构和内容,CSS 帮助我们实现网页的外观和样式,而 JavaScript 则负责为网页添加动态交互和行为。 HTML HTML是一种标记语言,用于创建网页的结构和内容。...与HTML结合使用,CSS可以更好地隔离内容和样式,提高代码的可读性和可维护性,同时也为用户提供了更好的视觉体验。...CSS 的运行方式 与 HTML 类似,浏览器也会解析 HTML 文件中的 CSS 样式表,并将其应用于已经解析的 HTML 元素上。...JavaScript 的运行方式 当浏览器解析完 HTML 文件和 CSS 样式表后,它会执行 HTML 中嵌入的 JavaScript 代码,或引用外部 JavaScript 文件。

    33710

    【Web世界探险家】CSS美学(一)

    如今大多数网页都是遵循 Web 标准开发的,即用 HTML 编写网页结构和内容,而相关版面、文本或图片的显示样式都是使用 CSS 控制。...CSS 语法的特点: CSS 样式中的选择器严格区分大小写,而声明不区分大小写,按照书写习惯一般将选择器、声明都采用小写的方式 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了便于添加新的样式最好保留...3.3 外链式 外链式也叫链入式,是将所有的样式放在一个多个以 .css 为扩展名的外部样式表文件中,通过 标签将外部样式表文件链接到 HTML 文档中,其基本语法格式如下: css ,表示链接的外部文件的 CSS 样式表。...CSS 基础选择器 要想将 CSS 样式表应用于特定的 HTML 标签,首先需要找到该目标元素。

    21610

    h5新功能data-*,好好利用,还能做数据双向绑定

    标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而获取其CSS属性的方法还是有的。...,然而根据该方法名字也知道其只能获取CSS样式,并无法更改css属性,那么如果想要用js动态更改伪元素属性值的话,该怎么处理呢?...利用内部css样式的高优先级来覆盖外部css 以上实现思路的推荐程度依次递减 利用DOM的data-*属性来更改content的值 data-*是HTML5新增的DOM元素属性,作用大致可以理解为标记...---- 前面的class切换大法可能让人感觉不痛快,这里来个高大上(伪)点的方法: 利用CSSStyleSheet的insertRule方法来添加样式 这部分内容和W3C标准牵连比较多,加上较冷门,没多少人关注...HEAD中添加style标签强制覆盖初始属性 这个方法是利用内部css样式的高优先级来覆盖外部css,好处是简单易理解,实现简单。坏处就是吃相太难看,过于粗暴。

    1.9K40

    Java学习笔记-全栈-web开发-02-css必备基础

    简述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表【.css文件、css区域】中 样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题...外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 样式表解决了html的内容与表现分离 使用样式表极大的提高了工作效率。...导入css的方式 分为内联(写在标签内),内部(写在html文件内),外部(写在html文件外,通过标签导入) 优先级按“就近原则”:内联样式表>内部样式表>外部样式表 4.1 内联样式表...这种方式,样式只适合应用于一个页面 4.3 外部样式表(最重要) 如果想要在多个页面使用同一个样式表,可以使用外部样式表来导入。 在html页面上使用标签来导入外部样式表。...浏览器会从mystyle.css文件中读取样式,并对页面上的html进行修饰。 外部样式表,以css为后缀来保存,可以使用任意文本编辑器对css文件进行编辑。

    2K30

    CSS样式表基础

    层叠样式表:Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。...3.外部 css.css" rel="stylesheet" type="text/css" /> 写在另外一个文件里,然后再HTML中引用。代码重用性最高,精确度最低。...三种方式中内联优先级最高,内嵌和外部谁写在后面谁优先。 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。以下是W3C的选择器举例: ? ? ?...id,每个元素都可以加,id唯一不可以重复,id名可以使用数字和_。...*选择器 *{ color:#C00} *选择器中的样式应用于网页所有内容。 组合选择器: 可以通过组合选择器来增加精确度和减少代码冗余。

    1.4K50

    CSS引入方式

    CSS引入方式 将CSS作用到HTML主要有四种方式,分别为HTML元素添加内联样式、标签嵌入样式、标签引入外部样式、@import导入外部样式。...内联样式比外部样式具有更高的优先级,可以覆盖外部样式。 可以在不更改直接主CSS样式表的情况下更改样式,直接将规则添加到元素。...适合于动态样式,对于每个元素的样式都不同的情况可以直接将样式作用到单个元素。...使用标签可以设定rel属性,当rel为stylesheet时表示将样式表立即应用到文档,为alternate stylesheet时表示为备用样式表,不会立即作用到文档,可以通过JavaScript...此外无论是哪种浏览器,若在中引入的CSS中继续使用@import加载外部CSS,同样会导致顺序加载而不是并行加载,因为浏览器需要先解析引入的CSS发现@import外部CSS后再次引入外部

    2K30

    【CSS3】css开篇基础(1)

    DOCTYPE html> html> /* 通配符选择器将应用于页面中的所有元素 */ * { margin: 0; padding...6.css引入方式 在 CSS 中,有三种主要的方式可以将样式引入到 HTML 文档中:行内样式表、内部样式表和外部样式表。...下面详细介绍每种引入方式: 内部样式表 内部样式表使用 标签将 CSS 样式嵌入到 HTML 文档的 部分。...当页面内容变多时,内联样式表可能使 HTML 文件体积过大。 行内样式表 内联样式直接在 HTML 标签的 style 属性中定义,用于为特定的 HTML 元素设置样式。...外部样式表 外部样式表将 CSS 写在一个独立的 .css 文件中,通过 标签将其引入 HTML 文档。这种方式是最常用的,适合多页面网站的样式管理。

    37110
    领券