HTML Common Tags

Source: Internet
Author: User

The HTML document uses a structure such as a directory tree, with the basic structure such as:

<!DOCTYPE html><html><head><title>文档的标题</title></head><body>文档的内容......</body></html>

The first line declares that the browser wants to parse the document in standard mode, with two sub-labels, the header not displayed in the page content, and the main purpose is to describe the information on the Web page.
<body></body>is displayed in the Web page, which is a fixed format.

The following HTML document describes the use of basic HTML tags:

<!doctype html><!--declares that the browser will parse the HTML page in standard mode--<Htmllang="EN" ><Head><Metacharset="UTF-8" ><!--encoding--<MetaName="Generator"Content="EditPlus?" ><MetaName="Author"Content="" ><MetaName="Keywords"Content="" ><!--the content property is followed by some of your own defined keywords, which makes it easy for your browser to search<MetaName="Description"Content="" ><!--description of the Web page,--><!--http-equiv= "Refrash" Refrash property after the content= "2;http://www.baidu.com/" means two seconds after the jump to Baidu home--<Metahttp-equiv="Refresh"Content="2;http://www.baidu.com/" ><LinkRel="Icon"href="Https://www.baidu.com/favicon.ico" ><!--quoted Baidu's logo--><!--represents the title of the page--<title>html Common label Use</Title></Head><Body><!--H1~h6 from large to small display titles, with rows, interlaced effects belonging to block-level labels--<H1> Title 1</H1><H2> Title 2</H2><!--paragraph labels, with rows and interlaced effects, also belonging to block-level labels--<P> cachinnation go out, my generation is basil people</P><!--font tilt tag, inline label--<Em> multithreaded Programming</Em><Br/><A newline label, which belongs to a single label--<!--font bold, inline label-<B> Django Framework</B><!--Remove Labels--<Del> your uncle.</Del><!--superscript, subscript label, inline label-a<Sup>2</Sup> H<Sub>2</Sub>o<!--about the display of the label, is an inline label, the SRC attribute value is the image URL address, the width of the 200px,500px (pixels), the Alt attribute indicates that when the picture cannot be loaded, the caption value indicates that the message is displayed when the mouse points to the picture-<ImgSrc="Pictures\1.jpg"height="300px"Width="200px"alt="Load Failed"title="Mr. V" ><!--a tag is an inline tag, using method one, as a connection jump, target= "_blank" means creating a new tab--<Ahref="http://www.baidu.com/"target="_blank" > Baidu</A><!--use method two, as an anchor point, to jump on this page, combined with the following example, at the bottom of the page to define a anchor point tag, click will jump to the P tag where the location--<PId="Top" > Top of page</P><Divstyle="Width:200px;height:700px;background:gray;" ></Div><Ahref="#top" > to the top of the page</A><!--about the use of lists, OL have sequence lists, UL unordered list, DL, custom list, belong to block-level tags to understand--<Ol><Li> List</Li><Li> List</Li><Li> List</Li></Ol><Ul><Li> List</Li><Li> List</Li><Li> List</Li><Li> List</Li></Ul><Dl><Dt> List Title</Dt><Dd> List</Dd><Dd> List</Dd><Dd> List</Dd></Dl><!--table Usage--<!--table property, width,height to the table with a limit of width, border= "1px" to the table border, the default is not, align= "center" to let the table center display, cellspacing represents the distance between the cell and the cell A cellpadding that represents the distance between the cell border and the content--<TableWidth="200px"height="200px"Border="1px"align="Center"cellspacing="0px"cellpadding="4PX" ><!--Caption property represents the title name of the table--<Caption> Results</Caption><Tr><Th> language</Th><!--th tags can be centered and bold compared to TD labels<Th> Mathematics</Th><th> English</Th></Tr><Tr><Tdrowspan="2" >jkj</Td><!--RowSpan property to have the label exclusive of two rows, rowspan can have the label exclusive two--<Tdcolspan="2"align="Center" >jkj</Td></Tr><Tr><Td>kjk</Td><Td>kjk</Td></Tr></Table><!--use of form forms, the Action property represents the submission to form information to that Url,method representing the way it was submitted--<Formaction=""Method="POST" ><!--the input tag is an inline tag, we can use the P tag to include the effect of block-level labels with the input tag, and different type attribute values show different effects due to the server being submitted as a key-value pair, the name value represents the key, The Value property values are represented by the type value-<P> User Name<InputType="Text"Name="Username" ></P><p> Password<InputType="Password"Name="Psword" ></P><Br><!--check box and hobbies: Basketball<InputType="checkbox"Name="Hobby"Value="Basketball" > Football<InputType="checkbox"Name="Hobby"Value="Football" > Other games<InputType="checkbox"Name="Hobby"Value="PlayGame" ><Br><Br><!--Radio Box--Men<InputType="Radio"Name="Sex"Value="Male" > Women<InputType="Radio"Name="Sex"Value="Female" ><!--drop-down box--<Br> City<SelectName="City" ><OptionValue="Shanxi" > Shanxi</Option><OptionValue="Hebei" > Hebei</Option><OptionValue="Hebei" > Hebei</Option><OptionValue="Hebei" > Hebei</Option></Select><Hr><!--HR tag represents split line--<!--label tag combined with the input tag-<LabelFor="Text" > Name</Label><InputId="Text"Type="Text"name= "name" >< br> <!--form content Reset, value value represents reset button values, that is, we see values--<input type= "Reset" value= "reset" ><br> <!--submit button--<input type=" submit "> </form> </ body></HTML>    

The method of representation of common special symbols in HTML documents;

&nbsp; 表示一个空格 &lt; &gt; 表示<> &copy; 表示商标商标符号

HTML Common Tags

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.