Overlooked but useful html tags-HTML Tutorial-php.cn

Overlooked but useful html tags

高洛峰

Release： 2017-03-12 17:30:48

Original

1456 people have browsed it

This article introduces the ignored but very useful html tags

##tags

Function: The tag specifies the default link address or link target for all links in the page. Sometimes we need to make all the links on the homepage open in a new window. We usually write the links like this, but using this tag can do it all at once!

Attribute: Href: link address target: target, its value can be _blank,_parent,_self,_top, yes Used in modes other than Strict.

Usage:

<head><!—写在head标签之间-->
<base href="http://www.qq.com/"/> <!—将默认链接定义为http://www.qq.com/-->
<base target="_blank"/> <!—将默认链接目标定义为新窗口中打开-->
</head>
<body>
<a href="#">我可没写链接地址哦</a>
</body>

Copy after login

Tag

Function: The caption tag is used Define the title of table. Define a title for the table to explain what the table does. Isn't it very "semantic"? The caption should be written after the table. The default style is to display it centered at the top of the table. . You can change its style via css.

Usage:

<table width="200" border="1">
<caption><!--caption应该写在table之后--> 其实我是caption </caption>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Copy after login

tag, tag, tag

Function: Thead, tfoot and tbody tags are just like their names, they are the head of the table (many people just use th), theme, and bottom. They can make the table more semanticAt the same time, it also allows us to control the performance of the table more conveniently. There are people abroad who use these three tables in very weird ways to make titles that follow the table, or the tbody has a fixed height, and scroll bars appear on the extra rows. If you are interested, you can search for it or do it here.

Usage:

<table border="1">
  <thead>
    <tr>
        <th>科目</th>
        <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>语文</td>
      <td>99</td>
    </tr>
    <tr>
      <td>数学</td>
      <td>60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总分</td>
      <td>159</td>
    </tr>
  </tfoot>
</table>

Copy after login

tag and tag

Function: The

element is used to classify elements in the form, while can define a title for this group. You must have seen a layout similar to the domo below! They can also be styled via css.

Usage:

<form>
  <fieldset>
    <legend>基本信息</legend>
    姓名: <inputtype="text"/> 
    性别: <inputtype="text"/>
  </fieldset></form>

Copy after login

^{tag and _tag}

Function: The _{tag and _{tag are superscript and subscript respectively. Although they behave differently in various browsers, you can also use CSS to define their styles.}}

Usage:

<p>2<sup>我是上标</sup></p>
<p>2<sub>我是下标</sub></p>

Copy after login

Label

Function: label The use of labels can improve the usability of the form by expanding the clickable area of the form. Take a look at the following usage: clicking on text is equivalent to clicking on a radio control. Will the user experience be better?

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>

Copy after login

# Tags

Function: Labels can group the options in the select. This is very useful when there are many drop-down items. Use the label label to name each group. You can also use CSS to define different colors for each group like Taobao.

Usage:

<select>
  <optgroup label="自驾游"><!--配合label标签给每组命名-->
    <option>省内</option>
    <option>省外</option>
  </optgroup>
  <optgroup label="旅行社">
    <option>省内</option>
    <option>省外</option>
    <option>国外</option>
  </optgroup></select>

Copy after login

Running result:

被忽略却很有用的html标签

The above is the detailed content of Overlooked but useful html tags. For more information, please follow other related articles on the PHP Chinese website!