Summary of HTML knowledge points

1. Basic shortcut keys that you need to be familiar with

ctrl+c copy

ctrl+v paste

ctrl+x cut

ctrl+tab switch (what to switch depends on what software it is)

alt+F4 to close the program

F2 to rename

F5 to refresh, for example, when viewing a web page, if you want to refresh the web page, press F5

ctrl+z undo, if this step is wrong, ctrl+z undo

windows+E to open explorer

windows+D show desktop

ctrl+space switch between Chinese and English

二、HTTP

1. Hypertext Transfer Protocol

2. This is a file transfer protocol. When we go online, all files are transferred from the server to the client's computer through the HTTP protocol.

3. Web pages are real physical files. And a web page is composed of many physical files: html files, image files, js files, css files. These files are uploaded to the server through special software. Then the user can see it. The user accesses the website through the browser, and the files on the server will be quietly transferred to the temporary folder in the user's computer through the http request, and executed, rendered and presented in the user's computer.

4. The principle of webpage: After the user enters the URL, the corresponding server will find that someone has requested my webpage, so the server will transmit the webpage and related pictures, js files, css files, and flash files to the user through the HTTP protocol. inside the computer. HTML pages are rendered on the user's computer. The HTTP protocol refers to the Hypertext Transfer Protocol. Each URL corresponds to a certain file on the server.

3. Preliminary understanding of HTML

1.html, css, js are all pure text

The plain text file is:

1) Only text, no styles;

2) Readable with plain text editors such as Notepad, not garbled

2. HTML is Hypertext Markup Language

1 ) English : Hyper Text Markup Language ;

2) The current industry standard, the strict three-layer separation of web page technology: html is responsible for describing the semantics of the page; css is responsible for describing the style of the page; js is responsible for describing the dynamic effect of the page;

Fourth, the character set

1. Two character sets: the difference

There are many UTF-8 characters and languages of various countries, but the storage size is large and the file is bloated;

gb2312 has few words, only Chinese and a few foreign languages and symbols are used, but the size is small and the file is small

2. Keywords and page description

1) Setting page description:

As long as the Description page is set, then Baidu search results can display these sentences. This technology is called SEO, search engine optimization, search engine optimization.

2) Define keywords:

These keywords tell search engines what this page is for and can improve the search hit rate.

3) title is also helpful for SEO search engine optimization

5. Basic grammatical features of HTML

1. HTML is insensitive to line breaks and insensitive to tab keys

2. Blank Folding Phenomenon

1) If there are spaces, line breaks, and tabs between all texts in HTML, they will be folded into a single space for display.

3. HTML tags are hierarchical

HTML divides all tags into two types: container level and text level .

A container-level label that can put anything in it;

In text-level tags, only text, images, and form elements can be placed .

1) p is a text-level label, only text, pictures, and form elements can be placed in p

2) a is a text-level label

6. Pictures

1. Types of images that can be used

You can insert pictures on the page, and the types of pictures that can be inserted are: jpg (jpeg), gif, png, bmp. What is the difference between type and type, css class talks about it.

The image formats that cannot be inserted into web pages are: psd, ai.

2. Grammar

How to insert pictures:

src is the attribute of img tag, baby.jpg is the value of this attribute

alt is the meaning of "alternate" in English, which means that for whatever reason, when the image cannot be displayed, the alternate text that appears (some browsers do not support it)

7. Hyperlinks

Grammar: <a href="1.html">wedding photo</a>

1. The other two attributes of the a tag

1) title hover text

2) Whether the target is opened in a new window

eg:<a href="09_img.html" title="It's beautiful" target="_blank" >Wedding photo</a>

blank means "blank", which means creating a new blank window

2. Anchors within the page

<a href="#wdzp">Click me to see my work</a>

<h2><a id="gzjy">Work Experience</a>

First set the id of h2, click href="#wdzp" to jump directly to the work experience.

8. List

1. Unordered list

Unordered list, used to represent the semantics of a list, and each item and each item are in no particular order;

The li in the unordered list cannot exist alone, and must be wrapped in ul; on the other hand, the "son" of ul cannot be anything else, only li;

Note: The role of ul is not to add dots to the text, but to increase the "semantics" of the unordered list;

The son of ul can only be li. But li is a container-level tag, and anything can be put in li;

2. Ordered list

o rdered list ordered list , represented by ol;

3. Definition List

1) The definition list is also a group label, but it is more complicated, and three labels appear:

dl means definition list definition list;

dt means definition title definition title;

dd means definition description definition expression word;

dt and dd can only be in dl; only dt and dd can be in dl;

The definition list usage is very flexible, and one dt can be matched with many dd;

2) dt and dd are container-level tags, and you can put anything you want. So, it should be clearer now:

What label to use is not determined by appearance, but by semantics

Nine, div and span

1) The semantics of div is division "segmentation"; the semantics of span is span "range, span"

2) The div tag is a container-level tag in which anything can be placed, even the div itself

span is also a tag that expresses "small area, small span", but it is a "text-level" tag.

That is to say, only text, pictures, and form elements can be placed in the span. p, h, ul, dl, ol, and div cannot be placed in span.

Small elements are placed in the span, and large things are placed in the div.

10. Forms

form means form in English. There are action attributes and method attributes in the form tag. The action attribute indicates where the form will be submitted. The method attribute indicates which HTTP method is used to submit, there are two types: get and post.

1. Text box

value means "value", the value attribute is the default value, and the text box has been filled in

2. Password box

3. Radio buttons

<input type="radio" name="xingbie" checked="checked" /> 男

<input type="radio" name="xingbie" /> 女

It is selected by default, you should write checked=”checked”

4. Checkbox

<p>

Please choose your hobby:

<input type="checkbox" name="aihao"/> 睡觉

<input type="checkbox" name="aihao"/> 吃饭

<input type="checkbox" name="aihao"/> 足球

<input type="checkbox" name="aihao"/> 篮球

<input type="checkbox" name="aihao"/> 乒乓球

<input type="checkbox" name="aihao"/> 打豆豆

</p>

5. Drop-down list

select is "selection", option "option".

The select tag is the same as ul, ol, and dl, it is a group tag

</select>

6. Multi-line text box (text field)

The cols attribute represents columns "columns" and the rows attribute represents rows "rows"

7. Three kinds of buttons

1) Normal button: <input type=" button " value="I am a normal button" />

2) Submit button: <input type=" submit " />

3) Reset button: <input type=" reset " />

11. HTML Miscellaneous

1. HTML comments

Any program or code has comments. Comments are for programmers and do not affect the program;

HTML comment syntax:

2. Character entities

1) < is the character entity of <;

2) > is the character entity of >;

4) is the entity of the space to prevent the phenomenon of blank folding;