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

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

12 голосов
/ 28 мая 2011

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

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

<heading> Yeah My Own Heading</heading>

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

Ответы [ 7 ]

12 голосов
/ 28 мая 2011

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

mymenu {
    display    : block;
    background : teal;
}

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

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

document.createElement('mymenu');

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

4 голосов
/ 28 мая 2011

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

3 голосов
/ 28 июля 2015

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

Код 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..*/
}
3 голосов
/ 05 марта 2012

Возможно создание пользовательских элементов в

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

<!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 как в любом случае слишком много проблем.

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

2 голосов
/ 28 мая 2011

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

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

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

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

1 голос
/ 28 июля 2015

Создать тег в CSS без класса (.) Или идентификатора (#).

CSS: 

mymenu {
    /* Styling Here */
}

heading {
    /* Styling Here */
}

HTML: 

<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading </heading>
0 голосов
/ 08 января 2017

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

c-r {
    color:red;
}

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

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

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

...