Tags and attributes in HTML
HTML page structure
##Tags | Description |
| Define the document type. |
| Define HTML document. |
<td style="border-color: rgb(221, 221, 221);" width="372"></td>Define the title of the document. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
<tr><body><td style="border-color: rgb(221, 221, 221);" width="372"></td>Define the body of the document. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
<tr><h1> to <h6><td style="border-color: rgb(221, 221, 221);" width="372"></td>Define the HTML title. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
<tr><p><td style="border-color: rgb(221, 221, 221);" width="372"></td>Define paragraph. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
<tr><br><td style="border-color: rgb(221, 221, 221);" width="372"></td>Define a simple line break. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
<tr><hr><td style="border-color: rgb(221, 221, 221);" width="372"></td>Define the horizontal line. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
<tr><!--...--><td style="border-color: rgb(221, 221, 221);" width="372"></td>Define comments. <td style="border-color: rgb(221, 221, 221);" width="438"></td>
</tr>
</tbody>
</table>
<p>Form<strong></strong><br></p>
<table width="811">
<thead>## Tag<tr class="firstRow">
<th style="border-color: rgb(221, 221, 221);" width="254">Description</th>
<th style="border-color: rgb(221, 221, 221);" width="556"></th>
</tr>
</thead>
<tbody><form><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define an HTML form for user input. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><input><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the input control. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><textarea><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define a multi-line text input control. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><button><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define button. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><select><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define a select list (drop-down list). </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><optgroup><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define a combination of related options in a select list. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><option><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the options in the select list. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><label><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the label of the input element. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><fieldset><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the border around elements in the form. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><legend><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the title of the fieldset element. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><datalist><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the drop-down list. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><keygen><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define the generated key. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr><output><tr>
<td style="border-color: rgb(221, 221, 221);" width="254">Define some types of output. </td>
<td style="border-color: rgb(221, 221, 221);" width="556"></td>
</tr>
<p><strong>Frame</strong></p>
<table width="811">
<thead><tr class="firstRow">
<th style="border-color: rgb(221, 221, 221);" width="225"> Tag</th>
<th style="border-color: rgb(221, 221, 221);" width="585">Description</th>
</tr></thead>
<tbody>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="225"><frame></td>
<td style="border-color: rgb(221, 221, 221);" width="585">The window or frame that defines the frameset. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="225"><frameset></td>
<td style="border-color: rgb(221, 221, 221);" width="585">Define the frameset. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="225"><noframes></td>
<td style="border-color: rgb(221, 221, 221);" width="585">Define alternative content for users who do not support frames. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="225"><iframe></td>
<td style="border-color: rgb(221, 221, 221);" width="585">Define an inline frame. </td>
</tr>
</tbody>
</table>
<p><strong>Image</strong></p>
<table width="811">
<thead><tr class="firstRow">##Tags<th style="border-color: rgb(221, 221, 221);" width="232"></th>Description<th style="border-color: rgb(221, 221, 221);" width="578"></th>
</tr></thead>
<tbody>
<tr><img><td style="border-color: rgb(221, 221, 221);" width="232"></td>Define the image. <td style="border-color: rgb(221, 221, 221);" width="578"></td>
</tr>
<tr><map><td style="border-color: rgb(221, 221, 221);" width="232"></td>Define image mapping. <td style="border-color: rgb(221, 221, 221);" width="578"></td>
</tr>
<tr><area><td style="border-color: rgb(221, 221, 221);" width="232"></td>Define the area inside the image map. <td style="border-color: rgb(221, 221, 221);" width="578"></td>
</tr>
<tr><canvas><td style="border-color: rgb(221, 221, 221);" width="232"></td>Define graphics. <td style="border-color: rgb(221, 221, 221);" width="578"></td>
</tr>
<tr><figcaption><td style="border-color: rgb(221, 221, 221);" width="232"></td>Define the title of the figure element. <td style="border-color: rgb(221, 221, 221);" width="578"></td>
</tr>
<tr><figure><td style="border-color: rgb(221, 221, 221);" width="232"></td>Define groupings of media content, and their titles. <td style="border-color: rgb(221, 221, 221);" width="578"></td>
</tr>
</tbody>
</table>
<p>Link<strong></strong></p>
<table width="811">
<thead>##Tags<tr class="firstRow">
<th style="border-color: rgb(221, 221, 221);" width="198">Description</th>
<th style="border-color: rgb(221, 221, 221);" width="612"></th>
</tr>
</thead>
<tbody><a><tr>
<td style="border-color: rgb(221, 221, 221);" width="198">Define anchor. </td>
<td style="border-color: rgb(221, 221, 221);" width="612"></td>
</tr><link><tr>
<td style="border-color: rgb(221, 221, 221);" width="198">Define the relationship between the document and external resources. </td>
<td style="border-color: rgb(221, 221, 221);" width="612"></td>
</tr><nav><tr>
<td style="border-color: rgb(221, 221, 221);" width="198">Define navigation links. </td>
<td style="border-color: rgb(221, 221, 221);" width="612"></td>
</tr>
<p><strong>List</strong><br></p>
<table width="811">
<thead><tr class="firstRow">
<th style="border-color: rgb(221, 221, 221);" width="208"> Tag</th>
<th style="border-color: rgb(221, 221, 221);" width="602">Description</th>
</tr></thead>
<tbody>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><ul></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define an unordered list. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><ol></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define an ordered list. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><li></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define the items of the list. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><dir></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Deprecated. Define directory listing. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><dl></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Definition definition list. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><dt></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define the items in the definition list. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><dd></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define the description of the item in the definition list. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><menu></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define a menu/list of commands. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><menuitem></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define the commands/menu items that the user can call from the popup menu. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="208"><command></td>
<td style="border-color: rgb(221, 221, 221);" width="602">Define the command button. </td>
</tr>
</tbody>
</table>
<p><strong>Table</strong></p>
<table width="811">
<thead><tr class="firstRow">##Tag<th style="border-color: rgb(221, 221, 221);" width="239"></th>Description<th style="border-color: rgb(221, 221, 221);" width="571"></th>
</tr></thead>
<tbody>
<tr><table><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define table<td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><caption><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define table title . <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><th><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the header cell in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><tr><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the rows in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><td><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the cells in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><thead><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the header content in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><tbody><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the body content in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><tfoot><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the table note content (footnote) in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><col><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the attribute values of one or more columns in the table. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
<tr><colgroup><td style="border-color: rgb(221, 221, 221);" width="239"></td>Define the column group in the table for formatting. <td style="border-color: rgb(221, 221, 221);" width="571"></td>
</tr>
</tbody>
<p><strong>Style/Section</strong></p>
<table width="811">
<thead><tr class="firstRow">
<th style="border-color: rgb(221, 221, 221);" width="239">Tag</th>
<th style="border-color: rgb(221, 221, 221);" width="571">Description</th>
</tr></thead>
<tbody>
<tr> <td style="border-color: rgb(221, 221, 221);" width="239"><style></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define the style information of the document. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><div></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define sections in the document. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><span></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define sections in the document. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><header></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define the header of a section or page. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><footer></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define the footer of a section or page. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><section></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define section. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><article></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define article. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><aside></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define content outside the page content. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><details></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Defines the details of the element. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><dialog></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define a dialog box or window. </td>
</tr>
<tr>
<td style="border-color: rgb(221, 221, 221);" width="239"><summary></td>
<td style="border-color: rgb(221, 221, 221);" width="571">Define the visible title for the <details> element. </td>
</tr>
</tbody>
</table>
<p><strong>Member Information</strong></p>
<table width="811">
<thead><tr class="firstRow">## Tag<th style="border-color: rgb(221, 221, 221);" width="173"></th>Description<th style="border-color: rgb(221, 221, 221);" width="637"></th>
</tr></thead>
<tbody>
<tr><head><td style="border-color: rgb(221, 221, 221);" width="173"></td>Define information about the document. <td style="border-color: rgb(221, 221, 221);" width="637"></td>
</tr>
<tr><meta><td style="border-color: rgb(221, 221, 221);" width="173"></td>Define meta information about the HTML document. <td style="border-color: rgb(221, 221, 221);" width="637"></td>
</tr>
<tr><base><td style="border-color: rgb(221, 221, 221);" width="173"></td>Define the default address or default target for all links in the page. <td style="border-color: rgb(221, 221, 221);" width="637"></td>
</tr>
<tr><basefont><td style="border-color: rgb(221, 221, 221);" width="173"></td>Deprecated. Define the default font, color, or size for text on the page. <td style="border-color: rgb(221, 221, 221);" width="637"></td>
</tr>
</tbody>
<div><div id="cnblogs_post_body">
<strong>Attribute</strong><table width="778" style="width: 811px;">
<thead><tr class="header firstRow">##Attribute name<th style="border-color: rgb(221, 221, 221);" width="105"></th>English<th style="border-color: rgb(221, 221, 221);" width="107"></th>English meaning<th style="border-color: rgb(221, 221, 221);" width="218"></th>Value <th style="border-color: rgb(221, 221, 221);" width="193"></th>Application scenario<th style="border-color: rgb(221, 221, 221);" width="169"></th>
</tr></thead>
<tbody>
<tr class="odd">src<td style="border-color: rgb(221, 221, 221);" width="105"></td>SouRCe<td style="border-color: rgb(221, 221, 221);" width="107"></td>Resource location<td style="border-color: rgb(221, 221, 221);" width="218"></td>Resource Path<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="even">border<td style="border-color: rgb(221, 221, 221);" width="105"></td>border<td style="border-color: rgb(221, 221, 221);" width="107"></td>Border<td style="border-color: rgb(221, 221, 221);" width="218"></td>Number (pixels)<td style="border-color: rgb(221, 221, 221);" width="193"> </td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="odd">size<td style="border-color: rgb(221, 221, 221);" width="105"></td>size<td style="border-color: rgb(221, 221, 221);" width="107"></td>Size<td style="border-color: rgb(221, 221, 221);" width="218"></td>Number (pixels)<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>##width<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">width</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Width</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Number (pixels)</td>
<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>height<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">height</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Height</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Number (pixels)</td>
<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169">
<br> </td>
</tr>bgcolor<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">BackGround COLOR</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Background color</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Color value: rea or #ffffff</td>
<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>background<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">background</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Background image</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Picture path</td>
<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>list-style<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">list-style</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Set all properties of the list</td>
<td style="border-color: rgb(221, 221, 221);" width="218"></td>
<td style="border-color: rgb(221, 221, 221);" width="193">
<br>List</td>
<td style="border-color: rgb(221, 221, 221);" width="169"></td> </tr>list-style-image<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">list-style-image</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Set image as list item tag</td>
<td style="border-color: rgb(221, 221, 221);" width="218">None</td>url<td style="border-color: rgb(221, 221, 221);" width="193">
<br>list </td>
<td style="border-color: rgb(221, 221, 221);" width="169"></td>
</tr>list-style-type<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">list-style-type</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Set the type of list item mark</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Disc(filled circle )</td>Cirle(hollow circle)<td style="border-color: rgb(221, 221, 221);" width="193">Square(solid square)</td>
<td style="border-color: rgb(221, 221, 221);" width="169">List</td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">line-height</td>
<td style="border-color: rgb(221, 221, 221);" width="107">line-height</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Line height (line spacing)</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number (pixels)</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Layout multi-line text</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">text-align</td>
<td style="border-color: rgb(221, 221, 221);" width="107">text-align</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Alignment </td>
<td style="border-color: rgb(221, 221, 221);" width="193">Left, right, center</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Alignment of various elements</td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">letter-spacing</td>
<td style="border-color: rgb(221, 221, 221);" width="107">letter-spacing</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Character spacing</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number (pixels)</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Increase the spacing between characters</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">text-decoration</td>
<td style="border-color: rgb(221, 221, 221);" width="107">text-decoration</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Text modification</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Underline, none</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Add underline, underline, etc.</td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">margin-top<br>(right, bottom , left)</td>
<td style="border-color: rgb(221, 221, 221);" width="107"><br></td>
<td style="border-color: rgb(221, 221, 221);" width="218">Margin</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number (pixels)</td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="even"># #padding-top<td style="border-color: rgb(221, 221, 221);" width="105">(right,bottom,left)<br>
</td>
<td style="border-color: rgb(221, 221, 221);" width="107"><br></td>Padding<td style="border-color: rgb(221, 221, 221);" width="218"></td>Number (pixels)<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="odd">display<td style="border-color: rgb(221, 221, 221);" width="105"></td>display<td style="border-color: rgb(221, 221, 221);" width="107"></td>Change the default display mode of block-level elements and inline elements<td style="border-color: rgb(221, 221, 221);" width="218"></td>block (line change block) <td style="border-color: rgb(221, 221, 221);" width="193">inline(block to line)<br>none(this element is not displayed in the web page)<br>
</td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="even">position<td style="border-color: rgb(221, 221, 221);" width="105"></td> position<td style="border-color: rgb(221, 221, 221);" width="107"></td>Positioning<td style="border-color: rgb(221, 221, 221);" width="218"></td>static(static positioning)<td style="border-color: rgb(221, 221, 221);" width="193">relative(relative positioning)<br>absolute(absolute positioning)<br>fixed(fixed positioning)<br>
</td>Use Positioning<td style="border-color: rgb(221, 221, 221);" width="169"></td>
</tr>
<tr class="odd">float<td style="border-color: rgb(221, 221, 221);" width="105"></td>float<td style="border-color: rgb(221, 221, 221);" width="107"></td>float<td style="border-color: rgb(221, 221, 221);" width="218"></td>None, left, right<td style="border-color: rgb(221, 221, 221);" width="193"></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="even">clear<td style="border-color: rgb(221, 221, 221);" width="105"></td>clear<td style="border-color: rgb(221, 221, 221);" width="107"></td>Handling float collapse<td style="border-color: rgb(221, 221, 221);" width="218"></td>left(clear left float)<td style="border-color: rgb(221, 221, 221);" width="193">right(clear right float)<br>both(clear floats on both sides)<br>none(do not clear floats)<br>
</td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>##type<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">type</td>
<td style="border-color: rgb(221, 221, 221);" width="107">List type</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Disc(solid circle)</td>Cirle(hollow circle)<td style="border-color: rgb(221, 221, 221);" width="193">Square(solid square)</td>
<td style="border-color: rgb(221, 221, 221);" width="169">for list</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">align</td>
<td style="border-color: rgb(221, 221, 221);" width="107">align</td>
<td style="border-color: rgb(221, 221, 221);" width="218">align</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Left, right , center<br>top, middle, bottom</td>
<td style="border-color: rgb(221, 221, 221);" width="169"> Horizontal alignment of paragraph content, vertical alignment of text and pictures</td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">type</td>
<td style="border-color: rgb(221, 221, 221);" width="107">type</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Form element type</td>
<td style="border-color: rgb(221, 221, 221);" width="193">text(text)<br>checkbox(check)<br>radio(single choice)<br>password(password)<br>file(file)<br>submit(submit )<br>reset(reset)<br>button(button)<br>image(picture button)<br>hidden(hidden)<br>
</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Form element</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">method</td>
<td style="border-color: rgb(221, 221, 221);" width="107">method</td>
<td style="border-color: rgb(221, 221, 221);" width="218">How to submit form data</td>
<td style="border-color: rgb(221, 221, 221);" width="193">get<br>post</td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">alt</td>
<td style="border-color: rgb(221, 221, 221);" width="107">alter</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Change, replace (prompt message when the picture is not displayed)</td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>
<td style="border-color: rgb(221, 221, 221);" width="169">Picture</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">cellpadding</td>
<td style="border-color: rgb(221, 221, 221);" width="107">cell padding</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Cell padding</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Table</td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">cellspacing</td>
<td style="border-color: rgb(221, 221, 221);" width="107">cell spacing</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Distance between cells</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number</td>
<td style="border-color: rgb(221, 221, 221);" width="169">Table</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105"> href</td>
<td style="border-color: rgb(221, 221, 221);" width="107">Hypertext REFerence</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Hypertext reference (jump to file location)</td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">rel</td>
<td style="border-color: rgb(221, 221, 221);" width="107">RELationship</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Relationship (used to define the relationship between linked files and HTML documents)</td>
<td style="border-color: rgb(221, 221, 221);" width="193">StyleSheet style sheet</td>
<td style="border-color: rgb(221, 221, 221);" width="169"> linkWhen linking a file</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">target</td>
<td style="border-color: rgb(221, 221, 221);" width="107">target</td>
<td style="border-color: rgb(221, 221, 221);" width="218">target (the location where the web page opens)</td>
<td style="border-color: rgb(221, 221, 221);" width="193">_blank(new window opens) <br>_self(open its own window)<br>_top(use the entire browser job as a window to display a new page)<br>_parent(open a new page in the parent window)</td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">colspan</td>
<td style="border-color: rgb(221, 221, 221);" width="107">COLumn span</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Cell spans columns</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number (number of columns spanned)</td>
<td style="border-color: rgb(221, 221, 221);" width="169"> Table</td>
</tr>
<tr class="even">
<td style="border-color: rgb(221, 221, 221);" width="105">rowspan</td>
<td style="border-color: rgb(221, 221, 221);" width="107">row span</td>
<td style="border-color: rgb(221, 221, 221);" width="218">Cell spanning row</td>
<td style="border-color: rgb(221, 221, 221);" width="193">Number (number of rows spanned)</td>
<td style="border-color: rgb(221, 221, 221);" width="169"> Table</td>
</tr>
<tr class="odd">
<td style="border-color: rgb(221, 221, 221);" width="105">readonly</td>
<td style="border-color: rgb(221, 221, 221);" width="107">read only</td>
<td style="border-color: rgb(221, 221, 221);" width="218">readonly</td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td>
</tr>
<tr class="even">##value<td style="border-color: rgb(221, 221, 221);" width="105"></td>value<td style="border-color: rgb(221, 221, 221);" width="107"></td>Initial value of the input box<td style="border-color: rgb(221, 221, 221);" width="218"></td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>
<td style="border-color: rgb(221, 221, 221);" width="169">
<br> </td>
</tr>
<tr class="odd">maxlength<td style="border-color: rgb(221, 221, 221);" width="105"></td>max length<td style="border-color: rgb(221, 221, 221);" width="107"></td>Maximum length<td style="border-color: rgb(221, 221, 221);" width="218"></td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>
<td style="border-color: rgb(221, 221, 221);" width="169"><br></td> </tr>
<tr class="even">scrolldelay<td style="border-color: rgb(221, 221, 221);" width="105"></td>scroll delay<td style="border-color: rgb(221, 221, 221);" width="107"></td>Scroll delay<td style="border-color: rgb(221, 221, 221);" width="218"></td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>< m arquee><td style="border-color: rgb(221, 221, 221);" width="169"></td> </tr>
<tr class="odd">direction<td style="border-color: rgb(221, 221, 221);" width="105"></td>direction<td style="border-color: rgb(221, 221, 221);" width="107"></td>Direction (scrolling direction)<td style="border-color: rgb(221, 221, 221);" width="218"></td>
<td style="border-color: rgb(221, 221, 221);" width="193"><br></td>< m arquee<td style="border-color: rgb(221, 221, 221);" width="169"></td> </tr>
</tbody>
</table>
<h2 id="选择器">
<br><br>
</h2>
</div></div>
</table>
</table>
</tbody>
</table>
</tbody>
</table><p>The above is the detailed content of html common tags and attributes. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Statement of this Website</div>
<div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796787760.html" title="InZoi: How To Apply To School And University" class="phpgenera_Details_mainR4_bottom_title">InZoi: How To Apply To School And University</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot AI Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 months ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/1796787760.html" title="InZoi: How To Apply To School And University" class="phpgenera_Details_mainR4_bottom_title">InZoi: How To Apply To School And University</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By DDD</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/article.html">Show More</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot Tools</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ai">Show More</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Topics</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7751</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1643</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1397</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1293</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1234</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600245.html" title="Table Border in HTML" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416492486715.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Table Border in HTML" />
</a>
<a href="https://www.php.cn/faq/1796600245.html" title="Table Border in HTML" class="phphistorical_Version2_mids_title">Table Border in HTML</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span>
<p class="Articlelist_txts_p">Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600244.html" title="Nested Table in HTML" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416491283996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Nested Table in HTML" />
</a>
<a href="https://www.php.cn/faq/1796600244.html" title="Nested Table in HTML" class="phphistorical_Version2_mids_title">Nested Table in HTML</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span>
<p class="Articlelist_txts_p">This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600238.html" title="HTML margin-left" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416482056439.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML margin-left" />
</a>
<a href="https://www.php.cn/faq/1796600238.html" title="HTML margin-left" class="phphistorical_Version2_mids_title">HTML margin-left</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:48 PM</span>
<p class="Articlelist_txts_p">Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600271.html" title="HTML Table Layout" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416543391948.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Table Layout" />
</a>
<a href="https://www.php.cn/faq/1796600271.html" title="HTML Table Layout" class="phphistorical_Version2_mids_title">HTML Table Layout</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span>
<p class="Articlelist_txts_p">Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600269.html" title="HTML Input Placeholder" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416542577781.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Input Placeholder" />
</a>
<a href="https://www.php.cn/faq/1796600269.html" title="HTML Input Placeholder" class="phphistorical_Version2_mids_title">HTML Input Placeholder</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:54 PM</span>
<p class="Articlelist_txts_p">Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600210.html" title="HTML Ordered List" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416432927533.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Ordered List" />
</a>
<a href="https://www.php.cn/faq/1796600210.html" title="HTML Ordered List" class="phphistorical_Version2_mids_title">HTML Ordered List</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:43 PM</span>
<p class="Articlelist_txts_p">Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600227.html" title="Moving Text in HTML" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416455153019.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Moving Text in HTML" />
</a>
<a href="https://www.php.cn/faq/1796600227.html" title="Moving Text in HTML" class="phphistorical_Version2_mids_title">Moving Text in HTML</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:45 PM</span>
<p class="Articlelist_txts_p">Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/faq/1796600246.html" title="HTML onclick Button" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202409/04/2024090416493797970.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML onclick Button" />
</a>
<a href="https://www.php.cn/faq/1796600246.html" title="HTML onclick Button" class="phphistorical_Version2_mids_title">HTML onclick Button</a>
<span class="Articlelist_txts_time">Sep 04, 2024 pm 04:49 PM</span>
<p class="Articlelist_txts_p">Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.</p>
</div>
</div>
<a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/about/us.html">About us</a>
<a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
<a href="https://www.php.cn/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1745719171"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html>
