как я могу создать свои собственные HTML-теги в HTML или HTML5, чтобы я мог создать собственный тег html и библиотеку css таких как
<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading</heading>
- их способ сделать это? если да, скажите мне, как мне действительно интересно. и скажите мне, какие проблемы я должен буду после создания своих тегов персонализации (если вы знаете их).
"Правильный" способ сделать это - использовать классы: <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.
Это html, а не xml. Правильный способ сделать это - использовать <div> и применить свой собственный класс .mymenu, который вы можете использовать, чтобы выглядеть как меню, или класс заголовка, который определяет, как это должно выглядеть.
Можно создавать пользовательские элементы в < 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 как слишком много неприятностей.
В конце дня пользовательские элементы для лучшей семантики вряд ли будут стоить того, потому что независимо от того, что вы делаете, ваша разметка, скорее всего, будет скомпрометирована потребностями в представлении, так как (и я пытаюсь это сделать уже несколько десятилетий) вы просто не может полностью отделять контент от презентации.
Да, есть способ!
Код 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..*/
}
Оформить заказ История HTML5 Shiv здесь:
http://paulirish.com/2011/the-history-of-the-html5-shiv/
Вы можете использовать тот же метод для включения пользовательских тегов.
Но не надо. Это просто глупо. Используйте span или div с классами.
Создайте тег в CSS без класса (.) или id (#).
CSS
mymenu {
/* Styling Here */
}
heading {
/* Styling Here */
}
HTML:
<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading </heading>
Для этого вы можете использовать css для создания пользовательских тегов:
c-r {
color:red;
}
Я делаю это на Custom Markup. Проверьте это, потому что он может уже иметь то, что вы хотите.