HTML专项练习（持续更新）

布利啾啾迪不利多
206 阅读5分钟

此帖为我在刷牛客网HTML专项练习时出错或者不熟练习题的归纳。

2-24

1、web页面级优化一般有哪些操作？
  • 减少http请求次数；
  • 进行资源合拼和压缩：合并css、JavaScript、images；
  • Inline images：使用data:URL scheme将图片内嵌到网页文本中。
  • 将外部脚本置于低端：浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面；
  • 减少不必要的http跳转：
  • 图片优化：雪碧图；
  • 选择合适的缓存策略；
  • 减少重构和重绘；
  • 懒加载；
  • 节流和防抖。
2、有哪几种方法定义样式？
  • 嵌入：在标签中使用style标签；
  • 内联：在head标签中使用style标签；
  • 外联：通过link标签引入外部的css文件。
3、可以将SVG元素直接嵌入HTML页面中对吗？
  • SVG文件可以通过<object></object>嵌入HTML文档；
4、a连接的target属性有哪些属性值？

-_self：在当前框架中打开链接； -_blank：在新窗口打开链接； -_top：在顶层框架中打开链接； -_parent：在当前框架的上一层打开链接； -framename：在指定的框架或者浮动框架中打开链接。

5、块级元素和行内元素？

HTML哪些是块级元素，哪些是行内元素

块级元素：块级大多为结构性标记
  1. 总是从新的一行开始
  2. 高度、宽度都是可控的
  3. 宽度没有设置时，默认为100%
  4. 块级元素中可以包含块级元素和行内元素
  • <address>...</adderss>
  • <center>...</center>  地址文字
  • <h1>...</h1>  标题一级
  • <h2>...</h2>  标题二级
  • <h3>...</h3>  标题三级
  • <h4>...</h4>  标题四级
  • <h5>...</h5>  标题五级
  • <h6>...</h6>  标题六级
  • <hr>  水平分割线
  • <p>...</p>  段落
  • <pre>...</pre>  预格式化
  • <blockquote>...</blockquote>  段落缩进   前后5个字符
  • <marquee>...</marquee>  滚动文本
  • <ul>...</ul>  无序列表
  • <ol>...</ol>  有序列表
  • <dl>...</dl>  定义列表
  • <table>...</table>  表格
  • <form>...</form>  表单
  • <div>...</div>
行内元素：行内大多为描述性标记
  1. 和其他元素都在一行
  2. 高度、宽度以及内边距都是不可控的
  3. 宽高就是内容的高度，不可以改变
  4. 行内元素只能行内元素，不能包含块级元素
  • <span>...</span>
  • <a>...</a>  链接
  • <br>  换行
  • <b>...</b>  加粗
  • <strong>...</strong>  加粗
  • <img >  图片
  • <sup>...</sup>  上标
  • <sub>...</sub>  下标
  • <i>...</i>  斜体
  • <em>...</em>  斜体
  • <del>...</del>  删除线
  • <u>...</u>  下划线
  • <input>...</input>  文本框
  • <textarea>...</textarea>  多行文本
  • <select>...</select>  下拉列表
6、控件包括？

控件包括复选框、组合框、编辑框、列表框

7、什么是SVG？
  • SVG是指可伸缩矢量图片（scalable vector graphics）；
  • SVG用来定义用于网格的基于矢量的图形；
  • SVG使用XML格式定义图形；
  • SVG是HTML下的一个分支；
  • SVG图像在放大或者改变尺寸的情况下图形质量不会有所损失；
  • SVG是万维网联盟的标准。
8、dom中HTMLDivElment的正确继承关系是？

HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget

9、HTML新增媒体元素
  • video：定义视频；
  • source：定义媒体资源路径；
  • track：定义音频和视频的文本轨道（如字幕）。
10、HTML5新增元素

来源HTML5新增元素

v2-55db75f5cd947b87d3268aede4c902d7_1440w.jpg

11、要让一个元素不可见且在文档流猴子那个不占位，应使用哪种css规则？

display:none
display:none：不为被隐藏的对象保留其物理空间，HTML对象在页面上彻底消失（会让元素完全从渲染树中消失，渲染的时候不沾酒任何空间）；
visibility:hidden:为隐藏的对象保留其物理空间，HTML对象仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。（visibility:hidden不会让元素从渲染树中消失，渲染树元素继续占据空间，只是内容不可见）。

12、屏幕的尺寸标准

来源：评论区大佬 image.png

13、当 margin-top、padding-top 的值是百分比时，分别是如何计算的？

相对最近父级块元素的width，相对最近父级块级元素的width

14、哪些样式会创建BFC？

BFC(Block Formatting Context),译为“块级格式化上下文”。

来源：块格式化上下文 - Web开发者指南

下列方式会创建块格式化上下文：

  • 根元素（<html>）；
  • 浮动元素（元素的 float 不是 none）；
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）；
  • 行内块元素（元素的 display 为 inline-block）；
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）；
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）；
  • 匿名表格单元格元素（元素的 display 为 table、``table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）；
  • overflow 计算值(Computed)不为 visible 的块元素；
  • display 值为 flow-root 的元素；
  • contain 值为 layout、content 或 paint 的元素；
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）；
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）；
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）；
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更)。
15、为了达到移动设备的理想viewport，可以用meta标签对viewport进行控制，meta标签内可以控制下面哪些属性

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name=``"viewport"` `content=``"width=device-width, initial-scale=1.0"``>
  • width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以手动缩放。
15、根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:
<style>
#container {
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    border: solide 10px black;
}
</style>

<div id="container">
content
</div>

image.png

avatar
文章
阅读
粉丝