Автор: Ахмад заштрихован Переводчик: Front-end Xiaozhi Источник: сайтпойнт
Ставьте лайк и смотрите снова, формируйте привычку
эта статья
GitHubGitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.
В этой статье я перечислил десять функций HTML5, которые я не использовал в прошлом, но нахожу полезными сейчас, так что без дальнейших церемоний, давайте начнем.
🔥detaisЭтикетка
<details>Метки предоставляют пользователям эффект просмотра подробной информации по запросу. Если вам нужно отображать контент пользователю по запросу, простой способ сделать это — использовать этот<details>Этикетка. По умолчанию он спрятан, а при открытии расширяется, открывая скрытое содержимое.
кейс:
<details>
<summary>Click Here to get the user details</summary>
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Location</th>
<th>Job</th>
</tr>
<tr>
<td>1</td>
<td>Adam</td>
<td>Huston</td>
<td>UI/UX</td>
</tr>
</table>
</details>
результат операции:
Навык
Используйте его в файле Readme GitHub для отображения сведений по запросу. Вот примерGitHub.com/ах он залез/не вопрос…
🔥 Контент можно редактировать
contenteditable— это свойство, которое можно установить для элемента, чтобы сделать содержимое редактируемым. оно работаетDIV,P,ULи другие элементы.
Обратите внимание, что когда ничего не установлено для элемента
contenteditableсвойство, он наследует свойство от своего родительского элемента.
<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable" contenteditable="true">
<li> 1. Milk </li>
<li> 2. Bread </li>
<li> 3. Honey </li>
</ul>
результат операции:
Навык
может позволитьspanилиdivМетки доступны для редактирования, и к ним можно добавить любой богатый контент с помощью стилей CSS. Это справится с этим лучше, чем использование поля ввода. Попробуйте!
🔥 Карта
HTML <map>имущество с<area>свойства используются вместе, чтобы определить карту изображения (область ссылок, по которой можно щелкнуть). Щелчковая область может быть любой из этих форм, прямоугольной, круглой или многоугольной. Если форма не указана, рассматривается все изображение.
кейс:
<div>
<img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
<map name="circusmap">
<area shape="rect" coords="67,114,207,254" href="elephant.htm">
<area shape="rect" coords="222,141,318, 256" href="lion.htm">
<area shape="rect" coords="343,111,455, 267" href="horse.htm">
<area shape="rect" coords="35,328,143,500" href="clown.htm">
<area shape="circle" coords="426,409,100" href="clown.htm">
</map>
</div>
результат операции:
Навык
mapИмеет свои недостатки, но вы можете использовать его для визуальных презентаций.
🔥markЭтикетка
<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
результат операции:
Навык
Цвет выделения можно изменить с помощью css:
mark {
background-color: green;
color: #FFFFFF;
}
🔥 data-* атрибуты
data-*Свойства используются для хранения пользовательских данных, относящихся к странице или приложению. Сохраненные данные можно использовать в коде JavaScript для расширения возможностей пользователей.
data-*Недвижимость состоит из двух частей
- Имена свойств не могут содержать заглавных букв и должны начинаться с префикса "
data-', за которым следует хотя бы один символ - Значением свойства может быть любая строка
кейс:
<h2> Know data attribute </h2>
<div
class="data-attribute"
id="data-attr"
data-custom-attr="You are just Awesome!">
I have a hidden secret!
</div>
<button onclick="reveal()">Reveal</button>
В JS:
function reveal() {
let dataDiv = document.getElementById('data-attr');
let value = dataDiv.dataset['customAttr'];
document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
**Примечание.** Чтобы прочитать значение этих свойств в JS, вы можете передатьgetAttribute('data-custom-attr')g, чтобы получить его, но стандартный способ — использоватьdatasetчтобы получить.
Навык
Вы можете использовать его для хранения некоторых данных на странице, а затем передавать их на сервер с помощью вызовов REST.
🔥 выходной тег
<output>Метки представляют собой результаты вычислений или действий пользователя.
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>
Навык
Если вы хотите выполнить какие-либо вычисления на JS на стороне клиента и хотите, чтобы результат отражался на странице, вы можете использовать<output>, поэтому нет необходимости использоватьgetElementById()Дополнительный шаг для получения элемента.
🔥 список данных
<datalist>элемент содержит набор<option>Элементы, представляющие необязательные значения для других элементов управления формы.
кейс:
<form action="" method="get">
<label for="fruit">Choose your fruit from the list:</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
Навык
dataListведет себя какselectвыпадающий список, но это только подсказка, она не ограничивает пользователяinputЧто вводить в поле ввода
selectВкладки создают меню. опции в менюoptionНазначение ярлыка. Одинselectвнутри элемента должен содержатьoptionэлемент,
Как правило, они оба могут отображать раскрывающееся окно формы, ноselectТег можно выбрать только из предлагаемых им вариантов, в то время какdatalistНе только позволяет выбирать, но и позволяет вводить другие параметры.
🔥 Диапазон (ползунок)
rangeэтоinputТип, селектор диапазона с заданным типом ползунка.
<form method="post">
<input
type="range"
name="range"
min="0"
max="100"
step="1"
value=""
onchange="changeValue(event)"/>
</form>
<div class="range">
<output id="output" name="result"> </output>
</div>
🔥 метр
<meter>Элементы используются для отображения скалярных или дробных значений известных диапазонов.
<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>
<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>
Навык
Не делайте<meter>Используется в качестве индикатора выполнения, индикатор выполнения соответствует<Progress>Этикетка.
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
🔥 Входы
дляinputТипы этикеток, наиболее распространенные:text,passwordПодождите, вот некоторые из менее распространенных синтаксисов.
required
Обязательные поля ввода являются обязательными.
<input type="text" id="username1" name="username" required>
autofocus
Поле ввода текста настроено на получение фокуса при загрузке страницы:
<input type="text" id="username2" name="username" required autofocus>
Проверка с помощью регулярных выражений
можно использоватьregexУкажите схему для проверки ввода.
<input type="password"
name="password"
id="password"
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
Color picker
Простой подборщик цветов.
<input type="color" onchange="showColor(event)">
<p id="colorMe">Color Me!</p>
оригинал:Дев.то/Ах он лезет/10-У…
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.