มีวิธีสร้างแท็ก html ของคุณเองใน HTML5 หรือไม่?

ฉันต้องการสร้างสิ่งที่ชอบ

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

แต่อ่านได้น้อยลงมาก :(

คุณสามารถใช้แท็กที่กำหนดเองในเบราว์เซอร์แม้ว่าจะไม่ใช่ HTML5 ก็ตาม (ดูองค์ประกอบที่กำหนดเองเป็น HTML5 ที่ถูกต้องหรือไม่และข้อกำหนด HTML5 )

<stack>สมมติว่าคุณต้องการใช้องค์ประกอบแท็กที่กำหนดเองที่เรียกว่า นี่คือสิ่งที่คุณควรทำ ...

ขั้นตอนที่ 1

ทำให้แอตทริบิวต์เป็นมาตรฐานใน CSS Stylesheet ของคุณ (คิดว่ารีเซ็ต css) - ตัวอย่าง

 stack{display:block;margin:0;padding:0;border:0; ... }

ขั้นตอนที่ 2

เพื่อให้สามารถใช้งานได้กับ Internet Explorer เวอร์ชันเก่าคุณต้องต่อท้ายสคริปต์นี้ไว้ที่ส่วนหัว (สำคัญถ้าคุณต้องการให้ใช้งานได้กับ IE เวอร์ชันเก่า!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

จากนั้นคุณสามารถใช้แท็กที่กำหนดเองได้อย่างอิสระ

<stack>Overflow</stack>

อย่าลังเลที่จะตั้งค่าคุณลักษณะเช่นกัน ...

<stack id="st2" class="nice"> hello </stack>

ฉันไม่ค่อยแน่ใจเกี่ยวกับคำตอบเหล่านี้ ตามที่ฉันได้อ่าน: "แท็กที่กำหนดเองได้รับอนุญาตเสมอใน HTML"

http://www.crockford.com/html/

ประเด็นคือ HTML นั้นขึ้นอยู่กับ SGML ซึ่งแตกต่างจาก XML ที่มีประเภทหลักและสคีมา HTML จะไม่ถูกต้องหากเบราว์เซอร์ไม่รู้จักแท็กหรือสองแท็ก ลองนึกถึง <marquee> สิ่งนี้ไม่ได้อยู่ในมาตรฐานอย่างเป็นทางการ ดังนั้นในขณะที่ใช้มันทำให้หน้า HTML ของคุณ "ไม่ได้รับการอนุมัติอย่างเป็นทางการ" แต่ก็ไม่ทำให้หน้าเว็บเสียหายด้วย

จากนั้นจะมี <keygen> ซึ่งเป็นเฉพาะของ Netscape ถูกลืมใน HTML4 และค้นพบอีกครั้งและตอนนี้ระบุไว้ใน HTML5 และตอนนี้เรามีแอตทริบิวต์แท็กที่กำหนดเองเช่น data-XyZzz = "... " ที่อนุญาตให้ใช้กับแท็ก HTML5 ทั้งหมด

ดังนั้นในขณะที่คุณไม่ควรคิดค้นมาร์กอัปสลัดแบบกำหนดเองที่ไม่ได้ระบุของคุณเอง แต่ก็ไม่ได้ห้ามอย่างแน่นอนที่จะมีแท็กที่กำหนดเองใน HTML อย่างไรก็ตามเว้นแต่คุณต้องการส่งด้วย + xml Content-Type หรือฝังเนมสเปซ XML อื่น ๆ เช่น SVG หรือ MathML สิ่งนี้ใช้ได้กับ HTML ที่ จำกัด SGML เท่านั้น

ดังที่ Michael แนะนำในความคิดเห็นสิ่งที่คุณต้องการทำนั้นค่อนข้างเป็นไปได้ แต่ระบบการตั้งชื่อของคุณไม่ถูกต้อง คุณไม่ได้ "เพิ่มแท็กใน HTML 5" แต่คุณกำลังสร้างเอกสาร XML ใหม่ด้วยแท็กของคุณเอง

ฉันทำสิ่งนี้สำหรับบางโครงการในงานสุดท้ายของฉัน คำแนะนำที่เป็นประโยชน์:

1. เมื่อคุณบอกว่าคุณต้องการ "เพิ่มสิ่งเหล่านี้ใน HTML 5" ฉันคิดว่าสิ่งที่คุณหมายถึงจริงๆคือคุณต้องการให้หน้าเว็บแสดงอย่างถูกต้องในเบราว์เซอร์รุ่นใหม่โดยไม่ต้องทำงานมากมายบนฝั่งเซิร์ฟเวอร์ ซึ่งสามารถทำได้โดยการแทรก "คำสั่งการประมวลผลสไตล์ชีท" ที่ด้านบนของไฟล์ xml เช่น <? xml-stylesheet type = "text / xsl" href = "menu.xsl"?> แทนที่ "menu.xsl" ด้วยพา ธ ไปยังสไตล์ชีต XSL ที่คุณสร้างขึ้นเพื่อแปลงแท็กที่กำหนดเองของคุณเป็น HTML

2. คำเตือน: ไฟล์ของคุณต้องเป็นเอกสาร XML ที่มีรูปแบบสมบูรณ์พร้อมด้วยส่วนหัวของ XML <xml version = "1.0"> XML เลือกได้ดีกว่า HTML เกี่ยวกับสิ่งต่างๆเช่นแท็กที่ไม่ตรงกัน นอกจากนี้แท็กจะแตกต่างจาก HTML ตรงที่คำนึงถึงขนาดตัวพิมพ์ คุณต้องตรวจสอบให้แน่ใจด้วยว่าเว็บเซิร์ฟเวอร์กำลังส่งไฟล์ที่มีประเภท mime "application / xml" ที่เหมาะสม บ่อยครั้งที่เว็บเซิร์ฟเวอร์จะได้รับการกำหนดค่าให้ทำสิ่งนี้โดยอัตโนมัติหากนามสกุลไฟล์เป็น ".xml" แต่ให้ตรวจสอบ

3. Big Caveat: ในที่สุดการใช้การแปลง XSL อัตโนมัติของเบราว์เซอร์ตามที่ฉันได้อธิบายไว้นั้นดีที่สุดสำหรับการดีบักเท่านั้นและสำหรับแอปพลิเคชันที่ จำกัด ซึ่งคุณมีการควบคุมจำนวนมาก ฉันใช้มันสำเร็จในการตั้งค่าอินทราเน็ตง่ายๆที่นายจ้างคนสุดท้ายของฉันซึ่งมีคนเข้าถึงได้มากที่สุดเพียงไม่กี่สิบคนเท่านั้น เบราว์เซอร์บางประเภทไม่รองรับ XSL และเบราว์เซอร์ที่ไม่มีการใช้งานที่เข้ากันได้อย่างสมบูรณ์ ดังนั้นหากต้องการปล่อยเพจของคุณเป็น "ไวด์" ทางที่ดีที่สุดคือการแปลงเพจทั้งหมดให้เป็น HTML ทางฝั่งเซิร์ฟเวอร์ซึ่งสามารถทำได้ด้วยเครื่องมือบรรทัดคำสั่งหรือด้วยปุ่มในตัวแก้ไข XML จำนวนมาก

การสร้างชื่อแท็กของคุณเองใน HTML เป็นไปไม่ได้ / ไม่ถูกต้อง นั่นคือสิ่งที่ XML, SGML และภาษามาร์กอัปทั่วไปอื่น ๆ มีไว้สำหรับ

สิ่งที่คุณอาจต้องการคือ

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

หรือแทน<div/>และ<span/>สิ่งที่ต้องการและ<ul/><li/>

เพื่อให้มันดูและใช้งานได้ดีเพียงแค่เชื่อมต่อ CSS และ Javascript บางอย่าง

ฉันต้องการเพิ่มคำตอบก่อนหน้านี้ว่ามีความหมายในการใช้แท็กสองคำสำหรับองค์ประกอบที่กำหนดเองเท่านั้น ไม่ควรเป็นมาตรฐาน

ตัวอย่างเช่นคุณต้องการใช้แท็ก<icon>เพราะคุณไม่ชอบ<img>และคุณไม่ชอบไม่ชอบ<i>...

พึงระลึกไว้ว่าคุณไม่ใช่คนเดียว บางทีในอนาคต w3c และ / หรือเบราว์เซอร์จะระบุ / ติดตั้งแท็กนี้

ในขณะนี้เบราว์เซอร์อาจใช้สไตล์เนทีฟสำหรับแท็กนี้และการออกแบบเว็บไซต์ของคุณอาจพัง

ดังนั้นฉันบอกกับการใช้งาน <img-icon>(ตามตัวอย่างนี้)

ตามความเป็นจริงแท็ก<menu>ถูกกำหนดไว้อย่างดีเช่นไม่ได้ใช้ แต่ถูกกำหนดไว้ มันควรจะมีที่ทำตัวเหมือน<menuitem><li>

แท็กที่กำหนดเองสามารถใช้ได้ใน Safari, Chrome, Opera และ Firefox อย่างน้อยก็เท่าที่ใช้แทน "class = ... " ไป

สีเขียว {color: green} ใน css ใช้ได้กับ

<green>This is some text.</green>

สำหรับการฝังข้อมูลเมตาคุณสามารถลองใช้ไมโครดาต้าHTML ได้แต่จะละเอียดกว่าการใช้ชื่อคลาส

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

นอกเหนือจากการเขียนสไตล์ชีต XSL ดังที่ฉันได้อธิบายไว้ก่อนหน้านี้แล้วยังมีอีกวิธีหนึ่งอย่างน้อยถ้าคุณมั่นใจว่าจะใช้ Firefox หรือเบราว์เซอร์ XML แบบเต็มรูปแบบอื่น (เช่นไม่ใช่ Internet Explorer) ข้ามการแปลง XSL และเขียนสไตล์ชีต CSS ที่สมบูรณ์ซึ่งบอกเบราว์เซอร์ถึงวิธีจัดรูปแบบ XML โดยตรง ข้อดีก็คือคุณไม่จำเป็นต้องเรียนรู้ XSL ซึ่งหลายคนพบว่าเป็นภาษาที่ยากและตอบโต้ได้ง่าย ข้อเสียคือ CSS ของคุณจะต้องระบุสไตล์อย่างสมบูรณ์รวมถึงโหนดบล็อกอะไรอินไลน์ ฯลฯ โดยปกติแล้วเมื่อเขียน CSS คุณสามารถสันนิษฐานได้ว่าเบราว์เซอร์ "รู้" ว่า <em> เช่น เป็นโหนดแบบอินไลน์ แต่ไม่รู้ว่าจะทำอย่างไรกับ <dish>

ในที่สุดก็เป็นเวลาสองสามปีแล้วที่ฉันลองทำสิ่งนี้ แต่ความทรงจำของฉันก็คือ IE (อย่างน้อยสองสามเวอร์ชันกลับมา) ปฏิเสธที่จะใช้สไตล์ชีท CSS กับเอกสาร XML โดยตรง

ประเด็นของ HTML คือแท็กที่รวมอยู่ในภาษานั้นมีความหมายที่เห็นพ้องต้องกันซึ่งทุกคนในโลกสามารถใช้และเป็นฐานในการตัดสินใจเช่นรูปแบบเริ่มต้นหรือทำให้ลิงก์สามารถคลิกได้หรือส่งแบบฟอร์มเมื่อคุณคลิกที่<input type="submit">ไฟล์.

แท็กที่สร้างขึ้นเช่นของคุณนั้นยอดเยี่ยมสำหรับมนุษย์ (เพราะเราสามารถเรียนรู้ภาษาอังกฤษและรู้หรืออย่างน้อยก็เดาได้ว่าแท็กของคุณหมายถึงอะไร) แต่ก็ไม่ดีสำหรับเครื่องจักร

นี่ไม่ใช่ตัวเลือกในข้อกำหนด HTML ใด ๆ :)

คุณสามารถทำสิ่งที่ต้องการได้ด้วย<div>องค์ประกอบและคลาสจากคำถามที่ฉันไม่แน่ใจว่าคุณต้องการอะไร แต่ไม่การสร้างแท็กของคุณเองไม่ใช่ตัวเลือก

ดังที่ Nick กล่าวไว้ว่า HTML เวอร์ชันใด ๆ ไม่รองรับแท็กที่กำหนดเอง

แต่จะไม่ให้ข้อผิดพลาดใด ๆ หากคุณใช้มาร์กอัปดังกล่าวใน HTML ของคุณ

ดูเหมือนว่าคุณต้องการสร้างรายการ คุณสามารถใช้รายการที่ไม่เรียงลำดับ<ul>เพื่อสร้างองค์ประกอบ rool และใช้<li>แท็กสำหรับรายการที่อยู่ด้านล่าง

หากนั่นไม่ใช่สิ่งที่คุณต้องการบรรลุโปรดระบุสิ่งที่คุณต้องการ เราสามารถหาคำตอบได้แล้ว

คุณสามารถเพิ่มแอตทริบิวต์ที่กำหนดเองผ่าน HTML 5 data- Attributes ตัวอย่างเช่นข้อความที่ใช้ได้สำหรับ HTML 5 โปรดดูhttp://ejohn.org/blog/html-5-data-attributes/เพื่อรับรายละเอียด

พอลิเมอร์หรือแท็ก Xช่วยให้คุณสร้างแท็ก html ของคุณเองได้ มันขึ้นอยู่กับ "shadow DOM" ของเบราว์เซอร์ดั้งเดิม

คุณสามารถทำสไตล์ css ที่กำหนดเองได้ซึ่งจะสร้างแท็กที่จะทำให้สีพื้นหลังเป็นสีแดง:

redback {background-color:red;}

 

<redback>This is red</redback>

ในบางสถานการณ์อาจดูเหมือนการสร้างชื่อแท็กของคุณเองก็ใช้ได้ดี
อย่างไรก็ตามนี่เป็นเพียงข้อผิดพลาดของเบราว์เซอร์ในการจัดการกิจวัตรในที่ทำงาน และปัญหาคือเบราว์เซอร์ต่างกันมีกิจวัตรในการจัดการข้อผิดพลาดที่แตกต่างกัน!

ดูตัวอย่างนี้
บรรทัดแรกมีสององค์ประกอบที่ทำขึ้น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ฯลฯ คาดหวังว่าพวกเขาจะทำตัวเหมือนช่วงนี้คุณมีปัญหาในขณะนี้!

คุณสามารถใช้สิ่งนี้:

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

ฉันพบบทความนี้เกี่ยวกับการสร้างแท็ก HTML ที่กำหนดเองและสร้างอินสแตนซ์แท็กเหล่านี้ มันช่วยลดความซับซ้อนของกระบวนการและแบ่งออกเป็นข้อตกลงที่ทุกคนสามารถเข้าใจและใช้งานได้ทันที - แต่ฉันไม่แน่ใจว่าตัวอย่างโค้ดที่มีอยู่นั้นถูกต้องในทุกเบราว์เซอร์ดังนั้นควรแจ้งเตือนและทดสอบอย่างละเอียด อย่างไรก็ตามการแนะนำเรื่องนี้เป็นเรื่องที่ดีในการเริ่มต้น

องค์ประกอบที่กำหนดเอง: การกำหนดองค์ประกอบใหม่ใน HTML