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

JavaScript adds event listeners to event delegation in batches. Detailed process

1. What is event delegation? Event delegation: Ut...

Introduction to MySQL overall architecture

The overall architecture of MySQL is divided into...

HTML sets bold, italic, underline, strikethrough and other font effects

<p><b>This is bold font</b></...

Seven Principles of a Skilled Designer (2): Color Usage

<br />Previous article: Seven Principles of ...

Implementation steps for docker deployment lnmp-wordpress

Table of contents 1. Experimental Environment 2. ...

A brief analysis of MySQL locks and transactions

MySQL itself was developed based on the file syst...

Detailed explanation of Vue advanced construction properties

Table of contents 1. Directive custom directive 2...

Detailed explanation of JavaScript to monitor route changes

Table of contents history pushState() Method push...

Use Xshell to connect to the Linux virtual machine on VMware (graphic steps)

Preface: I recently started to study the construc...

Sharing some wonderful uses of wxs files in WeChat applet

Table of contents Preface application Filters Dra...

Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

Table of contents Node connects to Mysql Install ...

CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)

Note 1: Solve the problem of slow connection to M...

Detailed explanation of the use of MySQL Online DDL

Table of contents text LOCK parameter ALGORITHM p...

In-depth understanding of Vue dynamic components and asynchronous components

1. Dynamic Components <!DOCTYPE html> <h...

Detailed explanation of MySQL slow queries

Query mysql operation information show status -- ...