HTML Base Notes

Last Update:2015-09-30 Source: Internet

Author: User

Tags html br

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

HTML Base Notes

Create one of the simplest browsers

First open the VS2010, then drag a form control in the space to the main page, then drag out a TextBox control as the Address bar, then add a button control as the buttons, and finally drag a WebBrowser as the display interface.

Then click the button and write the code

WebBrowser1.Navigate (TextBox1.Text);

Adjust Startup items: In the resource management right-click Property, set the current selection, and then select the option you want to test to start the test.

What if I don't see a suffix in some computers? You can open a file, press the ALT key, the menu bar will appear, select the Folder option in the tool options, click View, and then select the hidden suffix name, the tick will be removed. How do I change the suffix of notepad++ new document? You need to save the document as, and then select all the files, and write the suffix named required, such as HTML.

Compliant: <body bgcolor= "Red" text= "Blue" > La La </body>, in the middle of the background color and text color properties is a space.

Non-conforming: <body bgcolor= "Red", text= "Blue" > La La </body>, in the middle of the background color and text color properties is a comma.

Non-conforming: <body bgcolor=red text=blue> la la la </body>, attribute value matchless quotation marks.

In general, the specification is the middle space, not the comma, and must have double quotation marks. The non-conforming can also be written, can be displayed, but does not conform to the specification. When learning to conform to the specification, in the actual application in order to reduce the file size, you can use a simplified way.

What is a static page? Page code is in the page, do not have to execute ASP, PHP, JSP, net and other programs to generate client code. Can be judged from the URL suffix name. The effect of static pages is achieved through JS and CSS. Static pages can not manage the release of the update page, if you want to update the content, you need to use the FTP software to down the file with the Web page making software modification, through FSO and other technical exceptions. General static page suffix name html, htm and so on.

Dynamic pages can execute ASP, PHP, JSP, net and other programs to generate the client page code, while the background management to update the content, dynamic page is the common extension of ASP, PHP, JSP, CQI and so on. Dynamic is the meaning of the interaction between the website and the client, not the animated display on the webpage.

Color System

www.w3school.com.cn→html Basic Tutorial →html Color

Each color can be selected in 256 different values.

Red 0-255=>0~FF

Green 0-255

Blue 0-255

When the point is 0, it is black and the value is the largest when it is white.

The hexadecimal number is generally used to describe the color, not the decimal number.

Description Color use: #00 (red) 00 (green) 00 (blue) Six-bit hexadecimal number to describe a color.

All red: #ff0000, all green #00ff00, all blue #0000ff

Download "Software", right button has a color, can be used to take the color of their own hexadecimal number.

HTML differs from XML

Both HTML and XML can control the page through Dom and CSS, but the XML syntax is stricter.

XML is primarily used to store data, while HTML focuses on presentation.

If you can use or in HTML can complete the line-wrapping command, but the XML can not, will be error.

Dom is the Document Object model.

HTML tag types

Text Tags: describing text and fonts

Format Tags: control text layout, separation, etc.

Links and Charts: Jump and anchor, show pictures

Lists and tables: presenting data

Form Tags: submit data to server interaction, etc.

Frame label and partition label: frame structure embedded multiple pages, partition usage style

Text label, title tag

If you simply change the size of the font in the text, then use I this is just the size of the font change. and the label of the font is large because it is a first-class label, sub-structure, with priority.

Physical font Physical label

Bold

Italic

Underline

superscript

Subscript

<s> Add Strikethrough </s>

<tt> Typewriters </tt>

Logical Font Logical Label

Italic

emphasis on bold

<code> Computer code Text </code>

<samp> Computer code Samples </samp>

<kbd> Keyboard Text </kbd>

<var> variable part of text </var>

<dfn> Define Projects </dfn>

<cite> References </cite>

Small Text

<big> Large Text </big>

Why is it recommended to use logical fonts instead of physical fonts? Because physical fonts are primarily used for display, logical fonts are meaningful for search engine optimization in order to represent the specific meaning that the package should represent in this tag.

Client font fonts, font client fonts can be used if you need to modify the color size and font style of the text. The Size property value of the font is 1-7.

Color , Size , Client font

Single label

is a carriage return line and can also or

Format labels

paragraphs

line break

<center> Center </center>

Size (height thickness), width, align (alignment), noshade (whether shaded), color

  Space (general article to empty two to 4  )

Align is the control alignment, Align:left/center/right and so on.

For example Alignment

Insert Picture (path, modified picture pixel, CSS picture mixed image right around text)

<pre> pre-formatting, that is, the formatting in the tag is saved, rather than the current format in the usual HTML code is ignored </pre>, and less with the tab space, because different browsers on the tab resolution, more than the logical font with the use. <code> represents the code in the logical font, which is what is shown in code </code>

Relative path and absolute path

or Current directory

Represents the parent directory

Represents the root directory, and the root directory represents the difference between the root directory of the server and the local disk root directory.

URL hyperlink

<a href= "http://www.baidu.com" title: "Words displayed when the mouse is moved to text" > indicates what is executed when the link is clicked, the basic format is protocol: content </a>

<a href= "mailto:[email protected" > Email </a>

<a href=mailto:[email protected]? subject=520&body= me today ... Omit 10,000 words > Email here </a>

Effect for click After pop-up mail box, the recipient is the email address, subject to 520, content for me today ... 10,000 words are omitted here.

<a href= "mailto:[email protected" > Email </a>

<a href= "javascript:alert (' haha '); You click </a> Use the JS script code, HREF executes the JS protocol, you can also execute the HTTP protocol. The effect is to pop up the dialog box after clicking Haha.

Target Property

_blank opens in a new window

_self Open in Current window

_parent Open in parent window

_top opens in the top-level window

Do not write anything, the default is this page to jump

Page Jump

Open in a new window

A label Common properties

HREF protocol, title mouse display content, target jump mode, name anchor, that is, the page back to the top of the function.

Back to the top of the feature implementation code:

<body>

<a name= "Start (can be casually written)" > Start </a>

Many rows

<a href= "#start" > Bottom </a>

</body>

Another use of anchoring, jump to another page:

Page 1

<body>

<a name= "Start (can be casually written)" > Start </a>

Blah

<a href= "format label. html#d" > Jumps to the Format tab. </a></in HTML Br> a lot of rows

<a href= "#start" > Bottom </a>

</body>

Page 2, path current directory format label. html

<body>

&nbsp&nbsp&nbsp& nbsp Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala Balabarabalabala 巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉 blblblb La Balabalabala Balabarabalabala

&NBSP <a name= "D" > I go </a>

</body>

The result of the implementation is to click on page 1 of the "Jump to the Format tab." In the HTML "D", will jump to page 2 "I Go" place.

List lists

Type attribute: A, a, I, I, 1

There is a sequence list order list (here the value of type is ordered, if it is 1 then by the Arabic numerals, if it is a, then in lowercase letters, if it is a in uppercase, if it is I by Roman numerals)

<li> unordered list (unorder list) </li>

<li> Sequential list (order list) </li>

</ol>

Unordered lists Unorder list

Type attribute: Circle Hollow Small Circle, disk solid small circle, square solid small square

<li> unordered list (unorder list) </li>

<li> Sequential list (order list) </li>

</ul>

customizing lists defined List

<dl>

<dt> customizations (defined term) </dt>

<dd> custom interpretations (defined definetion) </dd>

</dl>

Table: Real fake column, left to right

<table></Table > table

<tr></tr> Line

Data in the <td></td> form

Border box

< table border= "2" bordercolor= "#ff0000" >

<tr>

<td> first Row first column </td>

<td> first row, second column </td>

<td> first row, column three </td>

</tr>

<tr>

<td> second row first column </td>

<td> second row, second column </td>

<td> second row, column three </td>

<tr>

<TD colspan= "2" > Third row first column </td> (horizontal 2, manual control first row occupies two columns)

Vertical 2, if you want a row across two columns, then use <TD rowspan= "2" ></td>

<td> third row, second column </td>

</tr>

</table>

Table basic syntax: TABLE,TR,TD. Table Head th. Title Caption,align is an attribute of caption, which represents alignment.

<caption align= "Top" > title on Top </caption>

<caption align= "Bottom" > title below </caption>

HTML table-related properties

<table>→bgcolor table background color, border table line width, bordercolor table color, cellspacing Word to table spacing, cellpadding table to table spacing, Width table width, Height table Height

<td>→align horizontal alignment, valign vertical alignment, bgcolor, width, height, colspan spanning, rowspan vertical span

Align attribute →center center, left, right

valign Properties →middle Middle, top pinned, bottom bottom

HTML Base Notes

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.

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