Uncommon but useful tags in Xhtml

Uncommon but useful tags in Xhtml
Xhtml has many tags that are not commonly used but are very useful. Some can achieve twice the result with half the effort, some can improve semantics, and some can improve usability. I have summarized some of them. The principle of the summary is that they are useful and can be used. That is, most browsers must support them, otherwise it will not be considered a "good deal". What’s the point of just looking at the “sign” and sighing?
The <base> tag
effect: The tag specifies the default link address or link target for all links on the page. Sometimes we need to open all the links on the homepage in a new window. We usually write the links like this, and using this tag can do it in one go!
property:
Href: Link address
target: target, its value can be _blank, _parent, _self, _top, can be used in all modes except Strict mode. I first discovered this usage on 163.com.
usage:
 <head > <!—寫在head標簽之間-- >
 <base href = "http://www.qq.com/" /> <!—將默認鏈接定義為http://www.qq.com/-- >
 <base target = "_blank" /> <!—將默認鏈接目標定義為新窗口中打開-- >
 </head>

 <caption> tag
 Function: The caption tag is used to define the title of the table. Giving the table a title to explain what the table is for is very "semantic". The caption should be written after the table. The default style is to display it in the center of the top of the table. You can change its style through css.
 usage:
 <table width = "200" border = "1" >
 <caption > <!--caption應該寫在table之后-->
其實我是caption
 </caption>
 <tr >
 <td > &nbsp; </td>
 <td > &nbsp; </td>
 </tr>
 <tr >
 <td > &nbsp; </td>
 <td > &nbsp; </td>
 </tr>
 </table>

 <thead> tag, <tbody> tag, <tfoot> tag
    Function: thead, tfoot 
The tbody tags are just like their names, which are the header (many people just use th), subject, and footer of the table. They can make the table more semantic and allow us to control the performance of the table more conveniently. Some people abroad use these three tables in a very abnormal way to make the title follow the table, or the tbody has a fixed height, and scroll bars appear for the extra rows. If you are interested, you can search it or try it here.
 Note: If you use thead, tfoot, and tbody 
elements, you must use all of them. They appear in this order: thead, tfoot, tbody, so that the browser can render the footer before receiving all the data.
 usage:
 <table border = "1" >
 <thead >
 <tr >
 <th >科目</th>
 <th >分數</th>
 </tr>
 </thead>
 <tfoot >
 <tr >
 <td >總分</td>
 <td > 159 </td>
 </tr>
 </tfoot>

 <tbody >
 <tr >
 <td >語文</td>
 <td > 99 </td>
 </tr>
 <tr >
 <td >數學</td>
 <td > 60 </td>
 </tr>
 </tbody>
 </table>

 <fieldset> tag and <legend> tag
 Function: The <fieldset> element is used to classify elements in the form, while <legend> can define a title for this group. You must have seen a layout similar to the one below: domo! They can also be styled via CSS.
 usage:
 <form >
 <fieldset >
 <legend >基本信息</legend>
姓名: <input type = "text" />
性別: <input type = "text" />
 </fieldset>
 </form>

 <sub> Tag and <sup> Tag
    Function: 
Tags and <sub> 
The tags are superscript and subscript, respectively. Although they behave differently in different browsers, you can also use CSS to define their styles.
 usage:
 2 <sup >我是上標</sup>
 2 <sub >我是下標</sub>

 The <label> tag
 Purpose: label 
The use of labels can improve the usability of forms by expanding the click area of ​​the form. Take a look at the following usage: clicking on the text is equivalent to clicking on the radio control. Wouldn’t this provide a better user experience?
 usage:
 <form >
 <label for = "nan" >先生</label>
 <input type = "radio" name = "sex" id = "nan" />
 <br />
 <label for = "nv" >女士</label>
 <input type = "radio" name = "sex" id = "nv" />
 </form>
 <optgroup> Tag
 effect: 
Tags can be used to group options in the select, which is very useful when there are many drop-down items. Use the label tag to name each group. You can also define different colors for each group using CSS like Taobao does.
 usage:
 <select >
 <optgroup label = "自駕游" > <!--配合label標簽給每組命名-->
 <option >省內</option>
 <option >省外</option>
 </optgroup>
 <optgroup label = "旅行社" >
 <option >省內</option>
 <option >省外</option>
 <option >國外</option>
 </optgroup>
 </select>
    If you are interested in more xhtml tags, you can consider taking a look at the book "HTML and XHTML Definitive Guide", which you can also find in electronic version online. I have read the English photocopy version. Although it is in English, it is not too difficult to understand.
    If you know of other useful tags, please let us know!

<<:  Detailed explanation of MySQL master-slave replication and read-write separation

>>:  14 techniques for high-performance websites

Recommend

Detailed explanation of the solution for CSS-opacity child elements to inherit the transparency of parent elements

In the process of writing the project page, I enc...

Nginx local directory mapping implementation code example

Sometimes you need to access some static resource...

Detailed View of Hidden Columns in MySQL

Table of contents 1. Primary key exists 2. No pri...

Installation and verification of pytorch in linux or windows environment (solving runtimeerror problem)

1. Download the corresponding installation file f...

JS+CSS to realize dynamic clock

This article example shares the specific code of ...

WeChat Mini Program implements the likes service

This article shares the specific code for the WeC...

Docker images export and import operations

What if the basic images have been configured bef...

Solution to the problem of saving format in HTML TextArea

The format of textarea can be saved to the databas...

Steps to initialize the password after the first successful installation of MySQL

Unzip the file into a directory This is the direc...

Explanation of several ways to run Tomcat under Linux

Starting and shutting down Tomcat under Linux In ...

js uses Canvas to merge multiple pictures into one implementation code

Solution function mergeImgs(list) { const imgDom ...

Common array operations in JavaScript

Table of contents 1. concat() 2. join() 3. push()...

Detailed explanation and extension of ref and reactive in Vue3

Table of contents 1. Ref and reactive 1. reactive...

A brief discussion on VUE uni-app conditional coding and page layout

Table of contents Conditional compilation Page La...

CSS3 Tab animation example background switching dynamic effect

CSS 3 animation example - dynamic effect of Tab b...