html overview and structure

1. html Overview

HTML is the first letter of HyperText Mark-up Language shorthand, meaning that HTML, hypertext refers to the hyperlink, tag refers to the label, is a language used to create web pages, the language of one of label composition, preservation of this language crafted file is a text file, the file extension html or htm, html file is a web page, html file with an editor to open the display of text, you can use text edit it is, if you open the browser, the browser will follow the label describing the contents of the rendered files into web pages, web page display can jump from one page links to another page.

2. html basic structure

Html a basic structure as follows:

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

The first line is the document declaration, the language of the second row, "" label and the last line of "" the definition html document as a whole, '' tab 'lang = "en"' defined pages in English, Chinese is defined as' lang = "zh-CN" ', does not affect the definition of nothing, it is generally used as statistical analysis. The label "" and "" label is its first level sub-element, "" label which is responsible for the page header and defining some settings, including coding format definition set page, the chain css style files and javascript files, settings content is not displayed on the page, the title of the content will be displayed in the title bar, "write the content displayed on the page" inside.

html document type

Two commonly used document types is xhtml 1.0 and html5
xhtml 1.0
xhtml 1.0 is a popular version before html5, currently many websites still use this version.
This version of the document creation method sublime text: html: xt + tab
document example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>

HTML5
PC side can xhtml 1.0, may be used html5, html5 is backwards compatible
in this version of the document with sublime text creation method: html: 5 + tab or + tab!
document example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文档类型 </title>
</head>
<body>

</body>
</html>

Differences between the two documents

Document encoding declaration and statement
html5 added a tag elements and element attributes

Note html
html document code may be inserted comments, which is a description and explanation of the code, the comment contents are not displayed on the page, html code inserted comments follows, the shortcut key is ctrl + /

<!-- 这是一段注释  -->

html commonly used tags

1. html title tag

By <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, 6 kinds of labels can be defined on the page level headings. 6 kinds of levels of headings are 6 directory hierarchy of the document, for example: <h1> used as the main title, followed by <h2>, and then followed by <h3>, and so on. Search engines use the title to the structure and content of indexed pages, so the page using the title is very important.

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2. html paragraph tag

<P> tag defines a text paragraph, a paragraph containing the default vertical spacing, will use this default spacing pitch between paragraphs, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
    文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
    标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
    式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

3. html Break tag

Character code into segments, directly in the code line breaks in the rendered web page does not recognize when this wrap, wrap if wanted, can be inserted in a paragraph code <br /> to force the line feed code is as follows

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

4. html character entities

Character code into segments, if space between characters want more space, more hollow spaces in the code, when rendered into a web page will display a blank, if you want to display multiple spaces, you can use a space character entities, as follows :

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

Displayed on the page "<" and ">" will be mistaken for a label, want to display "<" and ">" character entities can use them, for example on the page:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

5. html tag block

<Div> tag block element, showing a content, there is no specific semantics.
<Span> element in the tag line, represents the contents of a short line, there is no specific semantics.

6. html tag containing styles

<Em> element within the tag line, word for emphasis in tone
<I> in the tag line element representing Glossary
<B> element within the tag line, represent key words or product name
<Strong> elements within the tag line, represents a very important element

7. html semantic tags

Semantic tags, that is, when the layout of the multi-use semantic tags, search engines crawl the time to recognize these labels, understand the structure of the document, to include them in the website. For example: h1 tag is a headline, a paragraph is a P tag, ul, li is a list of labels, the label indicates that the link A, dl, dt, dd definition list, etc., no more semantic tags.

8. html image tag

<Img> tag can insert a picture on a web page, it is a label used independently, it is commonly used attributes are:

src attribute definition picture reference address
Text that is displayed when alt attribute definition picture fails to load, search engines will use the text included pictures, blind screen reader software reads the text so that the blind recognize pictures, so this property is very important.

<img src="images/pic.jpg" alt="产品图片" />

8. html absolute and relative paths

Like insert a picture on a Web page that external file, you need to define the reference to the file address, reference an external file also includes references to external style sheets, javascript, etc., reference addresses into absolute and relative addresses.

Absolute Address: relative to the disk to locate the address of a file
Relative address: relative to the reference file itself to locate the referenced file address
absolute address because of changes in the top level directory of the disk and can not find in the whole file migration file, the relative path will not have this problem. Tips defined relative path:
"./" indicates that the current file directory, such as: "./ pic.jpg" represents pic.jpg picture of the current directory, you can omit this use.
"../" indicates that the current file is located on a directory in the directory, such as: "../ images / pic.jpg" represents pic.jpg picture images files in the parent directory in the current directory folder .

9. html link tags

<a> tag to define a link address on a web page, it's commonly used attributes are:

href attribute defines the jump address
When defining mouseover pop-up title attribute prompt text box
target attribute definition window Link open position
- target = "_ self" default value, a new page to replace the original page, in the original open position
- target = "_ blank" opens a new page will open in a new browser window
```
<a href="#"></a> 
<a href="http://www.baidu.com/" title="跳转到百度首页">百度</a>
<a href="2.html" target="_blank">测试页面2</a>
```

10. html list

Ordered list

Defined on the page number of a content list may be implemented with <ol>, <li> used in conjunction with the following code:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

Generated on the page list, will press 1,2,3 number on each item ordered list of less use in the actual development.

Unordered list

Defined on the page a list of unnumbered content can <ul>, <li> be achieved with the use, as follows:

<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

Generated on a list of web pages, on each project will be a small icon, small icon shows different effects on different browsers, it will generally remove the default icon with a style, if desired icon, it can use a custom icon style , so as to achieve a different display on the browser the same, the actual development of such a list is generally used.

Definition list

Often used to define a list of definitions of terms. <Dl> tag indicates the overall list. <Dt> Title tag defined terms. <Dd> tag is an explanation of terms. A <dl> may have a plurality of titles and interpreted, as follows:

<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

11.html form

Form is used to collect different types of user input, a form composed of different types of labels, tags and associated attributes are used as follows:

tag defines the entire form area <form>
Action form data attribute defines the address
mode attribute defines the form submission method, generally "get" mode and "post" mode
<Label> tag is defined text label form element
<Input> tag defines general form element

type properties
- type = "text" is defined single-line text input box
- type = "password" to define a password input box
- type = "radio" is defined radio button
- type = "checkbox" check box is defined
- type = "file" is defined to upload files
- type = "submit" button to submit definitions
- type = "reset" button to reset the definition
- type = "button" to define a common button
- type = "image" is defined as a picture submit button, with the src attribute definition picture address
- type = "hidden" defines a hidden form fields, used to store the value of
The value attribute defined in the form element
The name attribute defines the name of the form element, this name is the key name when submitting data

<Textarea> tag defines a multi-line text entry box
<Select> tag defines the element drop down menu
<Option> tag

-html core knowledge of front-end development