Как я могу создать свой собственный тег HTML?

как я могу создать свои собственные HTML-теги в HTML или HTML5, чтобы я мог создать собственный тег html и библиотеку css таких как

<mymenu> ul li or some text </mymenu>

<heading> Yeah My Own Heading</heading>

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

Ответы

Ответ 1

"Правильный" способ сделать это - использовать классы: <div class="mymenu">. При этом каждый браузер, о котором я знаю, будет показывать тэг <mymenu> очень хорошо, и вы можете его стилизовать, как хотите:

mymenu {
    display    : block;
    background : teal;
}

demo: http://jsfiddle.net/cwolves/DPMCM/2/

Обратите внимание, что IE < 9 не будет немедленно отображать это правильно. Чтобы обойти это, просто используйте следующую JS где угодно на своей странице (до создания элементов):

document.createElement('mymenu');

который укажет движку IE CSS, что существует тег mymenu.

Ответ 2

Это html, а не xml. Правильный способ сделать это - использовать <div> и применить свой собственный класс .mymenu, который вы можете использовать, чтобы выглядеть как меню, или класс заголовка, который определяет, как это должно выглядеть.

Ответ 3

Можно создавать пользовательские элементы в < IE9, но для этого требуется (sans javascript) быть осторожным с doctypes, namespaces и быть полностью правильным xhtml, соответствующим DTD.

Что-то вроде этого...

<!DOCTYPE html SYSTEM "http://your.domain/xhtml-custom.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' 
      xmlns:custom="http://your.domain/" 
      xml:lang='en-US'>

Где DTD содержит такие вещи, как...

<!ENTITY % attrs "%coreattrs; %i18n; %events;">
<!ENTITY % custom "custom:attribution | custom:quote ">
<!ENTITY % block "p | div | isindex |fieldset | table | %custom; ">
<!ENTITY % Flow "(#PCDATA | %block; | form )*">
<!ENTITY % custom "custom:attribution | custom:quote">
<!ELEMENT custom:attribution %Flow;>
<!ATTLIST custom:attribution %attrs;>

... и т.д.

Вы попадаете в ситуацию, когда требуется пространство имен (например, custom: customtag), а для его нацеливания с CSS необходимо избегать двоеточия...

custom\:customtag { display:block; }

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

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

И мир в основном отказался от xhtml как слишком много неприятностей.

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

Ответ 4

Да, есть способ!

Код CSS:

mymenu {
    display    : block;
    background : black;

}

heading {
    font-family: cursive;
    /* MORE CUSTOMIZE */
}

Код HTML:

<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading</heading>

Или, если вы хотите настроить h1..

h1 {
/*etc..*/
}

Ответ 5

Оформить заказ История HTML5 Shiv здесь:

http://paulirish.com/2011/the-history-of-the-html5-shiv/

Вы можете использовать тот же метод для включения пользовательских тегов.

Но не надо. Это просто глупо. Используйте span или div с классами.

Ответ 6

Создайте тег в CSS без класса (.) или id (#).

CSS

mymenu {
    /* Styling Here */
}

heading {
    /* Styling Here */
}

HTML:

<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading </heading>

Ответ 7

Для этого вы можете использовать css для создания пользовательских тегов:

c-r {
    color:red;
}

Я делаю это на Custom Markup. Проверьте это, потому что он может уже иметь то, что вы хотите.