HTML Mind Map

Here is the structure of the HTML document:

This article mainly explains some HTML tags, CSS styles, JavaScript methods

Html

HTML tags have a variety of countless, but often not much, summed up my current most commonly used HTML tags are: div tag, ul tag, a tag, span tag, img tag, button tag, input tag, select tag. The main functions of these labels on Web pages are implemented by combining CSS styles and JS methods.

div tags

This is a block element, is also our most commonly used, it can be no exaggeration to say that any page will be used, it is mainly with the style and method of use, you can think of it as a box, its main function is to wrap other tags, limit other tags.

Span label

This is an inline element, like a Div, it is also a box, and the div is different, generally we will take the span tag to wrap the text content

UL label

The UL tag is one of the list labels, list label includes the serial table OL, the unordered list UL, the custom listing DL. But commonly used or UL label, we are less use of pure HTML to write the UL, generally we will combine CSS style and JS method to achieve a variety of functions, such as: Navigation bar, Carousel pictures and so on.

A label

Hyperlink tags, used primarily for hyperlink functionality

IMG Tags

For inserting pictures

Button Label

Button label, in the Web page more or less will appear some buttons, this will be used to our button tag, button label is generally more used in the form inside, but there will be some special usage, such as button drop-down menu.

Input label

Form labels, which are used primarily for input text boxes, and password text boxes, are the most commonly used labels in a form

　　

Select Label

Drop-down options, mainly to do two-level linkage and multi-stage linkage use

CSS Styles

For the understanding of the style, I understand, a Web page you want to make it look like, that it is the style, that is, we want to use CSS style to beautify our web page and CSS style with JS to achieve the function we want.

Style for the HTML document is still very important, like I we learn html, if we only learn HTML tags, we are very difficult to make a Web page, but after learning CSS style, we can use CSS style to make static pages, although less JS, But it does not affect the production of my Web page.

In this I will not like HTML tags, give you some of the common sample , I am more about how to know what to use the style, even if the style code forgotten, can also be queried by Baidu.

First of all

We need to understand the overall structure of the HTML document that we're going to do, and how many parts of the whole HTML document are made up of.

And then

After we understand the overall structure, we begin to understand that no part of it is what it looks like (i.e. what its style is), such as how wide it is, whether to add a background color or background image, what the text color is, etc...

At last

When we debug the style, it's best to add a border to the object, which makes it easier for us to debug the margins, padding, and the entire layout.

JavaScript methods

In the HTML I like the most is JS, the reason is very simple, is its implementation requires you to use your logical thinking, often an action a function of the implementation will let you brains to think out. Of course, I do not like self-abuse, but in peacetime writing some code, often the most waste of my time is the CSS style debugging, because we are just beginning to learn soon, some of the work is to simulate some sites, the site simulation, so in the process of simulation is always because of the style of the problem debugging for a long time, Not to say the style is very difficult, but I feel very cumbersome, especially recently for a while to write a new web page of the Wisdom podcast, but the material nothing, some pictures even to themselves, this is cumbersome. So I prefer JS simple and clear fast

Of course, the JS method of logical thinking is still a method, I generally use the reverse thinking thinking

1) In general, I write the idea of JS first is to understand the function of the completion of what will be the results?

2) Through this result to consider how to get this result (this is to think of what methods can be implemented this method), here I give the action to achieve this result is called Method 1,

3) then think about how to implement Method 1, the action of implementing Method 1 is called Method 2,

·················

n) omitted a lot in the middle, because this is a reverse thinking method, know the function to achieve and then push up the first level, until finally, the method of this function is you pushed out, of course, the premise is to be familiar with the JS method, because if you are not familiar with, then how do you know there are ways to achieve this action?

　　　　

　　

HTML Mind Map