A comprehensive explanation of HTML commonly used tags

May 03, 2021 HTML

HTML is the core and foundation of all web production techniques and a basic knowledge that every web page maker must master, and html tags are the most basic unit in the html language and the most important component of HTML.

Beginners first need to know some of the characteristics of HTML tags:

HTML tags are case-independent, for example, <BODY> <body> Something <p>

<P>P 是段落标签,HTML标签不区分大小写</P>

<p>意思是一样的，推荐使用小写。</p>

Try it out . . .

Note: HTML tags are not case sensitive, but it is recommended to use small case!

HTML tags generally appear in pairs, from the start label such as the start label, the left label is generally called the start </h1> there are beginnings and ends, in addition to some individual are single-closed <h1> the following list of HTML single-closed labels.

Single-closed label

Label	Function
<br />	Insert a wrap simple wrapper
<hr />	Define horizontal line
<area />	Define the area in the image map
<base />	Define the default address or default target of all links in the page
<img />	Define image
<input />	Define input controls
<link />	Define the relationship between documents and external resources
<meta />	Define meta information about HTML documents
<basefont />	Not recommended for use .Define the default font, color or size of the text in the page
<param />	Define the parameters of the object
<col />	Define attribute values for one or more columns in the table
<frame />	Define the window or frame of the frame set
<embed />	Define external interactive content or plugin

The font effect

Label	Function
<h1>...</h1>	Title word (maximum)
<h6>...</h6>	Title word (minimum)
<b>...</b>	Bold
<strong>...</strong>	Bold word (emphasis)
<i>...</i>	italics
<em>...</em>	Beems (emphasized)
<dfn>...</dfn>	Beems (indicating definition)
<u>...</u>	Bottom line
<ins>...</ins>	Bottom line (indicating the insertion text)
<strike>...</strike>	Horizontal line
<s>...</s>	Delete line
<del>...</del>	Delete line (delete)
<kbd>...</kbd>	Keyboard text
<tt>...</tt>	Font
<xmp>...</xmp>	Fixed width font (blank, wrap, positioning function in the file)
<plaintext>...</plaintext>	Fixed width font (no mark symbol)
<listing>...</listing>	Fixed width small font
<font color=00ff00>...</font>	font color
<font size=1>...</font>	Minimum font
<font style =font-size:100 px>...</font>	Unlimited

Zone break mark

Label	Function
<hr>	Horizontal line
<hr size=9>	Horizontal line (set size)
<hr width=80%>	Horizontal line (set width)
<hr color=ff0000>	Horizontal line (set color)
<br>	(Renewal)
<nobr>...</nobr>	Waters (do not wrap)
<p>...</p>	Waters (paragraph)
<center>...</center>	Set in

Link

Label	Function
<base href=地址>	(Preset linkage)
<a href=地址></a>	External connection
<a href=地址 target=_blank></a>	External linkage (open new window)
<a href=地址 target=_top></a>	External link (all window link)
<a href=地址 target=页框名></a>	External link (linkage at the specified page box)

Image/Music

Label	Function
<img src=图片地址>	Map
<img src=图片地址 width=180>	Set the image width
<img src=图片地址 height=30>	Set the image height
<img src=图片地址 alt=提示文字>	Set image prompt text
<img src=图片地址 border=1>	Set the picture border
<bgsound src=MID音乐文件地址>	Background music settings

Form

Label	Function
<table align=left>...</table>	Table position, left
<table align=center>...</table>	Table position, in place
<table background=图片路径>...</table>	Background picture URL = is the path URL
<table border=边框大小>...</table>	Set the size of the table border (using numbers)
<table bgcolor=颜色码>...</table>	Set the background color of the table
<table borderclor=颜色码>...</table>	Set the color of the table border
<table borderclordark=颜色码>...</table>	Set the color of the table dark border
<table borderclorlight=颜色码>...</table>	Set the color of the form of bright border
<table cellpadding=参数>...</table>	Specifies the spacing between content and grid lines (using numbers)
<table cellspacing=参数>...</table>	Specifies the distance between grid lines and grid lines (using numbers)
<table cols=参数>...</table>	Specify the number of columns
<table frame=参数>...</table>	Set the display method of the table extraordinary frame
<table width=宽度>...</table>	Specify the width size of the table (using numbers)
<table height=高度>...</table>	Specify the height size of the table (using numbers)
<td colspan=参数>...</td>	Specifies the number of columns in the memory consolidation bar (using numbers)
<td rowspan=参数>...</td>	Specify the number of columns (using numbers)

Split the window

Label	Function
<frameset cols="20%,* ">	Split left and right, the size of the left frame segmentation size is 20%, the size of the frame, the size of the browser will be automatically adjusted.
<frameset rows="20%,* ">	Split up and down, the size of the following frames is 20% below the size of the following frames will be automatically adjusted.
<frameset cols="20%,* ">	Separate left and right frames
<frameset cols="20%,*,20% ">	Split the left middle right frame
<frameset rows="20%,*,20% ">	Split the middle and lower three frames
<! - - ... - ->	annotation
<a href target>	Specify the segmentation window of the hyperlink
<a href=#锚的名称>	Super link specifying an anchor name
<a href>	Specify hyperlink
<a name=锚的名称>	Name of the node
<address>....</address>	Used to display an email address
<b>...</b>	Bold
<base target>	Specify the segmentation window of the hyperlink
<basefont size>	Change the preset glyph
<bgsound src>	Add background music
<big>	Show big font
<blink>	Flashing text
<body text link vlink>	Set text color
<body>	Show this article
<br>	Wrap
<caption align>	Set the table title position
<caption>...</caption>	Add titles for tables
<center>	Neutralize
<cite>...<cite>	Writing
<code>...</code>	Used to list a program code
<comment>...</comment>	Plus annotation
<dd>	Set the project explanation of the list of definitions
<dfn>...</dfn>	Display "Definition" text
<dir>...</dir>	List text volume
<dl>...</dl>	Set the volume label defined list
<dt>	Set the item defined list
<em>	Emphasize
<font face>	Arbitrary specified the shape used
<font size>	Set font size
<form action>	Setting up a handling form
<form method>	Set the information transfer method of the housing form
<frame marginheight>	Set the upper and lower bounds of the window
<frame marginwidth>	Set the left and right boundary of the window
<frame name>	Named a split window
<frame noresize>	Lock the size of the split window
<frame scrolling>	Set the scroll bar of the split window
<frame src>	Add HTML files to the window
<frameset cols>	Split the window into left and right sub-windows
<frameset rows>	Split the window into a top-down child window
<frameset>...</frameset>	Segmentation window
<h1>~<h6>	Set text size
<head>...</head>	Label file information
<hr>	Plus a splitter line
<html>...</html>	The beginning and end of the file
<i>...</i>	italics
<img align>	Adjust the location of the graphic image
<img alt>	Filling your graphics image
<img dynsrc loop>	Add movie
<img height width>	Insert the image and preset the graphic size
<img hspace>	Insert the image and preset the left and right boundary
<img lowsrc>	Pre-load picture function
<img src border>	Set the image boundary
<img src>	Insert a picture
<img vspace>	Insert the image and preset the top boundary of the graphic
<input type name value>	Add input fields in the form
<isindex>	Define query form
<kbd>...</kbd>	Represents user input text
<li type>...</li>	List item (specified symbol)
<marquee>	Running horse
<menu>...</menu>	Column text volume
<meta name="refresh " content url>	Automatic update file content
<multiple>	You can select a number of list columns at the same time
<noframe>	Define text that does not have a split window
<ol>...</ol>	Ordered list
<option>	Define items in the form column in the form
<p align>	Set aligned direction
<p>...</p>	Segmentation
<person>...</person>	Show a name
<pre>	Use the original arrangement
<samp>...</samp>	Reference word
<select>...</select>	Define list columns in the form
<small>	Show a small font
<strike>	Writing and horizontal line
<strong>	Used to strengthen tone
<sub>...</sup>	Subordinate
<sup>...</sup>	Marker
<table border=n>	Adjust the wide line height of the table
<table cellpadding>	Adjust the boundary between data domain
<table cellspacing>	Adjust the width of the table line
<table height>	Adjust the height of the table
<table width>	Adjust the width of the table
<table>...</table>	Generate the volume of the table
<td align>	Adjust the left and right alignment of the table field
<td bgcolor>	Set the background color of the form field
<td colspan rowspan>	Message of the table field
<td nowrap>	Set the form field without wrap
<td valign>	Adjust the top of the table field
<td width>	Adjust the width of the table field
<td>...</td>	Define the data domain of the table
<textarea name rows cols>	Add how many columns of text input columns in the form
<textarea wrap>	Determine the text input field is the moving bank
<th>...</th>	Defining the header field of the table
<title>...</title>	File title
<tr>...</tr>	Definition table beauty
<tt>...</tt>	Typewriter font
<u>...</u>	Writing and bottom line
<ul type>...</ul>	No serial number list (can specify symbol)
<var>...</var>	Used to display variables

Running lights

Label	Function
<marquee>...</marquee>	Ordinary roll
<marquee behavior=slide>...</marquee>	slide
<marquee behavior=scroll>...</marquee>	Preset roll
<marquee behavior=alternate>...</marquee>	Come back and forth
<marquee direction=down>...</marquee>	Roll down
<marquee direction=up>...</marquee>	Roll up
<marquee direction=right>...</marquee>	Right
<marquee direction=left>...</marquee>	Roll to the left
<marquee loop=2>...</marquee>	Number of rolls
<marquee width=180>...</marquee>	Set width
<marquee height=30>...</marquee>	Set height
<marquee bgcolor=ff0000>...</marquee>	Set background color
<marquee scrollamount=30>...</marquee>	Set the roll distance
<marquee scrolldelay=300>...</marquee>	Set the roll time