Есть ли способ создать свой собственный HTML-тег в HTML5? - PullRequest
Новая
       37

Есть ли способ создать свой собственный HTML-тег в HTML5?

104 голосов
/ 10 мая 2010

Я хочу создать что-то вроде 

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Можно ли это сделать в HTML5? Я знаю, что могу сделать это с 

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

но это гораздо менее читабельно: (

Ответы [ 18 ]

1 голос
/ 18 июля 2013

Полимер или X-теги позволяют создавать собственные HTML-теги. Он основан на "теневом DOM" нативного браузера.

1 голос
/ 10 мая 2010

Как сказал Ник, пользовательские теги не поддерживаются ни одной версией HTML.

Но, если вы используете такую ​​разметку в своем HTML, это не даст никакой ошибки.

Похоже, вы хотите создать список. Вы можете использовать неупорядоченный список <ul> для создания элементов rool и использовать тег <li> для элементов внизу.

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

1 голос
/ 06 июня 2017

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

См. Этот пример.
Первая строка содержит два готовых элемента, what и ever, и они обрабатываются разными браузерами по-разному. Текст в IE11 и Edge выходит красным, а в других браузерах - черным.
Для сравнения вторая строка похожа, за исключением того, что она содержит только допустимые элементы HTML, и поэтому она будет выглядеть одинаково во всех браузерах. 

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Другая проблема с вымышленными элементами состоит в том, что вы не будете знать, что ждет в будущем. Если вы создали веб-сайт пару лет назад с именами тегов, такими как picture, dialog, details, slot, template и т. Д., Ожидая, что они будут вести себя как пролеты, у вас сейчас проблемы!

1 голос
/ 14 июня 2012

Вы можете добавить пользовательский атрибут через HTML 5 data-Attributes. Например: Сообщение Это действительно для HTML 5. См. http://ejohn.org/blog/html-5-data-attributes/ для получения подробной информации.

0 голосов
/ 14 марта 2016 

<head>
  <lunch>
    <style type="text/css">
      lunch{
        color:blue;
        font-size:32px;
        }
      </style>
    </lunch>
  </head>

<body>
  <lunch>
    This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
    </lunch>
  </body>
0 голосов
/ 27 января 2014

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

Пользовательские элементы: определение новых элементов в HTML

0 голосов
/ 28 мая 2018

Вы можете использовать это: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyExample</title>
<style>bloodred {color: red;}</style>
<body>
<blood-red>this is BLOODRED (not to scare you)

</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")

</script>
</html>
0 голосов
/ 10 мая 2010

Это не вариант в любой спецификации HTML:)

Вы, вероятно, можете делать то, что вы хотите, с <div> элементами и классами, из вопроса, я не уверен, что именно вы ищете,но нет, создание собственных тегов не вариант.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...