Вопросы для интервью с фронтенд-инженером (html+css)

В пиковый сезон найма на золото, серебро и серебро я поделюсь с вами вопросами для предварительных интервью, которые я собирал и систематизировал в течение многих лет, разделенных на три части. Это первая часть, связанная с версткой html и css.

1. Связано с HTML5

1.1 Новые функции, эти элементы удалены

HTML5 теперь не является подмножеством SGML, в основном это добавление таких функций, как изображения, местоположения, хранилище, многозадачность и т. д.

Новые функции (включая теги):

• холст для рисования;
• видео- и аудиоэлементы для воспроизведения мультимедиа;
• Локальное офлайн-хранилище localStorage долго хранит данные, и данные не теряются после закрытия браузера; Данные sessionStorage автоматически удаляются после закрытия браузера;
• Семантически улучшенные элементы контента, такие как статья, нижний колонтитул, заголовок, навигация, раздел;
• Элементы управления формой, календарь, дата, время, электронная почта, URL, поиск;
• Вебворкер новых технологий, вебсокет, геолокация;

Удаление элементов:

• Чисто выразительные элементы: basefont, big, center, font, s, strike, tt, u;
• Элементы, негативно влияющие на юзабилити: frame, frameset, noframes;

1.2 Обработка проблем совместимости браузера с новыми вкладками HTML5

Поддержка новых тегов HTML5:IE8/IE7/IE6 поддерживают теги, сгенерированные методом document.createElement, Вы можете использовать эту функцию, чтобы эти браузеры поддерживали новые теги HTML5, После того, как браузер поддерживает новую вкладку, вам также необходимо добавить стиль вкладки по умолчанию.

Конечно, вы также можете напрямую использовать зрелые фреймворки, такие как html5shim;

<!--[if lt IE 9]>
 <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

1.3 Различия между HTML и HTML5

DOCTYPE Декларация\Добавленные структурные элементы\Функциональные элементы

1.4 Понимание семантики HTML

Делайте правильные вещи с правильным ярлыком. Семантика HTML делает содержимое страницы структурированным, структура более понятной, и ее легко анализировать для браузеров и поисковых систем; Отображается в формате документа даже без стиля CCS и легко читается; Сканеры поисковых систем также полагаются на теги HTML для определения контекста и веса каждого ключевого слова, что хорошо для SEO; Сделайте так, чтобы людям, читающим исходный код, было проще разделить сайт на блоки, чтобы их было легко читать, поддерживать и понимать.

1.5 Автономное хранилище HTML5

Когда пользователь не подключен к Интернету, к сайту или приложению можно получить обычный доступ, а когда пользователь подключен к Интернету, файл кэша на компьютере пользователя обновляется.

**Принцип.** Автономное хранилище HTML5 основано на механизме кэширования (а не на технологии хранения) вновь созданного файла .appcache. Ресурсы сохраняются в автономном режиме через список синтаксического анализа в этом файле, и эти ресурсы будут храниться как файлы cookie. . Позже, когда сеть отключена, браузер будет отображать страницу через данные, сохраненные в автономном режиме.

как использовать:

1. Добавьте атрибут манифеста в заголовок страницы следующим образом;
2. Запишите ресурсы автономного хранилища в файл cache.manifest; КЭШ МАНИФЕСТ #v0.11 КЭШ: js/app.js css/стиль.css СЕТЬ: ресурс/логотип.png ОТСТУПАТЬ: //офлайн.html
3. В автономном режиме используйте window.applicationCache для реализации требований.

Как браузер управляет ресурсами автономного хранилища HTML5 и загружает их?В случае онлайн браузер находит атрибут манифеста в заголовке html и запрашивает файл манифеста.Если это первый раз, когда вы обращаетесь к приложению, браузер загружает соответствующие ресурсы в соответствии с содержанием манифеста. файл и хранить их в автономном режиме. Если к приложению обращались и ресурс был сохранен в автономном режиме, браузер будет использовать автономный ресурс для загрузки страницы, затем браузер сравнит новый файл манифеста со старым файлом манифеста, и если файл не изменился, выполните ничего. , если файл изменится, ресурсы в файле будут повторно загружены и сохранены в автономном режиме. В автономном режиме браузер напрямую использует ресурсы, хранящиеся в автономном режиме.

2. HTML-тег связан

2.1 Каковы недостатки iframe?

• iframe заблокирует событие Onload главной страницы;
• Поисковая программа поисковой системы не может интерпретировать такие страницы, что не способствует поисковой оптимизации;
• iframe и главная страница делят пул подключений, а в браузере есть ограничения на подключение одного и того же домена, поэтому это повлияет на параллельную загрузку страницы.

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。

2.2 Какова роль ярлыка

Тег label определяет взаимосвязь между элементами управления формы.Когда пользователь выбирает ярлык, браузер автоматически переключает фокус на элемент управления формы, связанный с ярлыком.

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

2.3 Как реализовать связь между несколькими вкладками в браузере?

WebSocket, общий рабочий; Вы также можете вызывать локальные методы хранения, такие как localstorge и cookies;

Когда localstorge добавляется, изменяется или удаляется в другом контексте просмотра, он запускает событие, Мы передаем информацию о странице, прослушивая события и контролируя их значения; Примечание о причудах: Safari выдает исключение QuotaExceededError при установке значения localstorge в режиме инкогнито;

2.4 Как webSocket совместим с младшими браузерами?

Сокет Adobe Flash, HTML-файл ActiveX (IE), Отправка XHR на основе составного кодирования, XHR на основе длинных опросов

2.5 Различия в метках шрифтов

Атрибут title не имеет четкого значения, а лишь означает, что это заголовок, а H1 означает заголовок с четкой иерархией, что также оказывает большое влияние на сканирование информации о странице;

Сильный — это указание ключевого содержания, что означает усиление тона.При использовании читающего устройства для чтения в Интернете:<strong>будет перечитываться, пока<b>заключается в том, чтобы показать ударение.

Содержимое i отображается курсивом, а em означает выделенный текст;

Элементы физического стиля -- Теги естественного стиля б, и, у, с, пре Элементы семантического стиля -- Теги семантического стиля сильный, em, ins, del, код Теги семантического стиля следует использовать точно, но не злоупотреблять, а в случае сомнений предпочтительнее использовать теги естественного стиля.

3. css часть (1)

3.1 Блочная модель

Ввести стандартную блочную модель CSS? Чем отличается блочная модель младших версий IE? (1) Существует два типа: блочная модель IE и блочная модель W3C; (2) Блочная модель: содержимое, отступы, поля, границы; (3) Отличие: содержательная часть IE учитывает границы и отступы;

3.2 Селекторы CSS и наследование свойств

селектор: 1. селектор идентификатора ( # myid ) 2. Селектор класса (.myclassname) 3. Селекторы тегов (div, h1, p) 4. Смежный селектор (h1+p) 5. Детский селектор (ul > li) 6. Селектор потомков (li a) 7. Селектор подстановочных знаков ( * ) 8. Селектор атрибутов (a[rel="external"]) 9. Селекторы псевдоклассов (a:hover, li:nth-child)

Наследуемые стили: font-size font-family color ul li dl dd dt

Ненаследуемые стили: border padding margin width height

3.3 Алгоритм приоритета

• Приоритетом является принцип близости, и наиболее близкое определение стиля в случае одинакового веса имеет преимущественную силу;

• Стиль загрузки основан на последней загруженной позиции;

Приоритет: !important > идентификатор > класс > тег важный имеет приоритет над встроенным

3.4 Новые псевдоклассы в css3

 举例：
    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :after          在元素之前添加内容,也可以用来做清除浮动。
    :before         在元素之后添加内容
    :enabled        
    :disabled       控制表单控件的禁用状态。
    :checked        单选框或复选框被选中。

3.5 css центрирование

Дайте div ширину, затем добавьте автоматический атрибут margin:0

div{
    width:200px;
    margin:0 auto;
 }

Центрировать абсолютно позиционированный div

  position: absolute;
  width: 1200px;
  background: none;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

центрировать по горизонтали

  确定容器的宽高 宽500 高 300 的层
  设置层的外边距

 div {
      position: relative;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
    background-color: pink;     /* 方便看效果 */
 }

Центрируется по горизонтали и вертикали

未知容器的宽高，利用 `transform` 属性

div {
    position: absolute;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;     /* 方便看效果 */

}

Горизонтальный и вертикальный центр три

利用 flex 布局
实际使用时应考虑兼容性

.container {
    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */

}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;     /* 方便看效果 */
}  

3.6 отображаемое значение и функция

block         象块类型元素一样显示。
none          缺省值。象行内元素类型一样显示。
inline-block  象行内元素一样显示，但其内容象块类型元素一样显示。
list-item     象块类型元素一样显示，并添加样式列表标记。
table         此元素会作为块级表格来显示
inherit       规定应该从父元素继承 display 属性的值

3.7 позиционирование позиции

absolute
    生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
    生成相对定位的元素，相对于其正常位置进行定位。
static
    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
    规定从父元素继承 position 属性的值。

3.8 Новые возможности css3

  新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）
  圆角           （border-radius:8px）
  多列布局        （multi-column layout）
  阴影和反射        （Shadow\Reflect）
  文字特效      （text-shadow、）
  文字渲染      （Text-decoration）
  线性渐变      （gradient）
  旋转          （transform）
  增加了旋转,缩放,定位,倾斜,动画，多背景
  transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

3.9 Создание треугольника

把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

3.10 Совместимость с браузером

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

  浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

  这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

  渐进识别的方式，从总体中逐渐排除局部。

  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

  css
      .bb{
          background-color:#f1ee18;/*所有识别*/
          .background-color:#00deff\9; /*IE6、7、8识别*/
          +background-color:#a200ff;/*IE6、7识别*/
          _background-color:#1e0bd1;/*IE6识别*/
      }

*  IE下,可以使用获取常规属性的方法来获取自定义属性,
   也可以使用getAttribute()获取自定义属性;
   Firefox下,只能使用getAttribute()获取自定义属性。
   解决方法:统一通过getAttribute()获取自定义属性。

*  IE下,even对象有x,y属性,但是没有pageX,pageY属性;
   Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

*  解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

*  Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
   可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

3.11 Пробел перед li

На расположение блоков строки будут влиять пробелы посередине (возврат каретки\пробел) и т. д. Поскольку пробелы также являются символами, эти пробелы также будут применяться со стилями и занимать место, поэтому будут пробелы. до 0 пробелов не будет. .

3.12 Зачем инициализировать стили CSS

- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

4. css часть (2)

4.1 Спецификации BFC

(Концепция в спецификации W3C CSS 2.1, которая представляет собой независимый контейнер, определяющий, как элемент позиционирует свое содержимое, а также его отношения и взаимодействие с другими элементами.) Страница состоит из множества блоков. Тип элемента и свойство отображения определяют тип блока. Различные типы блоков будут участвовать в разных контекстах форматирования (контейнер, который определяет, как отображать документ), поэтому элементы в блоке будут отображаться по-разному, то есть элементы внутри BFC и элементы снаружи будут не влияют друг на друга.Для получения более подробной информации см.БФК в CSS

4.2 CSS определяет веса

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

4.3 css с плавающей запятой

Объясните, пожалуйста, почему возникает поплавок и когда его нужно очищать? Способ очистки поплавка:

Плавающие элементы вырываются из потока документа и не занимают места. Плавающий элемент касается содержащей его границы или граница плавающего элемента остается. Проблемы и решения, вызванные плавающими элементами?

Проблемы, вызванные плавающими элементами: Высота родительского элемента не может быть растянута. Это влияет на неплавающий элемент (строчный элемент) того же уровня, что и родительский элемент, и на плавающий элемент. Если первый элемент не является плавающим, элемент перед элементом также должен быть быть плавающим, иначе это повлияет на структуру отображения страницы Решение: используйте атрибут clear:both; в CSS, чтобы очистить плавающий элемент для решения проблем 2 и 3. Для проблемы 1 добавьте следующий стиль к родительскому элементу элемент и добавьте стиль clearfix:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

Существует несколько способов очистки поплавков:

• дополнительная маркировка

<div style="clear:both;"></div>

(Недостаток: однако этот подход добавляет дополнительные теги, которые делают структуру HTML менее чистой.)

• Используйте после псевдокласса

#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

注意这里是给父元素加

• настраиватьoverflowдляhiddenили авто

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; //zoom:1用于兼容IE6。

4.4 Изоляция файлов cookie

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
提高了webserver的http请求的解析速度。

4.5 ссылка и @import

(1) ссылка — это тег XHTML. Помимо загрузки CSS, его также можно использовать для определения RSS, определения атрибутов соединения rel и т. д., тогда как @import предоставляется CSS и может использоваться только для загрузки CSS;

(2) Когда страница загружена, ссылка будет загружена одновременно, и CSS, на который ссылается @import, будет ждать загрузки страницы перед загрузкой;

(3) импорт предлагается CSS2.1, который может быть распознан только в IE5 или более поздних версиях, а ссылка является тегом XHTML, и нет проблем с совместимостью;

4.6 В чем разница между написанием тега стиля после тела и перед телом?

Совет По блокировке js уже есть много статей в интернете, но описаний блокировки css мало, поэтому мы проводим углубленное исследование по блокировке css. Написал тестовую демку, код такой

late-css.php
<?php
header("Content-type: text/css; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'div{background:blue}';
echo $str;
?>
 
late-js.php
<?php
header("Content-type: text/js; charset=utf-8");
sleep(intval(@$_GET[time]));
$str = 'document.write("I'm the lazy note")';
echo $str;
?>

index3.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</head>
<body>
    <div></div>
</body>
</html>

Запуск демонстрации показывает, что для открытия страницы нужно подождать 10 секунд, а синий квадрат открывается сразу. (Докажите, что css блокируется на странице, но не уверен, блокируется ли он при разборе DOM или при рендеринге)

index4.html
<html>
<head>
    <style>
         div{background:red;width:200px;height:200px;}
    </style>
</head>
<body>
    <div></div>
</body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=10&blue">
</html>

Запуск демонстрации показывает, что для открытия страницы нужно подождать 10 секунд, а синий квадрат открывается сразу. (Докажите, что css на странице блокирует рендеринг) Затем, когда мы разрабатываем страницу css, наиболее целесообразно поместить css, отображаемый на первом экране, непосредственно в html, но реальную ситуацию трудно достичь, например, некоторые стили навигации, в будущем реализовать CDN в css, мы должны поместить css во внешнюю ссылку.

index.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
        <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    </head>
    <body>
        <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <style>
        div{background:yellow;}
    </style>
</html>

(Докажите, что js блокирует синтаксический анализ DOM, а CSS действует на синтаксический анализ DOM там, где он отображается) Угадайте, что это покажет?  Сначала белый на 5 секунд, затем синий на 5 секунд, затем желтый

index2.html
<html>
    <head>
        <style>
            div{background:red;width:200px;height:200px;}
        </style>
    </head>
    <body>
    <div><script src="/lab/late/late-js.php?time=10"></script></div>
    </body>
    <link rel="stylesheet" href="/lab/late/late-css.php?time=5&blue">
    <style>
        div{background:yellow;}
    </style>
</html>

(Докажите, что css не блокирует синтаксический анализ DOM при загрузке, но блокирует рендеринг при загрузке) сначала красный, потом желтый

**Вывод:** Загрузка CSS и JS не будет блокироваться синтаксическим анализом, CSS будет блокировать отрисовку при загрузке, а внешние стили будут блокировать последующее выполнение скрипта до тех пор, пока внешние стили не будут загружены и проанализированы.

1. Нет ситуации блокировки JS, CSS будет отображаться только после анализа DOM.
2. В случае блокировки JS, когда DOM сталкивается с блокировкой JS, запускается рендеринг CSS.

Итак, теперь возникает вопрос, в чем разница между css, написанным до тела и после тела, Как видно из вышеизложенного, независимо от того, использует ли CSS теги STYLE или ссылки на внешние ссылки,

• Если вы не сталкиваетесь с блокировкой jS, она везде одинаковая, где бы вы ее ни поставили.
• Если вы столкнулись с блокировкой js, напишите CSS на BODY, вторичного рендеринга не будет, напишите CSS ниже BODY, когда JS заблокирован, произойдет рендеринг, а после завершения блокировки произойдет вторичный рендеринг (если внешняя цепочка CSS Время загрузки больше, чем время блокировки).

Онлайн чтение электронных книгРезюме распространенных вопросов на фронтенд-интервью

Перепечатка, пожалуйста, укажите

Учебник для гиков -Учебник компьютерщика