html sort commonly used tags

Tag syntax

Tags from English angle brackets < and > enclosed, such that a tag.
html tags are generally in pairs, divide the start tag and end tag . End tag one more / than the start tag.

Such as:

（1）

（2） <div></div>

（3） 

Label to label can be nested, but the order must be consistent, such as:
Nested inside
Then
Must be placed
Earlier. As shown below.

HTML tags are not case sensitive, <h1>and <H1>is the same, but suggested lowercase, because most programmers are in lowercase prevail.

Understanding of the basic structure of the html file

In this section, we learn the structure of html files: an HTML file have their own fixed structure.

<html>

    <head>...</head>

    <body>...</body>

</html>

Code to explain:

<html></html>Known as the root tag, label all pages are <html></html>in.
<head>Tag is used to define the document's head, it is a container for all the head elements. Head element has <title>, <script>, <style>, <link>, <meta>and other labels, label head will be described in detail in the next section.
In <body>and </body>content between the tags is the main content of the page, such as <h1>, , <a>, <img>and other web content label, the label where the contents will be displayed in the browser.

Know the head tag

Well, let's take a look at <head>the role of labels. The head of the document describes various attributes of information and documents, including the title of the document and so on. The vast majority of data contained in the document header will not actually appear to the reader as the content.

The following labels are available in the head section:

<head>

    <title>...</title>

    <meta>

    <link>

    <style>...</style>
    <script>...</script>
</head>

<title>label:

In <title>and </title>text between the tags is the title information page, it will appear in the browser's title bar. What is the main content of the page title tag tells users and search engines This page is a search engine by page title, quickly determine the topic of the page. The content of each page is different, each page should have a unique title.
E.g:

<head>

    <title>hello world</title>

</head>

Contents of the tag "hello world" would be in the title bar is displayed in the browser, as shown below:

<head>Explain other label content label, we will explain it for everyone in the later chapters.

Learn HTML code comments

What is the code comments ? The role of commented code to help programmers use code label, over a period of time and then look at the code you write, you can quickly think of the use of this code. Code comments not only easy to use programmer to recall the previous code, other programmers can also help you quickly understand the function of the program, to facilitate people to develop web page code.

grammar:

<!-- 注释文字   -->

You will find the commented code is not displayed in the results window.

Semantic, make your website better be understood by search engines

In this chapter we want to start the Web page has been commonly used to introduce a label, when studying this section of html tags to remember that learning process, the main attention to two aspects of learning: the use of tags, labels the default style in the browser.

Use the label : when we learn web production, often heard a word, semantic . So what is it semantics, said the popular point is this: to understand the purpose of each label (this label is reasonable under the circumstances), for example, the article on the page title you can use the title tag, each section on page column the name can also be used title tag. Paragraph article content you have on the paragraph tag , there would like to emphasize text, you can use the em tag for emphasis and so on in the article.

We talk so much semantic, but the semantics of what kind of benefits it can bring to us?

More easily indexed by search engines.
Easier for screen reader reads the page contents.

In later chapters will lead us to learn about the semantics of each tag in html (use).

`<body>`Label, content on the page that appears on here

Remember the body labels it, in the last chapter we briefly introduced: page content on the page to come in must be placed in the body tag. The following figure is a web news articles.

Display in the browser:

Start learning ``labels, add paragraph

If you want to display the article on the page, then you need to tag, and the paragraphs of the article into the label.

grammar:

<p>段落文本</p>
 注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到**3**个<p>标签中。如下图所示。

Effects displayed in the browser:

The default style tags, you can see in the picture above it, after the preceding section, there will be blank, blank if you do not like this, you can use css styles to delete or change it.

Understand the `<hx>`label, add a title for your web page

The article with a paragraph tag, then the title of the article label what use is it? In this section we will use the <hx>label to make the title of the article .

A total of six title tag, h1, h2, h3, h4 , h5, h6 are a title, subheadings, three titles, the title four, five titles, six titles. And according to the diminishing importance. <h1>It is the highest rating.

grammar:

<hx>标题文本</hx><!-- (x为1-6) -->

In front of the title of the article you have already said, you can use the title tag, the other on each page section title can also use them. The following picture shows the Tencent website.

Note: Because the h1 tag is more important in a Web page, it is generally h1 tags are used on site. Tencent website is to do so. Such as: <h1>Tencent</h1>

The default style h1-h6 tags:

Label Code:

In the browser displays the style:

As can be seen from the above picture will be bold style title tag, h1 tag largest font size, h2 to h1 tag size is relatively small, so the minimum font size h6 tags.

Emphasis added tone, use ``and ``labeling

With the title of the paragraph there, and now if you want special emphasis on certain words in a paragraph, this time you can use or tags.

But the two are different in tone to emphasize: emphasis, expressed more strongly emphasized. And in the browser by default with italics indicate, with bold representation. Compared to two labels, currently the front-end programmers prefer to use for emphasis.

grammar:

需要强调的文本 需要强调的文本

For example, in the online store, after the discount price of a product that needs to be emphasized. As shown below.

Code:

In the browser default styles are different:

Original code, as shown below.

Browser appearance, as shown below.

The content is displayed in italics in the browser, the display is bold. If you do not like this style, it does not matter, then you can use css styles to change it.

Use labels to set individual style to text

This section explains the label, we , , three label to sum up:

And the label is to emphasize the use of keywords in a paragraph, their semantics is emphasized.

There is no semantic label, its role is to provide a separate style used.

If now we want to in the previous section of the first paragraph the words "American Dream" in the name is set to blue (blue), but pay attention not to emphasize the "American dream", but simply want to set a different style, and other text for it (I do not want a screen reader on the "American dream" these three words accented read), so in this case you can use the label of.

As in the following example:

1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。

grammar:

文本

<q>Label, short text references

I would like to add some references in your html in it? For example, think in your article pages in reference to a poem writer, so make your article more color, then the <q>label is what you need.

grammar:

<q>引用文本</q>

As in the following example:

最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。

explain:

In the example above, " Zhuangsheng Xiao fans dream of butterflies. Emperor Wang lust care rhododendrons. " This is a poem, from the late Tang Dynasty poet Li Shang-yin "Zither." Because it is not the author's own words, it is required <q></q>to achieve reference.

Note To quote the text without any increase in double quotation marks , the browser will automatically add labels q double quotes.

The following figure shows the results is the code:

Note the use of <q>the real key point labels instead of its default style double quotes (if so we might as well own input on the keyboard double quotes on the line), but its semantics: quote others .

<blockquote>Label, long text references **

<blockquote>The role also quoted text others. But it is a long text references, such as the introduction of a well-known writer of the text in a large section of the article, then need the label.

Etc., on a <q>label on the text is not a reference to it? Do not forget to <q>label is a short text references, for example, to use a word reference <q>label.

To quote Li Bai, "watching the mountains" in the verse in my article, because the reference text is long, so use <blockquote>.

Syntax :

<blockquote>引用文本</blockquote>

As in the following example:

<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>

Browser to <blockquote>parse tags is indented style. As shown below:

Use  the label to display text Branch

For example in the previous section, we want to show more beautiful poem that some, such as the following results show:

How you can get behind each one adding a poem wrap it? It can be used in  labels, and where necessary add a carriage return line feed is added  ,  the label acts as word document Enter.

The code section to read:

grammar:

xhtml1.0 writing:

 

html4.01 writing:

 

Attention is now generally used xhtml1.0 version of the wording (other label is), this version fairly standard.

And before we learned is not the same label,  the label is an empty tag, no HTML tags is empty of content labels, blank labels just need to write a start tag, such labels  , <hr />and <img />.

In talking about this, do you have a question, want to break the line is not good brains, as in the word document file or Notepad, you want to break a line in front of the press enter not on line yet? Unfortunately, it is ignored in html carriage returns and spaces you enter more carriage returns and spaces also did not show up. As follows edge code.

The above code is not displayed in the browser Enter effect. As shown below:

Summary: In html input enter, space code is no effect. In html text you want to enter a carriage return line feed, you must enter

 