First, what is HTML?
htyper text markup language that is HTML
HTML is the main part of a page, also the basis for a web page. Because a page can not have style, you can not interact, but must have a web content need to be rendered. So is the basis of HTML front end portion.
Hypertext: refers to the inside pages can contain images, links, and even music, programs and other non-text elements.
Markup Language: mark (label) constitute language.
It is a markup language used to create web pages. Markup Language is a text (Text) and other information related to the combination of text, text encoding on the computer to show the document structure and data processing details. Other information related to the text (including, for example, and the structure of the text information indicating the like) combined with the original text, but using labeled (Markup) identified.
Page == HTML document parsed by the browser used to display
static pages: static resources such as xxx.html
dynamic pages: html code language developed by some dynamically generated based on user requests
Second, what is the label?
HTML as a markup language, it is to mark web content through a variety of labels. We learn HTML is to learn the main HTML tags.
- Is composed of a word wrap angle brackets, for example: <html> * all tags can not start with a number of words.
- Tags are not case-sensitive. <Html> and <HTML>. Lowercase recommended.
- Label is divided into two parts: the start tag and end tag <a> </a> section between the two labels we called the tag body.
- Some tags use a relatively simple function of this label to label and the label is called self-closing example:... <br/> <hr /> <input /> <img />
- Tags can be nested, but not cross nested. <a> <b> </a> </ b>
What is the property of the label?
- Usually in the form of key-value pairs. For example name = "alex"
- Property can only appear at the beginning or self-closing tags and labels.
- All lowercase attribute name. * Attribute values must be wrapped in double or single quotes e.g. name = "alex"
- If the property value and attribute names exactly the same. Write directly attribute name. For example readonly
<! DOCTYPE html> tag what is?
Due to historical reasons, each browser there are differences in the rendering of the page, or even different versions of the same browser, the rendering of the page is different. Before the introduction of W3C standards, there is no unified standard browser on page rendering, resulting in a difference (Quirks mode or called Compatibility Mode); due to the introduction of W3C standards, the browser rendering the page with a unified standard (CSScompat or called Strict mode is also called the Standars mode), which is both the simplest difference.
After the introduction of W3C standards, browsers are beginning to adopt the new standards, but there is a problem is how to ensure that the old can continue to browse the web, before the standard came out, many pages are written according to the old rendering method, if the criteria used to rendering, will cause the page to be displayed correctly. In order to maintain browser rendering compatibility, the previous page can be viewed properly browser retains the old rendering methods (such as: Microsoft IE). In this way the browser rendering arises Quircks mode and Standars mode, two kinds of rendering methods co-exist on a browser.
window.top.document.compatMode: // BackCompat: quirks mode, the browser uses its own quirks mode rendering parsing the page. // CSS1Compat: standard mode, the browser uses the W3C standard analytical rendering the page.
This property will be to identify and use the browser, but if your page does not DOCTYPE declaration, then compatMode default is BackCompat, which is the beginning of the devil - the browser in its own way to resolve rendering the page, then, in different browsers device shows a different style.
If you add a page <! DOCTYPE html> So, it is equivalent to the standard mode is turned on, the browser you have to honestly resolve to render the page according to the W3C standard, so that your pages in all browsers Lane is a way to display the. This is the <! DOCTYPE html> role.
Third, the development environment
There are many HTML editors to choose from, the common Hbuild, Sublime Text, Dreamweare can be used to develop HTML. Of course PyCharm also supports HTML development.
Fourth, the file extension specification
File extension .htm or .html general use .htm and .html pages are static extension, the page file no different distinction, html page with htm suffix suffix can be used interchangeably, there is no impact on the web as well as makes no difference. Htm html and can be considered no different, with the only difference that is more than a little "l".
For the development environment we do not introduce extra, ah, we officially entered learn HTML tags it. ps: the students! If you want to know the students throughout all tags What are some of the front-end, then you can open a Baidu home page, F12, or right-click the inspection, you will find, as:
Five, HTML document structure
This section we learn the structure of HTML files: an HTML file have their own fixed structure.
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
The above code is explained as follows:
First, <!DOCTYPE HTML>it is the document declaration must be written in the first line of the HTML document, located before the label, indicating that the document is a HTML5 document.<html>
<html></html>Known as the root tag, label all pages are in.<html></html><head></head>Tag is used to define the document's head, it is a container for all the head elements. There are common elements of the head , , , and other labels, label head will be described in detail in the next section.<title><script><style><link><meta>- In and content between the tags is the main content of the page, such as , , , and other web content label, in the content of the tag (FIG light green part) it will eventually be displayed in the browser.
<body></body><h1><p><a><img><body>
HTML documents contain HTML tags and text content, different labels on the browser will show different results, so we need to keep in mind the characteristics of the most common tags.
Six, HTML comments
No matter what programming language we learn, we must pay attention to is the comment, the comment of the importance of self-evident, we are here without further ado, let's talk about HTML in Notes format:
<! - Here is the comment of the content ->
Note: Comments may be used in direct line breaks. And we are used to annotate the label to wrap up the HTML code. Such as:
<-! Xx section Start ->
here put your HTML code xx part of
<-! Xx end section ->
HTML comments Notes:
- HTML does not support nested comments
- Comments can not write HTML in HTML tags
Seven, HTML tag attributes
HTML tags can set properties, property in a manner generally key-value pairs written at the beginning label. Such as
<div ID = " I1 " > This is a div label </ div> <P class = ' P1 P2 P3 ' > This is a paragraph tag </ P> <A the href = " http://www.baidu.com " > this is a link </a> <INPUT type = ' Button ' the onclick = ' addclick () ' > </ INPUT>
Why you can set the properties can?
Actually, you can be as simple to understand, because in the end we will go to beautify these labels through css, operated by javascript, then these labels we can be seen as an object, the object should have its own properties and methods. So you like the above when it comes to input tags, type = 'button' is its property, onclick = 'addclick ()' is its method.
Notes on tag attributes:
. 1 .HTML label except for some specific properties can set a custom attribute, a plurality of label attributes may be provided separated by a space, the plurality of attributes are not distinguished order. 2 . Quoted attribute values use the wrap, usually double quotes may be single quotes. 3. attributes and attribute values are not case sensitive, but it is recommended to use lowercase.
Eight, label classification
Three different types of tags in HTML elements: block element, the element row, the element row block.
8.1 common block elements:
|
1
|
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
|
Features: display: block;
- Each block-level element start a new line, and the subsequent elements are also on a separate line. Own line
- Height, width, line height and the top and bottom margins are the elements may be provided .
- Element width without setting, is (a uniform width and the parent element) 100% of the parent container itself, unless a set width.
8.2 common inline elements:
<a> <span> <br> <i> <em> <strong> <label>
Features: display: inline;
- And other elements on one line ;
- The element height, width, and top and bottom margins can not be set ;
- The width of the elements is that it contains text or image width can not be changed.
8.3 commonly used inline block elements:
<img> <input>
Features: display: inline-block;
- And other elements on one line ;
- Height, width, line height and the top and bottom margins are the elements may be provided
note:
We can be converted to block-level elements, inline elements, inline block elements by attribute display, ready for the back page layout.
Nine, nested label rules
Inline block element may comprise an element or elements of some of the blocks, but can not contain inline elements block elements, it can contain other inline elements, for example:
<div><div></div><h1></h1><p><p></div> ✔️ <a href=”#”><span></span></a> ✔️ <span><div></div></span> ❌
P block elements can not be placed inside the label, for example
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
There are several special block-level elements can only contain inline elements can not contain block-level elements, these special labels are:
h1、h2、h3、h4、h5、h6、p
li element can be embedded ul, ol, div and other labels
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>