Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the basic grammars of HTML". In daily operation, I believe many people have doubts about the basic grammar of HTML. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the basic grammars of HTML?" Next, please follow the editor to study!

HTML basic Grammar understanding Page

The web page is mainly composed of elements such as text, images and hyperlinks. Of course, in addition to these elements, web pages can also include audio, video, Flash and so on.

Introduction to common browser kernels

Browsers are platforms on which web pages run. Common browsers include IE, Firefox, Chrome, Safari and Opera. We usually call it the top five browsers.

Browser kernel (understanding)

The browser kernel can be divided into two parts: the rendering engine (layout engineer or Rendering Engine) and the JS engine.

The rendering engine is responsible for getting the content of the web page (HTML, XML, images, etc.), organizing messages (such as adding CSS, etc.), and calculating how the web page is displayed, which is then output to the monitor or printer. Different browsers have different grammatical interpretations of web pages, so the rendering effect is also different.

JS engine parses the Javascript language and executes the javascript language to achieve the dynamic effect of the web page.

At first, there was no clear distinction between the rendering engine and the JS engine, but then the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine. A web standards project team created an ACID to test the engine's compatibility and performance. There are many kinds of kernels, such as adding non-commercial free kernels that few people use, there may be more than 10, but common browser kernels can be divided into four types: Trident, Gecko, Blink, and Webkit.

(1) Trident (IE kernel)

One of the cores of many dual-core browsers in China is Trident, which is called "compatibility mode".

Representatives: IE, Aoyou, window of the World browser, Avant, Tencent TT, Cheetah Security browser, 360 Speed browser, Baidu browser, etc.

After the release of Window10, IE named its built-in browser Edge,Edge. The most prominent feature is the new kernel EdgeHTML.

(2) Gecko (firefox)

Gecko (Firefox kernel): Mozilla FireFox (Firefox browser) uses this kernel. Gecko is characterized by completely open code, so it is highly developable and programmers all over the world can write code and add functions for it. Unfortunately, it has declined in recent years, such as slow opening speed, frequent upgrades, pig-like teammate flash, god-like opponent chrome.

(3) webkit (Safari)

Safari is a browser developed by Apple, and the name of the browser kernel is the famous WebKit.

Now many people mistakenly call webkit the chrome kernel (even though the chrome kernel is already blink). Apple feels like someone robbed his wife and cried in the toilet.

Representative browser: Aoyou browser 3, Apple Safari (Win/Mac/iPhone/iPad), Symbian mobile browser, Android default browser

(4) Chromium/Blink (chrome)

Develop the Blink rendering engine (the browser core) in the Chromium project, which is built into the Chrome browser. Blink is actually a branch of WebKit.

? The latest versions of most domestic browsers use the Blink kernel. Secondary development

(5) Presto (Opera)

Presto (obsolete) is the "ex" kernel of the Norwegian browser opera, why it is called "ex", because the latest opera browser has already abandoned it and thrown it into the arms of Google.

The browser kernel on the mobile side mainly talks about the kernel of the built-in browser in the system.

As far as Android mobile phones are concerned, the highest utilization rate is the Webkit kernel. Most domestic browsers claim their own kernel, which basically belongs to the secondary development of webkit.

On iOS and WP7 platforms, due to system reasons, most systems have their own browser kernel, usually Safari or IE kernel Trident

Web Standard (key)

Through the different kernels of the above browsers, we know that their working principle and parsing must be different, and the display will be different.

Benefits of the Web standard

1. Make the development prospect of Web broader.

2. Content can be accessed by a wider range of devices

3. It is easier to be searched by search engines

4. Reduce the cost of website traffic

5. Make the website easier to maintain

6. Improve the speed of page browsing

Web standard composition

The Web standard is not a standard, but a collection of standards developed by W3C and other standardization organizations.

It mainly includes three aspects: Structure, Presentation and Behavior.

Structural standard: the structure is used to organize and classify the elements of the web page, we mainly learn HTML. The most important

Performance standard: the performance is used to set the layout, color, size and other appearance styles of web page elements, mainly referring to CSS.

Behavior standard: behavior refers to the definition of web page model and the writing of interaction. We mainly learn

Ideally our source code: .HTML .css .js

First acquaintance of HTML

Generally learn HTML+CSS first, here we first set a small goal, first learn HTML, then learn CSS.

HTML (the abbreviation of English Hyper Text Markup Language) is translated into Chinese as "Hypertext tag language". Is a language used to describe web pages.

The so-called hypertext, because it can add pictures, sound, animation, multimedia and other content, not only that, it can also jump from one file to another, connecting with files from hosts around the world.

I am a headline.

Note: experience several words in the text label language

HTML refers to Hypertext markup language (Hyper Text Markup Language)

HTML is not a programming language, but a markup language (markup language)

Markup language is a set of markup tags (markup tag)

Summary: the function of HTML is to use tags to describe the web page and display the content of the web page in the browser.

Use words to describe web page tags

HTML skeleton format

In the letters of daily life, we should follow the common agreement.

Similarly: HTML has its own language grammar skeleton format:

1 HTML tag: acts as a root node for tags in all HTML. The largest tag root tag 2 head tag: the header of the document describes a variety of attributes and information of the document, including the title of the document, its position in the Web, and its relationship to other documents. Most of the data contained in the header of the document is not actually displayed to the reader as content. Note that the tag we have to set in the head tag is the title3.title tag: the title of the document: let the page have its own title. 4.body tag: after the main body of the document, the content of our page is basically put into the body. The body element contains all the content of the document (such as text, hyperlinks, images, tables, lists, etc.). ) HTML tag classification

In the HTML page, with "

< >

"the elements of the symbol are called HTML tags. As mentioned above, they are all HTML skeleton structure tags. The so-called tags are placed in the"

< >

An encoding command in a tag that represents a function, also known as a HTML tag or HTML element

1. Double label

Content

In this syntax, "" indicates the beginning of the function of the tag, generally referred to as "start tag", "" indicates the end of the function of the tag, and is generally referred to as "end tag (end tag)". Compared with the opening tag, the closing tag is preceded by a closing character "/".

For example, I am a character.

two。 Single label

A single tag, also known as an empty tag, refers to a tag that uses a tag symbol to fully describe a function.

For example, HTML tag relationship

The interrelationship of tags can be divided into two types:

1. Nesting relation

two。 Coordinate relationship

Suggestion: if the relationship between two tags is nested, it is best to indent the position of a tab key for child elements. If it is a juxtaposition, it is best to align it up and down.

Document type

Classmate, what kind of cell phone do you use? What do you say?

This sentence tells us which version of html to use? We are using the html 5 version. There are many versions of html, so we should tell users and browsers the version number we use.

The tag is at the front of the document and is used to indicate to the browser which HTML or XHTML standard specification the current document uses. It is necessary to use the tag at the beginning to specify the XHTML version and type for all XHTML documents. Only in this way can the browser parse according to the specified document type.

Note: some old sites may still use the old version of the document type such as XHTML, but we are learning HTML5, and HTML5 document type compatibility is very good (downward compatibility principle), so you can rest assured to use HTML5 document type is good.

Character set

Utf-8 is the most commonly used character set coding method at present, and the commonly used character set coding methods are gbk and gb2312.

Gb2312 simple Chinese includes 6763 Chinese characters

BIG5 traditional Chinese, Hong Kong, Macao, Taiwan, etc.

GBK contains all Chinese characters is an extension of GB2312, adding support for traditional characters, compatible with GB2312

UTF-8 contains characters that all countries in the world need to use.

Keep in mind that we will all use the UTF-8 character set in the future to avoid garbled code caused by inconsistent character sets.

Semantics of HTML tags

Vernacular: the so-called tag semantics refers to the meaning of the tag, using the appropriate tag to do the right thing, such as the title with the h tag instead of the div tag.

Why should there be semantic tags?

Easy to read and maintain the code

At the same time, it can be well parsed by browsers or web crawlers, so as to better analyze the content.

Using semantic tags will lead to better search engine optimization.

Core: give the most reasonable label in the right place.

Whether the semantics are good or not: when we remove CSS, the structure of the web page is still organized and has good readability.

Vernacular, at a glance, you can see that that is the key point, what is the structure, and what is the content of each piece.

The principle to be followed: first determine the semantic HTML, and then choose the appropriate CSS.

HTML commonly used label

First of all, HTML and CSS are two completely different languages, we learn the structure, just write HTML tags, understand the tags on it. No more styles are assigned to the structure label.

There are many HTML tags, here we learn the most commonly used, after some less used, we can check the manual on it.

Typesetting label

Typesetting tags are mainly used in conjunction with css to show the structure of web pages. They are the most commonly used tags in web layout.

Title label (memorized)

Abbreviation: head head. Title title document title

In order to make the web page more semantic, we often use title tags in the page. HTML provides six levels of titles, namely

, and

Title tag semantics: used as a title and decreasing according to importance

The basic syntax format is as follows:

Title text

Note: H2 tag is important, use it as little as possible, don't throw an H2 at you without moving. H2 is usually for logo use, or the most important title information on the page.

Paragraph tags (memorized)

Abbreviation: paragraph paragraph

In order to display the text in an organized way in a web page, it is inseparable from the paragraph tag, just as we usually write articles, the whole web page can also be divided into several paragraphs, and the paragraph tag is

Text content

Is the most common tag in HTML documents, and by default, text wraps automatically in a paragraph according to the size of the browser window.

Horizontal label (recognition)

Acronym: horizontal horizontal line [? hobby ritual? zroomntl] ditto

In web pages, it is often seen that some horizontal lines separate paragraphs from paragraphs, making the structure of the document clear and hierarchical. These horizontal lines can be achieved by inserting a picture or simply by a tag.

Is to create tags across the horizontal lines of the page. The basic syntax format is as follows:

It's a single label

Displays the horizontal line of the default style in the web page.

Newline label (memorized)

Word abbreviation: break interrupts, line breaks

In HTML, the text in a paragraph is arranged from left to right to the right end of the browser window, and then wraps automatically. If you want a piece of text to be forced to wrap, you need to use a newline label

At this time, it will not work if you directly hit the enter key to change the line in word.

Div span tag (emphasis)

Div span has no semantics. It is the two main boxes of css+div in our web layout.

Div is the abbreviation of division. Partition actually means that there are many div to combine web pages.

Span, span, span; range

Syntax format:

This is the head of today's price text formatted label (memorized)

In a web page, sometimes you need to set bold, italic, or underline effects for the text, so you need to use the text formatting label in HTML to make the text displayed in a special way.

Tag attribute

Attributes are features such as the color of the phone, the size of the phone, and the summary is the phone's.

The color of the phone is black and the size of the phone is 8 inches.

The length of the horizontal line is 200

The width of the picture is 300 key value pairs.

When using HTML to make web pages, if you want the HTML tag to provide more information, you can use the properties of the HTML tag to set it. The basic syntax format is as follows:

Content

In the above syntax

1. Tags can have multiple attributes and must be written in the opening tag after the tag.

two。 There is no order between attributes, and label signatures and attributes, attributes and attributes are separated by spaces.

3. The attribute of any tag has a default value, and omitting the attribute takes the default value.

Take the format of key-value pairs, key= "value".

For example:

Property is width

The value is 400.

Advocate: try not to use style attributes.

Image label img (key)

Word abbreviation: image image

The implementation of any element in a HTML web page depends on the HTML tag. If you want to display an image in a web page, you need to use an image tag. Next, we will introduce the image tag in detail.

And the attributes associated with him. The basic syntax format is as follows:

The src attribute in this syntax is used to specify the path and file name of the image file, which is a required attribute of the img tag.

Link label (emphasis)

Abbreviation: abbreviation for anchor [? K? (r)]. Basic explanation of anchor, iron anchor

Creating hyperlinks in HTML is as simple as wrapping tags around the objects that need to be linked. The basic syntax format is as follows:

Text or image

Href: used to specify the url address of the link destination, which has the function of hyperlink when the href attribute is applied to the tag. The abbreviation of Hypertext Reference. It means hypertext reference.

Target: used to specify how to open a linked page. The values are _ self and _ blank, where _ self is the default and _ blank is opened in a new window.

Note:

1. External links need to add http:// www.baidu.com

two。 Internal links can be directly linked to the internal page name, such as

< a href="index.html">

Home page

3. If the link target is not determined at that time, the href attribute value of the link tag is usually defined as "#" (that is, href= "#"), indicating that the link is temporarily empty.

4. You can not only create text hyperlinks, but also add hyperlinks to various web page elements, such as images, tables, audio, video, and so on.

Anchor location (difficulty)

By creating an anchor link, the user can quickly locate the target content.

There are two steps to create an anchor link:

1. Use "a href=" # id name > Link text to create link text (clicked) 2. Use the appropriate id name to mark the location of the jump target. Episode 2 basic base tags

Base can set the open status of the overall link

Between base and

Add target= "_ blank" to all connections by default

Special character tags (understanding) comment tags

There is also a special kind of tag in HTML-comment tag. If you need to add some comment text to the HTML document that is easy to read and understand but does not need to be displayed on the page, you need to use comment tags. The basic syntax format is as follows:

?

Ctrl + / or ctrl + shift + /

The comments are not displayed in the browser window, but as part of the HTML document content, they are also downloaded to the user's computer and can be seen when viewing the source code.

Path (key, difficult)

In practice, a new folder is usually created specifically for storing image files, and then the image is inserted, which requires a "path" to specify the location of the image file.

Paths can be divided into relative paths and absolute paths.

Relative path

The directory path is established based on the location of the web page that references the file. Therefore, when a web page saved in a different directory references the same file, the path used will be different, so it is called the relative path.

The image file and the HTML file are located in the same folder: simply enter the name of the image file, as shown in

.

The image file is located in the folder below the HTML file: enter the folder name and file name, separated by "/", as shown in

.

The image file is located in the folder one level above the HTML file: add ".. /" before the file name, if it is the upper two levels, you need to use ".. /... /", and so on, such as

.

Absolute path

Absolute path A directory path based on the root directory of the Web site. The reason why it is called absolute means that when all web pages reference the same file, the path is the same.

"D:\ web\ img\ logo.gif", or the full network address, for example

"http://www.itcast.cn/images/logo.gif"

List label unordered list ul (emphasis)

There is no order level between the list items of an unordered list, and they are juxtaposed. The basic syntax format is as follows:

List item 1 list item 2 list item 3.

Such as the following, the news is out of order, there is no need to wait in line, first-come-first-served, released and displayed first.

1. Can only be nested in, and entering other tags or text directly into the label is not allowed. two。 And is equivalent to a container that can hold all elements. 3. The unordered list will have its own style attributes. Put down that style and let CSS come later! Ordered list ol (understand)

An ordered list is a list in order, and its list items are defined in a certain order. The basic syntax format of an ordered list is as follows:

List item 1 list item 2 list item 3.

All the features are basically the same as ul.

Custom list (understanding)

Definition lists are often used to explain and describe terms or nouns without any bullets before the list items of the definition list. Its basic syntax is as follows:

Noun 1 noun 1 explain 1 noun 1 explain 2. Noun 2, noun 2, explanation 1, noun 2, explanation 2. Table table (will use) to create a table

In HTML pages, to create a table, you need to use table-related tags. The basic syntax format for creating a table is as follows:

The text in the cell.

The above syntax contains three pairs of HTML tags, namely, they are the basic tags for creating tables, all of which are indispensable, which are explained in detail below.

1.table is used to define a table. 2.tr is used to define a row in a table, which must be nested in a table tag, and there are only a few rows of the table if there are several pairs of tr in the table. 3.td / td: used to define cells in a table, which must be nested in tags, with pairs of pairs indicating how many columns (or how many cells) there are in the row.

Note:

1. Can only be nested in 2. Tag, which is like a container, can hold all the element table attributes

Three parameters are 0

That is, border cellpadding cellspacing is 0

Header label

The header cell is generally located in the first row or column of the table, and the text is bold and centered, as shown in the following figure, that is, the table with the header set. Setting the header is very simple, just replace the corresponding cell label with the header label.

Table structure

When using a table for layout, you can divide the table into headers, bodies, and footers (we won't repeat them because of compatibility issues), as shown below:

Used to define the header of the table

It must be located in the tag and generally contains header information such as logo and navigation of the web page.

Used to define the body of the table

Located in a tag, it generally contains content other than the head and bottom of a web page.

Table title

Title of the table: caption

Definition and usage

The caption element defines the table title.

I am the title of the form

The caption tag must immediately follow the table tag.

It only exists in the table.

You can define only one title for each table. Usually this title will be centered on the table.

Merge cells

Cross-row merge: rowspan cross-column merge: colspan

The idea of merging cells:

? When you merge multiple content, there will be something superfluous, so delete it. For example, if you merge three td into one, there are two extra ones that need to be deleted.

? Formula: number of deletions = number of merges-1

The order of merger is first up, then down, first left, then right.

First determine whether to merge across rows or columns

Find the target cell according to the principle of first up, then down, first left, then right.

Number of deleted cells = number of merged cells-1

Summary form

Tables provide a way to define tabular data in HTML.

A table consists of cells in a row.

There are no column elements in the table, and the number of columns depends on the number of cells in the row.

Don't dwell on the appearance of the table, that's what CSS does.

Form label (master)

The purpose of the form is to collect user information.

In our web page, we also need to interact with users and collect user data, and we also need forms at this time.

In HTML, a complete form usually consists of three parts: form controls (also known as form elements), prompt messages, and form fields.

Form controls:

? Contains specific form function items, such as single-line text input box, password input box, check box, submit button, reset button, and so on.

Prompt message:

? A form usually contains illustrative text that prompts the user to fill in and manipulate it.

Form fields:

? It is the equivalent of a container for all form controls and prompts, through which you can define the url address of the program that processes the form data and how the data is submitted to the server. If you do not define a form field, the data in the form cannot be transferred to the background server.

Input controls (key points)

The meaning of input input

In the above syntax, the label is a single tag, and the type attribute is its most basic property type, which has a variety of values to specify different control types. In addition to the type attribute, a tag can define many other attributes, which are commonly used as shown in the following table.

Type explains what kind of form it belongs to

If radio is a group, we have to give them the same name name so that we can choose more than one of them.

Label tags (understanding)

The label tag defines annotations (labels) for input elements.

Table

Function: used to bind a form element. When the label tag is clicked, the bound form element will get input focus.

How do you bind elements?

The for attribute specifies which form element the label is bound to.

Maletextarea control (text field)

The text text box can only write one line of text.

Textarea text field

If you need to enter a lot of information, you need to use tags. You can easily create a multiline text input box through the textarea control, and its basic syntax format is as follows:

Text content drop-down menu

The basic syntax format for defining a drop-down menu using the select control is as follows: select selection

Option 1, option 2, option 3.

Note:

There should be at least one pair in.

When selected = "selected" is defined in option, the current item is selected by default.

Form field

In HTML, form tags are used to define form fields, that is, to create a form to collect and transmit user information, and everything in the form is submitted to the server. The basic syntax format for creating a form is as follows:

Various form controls

Common attributes:

Action

After the form collects the information, it needs to be passed to the server for processing, and the action property is used to specify the url address of the server program that receives and processes the form data.

Method

Used to set how the form data is submitted, with a value of get or post.

Name

Lets you specify the name of the form to distinguish between multiple forms on the same page.

Note: each form should have its own form field.

At this point, the study of "what are the basic grammars of HTML" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.