HTML Common tags
structure of HTML
<body></body>
The properties of the Body tag
<body Property ="attribute value">
Background: Setting a background image for a Web page
BgColor: Setting a background color for a Web page
text and font decoration tags
<b></b> or <strong></strong> font Bold
<i></i> or <em></em> to set the font italic
<u></u> or <ins></ins> Set the font to underline
<s></s> or <del></del> set strikethrough for font
<sup></sup> Font superscript
<sub></sub> Font subscript
<font Property ="attribute value"></font> set color for text, set font size, set font
color sets colors for fonts
Size Sizes Font
Face sets font for font
Typesetting marks
title Tag (1 large 6 Small)
<p></p> paragraph marks
properties:align the contents of the content in the horizontal direction of the alignment value:left( default )/center/right
<br/> line break tag
Horizontal line marker
properties: Color Sets the colors of a horizontal line
Size Sets the thickness of the horizontal line
width Set the horizontal line widths
Align to set horizontal alignment of horizontal lines
NoShade removing Shadows
List
Unordered list
<ul>
<li></li>
<li></li>
</ul>
Ordered list
<ol>
<li></li>
<li></li>
</ol>
Custom list
<dl>
<dt></dt> ( title )
<dd></dd> ( content )
</dl>
Marquee Marking
<marquee></marquee>
Common Properties:
Direction: Scrolling Direction value:left( default )/center/right
Behavior: scrolling Way to value:Scroll ( scroll default )/slide ( Scroll only once )/alternate ( Elastic Motion )
Width: setting widths
Height: Set height
BgColor: Setting the background color
ScrollAmount: Scrolling Step value (the higher the value, the faster)
Head Tag
<title></title>: The function of this tag is to display the title of the page
<meta/>
n It tells the browser what encoding to use to parse the current document
<meta http-equiv= "Content-type" content= "text/html;charset= character encoding "/>
n It can implement Web page refresh
<meta http-equiv= "Refresh" content= "refreshes the current page every specified time"/>
n It can implement Web page jump
<meta http-equiv= "Refresh" content= " Specify the jump time ; page URL to jump "/>
n It can also be optimized for SEO
<meta name= "keywords" content= "keyword list"/>
<meta name= "description" content= "Web description"/>
Super Link
<a><a/>: The hyperlink can be implemented with this tag
Common Properties:
Href: URL address of the link to jump
Target: How the destination file is opened
property value:_self Open in current window (default)
_blank opens in a new window
_top opens in the top window
_parent Open in parent window
Name: the link used to implement the anchor point
Id: the link used to implement the anchor point
Anchor Point Link
To implement an anchor link requires two steps:
First step: To define an anchor point
<a name= "anchor name" ></a> or <a id="anchor name" ></a>
Second step: To find the defined anchor link
<a href= "# Anchor name " > text or picture </a>
Picture Markers
: picture marker
Common Properties:
SRC: Address of the reference image
ALT: text message to display when the picture does not exist
Title: Displays text messages when the mouse is placed in the position of the picture
Border: setting a border for a picture
Width: Setting the picture
Height: Sets the altitude for the picture
Image Hotspots
Format:
name " >
<map name= " It should be the same as the usemap attribute value inside the img tag " >
<area shape coords= "" href= "" title= "the text that appears when the mouse is placed on top of the slice"/>
<area/>
<area/>
</map>
properties of the area tag:
Shape: Represents the value of shapes inside an area:rect ( rectangle ),Circle ( Circle ) , Poly ( polygon )
coords: Coordinate values
if the shape is set to rect ( rectangle ) , then the coordinate value should have 4 : x1,y1,x2,y2
if the shape is set to Circle ( Circle ) , then the coordinate value should have 3 : X1,y1,r
if the shape is set to poly ( polygon ) , then the coordinate value should be determined by how many sides
Multimedia Tagging
<embed/> HTML5
Common Properties:
SRC: The source file address to be introduced
Width: Setting widths
Height: Set height
Table
Format of the table
<table>
<tr>
<td></td>
</tr>
</table>
The markup for the table
<table></table>: represents a table
<tr></tr>: represents a row in a table
<td></td>: represents a cell in a table
<th></th>: represents a header cell in a table,
<caption></caption>: represents a heading in a table
properties of the Table tag
<table></table>
property:border: Set Border Width value:0~n
BorderColor: Set Border color
Width: Sets the table width value: Fixed value or Percentage
Heigh: Set Table height value: Fixed value or Percentage
Align: Sets the horizontal alignment value of the table : Left ( default )/center/right
Background: Setting the background picture of a table
BgColor: Sets the background color of the table
CellSpacing: the distance between cells and cells in a table
CellPadding: The distance between the contents of the cell in the table and the cell border
<tr></tr>
properties:background: Set the background picture of a row
BgColor: Sets the background color of the row
Width: To set the line widths
Height: Sets the heights of the rows
Align: Sets the horizontal alignment value of the row content:left( default )/center/right
valign: Sets the vertical alignment of the line content: Top( top aligned )/middle ( default )/bottom
<td></td> or <th></th>
Properties:width: setting cell widths
Height: Sets the heights of the cells
Background: Setting the background picture of a cell
BgColor: Setting the background color of a cell
Rowspan: merging cells across rows
Colspan: merge cells across columns
Tag of the title
<caption></caption> This is the table 's self-tagging it is used to set the table's caption
Hidden markup for tables
<thead></thead>: represents the head of a table
<tbody></tbody>: indicates that the body part of a table can have more than one
<tfoot></tfoot>: represents the end of a table it is generally used for statistical purposes .
form
<form>
Controls for forms
</form>
properties of the Form tag:
Action: The handler for the form data gives the form's data to "who" for processing
Method: How the form data is submitted:get ( default )/post
Get: display all form data in the browser's address bar
Post: It does not display the form's data in the browser's address bar, it is sent directly to the background
Enctype: form data encoding method generally do not have to write only when the file upload only need to write
value:application/x-www-form-urlencoded The default is its different encryption method
Multipart/form-data Multi-File Upload method
form Controls
Single-line text box:
<input type= "text" name= "name" value= "value" size= "Set width"/>
Single-line Password box:
<input type= "password" name= "name" value= "value" size= "Set width"/>
radio button:
<input type= "Radio" name= "name" value= "value" checked= "Checked" ( selected by default )/>
Multi-Select button:
<input type= "checkbox" name= "name" value= "value" checked= "Checked" ( default selected /) >
Submit button:
<input type= "Submit" Name= " name does not suggest write " value= "value"/>
Reset button:
<input type= "reset" name= " name does not suggest write " value= "value" >
Normal button:
<input type= "button" name= " name does not suggest write " value= "value" >
Picture button
<input type= "image" src= " picture address URL"/>
File Upload button
<input type= "file" name= "name" >
method="POST" enctype= "Multipart/form-data" inside the form tag
Hidden fields:
<input type= "hidden" name= "name" value= "Value" >
Use button this double tab to implement the buttons
Submit button:
<button type= "Submit" > submit </button>
Reset button:
<button type= "reset" > reset </button>
Normal button:
<button type= "button" > general </button>
Note: If the type inside the button tag is not written in the form tag, it has the submit function of the form if the outside the form tag, it's a normal button.
Drop-down list:
<select>
<option> Please select the following provinces </option>
</select>
Text fields:
<textarea rows= "Number of rows" cols= "Number of columns" name= "name" ></textarea>
Structure of frame-type Web pages
<frameset rows= "Set this frame page to up and down" cols= "set this frame page to the left and right type" >
<frame/>
<frame/>
</frameset>
Property:
Frameset This tag it is used to define whether the frame page is up or down or right or left
Rows= "80,*" splits the window into a top-up window that occupies up to three pixels all the rest of the space is given to the next window .
Rows= "80,100,*" splits the window into the upper and lower top window occupies the middle of a window occupying a total of four pixels the rest of the space is given to the next window .
cols= "100,*" splits the window into the left side of the right-hand window occupies up to four pixels all the rest of the space is given to the window .
cols= "100,80,*" splits the window into the left middle right of the left window occupies up to four pixels in the middle of the window occupies A total of all the space left to the right window /c12>
Border: The thickness of the border used to set the frames page
Bordecolor: The border color used to set the frames page
Frame This tag indicates how many small windows in the frame page of a small window will have a frame this tag
SRC: It can be introduced to external HTML pages or other sites can be
Name: Setting the names of small Windows This property is very important
HTML Common Tags