s1/using HTML language and CSS to develop a commercial site/01-html Foundation

HTML is a Hypertext Markup Language (Hyper text Mark Language), which means that HTML is not a programming language, only a markup language (Markup Language).

Web Basic information:

1. DOCTYPE statement

In the HTML code, there are two lines on the "DOCTYPE" document type, and he constrains the HTML document structure to verify compliance with the relevant web standards, while high-speed browsers use which specifications to interpret the code in this document. The DOCTYPE declaration must be in the first line of the HTML document, and XHTML3.0 specifies 3 levels of declaration.

(1) Strict (strict type): This life is fully in line with the standards, but the requirements are more stringent. The corresponding declaration is:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>

(2) Transitional (Transition type): Also called Loose (loose) declaration. The requirements are relatively loose compared to strict. The corresponding declaration is:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

(3) Frameset (frame type): The framework is not allowed in the strict declaration, which is used when the frame is needed in the page. The corresponding declaration is:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 frameset//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd>

Strict syntax is more strict, the code is required to write high; frameset is not supported in some browsers, so it is not commonly used because it is limited by the browser, so the most used is transitional.

Note: Currently, it is recommended to use XHTML 1.0 Transitional (XHTML 1.0 transition type), which allows you to write web-standard Web page code in accordance with XHTML standards, while in some special cases you can use traditional practices.

2. <title> Label

Use the <title> tag to describe the title of the page, similar to the title of an article, generally a concise theme, and to attract readers interested in reading. For example, the homepage of the Sohu website, the corresponding page title is

<title> Sohu-China's largest web portal </title>

3. <meta> Label

Use this tab to describe specific summary information about a Web page, including document content types, character encoding information, search keywords, detailed descriptions of the features and services provided by the site, and more. The contents of the <meta> tag description are not displayed, and are intended to facilitate browser parsing or search by search engines, which describe summary information in the form of "name Chen/value" pairs.

/1/document content type, character encoding information

<meta http-equiv= "Content-type" content= "text/html;charset=gb2312"/>

Where the attribute "Http-equiv" provides the name in name/value, and "content" provides the value in name/value, the meaning of the HTML code is as follows.

Name: Content-type (document content type).

Value: text/html;charset=gb2312 (the HTML type of the text category, character encoding is Simplified Chinese), and CharSet represents the character set encoding. There are several commonly used encodings.

gb2312: Simplified Chinese, generally used for pages that contain both Chinese and English.

ISO-885901: Plain English, generally used for pages that contain only English.

Big5: Traditional, usually used for pages with traditional characters.

Utf-8: The international character encoding is also applicable to Chinese and English pages. Compared with gb2312 coding, the international generalization is better, but the character compression is relatively low, which has a certain effect on Web page performance.

/2/searches for keywords and content description information.

<meta name= "keywords" content= "Beida Jade Bird, it training"/>

<meta name= "description" content= "Beida Bird is the largest IT education group in China and is committed to cultivating excellent it technology talents for the PRC. "/>

The implementation mode is still the "name/value" pair form, convenient search engine searches.

Standard

1. HTML version

Bargaining in front of the HTML editor, has introduced the HTML appeared a lot of versions, One of the two most used versions of the Web page is HTML4.01 and XHTML1.0, although the current browsers are compatible with these two versions, but there are a number of differences between these two versions of the tags in use, and the following are some of the differences between the two.

2. The difference between HTML and XHTML

/1/the label name must be lowercase in XHTML, and in HTML, the label name can be either uppercase or lowercase.

/2/property names must be lowercase in XHTML, and in HTML, the names of properties must also be lowercase.

/3/tags must be tightly nested in XHTML, and there are no strict rules on the nesting of tags in HTML.

/4/tags must be closed in XHTML, and in HTML, the tags are not closed and are also correct, that is, the label can not be paired to appear. For example, "<p> I don't have an end tag" and "<p> I have start tag and end tag </p>", the results of these two codes are exactly the same in the HTML specification, but in XHTML, the first statement is not allowed (not displayed properly) , and the label must be tightly closed, as in the second statement.

/5/in XHTML even the empty element of the tab must be closed, and here the empty label refers to the or military correct, but in the XHTML specification, must write is correct.

/6/in XHTML, attribute values must be enclosed in double quotation marks, and in HTML, properties may not have to use double quotes.

/7/attribute values in XHTML must be in full form, such as <input disabled= "disabled" >; in HTML, some properties often use shorthand to set property values, such as <input disable>.

/8/in XHTML, you should differentiate between "content label" and "Structure label". For example, the,<p> tag is a content label, and the <table> tag is a structure label, so the <table> tag is not allowed to be placed inside the <p> tag. Conversely, if the <p> tag is placed between <td></td>, it is completely correct.

3. Semantic structure of HTML content

Only the HTML code can see what this part of the content is, what it means. For example, a title, a paragraph, a list of items, and so on. This has several advantages, one is the convenient search engine search mentioned earlier, and the other is convenient to pass in various platforms, in addition to the ordinary computer, but also includes mobile phones, PDAs, MP4 and so on. Because the mobile phone, PDA and other lightweight display terminal, may not have a common computer browser rendering ability, she will follow the semantics of the HTML structure, using her own device rendering ability to display the page content. As a result, the semantic structure of HTML is becoming more and more a mainstream trend.

How do you write a semantically structured HTML structure? The main point is to choose the corresponding meaning of the HTML tag according to the meaning of the page document.

Basic tags for web pages

1. Title Tag

The title tag identifies the title or theme of a text and supports a multi-layered content structure. For example, the first-level headings use <H1>, and level two headings are

2. Paragraph and line wrapping labels

Paragraph labels <p>......</p> denotes text and other content. For example, you want to describe the song "Welcome to Beijing", including the title of the song and the lyrics (paragraph).

NewLine Labels <br/> indicates a forced line break display, which is special, has no end tag, and directly uses <br/> to indicate the start and end of the label.

3. Horizontal Line Label

The horizontal line label represents a horizontal level, note that the label is the same as the <br/> tag, which is special and has no end tag.

4. Font style label

In the Web page, often encounter font bold or italic word, font bold label is <strong>.......</strong>, Italic label is <em>......</em>.

5. Annotations and special symbols

Comments in HTML are intended to facilitate code reading and debugging. Note content is automatically ignored when the browser encounters a comment. The HTML comment format is as follows.

<!--comment Content--

The special symbols and the corresponding character entities commonly used in HTML are shown in the following table, and these entity symbols begin with "&" and End With ";".

Special symbols	Character entity	Example
Space	&nbsp;	<a href= "#" > Baidu </a>&nbsp;|&nbsp;<a href= "#" >Google</a>
Greater than sign (>)	&gt;	If time &gt; night 6 o'clock, take the bus home
Less than sign (<)	&lt;	If time &lt; 7 in the morning, go to school on foot.
Quotation marks (")	&quot;	In the specification, HTML attribute values must be used in pairs &quot; caused
Copyright symbol (@)	&copy;	&copy;2003-2013 Peking Bird

Image label

When you browse a Web page, you can see various images on the page at any time, which is an indispensable element in the Web page, which describes common image formats and how to use images in Web pages.

1. Common image formats

In daily life, there are more than 4 total image formats, namely JPG, GIF, BMP, PNG. Using more than JPG, GIF, and PNG in Web pages, most browsers can display these images, PNG format is newer, and some browsers do not support this format.

/1/jpg

JPG (JPEG) format images are widely and supported image formats on the internet and are abbreviations in the joint Image Expert Group (Joint Photographic Experts Group) file format. JPG format is lossy compression, will cause image distortion, but the volume after compression is very small, and relatively clear, so it is more suitable for use in Web pages.

This format is best for advanced formats for photographic or continuous-tone images, because JPG files can contain millions of colors. As the jpg file quality improves, the file size and download time also increases. You can generally achieve a good balance between image quality and file size by compressing JPG files.

/2/gif

The GIF image is the most widely used and most popular image format in a Web page, and is an abbreviation for the Image Interchange Format (Graphics Interchange Format). GIF files support transparent color, so that GIF in the Web page background and a number of multi-layered effects on the display of a very large, but also support animation, which is its most prominent feature, so GIF images in the Web page is widely used.

/3/png

PNG is the image file storage format that was developed in the mid 1990s, with the advantages of GIF and JPG, as well as features not available in the GIF file format. The streaming Network Graphics format (Portable Networks Graphic Format,png) is named after the unofficial "PNG's not GIF", which reads "Ping". The only regret is that PNG is an emerging Web image format, and there are issues that some older browsers (such as IE5, IE6, and so on) do not support.

2, the basic syntax of the image label

where SRC represents the picture path, the ALT attribute specifies the alternate text, which indicates that the image is not thought to display (the path error or the speed is too slow, etc.) to replace the displayed text, so that even when the image cannot be displayed, the user can still see the lost information content of the webpage, so the ALT attribute is used in conjunction with SRC when making the

The Title property can provide additional hints or help information, which is displayed when the mouse is moved over the picture.

The width and height two properties represent the picture's widths and heights, which are sometimes not set, so the picture defaults to the original size.

Link label

1. Basic usage of hyperlinks

Hyperlinks contain two parts, one is the link address, that is, the target of the link, can be a URL or file path, corresponding to the href attribute of the <a> tag, the second is the link text or image, click the text or image, will jump to the href attribute specify the link address, the basic syntax of the hyperlink is as follows.

<a href= "link address" target= "target window Position" > link text or image </a>

HREF: The path that represents the link address.

Target: Specifies which window the link is open in, the commonly used values are _self (own window), _blank (new window).

Hyperlinks can be either text hyperlinks or image hyperlinks.

Text hyperlinks	<a href= "sl08.html" target= "_blank" > Non-bleached thin-skinned walnut </a>
Image hyperlinks	<a href= "sl08.html" target= "_blank" ></a >

Web page, when you click a link, it points to a document on the World Wide Web. The World Wide Web uses URLs (Uniform Resource location, Uniform Resource Locator) to define a link address. For example, the common form of a complete link address is http://www.bdqn.cn.

The link address is divided into absolute and relative paths, depending on whether the linked address refers to an off-site file or an in-station file.

Absolute path: A complete description of the destination address, typically pointing to a file outside the site.

For example, <a href= "http://www.sohu.com/index.html" > Sohu </a>.

Relative path: The path to the current page, generally point to the file within the site, so generally do not need a full URL address form.

For example, <a href= "login/login.html" > Login </a> indicates that the link address is the "login.html" page under the "Login" directory of the path where the current page is located. Assuming that the current page is in the same directory as "D:\root", the link address corresponds to the page "D:\root\login\login.html".

In addition, the use of relative paths within the station often uses two special symbols: ". /"represents the parent directory of the current directory,". /.. /"represents the upper ancestor directory of the current directory. Assume that the current page contains two hyperlinks, pointing to the web1.html of the parent directory and the web2.html of the parent directory, respectively.

In the current directory Index.html page two links, that is, in the parent directory web1.html and Upper parent directory web2.html, the corresponding HTML code is as follows.

<a href= ". /web1.html "> Parent directory </a>

<a href= ". /.. /web2.html "> Parent directory </a>

Note: When the hyperlink href link path is "#", it represents an empty link, such as <a href= "#" > Home </a>.

Applications for hyperlinks

People on the Internet, will find different connection, some links to other pages, some links to the current page, and click a link to open the message directly, in fact, according to the application of hyperlinks, you can divide the link into 3 categories.

Links between pages: page A to page B, most commonly used for site navigation.

Anchor chain: A page a position to a page B position or a page plus position to B page position.

Functional Connection: Call other program functions in the page, such as e-mail, QQ, MSN, etc.

1. Links between pages

A link between pages is a link to another page from one page.

2. Anchor Chain Connection

Often used for a lot of content on the target page when you need to navigate to a specific location on the target page. For example, a common online novice help page, when clicked on a hyperlink, will jump to the content of the corresponding help, this way is said from the page A to jump to the B position on this page, it is easy to do, it takes two steps.

First set the tag in the page B position:

< a name= "marker" > target location B </a>

"Name" is the attribute of the <a> tag, "marker" is the tag name, and its function is similar to the ancient anchor (or hook) used to fix the ship, so it is also called the anchor name.

Then in the a location link path the href attribute value is "#标记名", the syntax is as follows.

<a href= "#marker" > Current Position a </a>

If you want to implement the anchor link between different pages, that is, from page A to page B, such as clicking on the "User login Help" link on page A, will jump to the help page of the corresponding user login Help content, how to do it? In fact, the implementation step is the same as the anchor chain between the same page, the same first on the B page (help page) corresponding location set anchor tag, such as <a name= "Login" > Login </a>, and then a page set anchor chain connection, Suppose the B page (help page) is named Help.html, then the anchor is <a href= "help.html#login" > User login Help </a>.

3. Functional connection

Functional links are special, when you click the link is not open a page, but instead of launching a native of the application, such as the Internet Common e-mail, QQ, MSN and other links. Next, take the most commonly used e-mail message, when you click the "Contact us" email link, the user's e-mail program opens, and the e-mail address in the To text box is automatically filled in.

The use of e-mail links is "mailto: e-mail Address". For example:< a href= "Mailto:[email protected" "> Contact Us </a>

s1/using HTML language and CSS to develop a commercial site/01-html Foundation