简体   繁体   English

如何创建自己的 HTML 标签?

[英]how can i create my own HTML tag?

how can i create my own html tags in HTML or HTML5 so i can make my own html tag and css library such as how can i create my own html tags in HTML or HTML5 so i can make my own html tag and css library such as

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

<heading> Yeah My Own Heading</heading>

is their a way to do that?他们有办法做到这一点吗? if yeah please tell me how i am really curious about it.如果是的话,请告诉我我真的很好奇。 and tell me what problems should i will be having after making my personalize tags (if you know any).并告诉我在制作个性化标签后我会遇到什么问题(如果你知道的话)。

The "proper" way of doing this is to use classes: <div class="mymenu"> .这样做的“正确”方法是使用类: <div class="mymenu"> That being said, every browser I know of will display your <mymenu> tag just fine and you can style it however you want:话虽如此,我所知道的每个浏览器都会很好地显示您的<mymenu>标记,并且您可以根据需要设置它的样式:

mymenu {
    display    : block;
    background : teal;
}

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

Note that IE<9 will not immediately display this properly.请注意,IE<9 不会立即正确显示。 To get around that, simply use the following JS anywhere on your page (before the elements are created):为了解决这个问题,只需在页面上的任何位置(在创建元素之前)使用以下 JS:

document.createElement('mymenu');

which will tell the IE CSS engine that a mymenu tag exists.这将告诉 IE CSS 引擎mymenu标签存在。

This is html, not xml.这是 html,而不是 xml。 The proper way of doing it is to use a <div> and apply your own .mymenu class that you can style to look like a menu, or a heading class that defines how that should look.正确的做法是使用<div>并应用您自己的.mymenu class ,您可以将其设置为看起来像一个菜单,或者一个标题 class 来定义它的外观。

Yes, there is a way!是的,有办法!

CSS Code: CSS 代码:

mymenu {
    display    : block;
    background : black;

} }

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

HTML Code: HTML 代码:

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

Or if you want to customize h1..或者,如果您想自定义 h1..

h1 {
/*etc..*/
}

It is possible to do custom elements in < IE9, but it requires (sans javascript) being careful with doctypes, namespaces and, to be completely proper xhtml, a matching DTD.可以在 < IE9 中执行自定义元素,但它需要(无 javascript)小心 doctypes、命名空间以及完全正确的 xhtml,一个匹配的 DTD。

Something like this...像这样的东西...

<!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'>

Where the DTD contains things like... 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;>

...and so on. ...等等。

You end up in a situation where a namespace (such as custom:customtag) is required, and targetting it with CSS needs to escape the colon...您最终会遇到需要命名空间(例如 custom:customtag)的情况,并且使用 CSS 定位它需要转义冒号......

custom\:customtag { display:block; }

...which is too much bother - given the whole point of using custom elements is to produce more semantic markup. ...这太麻烦了——考虑到使用自定义元素的全部意义在于产生更多的语义标记。

I investigated this in detail back in the days of IE6 when xhtml seemed like it may be the future and solved all the problems, but never sought to implement it anywhere for the shear cumbersome nature of the solution.我在 IE6 时代对此进行了详细调查,当时 xhtml 似乎是未来并解决了所有问题,但由于解决方案的剪切繁琐性质,我从未试图在任何地方实施它。

And the world mostly gave up on xhtml as being too much trouble anyway.无论如何,世界大多放弃了xhtml,因为它太麻烦了。

At the end of the day custom elements for better semantics are hardly worth it because no matter what you do your markup will likely be compromised by presentation needs as (and I've been trying to do it for decades now) you just can't separate content from presentation completely online.归根结底,为了更好的语义而定制元素几乎不值得,因为无论你做什么,你的标记都可能会受到演示需求的影响(我已经尝试了几十年了)你就是不能完全在线将内容与演示分开。

Checkout The Story of the HTML5 Shiv here:在此处查看 HTML5 Shiv 的故事:

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

You could use the same method for enabling your custom tags.您可以使用相同的方法来启用您的自定义标签。

But don't.但是不要。 It is just stupid.这只是愚蠢的。 Use span or div with classes.将 span 或 div 与类一起使用。

Create a tag in CSS, without a class (.) or id (#).在 CSS 中创建一个标签,没有 class (.) 或 id (#)。

CSS: CSS:

mymenu {
    /* Styling Here */
}

heading {
    /* Styling Here */
}

HTML: HTML:

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

To do this you can use css to create custom tags:为此,您可以使用 css 创建自定义标签:

c-r {
    color:red;
}

I do this on Custom Markup .我在Custom Markup上执行此操作。 Check it out because it may already have what you want.检查一下,因为它可能已经有了你想要的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在html标记中创建一个循环以显示数据库中的所有JSON子字段? - how can I create a loop in my html tag to show all the JSON child fields in my database? 我能否找到在 html5 中创建自己的标签的解决方案,并且必须在 w3c 中验证我的标签 - Can i find a solution to creating my own tag in html5 and my tag must be validated in w3c 如何将自己的自定义CSS和HTML添加到Prestashop? - How can I add my own custom css and html to Prestashop? 我可以在Liferay中显示自己的HTML吗? - Can I display my own HTML in Liferay? 如何将自己的HTML标记添加到此PHP代码(数组) - How do I add my own HTML tag to this PHP code (array) 我可以创建自己的事件属性吗? - Can I create my own event attributes? 如何在 html img 标签中创建动态 src url? - How can I create a dynamic src url in html img tag? 如何在脚本标签中编写HTML代码? - How can I write HTML code in my script tag? 如何在我的 React 组件中使用脚本标记呈现 Html? - How can I render Html with script tag in my React Component? 如何删除CSS宽度和高度并从img标签设置我自己的最大宽度? - How can I remove the CSS width and height and set my own max-width from img tag?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM