[Интервью с Лысым По] - HTML5

предисловие

В сезон смены работы из года в год я готов начать с содержания интервью и взглянуть на точки знаний, связанные с интерфейсом, стремясь изучить ряд точек знаний и углубленное исследование в рамках моей компетенции. способность. Сосредоточьтесь на практике. Для основного интерфейса и студентов, готовящихся к собеседованиям, попробуйте прикрепить актуальные примеры кода и связанные с ними тестовые вопросы. Название серии будет [лысое собеседование по интерфейсу] - потому что все в кругу согласны, технология пропорциональна объему волос. 😄 Желаем всем доброго утралысыйпреодолеть узкое место

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

Похожие серии статей:

Лысый сломанный фронтенд-интервью - HTML5
Лысый сломанный интерфейсный интервью - ES6 + новые функции
Лысый сломанный front-end интервью - CSS3
Интервью с лысым сломанным интерфейсом - другое по теме

Что такое HTML5

Эволюция HTML выглядит следующим образом:

Год выпуска 1990
HTML4 появился в 1997 году и стал стандартом для интернет-разработки.
В 2008 году HTML5 официально появился и стабилизировался в 2002 году.

Во время разработки HTML версия HTML4.01 поддерживалась до десяти лет, а затем появился стандарт HTML5, который считается интернет-стандартом следующего поколения. Большая часть нашего веб-разработки, связанной с HTML Content сегодня, основана на стандарте HTML5.

Ниже приведен базовый код страницы HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

все<!DOCTYPE html>Файл заголовка .html, браузер будет использовать стандарт HTML5 для анализа. И если это HTML4.01, его код заголовка выглядит следующим образом:

HTML4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 Traditional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

Это связано с тем, что HTML4.01 основан на SGML, и необходимо объявить правила языка разметки DTD, чтобы браузер мог нормально анализировать код страницы. HTML5 не основан на стандарте SGML, поэтому нет необходимости объявлять DTD, просто `.

«Новые» функции HTML5

здесь, чтобы датьновыйКавычки помещены, потому что он новый, но не новый, ведь он существует уже более десяти лет, и большинство API-интерфейсов функций были разработаны и почти использовались. Но говорить, что это не ново, нельзя, потому что многие API в HTML5 — это фиче-специфичные функции, и если вы разрабатываете только простые front-end страницы в целом, то большинство из них не будет использоваться, поэтому многие мало что знают о их. Таким образом, вот базовое понимание, основанное на фактическом коде, чтобы его не спрашивала какая-то специальная разработка, по крайней мере, вообще не знать ~

Семантические теги

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

Первый: оригинальный макет этикетки

<div class="header">Header</div>
  <div class="nav">Nav</div>
  <div class="body">
    <div class="article">
      Article
      <div class="section">
        Section
      </div>
    </div>
    <div class="aside">
      Aside
    </div>
  </div>
<div class="footer">Footer</div>

Второе: семантическая верстка метки

<header>Header</header>
  <nav>Nav</nav>
  <div class="body">
    <article>
      Article
      <section>Section</section>
    </article>
    <aside>Aside</aside>
  </div>
<footer>Footer</footer>

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

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

Существует еще много тегов HTML5. Вы можете проверить конкретное объяснение и интерпретацию. Соответствующий адрес:Теги HTML5.

Улучшения формы

HTML5 расширил функцию формы.Тег ввода может вводить различные типы для отображения соответствующего содержимого формы. В частности, следующим образом:

 <form action="" method="get">
    <p>邮箱标签: <input type="email"></p>
    <p>数字标签: <input type="number"></p>
    <p>滑动条标签: <input type="range"></p>
    <p>搜索框标签: <input type="search"></p>
    <p>日期框: <input type="date"></p>
    <p>星期框: <input type="week"></p>
    <p>月份框: <input type="month"></p>
    <p>颜色框: <input type="color"></p>
    <p>网址框: <input type="url"></p>
    <div>
      <input type="submit">
      <input type="reset">
    </div>
</form>

Как видите, все они являются входными тегами, но отображаются разные типы элементов страницы. Кроме того, в HTML5 улучшены встроенные атрибуты формы. Например, заполнитель общих атрибутов, автофокус, и, если это числовой тип, вы можете установить атрибуты min и max, а если это тип пароля, вы можете установить атрибуты minLength и maxLength.

Дополнительные связанные свойства см.Форма HTML5

Аудио видео

Аудио/видео — это ключевой API, предоставляемый HTML5, потому что до HTML5 браузеры поддерживали аудио- и видеорешения через Flash.Я полагаю, что многие люди знают, что действительно существует множество плагинов Flash, вложенных в древние страницы. Аудио- и видеорешение HTML5 имеет следующие преимущества:

Встроенная поддержка браузера

<audio src="./media/luffy.mp3" controls="controls">
    本网页不支持媒体标签
</audio>

Приведенный выше код непосредственно встраивает фрагмент аудио на веб-страницу и добавляет контроллер, что очень удобно. Параметры видео такие же, но заменены на<video>Этикетка.

Можно установить несколько типов аудио и видео, хорошая совместимость

<audio controls="controls">
    <source src="./media/luffy.ogg"></source>
    <source src="./media/luffy.mp3"></source>
    本网页不支持媒体标签
</audio>

Внутри тега media вы также можете передать<source>теги для выполнения различных типов совместимости, например, младшая версия IE не поддерживает файлы mp3, тогда мы можем использовать приведенный выше код для обеспечения совместимости с браузерами младших версий, нажмите кнопку воспроизведения, браузер будет анализировать сверху вниз, пока Анализ не завершится успешно. Если он не удался, медиа-тег не поддерживается, как показано на следующем рисунке:

Видно, что первые игровые файлы MP3 и второй - играть в файлы OGG.

Холст — Холст

Я не хочу много говорить о Canvas здесь, потому что это слишком профессиональное место.Если вы просто спросите, знаете ли вы его, вы должны это знать, но если вы не часто используете API рисования, вы не можете объяснить детали ясно, поэтому я оставлю это здесь для отдельного объяснения позже. Подробное использование каждого API Canvas и связанные с ним тестовые вопросы могут быть перечислены отдельно позже.

перетащить

локальное хранилище

Локальное хранилище HTML5 имеет несколько новых дополнений, таких как хранилище и автономное кэширование манифеста. Раньше внешнее локальное хранилище выполнялось с помощью файлов cookie.

Storage

Делится на LocalStorage и SessionStorage, специфику, думаю, знают все, и их часто спрашивают, поэтому больше объяснять не буду. Это действительно отстой, и я трачу время друг друга, когда пишу.

Cache Manifest

Приложение кэш-памяти приложений приносит три преимущества:

Автономный просмотр — пользователи могут использовать приложения, когда они не в сети.
Скорость — кешированные ресурсы загружаются быстрее
Уменьшите нагрузку на сервер — браузер будет загружать только обновленные или измененные ресурсы с сервера.

Давайте просто настроим его, как показано на рисунке ниже, загрузим ссылку на изображение, когда есть сеть, а затем установим сеть в автономном режиме, ссылка не будет доступна.

Настроить автономный кеш, новыйmanifest.appcacheКэш приложения HTML5, а затем напишите следующее:

CACHE MANIFEST
https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3097378621,1517430839&fm=74&app=80&f=JPEG&size=f121,90?sec=1880279984&t=7dcb802bd45e50b25868fc4d1302ffdc

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

Web Worker

Все мы знаем, что порядок выполнения HTML-кода — сверху вниз, однопоточное выполнение, поэтому, когда браузер выполняет js-скрипт, состояние страницы не может быть отреагировано, то есть она будет заблокирована. Web Worker — это JavaScript, работающий в фоновом режиме, он не зависит от других скриптов и не влияет на производительность страницы. То есть, аналогично многопоточности, открывается еще один поток для выполнения кода сценария Worker, вообще говоря, он взаимодействует с главной страницей с помощью HTML5 postMessage.

Web Worker выглядит очень просто, но на самом деле его использование очень продвинуто.Если вы используете его хорошо, он может повысить производительность приложения, но если вы используете его плохо, он будет излишним. Я на самом деле не использовал его много, поэтому я кратко опишу его здесь.

// worker.js
var i=0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();

// webworker.html

<script>
    var w;
    
    function startWorker() {
      if (typeof (Worker) !== "undefined") {
        if (typeof (w) == "undefined") {
          w = new Worker("webworker.js");
        }
        w.onmessage = function (event) {
          document.getElementById("result").innerHTML = event.data;
        };
      }
      else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
      }
    }
    
    function stopWorker() {
      w.terminate();
    }
</script>

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

Другой контент

В дополнение к вышеупомянутым основным знаниям, у HTML5 есть несколько других API, которые очень полезны в некоторых аспектах, поэтому я кратко объясню их здесь.

Геолокация

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

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

datalist

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

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

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

Эта функция также очень достойна вторичного развития ~

редактируемый контент

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

<div class="edit" contenteditable='true'></div>

Как показано ниже:

Тег div становится редактируемым, это свойство используется многими редакторами страниц. Он очень прост в использовании, и его стоит разработать каждому~

перекрестный домен

Точки знаний здесь postMessage и WebSocket, Эти два подробно описаны в другой статье, вы можете проверить их ~

Передняя междоменная сводка

Суммировать

Это один из трех новых интерфейсных мушкетеров, которые я обобщил, — некоторые способы использования функций HTML5.Я считаю, что в процессе собеседования, если интервьюер спросит вас о новых функциях HTML5, которые вы знаете, вы можете использовать это~

Связанный кодовый адрес:Лысый сломанный код серии фронтенд-интервью