May 4 HTML basics, Universal tags

Source: Internet
Author: User
Tags tag name

HTML is the Hypertext Markup Language (Hyper Text Mark Language), which is a standard markup language for creating Web pages, with static pages (html) and dynamic pages (. php. asxp. jsp, created by php,.net,java, respectively). At present, there are HTML5, and the more commonly used is HTML4.

Common IDE (code Editor) has visual Studio (full), hbuilder (primarily for front-end development), Dreamweaver (older, suitable for newbies), webstorm (the best-known write front).

first, the basic syntax of html:

(1) tags: the smallest unit of html, is the label, divided into double label and single label. Double tags are commonly used to mark certain content in the format < Tag Name Property 1 = "property Value 1" Property 2 = "property value 2" > content </property name >. Single label generally plays a controlling role in the format < Tag Name Property 1 = "property Value 1" Property 2 = "property value 2"/>

(2) structure: <! DOCTYPE html> text type: html

Start end tag

  

<mate charset= "utf-8" > Encoding format, commonly used there are three kinds of utf-8 (universal), GB2312 (national standard), GBK (GB2312 expansion).

<title> title </title>

   Label page title

<body> Subject Content </body>

(3) Commissioning. Web page can be directly in the browser display content on the right-click Check (google browser) Location Code and MODIFY.

second, the General Label:

(1) the Body property:

  <body bgcolor= "background color" text= "text color" margin= "margins" >

Picture label path in relative path (starting with the current file as base), absolute path ( not used as base point for current machine root). Relative path representation Method:. /file name: Previous level directory;./(may not Write) file name: current directory; folder name/file name: subordinate directory;/folder/file name: root directory

<a href= "url/local directory page" target= "_blank" > Hyperlinks </a> target common attribute values are two, _blank is opened in a new blank tab, _self is open in the current tab. Hyperlinks can also be made into anchor points and.

  </body> usually seldom directly in the body Riga Attribute.

(2) Format Control class label

<font size= "size" face= "font" color= "color" > Text </font> font are deprecated in html4, and in the writing process it is often used instead of styles.

<b> Bold </b><strong> bold </strong> effect consistent

<i></i> tilt <em> tilt </em> effect consistent

<u> underline </u> Bold Italic underline labels are less used and are replaced with style Sheets.

single row relative to the previous level title

<p> paragraph </p> empty line between paragraphs

<span> Layer label </span> single use no effect, can be used to mark some text individually, so that the text to show different effects.

<div> Layer Labels </div> works with style sheets instead of table Layouts. single Row

Extended Content:

<del> This is not the point, delete </del> <sup> right upper corner mark </sup> <sub> right subscript </sub> <mark> That's the point, mark it. </mark>

(3) Table Label

  <table border= "table border line weight" width= "table width" height= "table height" gbcolor= "table background color"> Background color is usually indicated by color code such as #0000ff is blue

    <tr height= "row height"> row One does not walk the height can be different

<TD width= "column width" rowspn= "spans a row, which overrides row two for column one" > column one </td> same column width does not allow misalignment

<TD colsapn= "spans A column and then overwrites columns three" > Columns two </td>

<TD bgcolor= "table cell color, priority higher than table color" > column three </td> priority issues are often encountered as text languages, followed by reading order high priority

    </tr>

    <tr> Line Two

<TD align= "horizontal direction" > column one </td> horizontal direction left,center,right three kinds of

<TD valign= "vertical direction" > column two </td> vertical top,middle,bottom of three

<td> column Three </td>

    </tr>

<thead> header, Add code readability, equivalent to Header.

<td> Table Header </td>

<th> title </th> is as easy as centering and bold in the Style. Takes up only one cell

</thead>

<tfoot> feet, Add code readability, equivalent to Footer.

<td> table Feet </td>

</tfoot>

  </table> form can not be misplaced, need to dislocation when the table in the form, not commonly Used.

third, the Practice Content. The practice in class Today.

<! DOCTYPE html>"http://www.w3.org/1999/xhtml"> "Content-type"Content="text/html; Charset=utf-8"/> <title> I am title </title> "Grey"text="Black">1234567890"img/tu1.jpg"Width="242"height="273"/> <a href="http://www.baidu.com"> Baidu </a> <a href="./testpage.html"target="_blank"> Hyperlinks </a> <i> tilt </i> <em> tilt </em> "1"Width=" -"height=" -"Bgcolor="Green"> <tr height=" $"> &LT;TD width=" -"rowspan="2"align=" right"valign="Bottom">1</td> &LT;TD width=" -"colspan="2">2</td> </tr> <tr height=" -"> &LT;TD bgcolor="Yellow">b</td> <td>c</td> </tr> <thead> <                Th> head </th> <td> head </td> </thead> <tfoot> <td> feet </td> </tfoot> </table> </body>

  

Postscript:

After reading a look at the time, did not expect to have more than 11 o'clock in the evening, did not feel the passage of time ah, very fulfilling, feel really good.

May 4 HTML basics, Universal tags

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.