How to use custom tags in html
|
Custom tags can be used freely in XML files and HTML files, but there are a few things to note: The xmlns attribute of the <html> tag must be set. For example, you can declare it like this: <html xmlns:article>. This is because HTML files have a default "namespace", and tags such as <div> and <p> are in this default "namespace". Obviously, this default "namespace" does not contain our "custom tags", so we can only define a "namespace" ourselves and put the "custom tags" in this custom "namespace". After my attempts, custom namespaces cannot use Chinese. For example, the declaration: <html xmlns:namespace> is wrong. When using custom tags, you should use the form of <namespace:custom tag> instead of <custom tag>. That is to say, the name of the custom tag must indicate its "namespace" The style of a custom tag can be set in the <style> tag, or by setting its style attribute when using it (inline setting). Set in the <style> tag, for example: Copy code The code is as follows:<style type="text/css"> article\:Article text{border:1px solid #ccc;background-color:#efefef;font-weight:bold;} </style> Note that when setting the style in the <style> tag, you need to add "\" between the "namespace" and ":". For example, the above is written as article\: article body, not article: article body. When using a custom tag, set its style attribute, for example: Copy code The code is as follows:<article:Article title style="border:1px solid #ccc;">This is the title of the article</article:Article title> Example: Copy code The code is as follows:<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns:article> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Using custom tags</title> <style type="text/css"> article\:Article body{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;} </style> </head> <body> <article:Article titlestyle="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;"> Here is the title of the article </article:Article Title> <article:Article body> Here is the main text of the article </article:Article body> </body </html> Note: The default display value of the custom label is inline. In this example, it is changed to block display. |
<<: Docker deploys mysql remote connection to solve 2003 problems
>>: Detailed explanation of the execution principle of MySQL kill command
Recommend
Detailed explanation of DOM DIFF algorithm in react application
Table of contents Preface What is VirtualDOM? Rea...
Design Theory: Textual Expression and Usability
<br />In text design, we usually focus on th...
How to test network speed with JavaScript
Table of contents Preface Summary of the principl...
How to encapsulate timer components in Vue3
background When you open the product details on s...
Detailed explanation of MySQL replication principles and practical applications
This article uses examples to illustrate the prin...
MySQL data insertion optimization method concurrent_insert
When a thread executes a DELAYED statement for a ...
Detailed explanation of the new array methods in JavaScript es6
Table of contents 1. forEach() 2. arr.filter() 3....
After docker run, the status is always Exited
add -it docker run -it -name test -d nginx:latest...
Example of implementing dynamic verification code on a page using JavaScript
introduction: Nowadays, many dynamic verification...
Solution to CSS flex-basis text overflow problem
The insignificant flex-basis has caused a lot of ...
How to reduce image size using Docker multi-stage build
This article describes how to use Docker's mu...
Pygame code to make a snake game
Table of contents Pygame functions used Creating ...
Example of how to configure cross-domain failure repair in nginx
Nginx cross-domain configuration does not take ef...
How to install and configure Docker nginx
Download Nginx image in Docker docker pull nginx ...
A simple way to implement Vue's drag screenshot function
Drag the mouse to take a screenshot of the page (...