предисловие

2019 год подходит к концу, не пора ли снова бороться за лучший 2020 год? «Победа или поражение, семейные дела неожиданны, а позор человеку. Дети Цзяндуна талантливы, и неизвестно, вернутся ли они обратно». Готовы ли те, кто потерпел неудачу в осенних новобранцах, сдаться!

В этой статье обобщаются некоторые из наиболее популярных вопросов на собеседованиях по моему опыту и просмотру статей с 2019 года, охватывающих основы интерфейса и продвинутые знания от CSS до JS и Vue до сети.

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

Javascript篇 - nuggets.capable/post/684490…
Es6篇 - nuggets.capable/post/684490…
Vue篇 - nuggets.capable/post/684490…

Module One - Cascading Style Sheets

понятие «поток»

'поток' - это тип cssБазовое позиционированиеа такжемеханизм компоновки, механизм макета HTML по умолчанию — это «потоковый макет», который представляет собой макет сверху вниз (например, элемент div на уровне блока) и макет слева направо (например, встроенный элемент span).

коробочная модель

Элементы размещаются на странице в соответствии с правилами блочной модели, которая определяетсяcontent+ margin + border + paddingсочинение

Коробчатые модели бывают двух видов:

Блочная модель IE (странная блочная модель)
- width = border + padding + content
- Ширина блока = ширина + поле
Блочная модель W3C (стандартная блочная модель)
- width = content
- Ширина блока = ширина + отступ + граница + поля

Блочная модель по умолчанию в CSS — это блочная модель W3C, и преобразование между ними можно выполнить, установив свойстваbox-sizingдля преобразования

box-sizing: content-box; // W3C盒模型标准
box-sizing: border-box; // IE盒模型标准

content

Атрибут содержимого часто игнорируется. Как следует из его названия, это содержимое. Для незаменяемых элементов, таких как div, егоcontentто естьdivэлементы внутри. И для сменного элемента егоcontentсменная часть

content 常在伪元素中出现,作用是在css中直接生成可在网页中显示的内容

<!-- 假设我们要在这段内容后面再加一点内容 -->
<h1>I am Title！</h1> 

h1:after {
    content:'I am content！';
}

<!-- 将会渲染出 I am Title！I am content！ -->

Для каких случаев подходит margin | padding?

Когда использовать поле: нужно оставить пустым снаружи границы
Когда использовать отступ: его нужно оставить пустым внутри границы.

❗ Проблема совместимости с браузером: в IE5.X, IE6 при указании поля для поля с плавающей запятой левое поле может стать вдвое больше ширины, что можно решить, используя отступы или указав поле как display:inline.

Понимание и понимание стандартов WEB и W3C

Закрытые теги, строчные теги, отсутствие случайной вложенности, повышение вероятности поиска поисковыми роботами
Использование внешних ссылок css и js-скриптов, разделение структурного поведения, более быстрая загрузка файлов и скорость страницы, доступ к контенту для большего количества пользователей, доступ к контенту для более широкого спектра устройств, меньше кода и компонентов Простое обслуживание, легкая доработка, отсутствие необходимости изменять содержимое страницы, предоставление версии для печати без копирования содержимого, повышение удобства использования веб-сайта

Как понять спецификацию BFC?

BFC (блок форматирования контекста) — это независимый контейнер, который определяет, как содержимое в контейнере должно располагаться и взаимодействовать с другими контейнерами.

Страница имеет несколькоbox（盒子）состав, каждыйboxизТипыа такжеотображать свойстворешил этоboxвнутренняя планировка

различные видыbox, примет участие в различныхFormatting Context（决定如何渲染文档的容器）,следовательноboxЭлементы внутри отображаются по-разному, поэтомуВ BFC внутренние элементы не влияют на внешние элементы.

Как активировать BFC?

1 - 根元素 → 根元素（html）就是最大的BFC
2 - position设置为 fixed 或者 absolute
3 - display设置为 inline-block 、table-block 、 table-caption
4 - overflow的值不为visible（默认）
5 - float的值不为none（默认）

Схема позиционирования BFC

1 - 内部的box会在垂直方向上一个接一个的摆放
2 - box垂直方向的距离由margin决定，属于同一个BFC中的两个相邻box的margin会重叠（注意是垂直方向上）
3 - BFC中每个元素的左边margin会与包含块的左边border相接触
4 - 计算BFC的高度时，浮动元素也会参与计算

Что такое селекторы Css?Какие свойства можно наследовать?

css选择器有：
    - id选择器
    - 类选择器
    - 标签
    - 相邻选择器(h1+p)
    - 子选择器(ul>li)
    - 后代选择器(li a)
    - 通配符选择器(*)
    - 属性选择器（a[rel = "XXX"]）
    - 伪类选择器( :hover :first-child ···)
    - 伪元素选择器( :before :after ···)
    - 分组选择器
    
可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；

不可继承的样式：border, padding, margin, width, height

Приоритет селектора CSS

!important > 内联style > id > class > tag

优先级算法：
1 - 同权重情况下样式定义最近者为准（优先级相同，选择最后出现的样式）
2 - 元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000
3 - 继承得到的样式的优先级最低

Как рассчитывается вес CSS?

В основном -!important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器

Но когда эти селекторы воздействуют на элемент одновременно, как элемент выбирает стиль?

Что касается расчета веса, есть два способа

Расчет двоичного правила
Расчет с 1, 10, 100, 1000 и т. д.

Обзор полного значения каждого селектора

内联style, веса:1000
ID选择器, веса:0100
类选择器, веса:0010
标签选择器 & 伪元素选择器, веса:0001
通配符、子选择器、相邻选择器等, веса:0000
Унаследованные стили не имеют веса

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

Css3 добавляет псевдоэлементы псевдокласса

x:first-of-type → 选择属于其父元素的首个 <x> 元素的每个 <x> 元素
x:last-of-type → 选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素
x:only-of-type 选择属于其父元素唯一的 <x> 元素的每个 <x> 元素
x:only-child 选择属于其父元素的唯一子元素的每个 <x> 元素
x:nth-child(1) 选择属于其父元素的第一个子元素的每个 <x> 元素

:enabled 每个已启用的元素（多用于表单元素 例如input）
:disabled 控制表单控件的禁用状态
:checked，单选框或复选框被选中
:before在元素之前添加内容（可用来做清除浮动）
:after在元素之后添加内容

В чем разница между псевдоклассами Css и псевдоэлементами?

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性
而不是元素的di、class、属性等静态的标签
由于状态是动态变化的，所以一个元素达到一个特定状态时，他可能得到伪类的样式；当状态改变时，他又失去这个样式。

由此可以看出，他的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类
（:first-child   :link   :visitive   :hover   :focus   :lang）


伪元素：
与伪类针对特殊状态的元素不同的是，伪元素对元素中的特定内容进行操作，
它所操作的层次比伪类更深一层，
也因此它的动态性比伪类要低得多。它控制的内容实际上和元素是相同的，
但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素
（:first-line  :first-letter   :befoe   :after)

анализ отображаемого значения

value	describe
none	Элемент будет скрыт и не будет отображаться
inline	Элемент будет установлен как встроенный элемент, а внутренняя часть будет располагаться строками слева направо (без разрывов строк до и после элемента).
block	Элемент будет установлен как элемент блочного уровня, а внутренняя часть будет упорядочена столбцами сверху вниз (с разрывами строк до и после элемента).
inline-block	Элемент будет установлен как встроенный элемент уровня блока, а не элемент уровня блока в одной строке.
list-item	Элементы отображаются в виде списка
table	Элементы отображаются в виде таблиц на уровне блоков (аналогично таблицам) с разрывами строк до и после таблицы.
flex	Элемент перейдет в режим гибкой компоновки.

Разница между встроенным, блочным и встроенным блоком

block

块级元素特点：

1 - 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）

2 - 元素的高度、宽度、行高以及顶和底边距都可设置。

3 - 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

 

 

inline
内联元素特点：

1 - 和其他元素都在一行上；

2 - 元素的高度、宽度及顶部和底部边距不可设置；

3 - 元素的宽度就是它包含的文字或图片的宽度，不可改变。

 

 

inline-block
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。

inline-block 元素特点：

1 - 和其他元素都在一行上；

2 - 元素的高度、宽度、行高以及顶和底边距都可设置。

В чем проблема с использованием display:inline-block ? Как это решить?

вопросдваdisplay:inline-blockКогда элементы соединяются, создается пустое пространство.

причинаКогда элемент вводится как встроенный, пробелы между элементами (пробел, возврат каретки, перевод строки и т. д.) будут обрабатываться браузером.white-spaceПо умолчанию свойствоnormal(合并多余空白）,оказалосьHTML代码中的回车换行符被转换成一个空白符, в случае, когда шрифт не 0, пробел занимает определенную ширину, поэтомуinline-blockмежду элементами

Решение

1 - 将子元素标签的结束符和下一个标签的开始符写在同一行

<div>
    <div>
        左
    </div><div>
        右
    </div>
</div>

2 - 父元素中设置font-size:0, 在子元素上设置正确font-size

3 - 为子元素设置float:left

Центральное решение, которое вы должны спрашивать каждый раз, когда встречаетесь

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

Строчные элементы: text-align:center
блочный элемент (ширина определяется)

1. width确定，使用margin实现：margin:0 auto
2. 绝对定位 + margin-left：负宽度/2 （前提父元素设置相对定位）
{
    width:100px;
    position:absolute;
    left:50%;
    margin-left:-50px
}

элемент блочного уровня (ширина неизвестна)

1. display:table + margin左右auto
2. display:inline-block + text-align:center
3. 绝对定位 + transform
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
4. 万能flex布局（个人推荐）
{
    display:flex;
    justify-content:center;
}

Центрировать по вертикали

line-heightИдеально подходит для текстового контента
Настройки родительского элемента相对定位, настройки дочернего элемента绝对定位, метка проходитmarginРеализовать адаптивное центрирование
Универсальный гибкий

{
    display:flex;
    align-items:center;
}

Настройки родительского элемента相对定位, настройки дочернего элемента绝对定位,пройти черезtransformдобиться центрирования
Настройки родительского элементаdisplay:table+ настройки дочернего элементаvertical-align:middle

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

Универсальный флекс (личная рекомендация)

{
    display:flex;
    justify-content:center;
    align-items:center;
}

позиция + преобразование (неизвестная ширина и высота)

父元素
{
    position:relative;
}
子元素
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

position + margin (ширина и высота определены)

父元素
{
    position: relative;
}
子元素
{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

Абсолютное позиционирование устанавливает все направления на 0 черезmargin:autoДобиться вертикального и горизонтального центрирования (ширина и высота известны)

父元素
{
    position: relative;
}
子元素
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Через позицию позиционирования

Атрибут позиции имеет в общей сложности 5 и значения атрибута, которые следующие:

relativeОтносительное позиционирование, позиционирование относительно собственного положения

很多人不明白相对于自身位置是什么意思，其实可以这样理解：

    将本身当前位置固定住，以此位置进行定位

absoluteабсолютное позиционирование относительноpositionне дляstaticпервый родитель позиционируемого элемента
fixedФиксированное позиционирование. Позиционирование относительно окна браузера
inheritНаследовать от родительского элементаpositionзначение атрибута
staticПо умолчанию, без позиционирования, неподвижный документооборот

По положению следует отметить, чтоabsoluteПо отношению к какому родителю он расположен?

css3Добавлено новое свойство таргетинга -sticky, который действует какrelativeа такжеfixedЭлементы позиционируются относительно друг друга до тех пор, пока не преодолеют определенный порог, после чего фиксируются.

Что такое плавающая компоновка? Какие преимущества и недостатки?

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

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

преимущество

Он очень подходит для сцены со смешанным изображением и текстом. С его помощью можно добиться эффекта обтекания текста текстом. Когда элемент плавает, он имеет характеристики блочного элемента (можно установить ширину и высоту), но это отличается отinline-blockЕсть разница

floatОриентацию можно установить на горизонтальную сортировку, аinline-blockневозможно
inline-blockБудут пустые промежутки

недостаток

floatЗаставляет элемент выпасть из потока документа. Если высота родительского элемента является адаптивной, это приведет к схлопыванию высоты родительского элемента.

Clear Float (распространенные вопросы интервью)

Очистить float с помощью селектора псевдокласса (критический способ)

<div class="Parent">
    <div class="Float"></div>
</div>

设置 .Parent:after伪元素
.Parent:after{
      /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}

добавлен родительский элементoverflowатрибут или установить высоту (принцип заключается в срабатывании родительского элемента BFC)

<div class="Parent" style="overflow:hidden">//auto 也可以
    <div class="Float"></div>
</div>

Добавьте дополнительные теги

<div class="Parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    <div class='Float'></div>
</div>

▲ Примечание. После установки плавающего элемента отображаемое значение элемента станет блочным.

Что происходит, когда position накладывается на display, overflow и float?

- display：规定元素应该生成的框的类型（子元素的排序方式）
- position：规定元素的定位类型
- float：定义元素在哪个方向浮动

其中，position:absolute / fixed 优先级最高
当position设置为absolute或者fixed时，float失效，display需要调整
float / absolute定位的元素，只能是块元素或表单（block / table）

Layout Elite — гибкий макет

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

используемые сцены:Мобильная разработка, Android, iOS

Свойства контейнера (6)

flex-directionОпределить направление главной оси (направление расположения контейнера)

flex-direction: row | row-reverse | column | column-reverse;

flex-wrapЕсли одна ось не подходит, определите правило новой строки

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flowСокращение для flex-direction и flex-wrap

flex-flow: <flex-direction> || <flex-wrap>;

justify-contentОпределяет выравнивание контейнера по главной оси

justify-content: flex-start | flex-end | center | space-between | space-around;

align-itemsОпределяет выравнивание контейнера по поперечной оси

align-items: flex-start | flex-end | center | baseline | stretch;

align-contentОпределите выравнивание нескольких осей, если контейнер имеет только одну ось, это свойство не действует.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Недвижимость проекта (6)

orderОпределить порядок расположения элементов, чем меньше значение, тем выше расположение, по умолчанию 0
flex-growОпределить коэффициент увеличения элемента, по умолчанию 0 (то есть, если осталось место, он не будет увеличен)
flex-shrinkОпределяет коэффициент уменьшения элемента, по умолчанию равен 1 (т. е. элемент будет уменьшен, если места недостаточно)
flex-basisОпределяет пространство на главной оси, которое занимает элемент, до выделения лишнего пространства. По умолчанию стоит auto (исходный размер элемента).
flexявляется сокращением для flex-grow, flex-shrink и flex-basis, значение по умолчанию — 0 1 auto

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

该属性有两个快捷值: auto(1 1 auto) 和 none(0 0 auto)

建议优先使用这个属性，而不是单独写三个分离的属性

因为浏览器会推算相关值

align-selfПозволяет одному элементу иметь выравнивание, отличное от других элементов, может быть переопределеноalign-itemsсвойство, значение по умолчаниюauto(Указывает на наследование от родительского элементаalign-itemsатрибут, если нет родительского элемента, эквивалентныйstretch)

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Пример классического макета — макет с тремя столбцами

Макет с тремя колонками- Левый и правый контейнеры фиксированы, а средний контейнер является адаптивным

Трехколоночный макет очень распространен на практике, а также является частым вопросом на собеседованиях по CSS.Есть три способа добиться этого:

<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

第一种方式：flex
.container{
    display: flex;
}
.left{
    flex-basis:200px;
    background: green;
}
.main{
    flex: 1;
    background: red;
}
.right{
    flex-basis:200px;
    background: green;
}

第二种方式：position + margin
.left,.right{
    position: absolute;
    top: 0;
    background: red;
}
.left{
    left: 0;
    width: 200px;
}
.right{
    right: 0;
    width: 200px;
}
.main{
    margin: 0 200px ;
    background: green;
}

第三种方式 float + margin
.left{
    float:left;
    width:200px;
    background:red;
}
.main{
    margin:0 200px;
    background: green;
}
.right{
    float:right;
    width:200px;
    background:red;
}

Что нового в CSS3?

различныйcssСелектор
закругленные углыborder-radius
Многоколоночный макет
текстовые эффекты
Линейный градиент
2D преобразование
переходtransition
анимацияanimation
flexмакет
вращатьtransform
запросы средств массовой информации

Как браузеры анализируют селекторы Css?

Разбор селекторов CSS осуществляется справа налево, чтобы избежать разбора всех элементов.

Анатомия свойства переполнения

- scroll：必定出现滚动条
- auto：子元素内容大于父元素时出现滚动条
- visible：溢出的内容出现在父元素之外
- hidden：溢出时隐藏

Принцип полноэкранной прокрутки? Какие свойства css необходимы?

принципПо аналогии с каруселью общие элементы располагаются все время, допустим есть 5 полноэкранных страниц, которые нужно отобразить, тогда высота будет 500%, но мы можем отобразить только 100%, а остальное содержимое может отображаться черезtransformДля позиционирования по оси Y вы также можете использоватьmargin-topвыполнить

Включает свойства css overflow:hidden | transition:all 1000ms ease

Что такое адаптивный дизайн? Каков принцип адаптивного дизайна? Как быть совместимым с более низкими версиями IE?

Отзывчивый дизайнЭто означает, что веб-сайт может быть совместим с несколькими терминалами, вместо того, чтобы разрабатывать новую версию для каждого терминала.

принципТестируйте различные размеры экрана устройства с помощью медиа-запросов

Совместимость с более ранними версиями IE, заголовок страницы должен иметь область просмотра, объявленную метаданными.

<meta name=“viewport” content=“width=device-width，initial-scale=1.maximum-scale=1，user-scalable=no”>

Вопрос макета: адаптивная заливка

Имейте div фиксированной высоты с двумя div внутри, один из которых имеет высоту 100 пикселей, а другой заполняет остальную часть высоты.

Вариант первыйИспользуйте внешний divposition:relative;, используется div, который требует, чтобы высота применялась самостоятельноposition:absolute; top:100px; bottom:0; left:0

Вариант 2использоватьflexМетод макета с использованием высокоадаптивного divflex:1

В чем разница между RGBA() и непрозрачностью с точки зрения прозрачности?

opacityПрозрачность, применяемая к элементу и всему содержимому внутри элемента.
rgba()Применяется только к цвету или цвету фона элемента (дочерние элементы элементов, которые устанавливают прозрачность rgba, не наследуют эффект прозрачности)

В чем разница между px | em?

px 和 em 都是长度单位
区别在于px的值是固定的，指定多少就是多少，而em的值是不固定的，并且em会继承父级元素的字体大小


▲ 浏览器的默认字体高都是16px。
所以未经调整的浏览器都符合：1em=16px。那么12px = 0.75em  10px = 0.625em

Как добиться, чтобы элемент двигался по оси z?

translate3d(x,y,z)
translateZ(z)

Какие есть способы импорта Css? В чем разница между импортом по ссылке и @import?

Есть 4 способа импорта Cssвстроенный, встроенный, исходящая ссылка, импорт

Внешняя ссылкаПомимо загрузки css, вы также можете определитьrss、relи другие атрибуты, отсутствие проблем с совместимостью, поддержка использованияjavascriptизменить стиль

@importПредоставляется css и может использоваться только для загрузки css.javascriptИзменить стиль

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

Графика Вопрос: Создайте треугольник с помощью Pure Css

принципСоздайте div без высоты и ширины, установите одну из границ в виде треугольника, цвет других границ должен быть прозрачным

{
    width:0px;
    height:0px;
    border-top:10px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #000;
}

В чем разница между отображением: нет и видимостью: скрыто?

display:noneСкрыть соответствующий элемент и больше не выделять место в макете документа (что приводит к перекомпоновке)
visibility:hiddenСкрыть соответствующий элемент, сохранив исходное место в макете документа (что приведет к перерисовке)

Как браузеры анализируют селекторы Css?

Разбор, выбранный CSS, осуществляется справа налево, что позволяет избежать разбора всех элементов.

Как центрировать фоновое изображение по горизонтали и вертикали?

设置属性 background-position:center;

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

Страница загружается сверху вниз, конечно, сначала нужно загрузить стиль

написать наbodyтег, так как браузер анализирует строку за строкойHTMLДокумент анализируется. При анализе таблицы стилей, написанной в конце, браузер останавливает предыдущую визуализацию и ждет, пока таблица стилей будет загружена и проанализирована перед повторной визуализацией, что может вызватьоставьте поле пустымявление (поэтому лучше всегоstyleэтикетка написана наbodyвперед)

Каковы распространенные проблемы совместимости с Css?

- 不同浏览器的标签默认的padding/margin不同，通过初始化css样式可以解决
    *{
        margin:0;
        padding:0px;
    }
- IE6双边距BUG
- 设置较小高度标签（一般小于10px），在IE6,IE7中高度超出自己设置的高度
    通过设置overflow:hidden;或者设置行高line-height小于你设置的高度
- IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性
- Chrome中文界面下默认会将小于12px的文本强制为12px
    通过加入css属性 -webkit-text-size-adjust：none;可以解决，或者使用transform中的缩放属性
- 超链接访问过后hover样式就不出现，因为被点击访问过的超链接样式不再具有hover和active了
    解决方法是改变css属性的排列属性：L-V-H-A
    a:link{} → a:visited{} → a:hover{} → a:active{}
- IE下，event对象有x,y属性，但是没有pageX，pageY属性，但没有x，y属性
    解决方式：通过条件
- png24位的图片在IE6浏览器上出现背景，解决方案是做出PNG8

Css оптимизация, как повысить производительность

Избегайте ограничений перехода
Избегайте селекторов потомков
Избегайте связанных селекторов
Используйте компактный синтаксис
Избегайте ненужных пространств имен
Избегайте ненужного повторения стилей
использовать семантические имена
Избегайте использования !important
максимально упростить правила
исправить ошибки парсинга
Избегайте использования нескольких селекторов типов
удалить пустые правила css
Правильное использование свойства display

inline后不应该使用width、height、margin、padding以及float；
inline-block后不应该使用float；
block后不应该使用vertical-align

Не злоупотребляйте поплавком
Не злоупотребляйте веб-шрифтами
Не объявляйте слишком большой размер шрифта
Используйте селекторы идентификаторов экономно
Не определяйте слишком много шаблонов для H1-H6.
Не повторяйте определение h1-h6
Значение 0 не требует никаких единиц
Стандартизируйте различные префиксы браузера
Соблюдайте правила блочной модели

Module One extra - HyperText Markup Language

Тип парсинга документа

HTMLЕсть два типа документов

странная модель (по умолчанию) → браузеры анализируют по-своему
Стандартный режим → СледоватьW3Cстандартный

Как избежать режима причуд браузера- Путем объявления анализируемого типа документа<!DOCTYPE html>

Что такое метастандарт? Какие значения недвижимости существуют

MetaПредоставьте некоторую метаинформацию (имя/значение ключа) на странице, это полезноSEO

значение атрибута
- name→ Используется для описания веб-сайта
- http-equiv→ нетname, можно взять значение этого свойства (content-type,expires(期限),refresh,set-cookie,contentатрибут связан с заголовком http-запроса)
- content→ значение в имени/значении, которое может быть любой допустимой строкой
- scheme→ Используется для указания схемы, используемой для преобразования значений атрибутов

Скажите, пожалуйста, что такое семантика HTML

первый,HtmlSemantic может сделать страницы болееСтруктурированный, который обеспечивает последовательность структурно значимых меток, таких какheader,footerи т. д., чтобы сделать структуру более понятной и удобной для синтаксического анализа в браузере.
Во-вторых, даже безcssВ случае со стилем страница также отображается в структуре документа, который легче читать.
Поскольку сканеры поисковых систем также полагаются наHtmlтеги для определения контекста и веса отдельных ключевых слов, поэтому полезноSEO
наконец,HtmlSemantic легче читать, поддерживать и понимать

Общие ядра браузера

-webkit-→webkitядро (Chrome)
-moz-→Geckoядро (fixfox)
-o-→Operaядро (Opera)
-ms-→Tridentядро (IE)

Краткое введение в понимание ядра браузера

Ядро браузера в основном разделено на две части:

渲染引擎: преобразовать код в страницу
Js引擎: Разобрать и выполнитьJavaScriptкод для достижения динамического эффекта страницы

Какие новые функции были добавлены в Html5? Какие элементы были удалены?

Html5Новые особенности:
- canvas
- audio/video
- Лучшее выполнение для локального автономного хранилища
- localStorageДолгосрочное хранение данных, данные не потеряются после закрытия браузера (можно удалить только вручную)
- sessionStorageАвтоматически удалять после закрытия браузера
- Семантические лучшие теги
- новый элемент управления формой
- новые коммуникационные технологии (WebWorker,WebSocket)
Html5Удалены элементы, которые были чисто фенотипическими, и элементы, которые негативно влияли на удобство использования.

из-заIE6/7/8оба поддерживаютdocument.createElementдля создания элементов, поэтому вы можете использовать этот метод, чтобы сделать браузер совместимымHtml5новая вкладка

Html5 какие теги могут оптимизировать SEO

title
meta
Семантические теги →header,footer,article,aside

В чем разница между отсрочкой/асинхронностью?

defer 延迟加载→ Он не будет выполняться до тех пор, пока не будет отрисована вся страница (полностью сформирована DOM-структура и выполнены другие скрипты), несколькоdeferбудут загружены в том порядке, в котором появляются скрипты (渲染完加载)
async 异步加载→ После загрузки механизм рендеринга перестанет загружаться, затем выполнит скрипт и продолжит рендеринг после выполнения скрипта (блокировка рендеринга), несколькоasyncПорядок загрузки не гарантируется (加载完就执行)

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

позвонивlocalStorage
использоватьcookie + setInterval

Где запросы JavaScript обычно должны использовать обработку кеша?

DNSтайник
CDNтайник
кеш браузера
кеш сервера

Что такое iframe?

iframeЭто встроенный фрейм и очень распространенный способ встраивания веб-страниц.

Плюсы и минусы фреймов

iframeпреимущество
- iframeВозможность отображать встроенную веб-страницу без изменений
- Если есть несколько ссылок на страницыiframe, просто нужно изменитьiframeСодержание
- Если вы сталкиваетесь с медленной загрузкой стороннего контента, такого как значки и реклама, вы можетеiframeрешать
iframeнедостаток
- Он будет генерировать много страниц, которыми нелегко управлять, и это вызоветonloadблокировать
- iframeСтруктура фрейма иногда сбивает с толку, а пользовательский интерфейс оставляет желать лучшего.
- Структура кода становится сложной и влияет на поисковые системы
- iframeСтраницы с фреймами увеличивают нагрузку на сервер.httpпросить

Какие API предоставляет HTML

полноэкранная прокруткаFullscreen API
видимость страницыPge Visibility API
Доступ к камере и микрофонуgetUserMedia API
БатареяBattery API
Предварительная загрузка веб-контентаLink prefetching