DOCTYPE>声明必须是 HTML 文档的第一行，位于 html 标签之前 HTML5 不基于 SGML，所以不需要引用 DTD。在 HTML5 中HTML5 的离线存储怎么使用，解释一下工作原理 HTML5 的离线存储 9. src 与 href 的区别 区别：src 用于替代这个元素，而 href 用于建立这个标签与外部资源之间的关系 屏幕分辨率而言的 em的值并不是固定的，会继承父级元素的字体大小，代表倍数 rem的值并不是固定的，始终是基于根元素 html> 的，也代表倍数 5. position...基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理 9....为什么要初始化 CSS 样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异 初始化样式会对 SEO 有一定的影响 10
* 写css时要注意z-index的设置，一般来说 会给不同的元素 设置不同的区间，以防元素之间相互覆盖。...* 让页面 在不同的设备上 能正常的使用 * 主要处理的是 屏幕大小的问题(严格来讲 还涉及到 是否有鼠标 是否是读屏软件 是否支持一些样式) * 在具体的方法上 涉及到 设计 和 实现 两方面。...具体的方法： rem：通过html的字体大小 来确定元素大小的办法，我们可以使用rem的单位 进行布局。...布局完成之后 针对不同大小的屏幕 给出不同大小的字号，那么其它元素就会跟着缩放。...3. rem: 使用html{font-size: 20px;}指定rem的单位，然后media根据查询到的设备宽度，给html{font-size: 20px;}字体大小设置不同的值。
} ###使用样式切换方法 要精确控制屏幕上文字的大小，px是最为可靠的单位。可是因为ie的缘故，我们不能依赖px，但可通过另行制作显示打好文字的样式表来解决IE中的这个问题。...未加单位的值表示基于当前文字大小的相对值。 letter-spacing:在屏幕的分辨率较低的情况下，我们不该为大段的文字设置字符间距，否则文字将显得很长。...由于绝对定位元素不属于页面的常规文档流，所以默认的控制层叠方法已经不能满足需要。...注释： 绝对定位的本质：一个绝对定位元素会参照它的定位容器元素来定位，如果没有定位容器元素，则会以html根元素为参照。但是如果祖先元素设置了相对定位，绝对定位的子孙元素就会定位在祖先元素内。...（2）若用浮动实现布局，请确保正确地清除浮动。 （3）为元素应用内边距或边框来避免外边距重叠。 有时候元素之间留出了一条并不希望看到的缝隙，而另一些时候却无法让元素之间保持一段距离。
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？...如果屏幕宽度大于1300像素，则6张图片并排在一行。 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。...如果屏幕宽度在400像素以下，则6张图片分成三行。 mediaqueri.es上面有更多这样的例子。 这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。...[endif]--> 三、不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。...除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？ ?...如果屏幕宽度大于1300像素，则6张图片并排在一行。 ? 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 ?...如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。 ? 如果屏幕宽度在400像素以下，则6张图片分成三行。 ? mediaqueri.es上面有更多这样的例子。...[endif]--> 三、不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。...除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
1.重置button和input元素的背景 添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。...使用伪元素 我经常使用伪元素，它们为我们提供了一种创建伪造元素的方法，主要用于装饰目的，而无需将其添加到HTML中。...之所以会添加空格，是因为浏览器将元素解释为单词，因此在每个元素之间添加了一个字符空间。...字体与交互式HTML元素不兼容 当为整个文档设置字体时，它们不会应用于input、button、select和textarea等元素。它们在默认情况下不会继承，因为浏览器将默认系统字体应用于它们。...压缩或拉伸图像 在CSS中调整图像大小时，如果宽高比与图像的宽度和高度不一致，则可能会对其进行压缩或拉伸。
，自然覆盖） 让后一个absolute元素覆盖前一个absolute元素（不用设z-index，只要在HTML端正确设置元素顺序即可） 什么情况下使用z-index？...static 静态定位 静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。...当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。这常见于有时打开一些网页总会有广告在侧边，太烦人了！...自适应暴露的一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看内容太过拥挤。响应式正是针对这个问题衍生出的概念。...,字体也不能使用绝对大小（px），只能使用相对大小（em）或者高清方案（rem），rem不局限字体大小，而前面的width也可以使用，代替百分百。
在《浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点》提过：避免大规模、复杂的布局布局，就是浏览器计算DOM元素的几何信息的过程：元素大小和在页面中的位置。...每个元素都有一个显式或隐式的大小信息，决定于其CSS属性的设置、或是元素本身内容的大小、抑或是其父元素的大小。在Blink/WebKit内核的浏览器和IE中，这个过程称为布局。...比如，你的页面顶部有一个固定位置的header，而此时屏幕底部有某个区域正在发生绘制的话，整个屏幕都将会被绘制。 注意：在DPI较高的屏幕上，固定定位的元素会自动地被提升到一个它自有的渲染层中。...contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。...cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。等比例缩放图象到垂直和水平两项均填满区域。
要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？...总结：href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。...； 自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化； 流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。...响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。 9.position属性和值的含义 position 属性规定元素的定位类型。...将子元素放置在同一行 为父元素中设置font-size: 0，在子元素上重置正确的font-size 为inline-block元素添加样式float:left 设置子元素margin值为负数 11.你对
随着标题标签的数字增大(h1-h6)，字体大小会逐级减小 在使用标签插入图像时，说法正确的是 （） A. 标签只能设置 src 属性 B. 标签只有 src 属性和 title 属性 C.... 下列选项中，说法正确的是( ) A. input中不同的type属性值可以决定表单的不同类型 B. type为radio的时候代表当前表单为复选框 C. type...块级元素可以通过display属性修改成其他显示模式 下面哪个标签默认情况下不能在同一行显示( ) A. p B. span C. a D. img 以下选项说法正确的是（） A....元素的显示模式可以通过content属性修改 以下选项描述不正确的有哪些（） A. 块级元素独自占据一行，可以设置宽高 B. 块级元素独自占据一行，不能设置宽高 C....设置了绝对定位的行内元素不能设置高度和垂直方向的内外边距 以下选项，哪个是相对定位属性( ) A. position: static; B. position: relative; C. position
触发条件：满足以下条件之一即可触发 BFC：根元素（html> 元素）；浮动元素（float 属性值不为 none 时）；绝对定位元素（position 属性设置为 absolute 或 fixed ...作用及应用场景：解决外边距塌陷问题：在普通的文档流中，当两个相邻的块级元素上下排列，并且都设置了外边距时，它们之间的垂直外边距会发生合并（塌陷），取两者外边距中的较大值。...清除浮动影响：当父元素内部有浮动的子元素时，父元素的高度可能会塌陷（无法正确包裹住浮动的子元素）。利用 BFC 可以解决这个问题大小等布局属性，以适应不同的屏幕尺寸和设计需求。...例如，将导航栏的菜单项设置为弹性元素，在屏幕变窄时可以自动换行或者等比例缩放宽度，保证导航功能的同时提升页面美观度和可用性。
，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...1.6 rem+媒体查询布局 rem+媒体查询布局原理 主要实现是通过媒体查询，通过给不同分辨率的设备编写不同的样式实现响应式布局，用于解决不同设备不同分辨率之间兼容问题，一般是指PC、平板、手机设备之间较大的分辨率差异...，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；在屏幕宽度过大时不再缩放，也会用到媒体查询，并且响应式设计更多地可能是针对不同设备间的自适应 对于移动端web页面的自适应方案来说
HTML面试题 1、 标签上title属性与alt属性的区别是什么？ alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。...DOCTYPE 的作用：DOCTYPE声明在文档的最前面， 位于根元素 HTML 的起始标签之前 ，这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于...：但不能使用在多列 模拟表格布局等高效果：兼容性不好，在IE6/7无法正常运行 10、在CSS样式中使用px、em，各有什么优势，在表现上有什么区别？...px是相对长度单位，相对于显示器屏幕分辨率而言的； em是相对长度单位，相对于当前对象内文本的字体尺寸； px定义的字体，无法用浏览器字体放大功能；em的值并不是固定，会继承父级元素的字体大小， 1 ÷...15、为什么要初始化CSS样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会出现浏览器之间的页面显示差异； CSS样式初始化之后会对SEO有一定的影响。
和之间是兄弟关系。 可以使用F12或者右键审查元素，开启开发者工具，切换到元素标签，就可以看到页面结构的细节了。 标签之间的结构关系，构成了一个DOM树。...但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。 大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。...但是要注意的是，devicePixelRatio在不同的浏览器中还存在 些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。...当文本不能正确显示的时候，会显示一个替换的文字。 title：提示文本。鼠标放到图片上，就会有显示。 width/height：控制宽度高度。宽度和高度一般改一个就行，另外一个会等比例缩放。
引用类型由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度，因此其存储在堆(heap)中，存储在变量处的值是一个指针，指向存储对象的内存处(按址访问)，对于引用类型的值，可以为其添加属性和方法...poistion:relative，因为相对定位元素在不设置 top 和 left 值时，不会对元素位置产生影响；fixed 即固定定位，它则以浏览器窗口为参照物，PC网页底部悬停的banner一般都可以通过...Iconfont，即字体图标，就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接用控制字体的css属性来设置图标的样式，字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响...对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document 用于描述DOM树的状态和属性，并提供了很多操作DOM的API。...localStorage的存储空间大约5M左右(不同浏览器可能不同，分 HOST)，这个相当于一个5M大小的前端数据库，相比于cookie，可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的
这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。...简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询熟悉，根据不同的屏幕宽度，调整样式。...卤煮之前也是这样想的，但是你需要考虑到界面上的许多元素需要设置字体，如果用media query为每个元素在不同的设备下都设置不同的属性的话，那么有多少种屏幕我们的css就会增加多少倍。...这时候需要重新设计整界面的布局和排版了: 如果屏幕宽度大于1300像素 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。...总结 不管哪一种自适应方式，我们的目的是使得开发网页在各种屏幕下变得好看：如果你的项目定位的用户群仅仅是使用某种机型的人，那么可以采用第一种自适应方式。
5、sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。...不清楚，当初在初学css的时候，会不会与margin这个属性混淆？其实，它们之间是很容易去辨识地。因为这四个属性值，其实是，定位时的偏移量。偏移量不会对static的元素起到作用。...那么，我们可以来介绍一下下面几个单位： 1、百分比：百分比的参照物是父元素，50%相当于父元素width的50% 2、rem：这个对于复杂的设计图相当有用，它是html的font-size的大小 3、em...当宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确 2....可以从图中看出，这个网页不管屏幕分辨率怎么发生变化，它的高度和位置都不变，而且里面的元素排布也没有发生变化，总是图标信息在左边和薪资状况在右边。 这就是很明显的，flex布局。
帮助文本大小在不同的屏幕大小上正确缩放方面，该功能非常有用，例如从不让流畅的字体大小降低到清晰的字体大小以下： html { font-size: min(1rem, 22px); /* Stays...相反，如果60％的值小于600px，则将使用600px作为元素的宽度 限定值 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用...因此，如果用户在浏览器上调整字体大小，则页面上的所有内容都将根据根大小正确缩放。 例如，当处理根集为16px时，我们指定的数字将乘以该数字乘以默认大小。...rem使用根（html>）元素的字体大小计算值，而声明em值的元素引用包含它的父元素的字体大小。...如果指定的父元素的大小与根元素的大小不同（例如，父元素为18px，但根元素为16px），则em和rem将解析为不同的计算值。 这使我们可以更细粒度地控制元素在不同响应上下文中的响应方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
