Introduction to HTML page elements

Last Update:2018-12-07 Source: Internet

Author: User

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

This article is an excerpt

1. Add the correct doctype to the page

Xhtml1.0 provides three doctype options:

1. Transition type (Transitional)-Universal

<! Doctype
HtmlPublic"-// W3C // DTDXHTML
1.0
Transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

2. Strict)
<! DoctypeHtmlPublic"-// W3C // DTD
XHTML1.0
Strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1
-Strict. DTD ">

3. Framework (frameset)
<! Doctype
HtmlPublic"-// W3C // DTDXHTML
1.0
Frameset // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>

So what do these codes mean? Are you sure you want to place it?
What is doctype?

The above code is called
Doctype declaration. Doctype is short for document type. It is used to describe the XHTML or html version you are using.
DTD (such as the xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the document rules, the browser according to your definition
DTD is used to describe the identifier of your page and display it.

The doctype Declaration is an essential part of building a standard web page, unless your XHTML determines a correct
Doctype, otherwise your logo and CSS will not take effect.

XHTML 1.0 provides three types
DTD Declaration available: Transitional: requires a very loose DTD, which allows you to continue to use the html4.01 identifier (but must comply with the XHTML
).

What doctype should we choose?

The ideal situation is a strict DTD, but for most designers who are new to web standards, the transitional DTD (XHTML 1.0
Transitional) is an ideal choice (including this DTD ). Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is easier to use W3C
.

Note: The "presentation layer identifier and attribute" mentioned above refers to the tags purely used to control the presentation, such as the table used for typographical layout and background color identifier. In
The identifier in XHTML is used to represent the structure, not the form of representation. The purpose of our transition is to ultimately achieve separation of data and presentation. For example, a human model changes clothes. Models are like data. clothes are the form of representation. Models and clothes are separated so that you can change clothes at will. The original
Html4
Data and performance are mixed, and it is very difficult to change the form at one time. It's a bit abstract. We need to gradually understand this concept in the application process.

Supplement
Doctype
The declaration must be placed at the top of every XHTML document, on top of all codes and identifiers.

2. Set a namespace)

Add the following code directly after the doctype declaration:

<Html
Xmlns = "http://www.w3.org/1999/xhtml">

One namespace
It is a detailed DTD for collecting Element Types and attribute names. The namespace statement allows you to identify your namespace through an online address. Just enter the code.

What is a namespace?
Doctype
After the statement is declared, the following code is:
<HTML xmlns = "http://www.w3.org/1999/xhtml"
Lang = "gb2312">
We usually use html4.0
The code is <HTML>. What is "xmlns" here?
This "xmlns" is XHTML namespace
The abbreviation is "namespace" declaration. What is the role of namespace? My understanding is:Because XML
You can define your own identifiers. The identifiers you define may be the same as those defined by others, but they indicate different meanings. Errors may occur when files are exchanged or shared. To avoid such errors
The namespace Declaration allows you to identify your identity through a URL.

For example:
John and John both define a <book> identifier, if John's namespace is "http://www.xiaowang.com" and Lee's namespace is "http://www.xiaoli.com", then when two documents exchange data, the <book> identifier is not obfuscated because it belongs to different namespaces.
The more common explanation is that namespace is to mark the document and tell others who the document belongs. But this "who" is replaced by a URL.
XHTML
It is the identifier language for the transition from HTML to XML. It must comply with the XML document rules, so you also need to define the namespace. Because xhtml1.0
It cannot be a custom identifier, so it has the same namespace, that is, "http://www.w3.org/1999/xhtml ". It doesn't matter if you don't quite understand it. At present, we only need to copy the code. The
Lang = "gb2312", specifying your document in simplified Chinese.

3. Declare your encoding Language

All XHTML documents must declare the encoding languages they use in order to be correctly interpreted and validated by the browser. The Code is as follows:

<Meta http-equiv = "Content-Type"
Content = "text/html; charset = gb2312"/>

The encoding language declared here is simplified Chinese gb2312. If you need to make traditional Chinese content, you can define it as big5.

<Meta http-equiv = "Content-Type"
Content = "text/html; charset = gb2312"/>
To be correctly interpreted by the browser and passed by W3C
Code verification: All XHTML documents must declare the encoding languages they use. We generally use gb2312 (Simplified Chinese) to create a multi-language page.
Unicode, ISO-8859-1, etc, according to your needs. Generally, this can be defined. However, the XML document does not define language encoding in this way.
Is defined as follows:
<? XML version = "1.0" encoding = "gb2312"?>
You are
The W3C homepage code of macromedia.com
Recommended definition method. Why don't we use this method directly? The reason is that some browsers do not fully support the standard and cannot correctly understand such definition methods, such
IE6/windows. Therefore, we recommend that you use Meta In the current transition scheme. Of course, you can write both methods.
Read this

<Meta http-equiv = "content-language" content = "gb2312"/>

This is for old versions
Note: At the end of the above statement, you can see a slash "/", which is similar to our previous html4.0
The code is written differently. The reason is that XHTML
Syntax Rules require that all identifiers must start and end. Such as <body> and </body>, <p>, and </P>. For unpaired identifiers, a space must be added at the end of the identifiers, then follow "/". For example, <br> <br
/> And are written as . The reason for adding spaces is that the Code is not recognized by the browser when it is connected together.

Call a style sheet

To design websites with web standards, the main method of transition is to use
XHTML + CSS and CSS style sheets are essential. This requires all web designers to be familiar with CSS. If you are not familiar with CSS before, start learning it now. Make a conformity
A standard Web website cannot design beautiful pages without understanding CSS.
In fact, CSS is used to implement all the performance. We used to use table
To locate and layout, now you need to use Div
To locate and layout. This is a change in the way of thinking. Haha, any change will have resistance. To enjoy the "benefits" brought by standards, it is worthwhile to give up some old traditional practices.

External call style sheet

In the past, we used two methods to use a style sheet: Page embedding: writing a style sheet directly to the page code.
Head area. Similar to this:

External call method: Write the sample table in an independent .css file, and then use the code similar to the following in the page head area.

In a design that complies with the web standards, we use the external call method. You can modify the CSS only when you do not modify the page.
File to change the page style. If all pages call the same style sheet file, you can change the style of all files by changing the style sheet file.

Two-table method call style sheet

Check the original code of some websites that comply with the standard. You may see that the following is the place where the style sheet is called:
2 sentences:

<LinkRel = "stylesheet"
REV = "stylesheet"Href = "CSS/style.css"
Type = "text/CSS"Media = "all"/>
<Style type = "text/CSS" Media = "all"> @ import URL (ZSS/style01.css
); </Style>

Why write twice?

In fact
. I use a double table call here as an example. The "@ import" command is used to input a style sheet. The "@ import" command is in Netscape 4.0
Hidden in Netscape 4.0 browser, in 4.0
You can use the "@ import" command to call the style sheet when it is displayed in the preceding or other browsers.

4. Add the alt attribute to the image

Add the alt attribute to all images. ALT
Attribute specifies that when the image cannot be displayed, the plain text alt attribute is displayed for replacement, and the code will pass W3C correctness verification. Note that we need to add meaningful
ALT attribute,It is meaningless to write a statement like the following:

Alt = "logo.gif">

Correct syntax:

5. Quote all attribute values

In HTML, you do not need to quote the attribute value, but in XHTML
Must be enclosed in quotation marks. Properties must also be separated by spaces. Example:

This is also incorrect

6. Close all labels

In XHTML, each opened tag must be closed. Empty tags must also be closed. A forward slash is used at the end of the tag.
"/" To close themselves. For example:
<Br/>

7. favorites icons

For example, first create a 16x16 icon named
Put favicon. ICO in the root directory. Then, embed the following code into the head area:

If you add this item to favorites, you can see that the IE icon before the favorites URL is changed to a 16x16
Icon, named favicon. ICO, placed under the root directory. Then, embed the following code into the head area:

Content for search engines

The Code is as follows:
Allows you to search all links in a robot search site. If you want some pages not to be searched, we recommend that you use
Robots.txt Method
<Meta content = "all" name = "Robots"
/>
Set site author information
<Meta name = "author" content = "ajie@netease.com,"
/>
Set site copyright information
<Meta name = "Copyright" content = "www.w3cn.org, copyright, reproduced at will"
/>
Brief Introduction to the site (recommended)
<Meta name = "Description" content = "New web designer. Standard Web tutorial sites to promote web
Standard Application in China "/>
Site keywords (recommended)
<Meta
Content = "Designing, with, web, standards, XHTML, CSS, graphic, design, layout,
Usability, ccessibility, W3C, W3, w3cn, Ajie "name =" keywords "/>

So much. I have spent five sections on head code. The actual page content is not mentioned yet. Don't worry. In fact, head
Area is very important, look at the head of a page
The code to know whether the designer is professional enough.

8. Use CSS to define the element appearance

Use CSS
One advantage of layout is that you can modify pages in batches. It can separate the document structure from the presentation layer, reduce the workload and server load, and increase the scalability and application of the site.

CSS
There is no difference between space and Case sensitivity. Below are some basic summaries.

1. color value

Color values can be written in RGB values, for example, color:
RGB (255, 0, 0) can also be written in hexadecimal format, just like color: # ff0000 in the preceding example. If the hexadecimal value is repeated in pairs, the effect is the same. Example: # ff0000
It can be written as # f00. However, it cannot be abbreviated if it is not repeated. For example, # fc1a1b must be filled with six characters.

2. Define the font

The following font definition method is recommended for web standards:

Body {
Font-family: "lucida Grande", verdana, lucida, Arial, Helvetica,, sans-serif;
}

The font is selected in the listed order.If the user's computer contains the lucida Grande font, the document will be specified as lucida
Grande. If not, it is specified as the verdana font. If not, it is specified
Lucida font, and so on.

Lucida Grande fonts are suitable for Mac OS X;

Verdana fonts are suitable for all Windows systems;

Lucida is suitable for Unix users

"" Is suitable for simplified Chinese users;

If none of the listed fonts are available, the default sans-serif font can be called;

3. Group Selector

When the style attributes of several elements are the same, you can call a declaration. elements are separated by commas ,:
P, TD, Li {font-size: 12px ;}

4. derived Selector

You can use the derived selector to define a style for the child element in an element. For example:

Li strong {
Font-style: italic; font-weight: normal ;}

It is to give the child element strong under Li
Defines a style that is not bold in italic.

5. ID Selector

Use
CSS layout is mainly implemented by the "Div" layer, and the DIV style is defined by the "id selector. For example, we first define a Layer

Then define in the style sheet as follows:

# Menubar {margin:
0px; Background: # fefefe; color: #666 ;}

Here, "menubar" is your own defined ID.
Name. Add "#" to the front.

The ID selector also supports derivation, for example:

# Menubar P {text-align: Right; margin-top: 10px ;}

This method is mainly used to define layers and those that are complicated and have multiple derived elements.

6. Category Selector

In css
Class selector definition, for example:
. 14px {color: # f60; font-size: 14px
;}

On the page, use class =
Method call of "category name:
<SPAN class = "14px"> 14px
Font size </span>

This method is simple and flexible, and can be created and deleted at any time according to the page requirements.

7. Define the link Style

CSS
Use four pseudo classes to define the link style,
They are: A: Link, A: visited, A: hover, And A: active, for example:
A: link {font-weight: bold; text-Decoration: None
; Color: # c00 ;}
A: visited {font-weight: bold; text-Decoration: none; color
: # C30 ;}
A: hover {font-weight: bold; text-Decoration: underline; color:
# F60 ;}
A: active {font-weight: bold; text-Decoration: none; color: # f90
;}

The preceding statements define
"Link, accessed link, mouse over, and mouse down" style. Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected. Remember that their order is"
.

8. Combine selector to create exquisite design results

Use a pretty pattern to replace the dull black spots in front of an unordered list. Site
Http://marine.happycog.com/
First, use CSS rules to tell the unordered list of the category attribute inventory.
Ul. Inventory {

List-style: Disc
URL (/images/common/lister2.gig) inside ;}

Its call Tag:
<Ul class = "inventory">
<Li> <
Href = "/angelfish"> angelfish </a> (67 items) </LI>
<Li> <
Href = "/angeld"> angels/frogfish </a> (35
Items) </LI>
<Li> <a href = "/anthias"> angelfish </a> (5526
Items) </LI>
<Li> <a href = "/basslets"> angelfish </a> (15
Items) </LI>
<Ul>

9. The abbreviation is clockwise.

Margin: 25px 0 25px 0;

10. Row Height

Line-Height: 150% indicates that the line spacing is normal.
150%

XHTML code specification

Before starting official content production, we must first understand
Code specifications related to web standards. Understanding these specifications can help you avoid detours and pass code verification as soon as possible.

1. All tags must have an ending mark.

Previously in HTML
You can open many labels, such as <p> and <li>, but not necessarily write the corresponding </P> and </LI> to close them. But in XHTML
Is invalid. XHTML requires a rigorous structure, and all labels must be disabled. If it is an unpaired tag, add "/" at the end of the tag to close it. For example:
<Br/> Src = "../images/logo_w3cn_200x80.gif" width = "200"/>

2. All tag elements and attribute names must be in lowercase different from HTML. XHTML
It is case sensitive. <title> and <title> are different labels. XHTML
All tags and attribute names must be in lower case. For example, <body> must be written as <body>. Case-insensitive, usually
The attribute name "onmouseover" automatically generated by Dreamweaver must also be changed to "onmouseover ".

3. All XML
Tags must be reasonably nested.
Because XHTML
Strict structure is required, so all nesting must be in order. The code we previously wrote is as follows:
<P> <B> </P>/B>

Must be modified:
<P> <B> </B>/P>

That is to say, the nesting layer by layer must be strictly symmetric.

4. All attributes must be enclosed by quotation marks ("").
In HTML
. For example:
<Height = 80>

Must be modified:
<Height = "80">

In special cases, you need to use double quotation marks in the property values. You can use ", single quotation marks can use & apos;, for example:
<Alt = "say & apos; Hello & apos;">

5. encode all <and & special characters
Any minor sign (<), not part of a tag, must be encoded &
L t;
Any greater than (>), not part of a tag, must be encoded as & G
T;
Any ampersand (&), not part of an object, must be encoded as &
M p;

Note: There is no space between the above characters.

6. assign a value to all attributes
XHTML specifies that all attributes must have a value. If there is no value, the original is repeated.

<TD nowrap> <input type = "checkbox" name = "shirt"
Value = "medium" Checked>
Must be modified:
<TD nowrap = "nowrap">
<Input type = "checkbox" name = "shirt" value = "medium" Checked = "checked">

7. Do not make "--" in the comment content

"--" Can only happen in
XHTML
The beginning and end of the comment, that is, they are no longer valid in the content. For example, the following code is invalid:
<! -- Here is the comment ----------- here is the comment -->

Replace the dotted line with equal signs or spaces.
<! -- Here is the comment ============= here is the comment -->

Some of the above specifications seem strange, but they all aim to make our code have a unified and unique standard, so that we can reuse data in the future.

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

Introduction to HTML page elements

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support