移动 Web 开发需注意两点 移动端设备受屏幕尺寸限制 移动端设备受屏幕尺寸限制,操作的局限性比较大,所以要注意页面的结构不能过于复杂,要提炼出该网站最核心的功能,并简洁清晰地呈现出来。...在屏幕的大小相同的情况下,如果屏幕的分辨率低(如640×480),则屏幕上显示的像素少,单个像素点比较大,看起来会有种颗粒感。...CSS 像素 在不同屏幕上,CSS 像素呈现的物理尺寸一致,但 CSS 像素对应的物理像素具数不同。...设备像素比 = 物理像素 / CSS像素 在不同的屏幕上,CSS 像素所呈现的物理尺寸是一致的,而不同的是 CSS 像素所对应的物理像素具数是不一致的。...浏览器在显示网页时,需要将 CSS 像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示,由浏览器决定:默认 PC 端,一个 CSS 像素 = 一个物理像素 1.3.4 单位 em:相对单位
第一种:在head部分加入css" href=""/>引入外部的CSS文件。这种方法可以说是现在占统治地位的引入方法。...如同IE与浏览器。这也是最能体现CSS特点的方法,最能体现DIV+CSS中的内容与显示分离的思想,也最易改版维护,代码看起来也是最美观的一种。...或者访问量较大的企业网站的首页。与第一种方法比起来,优点突出,弊端也明显。优点:速度 快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。...由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。 使用DOM控制样式时的差别 。...1.特性:既呈现inline的特性,不占据一整行,宽度由内容宽度决定,又呈现block的特性,可设置宽高,内外边距; 2、去除缝隙:真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距
简单的html结构: 在form表单中,get方式和post方式提交数据的区别是什么?如何判断在实际开发中的应用?...在HTML当中引用CSS的三种使用方式有哪些?它们之间的区别是什么?...在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。...它们之间的意义是可以根据不同的模式显示在浏览器当中,DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 10.行内元素有哪些?块级元素有哪些?空元素有哪些?...2)在没有CSS的情况下,页面也能呈现出很好地清晰内容结构。 3)便于团队开发和维护,语义化更加具有可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。 4)支持多终端设备的浏览器渲染。
包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号(#) 2) Class:CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。...Q12、CSS盒模型 所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。...更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。 二、中级CSS面试题 Q16、CSS中的伪元素是什么?...第二个参数上会告诉浏览器自动确定左右边距,方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置0。 Q24. overflow属性在CSS中被用于什么?...标签已呈现,只是在页面上看不到。 Q28.CSS的特异性是什么意思? 如果有两条或两条以上指向同一元素的冲突 CSS 规则,则浏览器将遵循一些原则来确定哪一条是最具体的,并因此胜出。
有哪些常见的浏览器内核? 浏览器内核又称浏览器渲染引擎,是浏览器的最核心部分。负责解析网页语法并渲染网页。...理论上来说,所有的HTML元素,我们都能实现相同的事情: 标签语义化的好处 方便代码维护; 减少让开发者之间的沟通成本; 能让语音合成工具正确识别网页元素的用途,以便作出正确的反应; ...年初,W3C组织才专门成立了CSS的工作组,1998年5月发布了CSS2; 在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签; 从CSS3开始,所有的CSS分成了不同的模块...@import 可以在style元素或者CSS文件中使用@import导入其他的CSS文件 2.4....browserlist 工具中我们再详细说明; 目前需要掌握的CSS属性 要想深刻理解所有常用CSS属性,最好先学会以下几个最基础最常用的CSS属性 font-size :文字大小 color :前景色
IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage 8、线程与进程的区别 a. 一个程序至少有一个进程,一个进程至少有一个线程 b. ...压缩或合并JS、CSS、image等前端资源 22、浏览器的内核分别是什么?...24、前端页面有哪三层构成,分别是什么?作用是什么? a. 结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达。解决了页面“内容是什么”的问题。 b. ...在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 34、你知道多少种Doctype文档类型? ...这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用after伪对象清除浮动 该方法只适用于非IE浏览器。
移动 Web 开发需注意两点 移动端设备受屏幕尺寸限制 移动端设备受屏幕尺寸限制,操作的局限性比较大,所以要注意页面的结构不能过于复杂,要提炼出该网站最核心的功能,并简洁清晰地呈现出来。...在屏幕的大小相同的情况下,如果屏幕的分辨率低(如640×480),则屏幕上显示的像素少,单个像素点比较大,看起来会有种颗粒感。...CSS 像素 在不同屏幕上,CSS 像素呈现的物理尺寸一致,但 CSS 像素对应的物理像素具数不同。...像素 在不同的屏幕上,CSS 像素所呈现的物理尺寸是一致的,而不同的是 CSS 像素所对应的物理像素具数是不一致的。...浏览器在显示网页时,需要将 CSS 像素转换为物理像素然后再呈现 一个css像素最终由几个物理像素显示,由浏览器决定:默认 PC 端,一个 CSS 像素 = 一个物理像素 1.3.4 单位 em
它通过flex容器和flex项目的组合来实现强大的布局能力。其优势包括简单易用、自适应性强、对齐和分布控制灵活等。 10.解释CSS中的媒体查询是什么,它的作用是什么?...答案:事件冒泡是指当一个事件在DOM树中触发时,它会从最内层的元素开始向外传播至最外层的元素。事件捕获是指当一个事件在DOM树中触发时,它会从最外层的元素开始向内传播至最内层的元素。 12....Vue.js中的动画系统是如何工作的?请提供一个简单的动画示例。 答案:Vue.js的动画系统通过CSS过渡和动画类实现。通过在元素上添加过渡类或动画类,可以触发相应的过渡效果或动画效果。...通过在父组件中使用provide提供数据,然后在子组件中使用inject注入这些数据。...布局和绘制:浏览器根据渲染树的变化进行布局和绘制,然后将最终的页面呈现给用户。
在设定以上三种边框属性时,既可以进行边框四个方向整体的快捷设置,也可以进行四个方向的专向设置,如border: 2px solid green 或border-top-style: solid、border-left-color...设置盒子背景色属性时,在IE中背景不会延伸到边框区域,但在FF等标准浏览器中,背景颜色可以延伸到边框区域,特别是单边框设置为点线或虚线时能看到效果 。...空白边(margin) 空白边位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。...采用指定空白边正负值的方法可以移动网页中的元素,这是CSS 布局技术中的一个重要方法。 盒模型是有两种标准的,一个是W3C标准模型,一个是IE模型。...当年微软的IE浏览器占据超过80%市场份额的时候,想自己独立制定一套浏览器标准,其中就包括IE的盒模型,但是有很多公司不同意IE的做法,他们遵循的是W3C的标准来定制浏览器,也就造成了现在浏览器不同的CSS
前端的核心技术 这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。...所有新的浏览器都支持 XHTML。 CSS 级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。...4、PUT方法 用于将数据发送到服务器以创建或更新资源,它可以用上传的内容替换目标资源中的所有当前内容。 它会将包含的元素放在所提供的URI下,如果URI指示的是当前资源,则会被改变。...例如,程序设计过程中为了排除语法错误,需要反复进行编译——查错——修改——再编译的循环,集成开发环境就使各步骤之间能够方便快捷地切换,输入源程序后用简单的菜单命令或快捷键启动编译,出现错误后又能立即转到对源程序的修改...打开浏览器调试框(此处以谷歌浏览器举例),我们会看到如图的所有检查项目: 检查界面 其中,Elements为元素检查框,关于文档内容、样式等都可以在进行调试。
解决方法简单的出奇,只要在之间加入一个或者元素就可以了。 介绍一下你对浏览器内核的理解?...浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。...如何处理HTML5新标签的浏览器兼容问题? HTML5是什么: HTML5指的是包括 HTML 、CSS 和 JavaScript 在内的一套技术组合。...3)所有的XML标记都必须合理嵌套 4)所有的属性必须用引号""括起来 5)把所有<和&特殊符号用编码表示 6)给所有属性赋一个值 7)不要在注释内容中使“--” 8)图片必须有说明文字 Doctype...DOCTYPE>声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
"Terminal" 的工作方式与你的 Mac 电脑或 Linux 电脑上的终端完全相同(或者 Windows 上的 cmd )。它在你的Web浏览器中支持终端会话。...在逐行运行模式中,所有给定的命令都必须以 % 字符开始,而在逐块运行模式下,所有命令都必须以 %% 开头。...它需要两个简单的步骤来安装(也有其他方法,但我发现这是最方便的): 第1步:用 pip 来安装它: pip install jupyter_contrib_nbextensions 第2步:安装关联的...考虑一个命名方案,并坚持在所有代码中使用以确保一致性。这样其他人更容易读懂你的代码。 无论你需要什么库,在 Notebooks 开始时导入它们(并在它们旁边添加注释,说明导入它们的目的)。...它提供了以下 5 个选项: 好好试一试每一个选项以更好地理解它,它会改变你呈现你的代码的方式! ▌结语 请注意,这篇文章并没有详尽列出 Jupyter Notebooks 提供的所有功能。
有哪项方式可以对一个DOM设置它的CSS样式? CSS都有哪些选择器? CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内? 超链接访问过后hover样式就不出现的问题是什么?...下一篇:前端HTML+CSS初级面试题汇总二 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?...为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看; 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用; 有利于SEO:和搜索引擎建立良好沟通...要让别人找到你,最简单的办法就是将网站提交(submit)到搜索引擎。...被点击访问过的超链接样式不再具有hover和active了 解决方法是改变CSS属性的排列顺序 关于a标签的四种状态排序问题,有个简单好记的原则,叫做love hate原则 L-V-H-A(link
随着 Web应用程序变得越来越大,CSS变得越来越大,越来越冗长,而且混乱不堪。 在良好的上下文中使用CSS变量,可为我们提供重用和轻松更改重复出现的CSS属性的机制。....my-green-component{ background-color: var(--english-green-color); } 管理CSS变量的最简单方法是将它们声明在:root伪类中...如果查看 Can I Use CSS Variables 那会发现所有主流浏览器都支持CSS变量。 无论是在移动设备还是 PC 上。 现在,让我们看看这些CSS变量的实际作用。...如果有该死的产品要我们更新特定的绿色阴影或将所有按钮设置为红色而不是蓝色,则只需更改该CSS变量的值即可。 我们无需搜索并替换所有出现的该颜色。...扩展 就像CSS中几乎所有东西一样,变量也非常简单易用。
网景公司最初命名为LiveScript,后来在与Sun合作之后将其改名为JavaScript. 1.2JavaScript 是什么 JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言...CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服、化妆 JS脚本语言--编程类语言 实现业务逻辑和页面控制(决定功能),相当于人的各种动作 1.5 浏览器执行JS简介...是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的实现和扩展。...ECMAScript: JavaScript网景公司 JScript微软公司 ECMAScript:ECMAScript规定了JS编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准...输入输出语句 为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下: 方法 说明 归属 alert(msg) 浏览器弹出警示框 浏览器 console.log(msg) 浏览器控制台打印输出信息
除了浏览器主窗口显示的请求的页面外,其他显示的各个部分都属于用户界面。 浏览器引擎:在用户界面和呈现引擎之间传送指令 呈现引擎:负责显示请求的内容。...如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。 网络:用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。...注意:和大部分浏览器不同,Chrome 浏览器每个标签页都分别对应一个呈现引擎实例,每个标签页都是一个独立的进程。...,并将元素呈现出来 # 浏览器如何解析 CSS 选择器 浏览器会“从右往左”解析 CSS 选择器。...三个页面,不同域之间利用 iframe 的 location.hash 传值,相同域之间直接 js 访问来通信 document.domain + iframe: 该方法只能用于二级域名相同的情况下,
如何定义和使用CSS变量 从我们最熟悉的语言JavaScript开始:在JavaScript中定义变量使用vars。...如下: .demo{ background:var(--color); } 管理CSS变量的最简单方法是将它们声明为:root伪类。...浏览器对CSS变量的支持还算不错的。只是IE浏览器不支持。想查看浏览器兼容性的可以点击这里,那么您将看到所有主流浏览器都支持开箱即用的CSS变量。无论是手机还是台式机。...如果有人要求我们更新特定的绿色阴影或使所有按钮变为红色而不是蓝色,那么只需更改该CSS变量的值,就是这样。您不必搜索和替换该颜色的所有实例。...变量的使用提示 像CSS中几乎所有的东西一样,变量也非常简单易用。
介绍一下 CSS就是层叠式样式表(Cascading Style Sheets)的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式,还可以多次定义自己的样式,全部样式按照从外到内...理解选择器的特殊性很重要,特别是在修复bug的时候,但是要尽量避免使用。 CSS选择器的权重与优先规则 CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?...java的三大框架是什么,功能各是什么 三大框架是用来开发web应用程序中使用的。...你知道哪些关于ES6新增的东西 关于ES6新增的东西 如何控制网页在网络传输过程中的数据量? 最显著的方法是启用GZIP压缩。...---- 最后分享一些大神建议的学习方法 最开始可以在慕课网结合着视频进行学习,或者极客网上跟着一整套前端开发的视频学习, 但是视频仅仅只能陪伴我们走到入门阶段,随后需要自己去养成一套学习方法去自主学习