Có cách nào để tạo thẻ html của riêng bạn trong HTML5 không?

Tôi muốn tạo ra một cái gì đó giống như

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Nó có thể được thực hiện trong HTML5? Tôi biết tôi có thể làm điều đó với

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

nhưng nó khó đọc hơn nhiều :(

Bạn có thể sử dụng các thẻ tùy chỉnh trong các trình duyệt, mặc dù chúng không phải là HTML5 (xem Các phần tử tùy chỉnh có hợp lệ HTML5 không? Và thông số kỹ thuật HTML5 ).

Giả sử bạn muốn sử dụng phần tử thẻ tùy chỉnh được gọi là <stack>. Đây là những gì bạn nên làm ...

BƯỚC 1

Chuẩn hóa các thuộc tính của nó trong Biểu định kiểu CSS của bạn (nghĩ rằng đặt lại css) - Ví dụ:

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

BƯỚC 2

Để làm cho nó hoạt động trong các phiên bản cũ của Internet Explorer, bạn cần phải nối tập lệnh này vào phần đầu (Điều quan trọng nếu bạn cần nó hoạt động trong các phiên bản IE cũ hơn!):

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

Sau đó, bạn có thể sử dụng thẻ tùy chỉnh của mình một cách tự do.

<stack>Overflow</stack>

Hãy thoải mái thiết lập các thuộc tính ...

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

Tôi không chắc lắm về những câu trả lời này. Như tôi vừa đọc: "THẺ TÙY CHỈNH LUÔN ĐƯỢC PHÉP TRONG HTML."

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

Vấn đề ở đây là HTML đó dựa trên SGML. Không giống như XML với các kiểu tài liệu và lược đồ của nó, HTML không trở nên vô hiệu nếu trình duyệt không biết một hoặc hai thẻ. Hãy nghĩ về <marquee>. Điều này chưa có trong tiêu chuẩn chính thức. Vì vậy, trong khi sử dụng nó làm cho trang HTML của bạn "chính thức không được phê duyệt", nó cũng không làm hỏng trang.

Sau đó, có <keygen>, là Netscape cụ thể, bị lãng quên trong HTML4 và được phát hiện lại và bây giờ được chỉ định trong HTML5. Và chúng tôi cũng có các thuộc tính thẻ tùy chỉnh bây giờ, như data-XyZzz = "..." được phép trên tất cả các thẻ HTML5.

Vì vậy, mặc dù bạn không nên tạo ra toàn bộ món salad đánh dấu không xác định tùy chỉnh của riêng mình, nhưng không hoàn toàn bị cấm có các thẻ tùy chỉnh trong HTML. Đó là tuy nhiên, trừ khi bạn muốn gửi nó với Loại nội dung + xml hoặc nhúng các không gian tên XML khác, như SVG hoặc MathML. Điều này chỉ áp dụng cho HTML giới hạn trong SGML.

Như Michael đã đề xuất trong các bình luận, những gì bạn muốn làm là hoàn toàn có thể, nhưng cách gọi của bạn là sai. Bạn không "thêm thẻ vào HTML 5", bạn đang tạo một loại tài liệu XML mới với các thẻ của riêng bạn.

Tôi đã làm điều này cho một số dự án trong công việc cuối cùng của tôi. Một số lời khuyên thiết thực:

1. Khi bạn nói rằng bạn muốn "thêm những thứ này vào HTML 5", tôi giả sử ý bạn thực sự là bạn muốn các trang hiển thị chính xác trong một trình duyệt hiện đại mà không cần phải thực hiện nhiều thao tác ở phía máy chủ. Điều này có thể được thực hiện bằng cách chèn "hướng dẫn xử lý biểu định kiểu" ở đầu tệp xml, như <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Thay thế "menu.xsl" bằng đường dẫn đến biểu định kiểu XSL mà bạn tạo để chuyển đổi các thẻ tùy chỉnh của bạn thành HTML.

2. Lưu ý: Tệp của bạn phải là tài liệu XML được định dạng tốt, hoàn chỉnh với tiêu đề XML <xml version = "1.0">. XML kén hơn HTML về những thứ như thẻ không khớp. Ngoài ra, không giống như HTML, các thẻ phân biệt chữ hoa chữ thường. Bạn cũng phải đảm bảo rằng máy chủ web đang gửi các tệp có loại kịch câm thích hợp "application / xml". Thường thì máy chủ web sẽ được định cấu hình để thực hiện việc này tự động nếu phần mở rộng tệp là ".xml", nhưng hãy kiểm tra.

3. Lưu ý lớn: Cuối cùng, việc sử dụng chuyển đổi XSL tự động của trình duyệt, như tôi đã mô tả, thực sự chỉ tốt nhất để gỡ lỗi và cho các ứng dụng hạn chế mà bạn có nhiều quyền kiểm soát. Tôi đã sử dụng nó thành công trong việc thiết lập một mạng nội bộ đơn giản tại người sử dụng lao động cuối cùng của mình, mạng này chỉ được truy cập nhiều nhất bởi vài chục người. Không phải tất cả các trình duyệt đều hỗ trợ XSL và những trình duyệt không có triển khai hoàn toàn tương thích. Vì vậy, nếu các trang của bạn được phát hành vào trạng thái "hoang dã", tốt nhất là chuyển đổi tất cả chúng thành HTML ở phía máy chủ, có thể được thực hiện bằng công cụ dòng lệnh hoặc bằng một nút trong nhiều trình soạn thảo XML.

Tạo tên thẻ của riêng bạn trong HTML là không thể / không hợp lệ. Đó là những gì XML, SGML và các ngôn ngữ đánh dấu chung khác dành cho.

Điều bạn có thể muốn là

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

Hoặc thay vì <div/>và <span/>một cái gì đó như <ul/>và <li/>.

Để làm cho nó trông giống và hoạt động đúng, chỉ cần kết nối một số CSS và Javascript.

Tôi chỉ muốn thêm vào các câu trả lời trước rằng có nghĩa là chỉ sử dụng thẻ hai từ cho các phần tử tùy chỉnh. Chúng không bao giờ nên được tiêu chuẩn hóa.

Ví dụ: bạn muốn sử dụng thẻ <icon>, vì bạn không thích <img>và bạn cũng không thích <i>...

Hãy nhớ rằng bạn không phải là người duy nhất. Có thể trong tương lai, w3c và / hoặc các trình duyệt sẽ chỉ định / triển khai thẻ này.

Tại thời điểm này, các trình duyệt có thể sẽ triển khai kiểu gốc cho thẻ này và thiết kế trang web của bạn có thể bị hỏng.

Vì vậy, tôi đề nghị sử dụng (theo ví dụ này) <img-icon>.

Trên thực tế, thẻ <menu>được xác định rõ nghĩa là không được sử dụng như vậy mà được định nghĩa. Nó phải chứa <menuitem>những hành vi như thế nào <li>.

Thẻ tùy chỉnh có thể được sử dụng trong Safari, Chrome, Opera và Firefox, ít nhất là khi sử dụng chúng thay cho "class = ...".

xanh lục {color: green} trong css hoạt động cho

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

Để nhúng siêu dữ liệu, bạn có thể thử sử dụng vi dữ liệu HTML , nhưng nó thậm chí còn dài dòng hơn so với việc sử dụng tên lớp.

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

Bên cạnh việc viết một biểu định kiểu XSL, như tôi đã mô tả trước đó, có một cách tiếp cận khác, ít nhất là nếu bạn chắc chắn rằng Firefox hoặc một trình duyệt XML chính thức khác sẽ được sử dụng (tức là KHÔNG phải Internet Explorer). Bỏ qua biến đổi XSL và viết một biểu định kiểu CSS hoàn chỉnh cho trình duyệt biết cách định dạng XML trực tiếp. Ưu điểm ở đây là bạn sẽ không phải học XSL, thứ mà nhiều người cho là một ngôn ngữ khó và phản trực giác. Nhược điểm là CSS của bạn sẽ phải chỉ định kiểu dáng rất hoàn chỉnh, bao gồm nút khối là gì, nội tuyến là gì, v.v. Thông thường, khi viết CSS, bạn có thể cho rằng trình duyệt "biết" rằng <em> chẳng hạn, là một nút nội tuyến, nhưng nó sẽ không biết phải làm gì với <dish>.

Cuối cùng, đã vài năm kể từ khi tôi thử điều này, nhưng tôi nhớ lại rằng IE (ít nhất là một vài phiên bản trở lại) đã từ chối áp dụng CSS stylesheet trực tiếp cho các tài liệu XML.

Điểm mấu chốt của HTML là các thẻ được đưa vào ngôn ngữ có ý nghĩa thống nhất, mà mọi người trên thế giới có thể sử dụng và đưa ra quyết định dựa trên - như kiểu mặc định hoặc tạo liên kết có thể nhấp được, hoặc gửi biểu mẫu khi bạn nhấp vào <input type="submit">.

Các thẻ tạo sẵn như thẻ của bạn rất tốt cho con người (vì chúng ta có thể học tiếng Anh và do đó biết hoặc ít nhất là đoán được ý nghĩa của thẻ của bạn), nhưng không tốt cho máy móc.

Đây không phải là một tùy chọn trong bất kỳ đặc tả HTML nào :)

Bạn có thể làm những gì bạn muốn với <div>các phần tử và lớp, từ câu hỏi tôi không chắc chính xác những gì bạn đang theo đuổi, nhưng không, tạo thẻ của riêng bạn không phải là một lựa chọn.

Như Nick đã nói, các thẻ tùy chỉnh không được hỗ trợ bởi bất kỳ phiên bản HTML nào.

Tuy nhiên, nó sẽ không gây ra bất kỳ lỗi nào nếu bạn sử dụng đánh dấu như vậy trong HTML của mình.

Có vẻ như bạn muốn tạo một danh sách. Bạn có thể sử dụng danh sách không có thứ tự <ul>để tạo các phần tử rool và sử dụng <li>thẻ cho các mục bên dưới.

Nếu đó không phải là những gì bạn muốn đạt được, hãy xác định chính xác những gì bạn muốn. Sau đó chúng ta có thể đưa ra câu trả lời.

Bạn có thể thêm thuộc tính tùy chỉnh thông qua HTML 5 data- Attributes. Ví dụ: Thông báo Hợp lệ cho HTML 5. Xem http://ejohn.org/blog/html-5-data-attributes/ để biết chi tiết.

Các thẻ polyme hoặc X cho phép bạn tạo các thẻ html của riêng mình. Nó dựa trên "DOM bóng" của trình duyệt gốc.

Bạn chỉ có thể thực hiện một số kiểu css tùy chỉnh, điều này sẽ tạo một thẻ làm cho màu nền là màu đỏ:

redback {background-color:red;}

 

<redback>This is red</redback>

Trong một số trường hợp, có thể giống như việc tạo tên thẻ của riêng bạn vẫn hoạt động tốt.
Tuy nhiên, đây chỉ là quy trình xử lý lỗi của trình duyệt khi làm việc. Và vấn đề là, các trình duyệt khác nhau có các quy trình xử lý lỗi khác nhau!

Hãy xem ví dụ này.
Dòng đầu tiên chứa hai phần tử được tạo thành whatvà evervà chúng được các trình duyệt khác nhau xử lý khác nhau. Văn bản xuất hiện màu đỏ trong IE11 và Edge, nhưng màu đen trong các trình duyệt khác.
Để so sánh, dòng thứ hai cũng tương tự, ngoại trừ nó chỉ chứa các phần tử HTML hợp lệ và do đó nó sẽ giống nhau trong tất cả các trình duyệt.

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>

Một vấn đề khác với các yếu tố tạo thành là bạn sẽ không biết tương lai sẽ ra sao. Nếu bạn đã tạo một trang web một vài năm trước đây với tên thẻ như picture, dialog, details, slot, templatevv, mong họ cư xử như nhịp, bạn có gặp rắc rối bây giờ!

bạn có thể sử dụng cái này:

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

Tôi đã tìm thấy bài viết này về cách tạo các thẻ HTML tùy chỉnh và khởi tạo chúng. Nó đơn giản hóa quy trình và chia nhỏ thành các thuật ngữ mà ai cũng có thể hiểu và sử dụng ngay lập tức - nhưng tôi không hoàn toàn chắc chắn rằng các mẫu mã mà nó chứa có hợp lệ trong tất cả các trình duyệt, vì vậy hãy lưu ý và kiểm tra kỹ lưỡng. Tuy nhiên, đó là một lời giới thiệu tuyệt vời về chủ đề này để bắt đầu.

Phần tử tùy chỉnh: Xác định các phần tử mới trong HTML