Home > Developer > Web Develop

A summary of the HTML lesson

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML translation to Hypertext Markup language
< tag name > content </Tag name >
Static Web page Dynamic Web page is the difference is to see whether to extract data from the data
The general Web page consists of several groups
<title> title on the page </title>

<body, its properties generally have bgcolor page background color, text text color, tpmargin on margins, Leftmar left margin, Backgroung background wallpaper >
Page display content, general label
<font color= "" size= "" face= "" ></font> color, size, font
<strong> Bold </strong>
<b> Bold </b>
<em> Tilt </em>
<i> Tilt </i>
<u> Underline </u>
<del> Delete Lines </del>
<sub> Subscript </sub>
<sup> superscript </sup>
<center> Center </center>
<br> return
Space
......
The title wraps automatically.
<p> paragraph Labels </p>
Ordered labels
<ol type= "" >
<li></li>
<li></li>
</ol>
Unordered label
<ul type= "" >
<li></li>
<li></li>
</ul>

Hyperlink: <a href= "url" > Essentials content </a>
<a href= "url" target= "_blank" > Open on a blank page, self is open on its own page
Anchor point: <a href= "#top" ></a> return directly to the top of the page
<a name= "" ></a>
<a href= "" ></a> return to the naming office

Relative path: Find from current page
Absolute path: Search from the root of the site
Table: The contents must be in the cell, the cell must be in the row, and the line must be in the table.
<table width border border bgcolor background color background background image >
<tr> Line:
<td></td> cell
<th></th> Content Auto Center Bold
</tr>
</table>
Align horizontal Align Left center right
valign Vertical alignment top Middle Bottom
rowspan Merge Rows
colspan merge Columns

</body>

Take the following job as an example

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Job 20161221</title>

<body bgcolor= "#000000" topmargin= "200px" leftmargin= "200px" >

<p>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "+3" >
<em>
<strong> Jobs </strong>
</em>
<sub>20161221</sub>
</font>
</p>

<p>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "-1" >
<del> can not complete
</del>
</font>
</p>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "-1" >
<p>one fall in love with many people during the lifetime.</p>
<p>when you finally get your own happiness,</p>
<p>you would understand the preious sadness is kind of treasure,</p>
<p>which makes better to hold and cherishthe people you love.</p>
</font>
<p>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "-1" > Font is:<br>
<u> Microsoft ya Black </u>
</font>
</p>
<a href= "#top" >

</a>
<br>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "-1" > Cracked
</font>
<br>
<br>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "+2" > Requirements:
</font>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "-1" >
<ol type= "A" >
<li> Independent Completion </li>
<li> Practice Today </li>
<li> Do blog notes </li>
</ol>
</font>
<br>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "+2" >ps:
</font>
<br>
<font face= "Microsoft Jas Black" color= "#FFFFFF" size= "-1" >
<ul type= "Square" >
<li> note the use of ordered/unordered lists </li>
<li> image Length is 100px, click the picture can link to the top of the page </li>
<li> requirement Completion at 70% + </li>
<li> can not <font color= "#660066" >
<a href= "http://www.baidu.com" target= "_blank" > Baidu </a>
</font> (this link opens on a new page) </li>
<li> page left and top margin is 200px</li>
<li> mouse moves to the picture to show "hahaha" </li>
<li> show "Cracked" on bad chart </li>
</ul>

<table width= "400px" height= "200px" border= "1" cellspacing= "0" cellpadding= "0" >
<font color= "#FFFFFF" >
<tr>
<th width= "100px" align= "center" valign= "Middle" > Width/height </th>
<th width= "100px" align= "center" valign= "Middle" > Alignment </th>
<th width= "100px" align= "center" valign= "middle" > Background color </th>
<TD rowspan= "2" align= "center" valign= "Middle" > Merged cells </td>
</tr>
<tr>
<TD bgcolor= "#999999" align= "center" valign= "Bottom" >400px/200px;</td>
<TD bgcolor= "#999999" valign= "bottom" align= "right" > on/Off </td>
<TD bgcolor= "#999999" align= "right" valign= "bottom" >gray</td>

</tr>
</font>
</table>


</body>

A summary of the HTML lesson

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More