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
JavaScript to achieve uniform animation effect
This article example shares the specific code for...
A brief introduction to the command line tool mycli for operating MySQL database
GitHub has all kinds of magic tools. Today I foun...
Let's talk briefly about the changes in setup in vue3.0 sfc
Table of contents Preface Standard sfc writing me...
Analysis of the pros and cons of fixed, fluid, and flexible web page layouts
There is a question that has troubled web designe...
Detailed explanation of the "/" problem when proxy_pass forwards according to the path path
When configuring proxy_pass in nginx, if you matc...
CSS3 transition to achieve underline example code
This article introduces the sample code of CSS3 t...
Detailed explanation of how to use the mysql backup script mysqldump
This article shares the MySQL backup script for y...
Vue two-choice tab bar switching new approach
Problem Description When we are working on a proj...
A brief discussion on the built-in traversal methods of JS arrays and their differences
Table of contents forEach() (ES6) method map() (E...
How to implement data persistence using the vuex third-party package
Purpose: Allow the state data managed in vuex to ...
A small collection of html Meta tags
<Head>……</head> indicates the file he...
How to represent various MOUSE shapes
<a href="http://" style="cursor...
JS object copying (deep copy and shallow copy)
Table of contents 1. Shallow copy 1. Object.assig...
Detailed explanation of the latest IDEA process of quickly deploying and running Docker images
background Use idea with docker to realize the wh...
HTML code text box limit input text box becomes gray limit text box input
Method 1: Set the readonly attribute to true. INPU...