Содержание

Десять типичных вопросов на собеседованиях на знание HTML / Хабр

Аурэлио Де Роза несколько дней назад выпустил, на мой взгляд, очень привлекательную статью, которой я хочу с вами поделиться на тот случай, если у вас плохо с английским.

Несколько недель назад на SitePoint были опубликованы две мои статьи, в которых я рассмотрел наиболее часто задаваемые на собеседовании вопросы по JavaScript (в случае, если вы пропустили: «5 Typical JavaScript Interview Exercises» и «5 More JavaScript Interview Exercises»).

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

Валидация разметки

Рассмотрим следующую разметку:

<figure>
   <picture>
      <source media="(min-width: 40em)"
      srcset="large.jpg 1024w, medium. jpg 640w, small.jpg 320y">
      <img src="medium.jpg" alt="London by night">
   </picture>
   <figcaption>A landscape of London by night</figcaption>
</figure>

Валидный ли это код? Поясните, почему.

Ответ

В разметке используется тэг picture, который совсем недавно вошел в спецификацию. Код валидный вплоть до последнего изображения в атрибуте srcset; 320y — невалидное значение. Если изменить y на w, то код будет валидным полностью.

Элемент

main

Дайте определение элементу main. Какова его цель? Сходятся ли в определении этого элемента спецификации W3C и WHATWG?

Ответ

main элемент не имеет единого определения и в каждой спецификации оно разное.

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

Спецификация WHATWG не наделяет тэг main какой-либо семантикой и описывает элемент как контейнер для главенствующего содержания какого либо элемента. Также, согласно WHATWG, вам не запрещается иметь на одной странице несколько элементов

main. Если у вас имеется несколько article элементов на странице, то вы можете выделить главенствующее содержимое каждого article с помощью тэга main.

WAI-ARIA

Рассмотрим следующую разметку:

<header>
   <h2>Main title</h2>
   <form action="/" method="get">
      <input type="search">
      <input type="submit">
   </form>
</header>
<ul>
   <li><a href="/">Home</a></li>
   <li><a href="/products">Products</a></li>
   <li><a href="/about">About</a></li>
</ul>
<main>
   <article>
      <h2>Main title</h2>
      <p>This is the content of this section</p>
   </article>
</main>
<footer>
   <small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>

Можете ли вы улучишь доступность разметки с помощью WAI-ARIA ролей, где это возможно, учитывая старые технологии?

Ответ

Код должен быть переписан следующим образом:

<header role="header">
  <h2>Main title</h2>
  <form action="/" method="get" role="search">
     <label for="search">Search:</label>
     <input type="search">
     <input type="submit">
  </form>
</header>
<nav role="navigation">
  <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/products">Products</a></li>
     <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <article role="article">
     <h2>Main title</h2>
     <p>This is the content of this section</p>
  </article>
</main>
<footer role="contentinfo">
  <small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>

Чтобы улучшить доступность, список навигации был помещен в тэг

nav. Чтобы улучшить доступность для старых технологий, которые не поддерживают новые семантичные тэги, роли header, navigation, main, article, и contentinfo были добавлены элементам header, nav, main, article, и
footer соответственно.

Другое улучшение касается формы поиска. Сначала форме была добавлена роль search. После чего был добавлен элемент label, который связан с элементом input с помощью атрибута for.

Элемент

small

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

Ответ

Элемент small был представлен в HTML 4.01 и предназначался для того, чтобы делать текст маленьким. В HTML5 этому тэгу придали семантическое значение и рекомендуют помещать в него различного рода предупреждения, юридические текст и прочее, что должно быть написано «мелким шрифтом».

При этом текст может выглядеть маленьким, но это уже не обязательно.

Пример использования приведен ниже:

<img src="image.jpg" alt="London by night">
<small>Права на это изображение являются собственностью Аурелио Де Роза.</small>

Подзаголовки

Подзаголовки — это одни из самых распространенных элементов в любом вебсайте. Несколько лет назад тэг hgroup был представлен как раз для этих нужд, однако совсем недавно он был удалён из спецификации. Можете ли вы описать, почему отказались от

hgroup и как проблему с разметкой заголовков решают сегодня?

Ответ

Элемент hgroup был создан для того, чтобы группировать заголовки (h2—h6) и тем самым исключить возможность непреднамеренного создания подуровня в иерархии. Чтобы понять, к какой же все-таки проблеме взывает данный тэг, давайте рассмотрим следующую разметку:

<article>
   <h2>Main title</h2>
   <h3>This is a subtitle</h3>
   <p>This is the content of this section</p>
</article>

Вот что мы получаем, если попробовать изобразить иерархию вышеизложенной разметки:

	h2
	|
	---h3
	   |
	   p

Эта простая схема наглядно показывает, что параграф являестя содержимым элемента h3 вместо того, чтобы быть содержимым элемента h2, вне зависимости от того, планировалось ли так сделать. Если же было намерение создать подзаголовок, а p связать с h2, то данная разметка является неправильной.

Собственно, элемент hgroup и был создан для того, чтобы решить эту проблему. Однако он был удалён из спецификации HTML5 в апреле 2013 года в виду отсутствия реализаций и отсутствия прецедентов, что делает его использование недопустимым.

Решением для задачи создания подзаголовка так, чтобы следующий далее параграф был связан с h2, изложено ниже:

<article>
   <h2>
       Main title
       <span>This is a subtitle</span>
   </h2>
   <p>This is the content of this section</p>
</article>

Изображения и доступность

Является ли атрибут alt обязательным для img элемента? Если нет, то приведите пример, в котором атрибут alt может иметь пустое значение. Изменится ли как-то доступность этого элемента в данном случае?

Ответ

Атрибут alt является обязательным для тэга img, однако значение этого атрибута может быть пустым (т. е. alt=""). Имеет смысл оставлять значение атрибута пустым в случае, когда изображение используется только для декоративных целей и не является частью содержания страницы. Что касается доступности, если атрибут alt ничего не содержит, то экранные дикторы проигнорируют изображение. Оставлять атрибут пустым в данном случае крайне рекомендуется, ведь что-нибудь вроде «Разделитель содержимого» будет только раздражать тех, кто слушает экранного диктора.

Элемент

time

Возможно ли изобразить интервал дат с помощью одного элемента time?

Ответ

Нет, невозможно. Можно представить эту информацию используя два элемента time. Например, для того, чтобы представить временной интервал от 6-го ноября 2014 до 9-го ноября 2014 года, разработчик может написать:

<time datetime="2014-11-06">6</time>-
<time datetime="2014-11-09">9 November 2014</time>

meter и progress

В чем разница между элементами meter и progress?

Ответ

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

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

Атрибут

longdesc

Что такое атрибут longdesc? Можете ли вы объяснить его цель?

Ответ

Атрибут longdesc элемента img был и во времена HTML4, но и до сих пор считается валидным в HTML5. Этот атрибут был сделан для того, чтобы позволить более детально описывать изображения, нежели это позволяет сделать атрибут alt. Интересная вещь: вместо того, чтобы являть собой описание изображения (как это делает атрибут alt), longdesc указывает на гиперссылку, содержащую описание.

Ниже продемонстрирован пример использование атрибута longdesc:

<img src="italy.jpg"
     alt="This image represents the map of Italy" longdesc="italy.html#description">
 
<!-- other content here ... -->
 
<section>
  <h3>Italy</h3>
  <p>The shown map of Italy illustrates its division 
  in regions...</p>
</section>

Элемент

mark

Что такое элемент mark? Приведите пример использования этого элемента.

Ответ

Элемент mark подсвечивает текст. Распространённый пример использования — это подсвечивание ключевого слова или ключевых слов, которые ищет пользователь.

Заключение

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

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

  • 5 Obsolete Features in HTML5
  • A Guide to the HTML5 ‘time’ Element
  • 20 HTML Elements for Better Text Semantics
  • Replacing Radio Buttons Without Replacing Radio Buttons
  • Everything You Need to Know About HTML’s ‘pre’ Element

Если у вас есть интересные вопросы по HTML? Делитесь ими в комментариях, возможно, тем самым вы поможете другим разработчикам, когда они будут проходить своё собеседование.

javascript — Как получить dom-узел тэга, из которого через запустился js

Задать вопрос

Вопрос задан

Изменён 1 год 6 месяцев назад

Просмотрен 47 раз

Скажем есть код

<section>
    <p></p>
</section>
<section>
    <p><!-- Сюда должно выводится сообщение --></p>
    <script>
        const currentParagraph /* = ? */;
        currentParagraph. textContent = "Текст для параграфа";
    </script>
</section>

Секции и параграфы не отличаются друг от друга. И мне нужно, чтобы код вывел текст для параграфа, опираясь на ту секцию, в которой он вызывается. То есть обычный document.querySelector("section p") не подойдет. Никаких id или классов добавлять нельзя, кол-во секций и их расположение неизвестно (то есть querySelectorAll("section")[1].querySelector("p") не подходит). Мне кажется, что если бы я смог получить ссылку на dom узел, из которого вызвался скрипт — это решило бы все проблемы. Можно ли это как то сделать?

  • javascript
  • html
  • dom

Document.currentScript возвращает элемент script, который выполняется в данный момент.

<section>
  <p>1</p>
</section>
<section>
  <p>2</p>
  <script>
    document.currentScript.closest('section').querySelector('p').textContent = "Текст для параграфа";
  </script>
</section>
<section>
  <p>3</p>
</section>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

вопросов по тегам | Продолжение учебы в UVic

Вопрос-тэг — это небольшой вопрос, который прикрепляется или «помечается» в конце предложения. Вместо того, чтобы повторять основной глагол, в теге используется форма «быть» или другой вспомогательный или модальный глагол. Ниже приведены несколько примеров.

Вы приехали на поезде, не так ли?
Сегодня очень ветрено, не так ли?
Ты можешь встретить меня на вокзале, не так ли?
Ты не мог бы меня подвезти, , не так ли?

Шаблон предложения

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

Ты не сказал ему, не так ли?

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

Он никогда не пьет алкоголь, пьет?
Никто не оставил сообщения, не так ли?

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

Ты сказал ему, , не так ли?

Двенадцать правил для ключевых вопросов

Правило Пример
1. После «давайте» тег начинается с «должны». Давайте пригласим соседей на ужин в выходные, ?
2. Используйте «не я» в тегах, чтобы означать «я не». Я вовремя, не так ли?  (правильно)
Я вовремя, не так ли? (неверно)
3. Используйте «не будет» для тегов вежливой просьбы. Остальные вещи ты принесешь, , не так ли?
4. Используйте «will» или «would» с повелительными предложениями (командами). Подожди здесь, пока я не вернусь, ладно?
Подождите здесь, пока я не вернусь, не могли бы вы?
5. Используйте «не должен» с модальным «должен». Должно быть, это адрес, , не так ли?
6. Возможны два окончания, когда «иметь» является основным глаголом предложения. У тебя достаточно денег, не так ли? (британский английский)
У тебя достаточно денег, , не так ли? (североамериканский английский)
7. Используйте местоимения для людей, а не имена собственные, в вопросительных тегах. Пол хороший теннисист, не так ли?
У Бетти хорошая работа, , не так ли?
8. Используйте «it» в теге вопроса, когда предложение включает слова «this» или «that». Это твоя ручка, , не так ли?
9. Используйте «они» в теге вопроса, когда предложение включает «эти» или «те». Это твои сандалии, не так ли?
10. Используйте «там» в теге вопроса, когда предложения включают «там + форма быть». Сегодня много работы, не так ли?
11. Используйте «они» в вопросительном теге, когда в предложении есть неопределенные местоимения
(никто, никто, кто-то, кто-то, все, все).		 Все уже здесь, не так ли?
Еще никто не ел, есть?
12. Используйте «не» в теге вопроса, когда предложение включает глагол «использовать». Ты очень часто катался на коньках, , не так ли?»

Использование вопросов-тегов

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

Восходящий тон —
просьба об услуге		 Не могли бы вы одолжить мне немного денег, не так ли?
Восходящий тон –
запрос информации		 Вы случайно не знаете, проезжал ли здесь автобус № 50?
Нисходящий тон —
запрос согласия		 Босс сегодня был не в настроении, не так ли?
Это платье ей очень идет, не так ли?

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

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

Продолжить упражнения

Тег Вопросы | Грамматика | EnglishClub

Вы говорите по-английски, не так ли?

Вопрос-тег — это специальная конструкция в английском языке. Это утверждение, за которым следует мини-вопрос. Мы используем теги вопросов, чтобы запросить подтверждение. Они означают что-то вроде: «Это правильно?» или «Вы согласны?» Они очень распространены в английском языке.

Базовая структура вопроса-тега:

положительное заключение отрицательный тег
Снег белый, не так ли?
отрицательное утверждение положительный тег
Я тебе не нравлюсь, ты?

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

Вопросы по тегу положительного утверждения

Посмотрите на эти примеры с положительные утверждения . Вы увидите, что в большинстве случаев вспомогательный глагол из положительного утверждения повторяется в теге и изменяется на отрицательный.

(+) положительное заключение (-) отрицательный тег
предмет вспомогательный основной глагол   вспомогательный не личный местоимение то же, что и тема
Вы это идет,   это, а не ты?
Ср есть готово,   есть, а не мы?
Вы до как кофе, до, а не ты?
Вы   как кофе, до, а не ты?
Они будет помощь,   или, а не они?
я банка пришел,   банка т Я?
Ср должен иди,   должен, а не мы?
Он должен попробуй жестче, должен, а не он?
Вы   это английский, это, а не ты?
Джон   было там, было, а не он?

Уведомление:
  • использование сделать в двух вопросов о кофе. Помните, что в Present Simple 90 460 делают 9.0461 является необязательным в положительных утверждениях ( Вы любите кофе / Вы действительно любите кофе ). Но do должны быть указаны в теге. То же самое относится к Past Simple сделал .
  • в последних двух вопросах, без вспомогательного глагола вместо в Present Simple и Past Simple. Тег повторяет основной глагол.

Вопросы тега отрицательного утверждения

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

(-) отрицательное утверждение (+) положительный тег
предмет вспомогательный   основной глагол     вспомогательный личный местоимение то же, что и тема
Это это, а не дождь,     это это?
Ср есть никогда видел   то, есть мы?
Вы до, а не как   кофе, до ты?
Они будет не помощь,     будет они?
Они или, а не отчет   США, будет они?
я банка никогда до   правильно, банка Я?
Ср должен, а не скажи   она, должен мы?
Он должен, а не привод   так быстро, должен он?
Вы или, а не будет   поздно, будет ты?
Вы     это, а не английский, это ты?
Джон     было не там, было он?

Уведомление:
  • не будет является сокращенной формой не будет
  • тег повторяет вспомогательный глагол, а не основной глагол. За исключением, конечно, глагола быть в Present Simple и Past Simple.

Ответы на вопросы тега

Как нам ответить на вопрос тега? Часто мы просто говорим Да или Нет . Иногда мы можем повторить тег и перевернуть его (Они здесь не живут, они ? Да, делают ). Будьте очень осторожны, отвечая на контрольные вопросы. В некоторых языках используется противоположная система ответов, и не носители английского языка иногда отвечают неправильно. Это может привести к большой путанице!

Ответьте на вопрос тега в соответствии с правдой ситуации. Ваш ответ отражает реальные факты, а не (обязательно) вопрос.

Например, все знают, что снег белый. Посмотрите на эти вопросы и правильные ответы:

вопрос тега правильный ответ заметки
Снег белый, не правда ли? Да (есть). Ответ один и тот же в обоих случаях — потому что снег белый ! Но обратите внимание на изменение ударения , когда отвечающий не согласен с спрашивающим.
Снег ведь не белый? Да это это !
Снег черный, не так ли? Нет это не ! Ответ одинаков в обоих случаях — потому что снег не черный !
Снег ведь не черный? Нет (это не так).

В некоторых языках люди отвечают на вопрос типа «Снег не черный, не так ли?» с «Да» (что означает «Да, я согласен с вами»). Это неправильный ответ на английском языке!

Вот еще несколько примеров с правильными ответами:

  • Луна вращается вокруг Земли, не так ли? Да, это так.
  • Земля больше Луны, не так ли? Да.
  • Земля больше солнца, не так ли? Нет , это не !
  • Азиаты не любят рис, не так ли? Да , они делают !
  • Слоны живут в Европе, не так ли? Нет , они не !
  • Мужчины не рожают детей, не так ли? №
  • В английском алфавите не 40 букв, не так ли? Нет, это не так.

Тег Вопрос Особые случаи

Отрицательные наречия

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

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

Интонация

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

  интонация  
Ты не знаешь, где мой бумажник, ты? / поднимающийся настоящий вопрос
Красивый вид, не так ли? \ падение не настоящий вопрос

Императивы

Иногда мы используем вопросительные знаки с императивами (приглашения, приказы), но предложение остается императивом и не требует прямого ответа. Мы используем , а не для приглашений. Мы используем можно, нельзя, будет, будет для заказов.

императив + тег вопроса примечания
Присаживайтесь, ладно? вежливое приглашение
Помоги мне, можешь? вполне дружелюбный
Помоги мне, не так ли? довольно дружелюбный (некоторое раздражение?)
Закройте дверь, не могли бы вы? довольно вежливо
Сделай это сейчас, хорошо. менее вежливый
Не забудь. только с отрицательными императивами будет возможно

Вопросы с одинаковыми тегами

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

Посмотрите на эти положительные-положительные теги вопросов:

  • Значит, у тебя будет ребенок? Это прекрасно!
  • Она хочет выйти за него замуж, не так ли? Какой-то шанс!
  • Думаешь, это смешно? Подумайте еще раз.

Отрицательно-отрицательные теговые вопросы обычно звучат довольно враждебно:

  • Значит, тебе не нравится моя внешность, не так ли? (британский английский)

Обращение за информацией или помощью

Обратите внимание, что мы часто используем теги вопросов, чтобы попросить информацию или помощь, начиная с отрицательного утверждения. Это довольно дружелюбный/вежливый способ сделать запрос. Например, вместо того, чтобы сказать «Где находится полицейский участок?» (не очень вежливо) или «Вы не знаете, где находится полицейский участок?» (чуть более вежливо), мы могли бы сказать: «Вы не знаете, где находится полицейский участок, не так ли?» Вот еще несколько примеров:

  • Вы не знаете хороших работ, не так ли?
  • Ты не мог бы помочь мне с домашним заданием, не так ли?
  • У тебя нет 10 долларов, чтобы одолжить мне?

Еще несколько особых случаев

пример отмечает
Я утра правильно, это не так ли? не я ( не не я)
Вам осталось , сделать , не так ли? ты должен идти…
Я отвечал на , ответили на , не так ли? использовать первый вспомогательный
Ничего пришло на почту, сделал это? рассматривать утверждения с ничего, никто и т.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *