[01] html entry zero-based learning Notes (1)

Before learning the basics of the front, now want in-depth, proficient in learning the front, to the front and full stack engineer direction.

Before learning mainly through the front-end watch videos, combined with hands-on exercises. Now think reading + video + practice, it should be the most efficient way of learning. For html, css, I mainly refer to "head first html and css Second Edition", head first series book on the knowledge orderly and gradual, easy to understand.

Here is what I read this book, with notes of learning to do before, combing the first part as follows:

HTML: hypertext markup language

1.1 conceptual understanding

1, the role: responsible for describing the structure of the page;
2, understand the meaning of html:
1) ml: markup language used to describe the structure of the web;

It is how the browser knows how to display a page: by html markup language. For example, <p> <head> and other tag tells the browser structure and meaning of the text. That is, which is the title of the text, which is the paragraph, the picture on what position and so on.

Surrounding the pair of markers needed content page (some marked exception: The <img>)
Example: <h1>the first page</h1>collectively referred elements: Element content + + = start flag end flag

2) ht: hypertext; links from one page to another page.

1.2 The basic syntax

1, html structure

A relatively complete skeleton like this:

1    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3    <head>  描述网页的配置
4        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5        <meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
6        <meta name="Description" content="网易是中国领先的互联网技术公司" />
7        <title>Document</title>
8    </head>
9    <body>
10        其中的内容是用户可以看见的内容
11    </body>
12    </html>

Line 1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Specify the document type page for the browser, which is not a html element!
public that the standard is publicly available;
"-//W3C//DTD XHTML 1.0 Transitional//EN" He expressed using version xhtml1.0
<!DOCTYPE html> The html5 doctype

Line 4: Character Set

Character set: all can express some letters, numbers, symbols and other languages on a computer. For example, ASCII and so on. Now has a unified standard for the Unicode character encoding, it is a lot of popular software and operating systems support a character set. We need to tell the browser we use unicode encoding, with <meta>tags.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">This is html4.01 and earlier <meta> tag format. html5, a direct written as<meta charset=”utf-8”>
Utf-8 is a coding unicode series (there are other coding this series)
encoding Chinese can be used in two ways:
first: UTF-8 character internationally, which covers all languages, such as Arabic, Chinese
second: gb2312 gbk is also written in Chinese font, only covers some of the common foreign and Chinese characters, symbols

Font scale: UTF-8 (word-wide)> gb2312 (Chinese characters only)
save size: UTF-8 (and more bloated, load more slowly)> gb2312 (smaller, faster loading)
due to the UTF-8 character large scale, so the description a character code needed more.
UTF-8 is stored inside a three-byte characters. And stores a character gb2312 2 bytes.

Summary:
UTF-8 characters and more, there are various national languages, but the large storage capacity, file bloated;
less gb2312 words, only a small number of Chinese and foreign language and symbols, but the capacity is small, compact files
.

Lists two use cases:
The company is doing Japanese anime, Japanese animation often the names of some of the pages you want to use UTF-8. If gb2312 will not be displayed in Japanese.
The company is a Chinese website, extreme pursuit of the page display speed, to use the gb2312. If using UTF-8 for each character will be a multi-byte, so the 5000 characters, multiple 5kb.

We pro-test:
● QQ, Netease, Sohu is the use gb2312. These companies are pursuing the display speed.
● Xinhua Tibetan-language channels, using the number of UTF-8, to ensure that the character set.

Note:
when we do not set up, sublime default type is UTF-8. Once the change is gb2312 time, we must remember to set about saving type of sublime:
File → set File Encoding to → Chinese Simplified (GBK)

Line 5: Key
Line 6: Description

2, folding display

html in between all of the text, if there are spaces, line breaks, tab will be folded into a space appears

online version of the website in order to speed up page loading speed, improve the user experience, sometimes the code compression to reduce the volume of code. As shown below, HTML tags are no line breaks, do not indent (tab), HTML, and change does not wrap regardless of hierarchical tags still clear, but the programmer unreadable:
image description

3 Common markers

1, h Marking
<h1> </ h1> a title
<h2> </ h2> subheadings
......
<H6> </ H6> six title

2, p mark: paragraph English paragraph "paragraph" abbreviations

3, void elements: no actual content of the element, just write a start tag.

<br> only effect is to insert a line feed; usually only used block element, the browser will insert a line, if you want to insert a new line in the text, <br> available, or can be <br/>.
<img scr=””>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

4, <q> short reference, part of the role of the paragraph; Fair browser with quotation marks on both sides of reference

5, <blockquote> quoted long, when the need to use separate reference display.

6, the list:

<ul>      ：表示列表类型：有序列表<ol>【ordered list】；无序列表<ul> 【unordered list】
    <li></li> ：每个列表项：【list item】
    <li></li>
</ul>

Note:
1, have the list before the start line breaks after each list item also wrap, so <ul> <li> are block elements
, used separately would be no point in 2, <ul> <li> are used together.
3, <ul> element can contain <li>, can not contain text or other elements directly;
. 4, <Li> may be nested write <ul>, i.e. nested list. li is a container class, which can put anything
5, there is another type of list, definition list.

<dl>
    <dt></dt> 列表中每一项都有 定义术语 和 定义描述
        <dd></dd>
    <dt></dt>
        <dd></dd>
</dl>

7, <img>marking

1, how the browser loads the image?

HTML pages are not directly insert a picture, instead of referring to address the inserted picture. The browser to get the index.html file, read the file, display the file and found that images need to get, then get these images from the web service individually.

2, web commonly used in three types of image formats: jpeg, png, gif

image description

3, <img src=”images/drinks.gif” alt=”drink”>
src: the image on the same site, preferably with a relative path; an image on a different site, use url;

alt: If the image fails to show, will use alt text to replace it, html5 must be written in alt attribute .

width height: in pixels, width tell the browser to display the image in the page height.

Image Link: The <img>elements put <a>in.
```
<a href=”html/downtown.html”>
     <img src=”images/downtown.jpg” alt=”downtown”>
 </a>
```

8, <a target=”_blank” href=”index.html#chai” title=”tea”>see the tea</a>elements
href: is the abbreviation of the English hypertext reference; there will be underlined when the default display.
href attribute can use a relative path or url to link to other pages;
relative paths: for linking to pages within the same site; url: links to other websites.

target: open in a new window. Now the default settings of the browser tab opens in a new container, rather than a new browser window
title: hover text, provide a description link.

Direct link to another page of a certain period of:
1) find elements want to create an anchor point, = to create the above mentioned id "Chai",
2)<a href=”index.html#chai”>see the tea</a>

9, <div>
for the associated block elements grouped together, in the logic region.
Use nested <div> element to add more file structure, which will help to ensure a clear structure or increase convenience style. Unless really need, do not increase too much nesting.

10, <span>
the <div> Similarly, for the relevant text and inline elements grouped together.

11, character entities: For special characters, abbreviations with the corresponding input
Example: to display text the <html> element rocks in html; entity through the character, so the input

                the &lt;html&gt; elment rocks

& ：&
< ：<
：>

4 elements, inline elements

1) block elements: a display before and after each linefeed when;
<div>、<h1> h系列、 <p> 、<blockquote>、<ol>、<ul> <li>

2) inline elements: always "row" appears in the text of the page flow;
<span>、<em>、 <strong> 、<q>、 <img>

3) both of which are: <a> it can enclose block element, not only the text; The the context.
4) Use the difference between: the block elements are usually used in the web page of the main building blocks, the inline element is used to mark snippets. When designing a page, usually starting with larger blocks start, then add inline elements in the perfect page.