Web front-end from beginner to proficient-4 introduction to HTML

This lesson I continue to take everyone to learn HTML

In the last lesson, we already have a page that looks something like this:

<! DOCTYPE html>
Double click on this file to open the preview, nothing
Well, from now on, we'll add some content to it.
According to the HTML syntax,the immediate child tag in the HTML tag has head body, etc.
So your mind should think about how our pages have become
<! DOCTYPE html>
First, say head.
You can put the title Meta Style Link script tag in the head.
Now just remember.
Style put CSS code inside
Links can link external CSS code in
How the code in the specific style is written, and why you need to link the external code with the link tag, and how to link and so on a series of questions and so on when we talk about CSS in detail
Script 99.9% of the situation is decentralized JavaScript code is also waiting for us to talk about JS in detail
As for meta tags, the personal feeling in the mobile self-adaptive that piece of power is relatively large, the web is basically to do some signs and so on, if you want to know, you can own Baidu a bit
There's nothing to say about this.
So we're going to have a title left.
Title as the name implies, right, but do not associate it with the big question on our web page.
They can't hit the eight poles.
The contents of the title are displayed on the label, for example, we wrote the following code
<! DOCTYPE html>
Ctrl+s Save after you double-click the file in the browser preview, we will find that the label shows the corresponding text:
Chrome
FireFox
Ie
Of course, you may be writing our code with a more cool editor.
In fact, we can right-click in the browser Preview in the editor so that we can open our web page in the browser
And there's no need to double-tap open each time
From now on we need to develop a habit is to write a piece of code, to be in IE FireFox (FF) chrome under the respective preview effect
Of course, our tutorial in the compatibility is not a problem, in order to facilitate the only one browser inside the preview
If we encounter a browser inconsistency, we'll make a special statement.
Title Tag We know what we did.
What's in the head tag, we probably got one.
Next look at body
What's inside the body is what we really want to show to the page.
Body can put a lot of things inside
I'll give you a piece of code, let's see
< Body >    <  style= "width:100px; height:100px; background:red;" ></div> </ Body >
After adding this code to the body , we'll preview it in the browser and we'll see
Okay, let's explain the meaning of the code above.
We can first put style= "width:100px;height:100px;background:red;" Remove it so that the code is left with a label that we haven't seen before .
<div></div>
What does this label mean?
Div is actually a shorthand for division, so what does division mean?
We can go to the Youdao, PowerWord what to find, I directly tell you here
Direct translation comes to the meaning of the region, in fact, is a place
So a div represents a place on our web page, what is the feature of this place?
The style in it and the pile of stuff that followed it came in handy.
What is style?
This is similar to the meaning of translation in the dictionary, that is, the meaning of the style, what is the style?
The equals sign is followed by a description of the style, which means
This code is written here to put one of these styles (style) the Div
What kind of style is this style? The contents of the style equals sign will tell you the answer, and now you can perceive it emotionally.
It looks like a width:100px; width 100px
height:100px; height 100px
background:red Background Red Red
Recognize it here, that's it, because we're going to have to talk about it later.
Because this thing is our CSS.
Okay, just a little bit far away, welcome back.
So the computer scientists gave the Div and style a corresponding name.
A DIV is called a tag element , a style called an attribute of an element.
It is worth mentioning that After learning JavaScript to manipulate tag elements , we and would call it a tag object, again when we learn the DOM in JavaScript, we call it DOM nodes .
The term is always so changeable, no way
But it's all the same thing.
About the tag element just pulled a few professional names, and then pull the property on this thing.
A property, we must have an idea is this tag property can only have style this one?
No, of course not.
To illustrate this problem, let's introduce a new label to you.
<a href= "http://www.baidu.com" target= "_blank" style= "color:black" > Baidu </a>
This time I telework it all out, but it's still the same.
Put the thing behind a, href= "http: ..." to kill it all, and finally the rest.
<a> Baidu </a>
I believe that you have already been familiar with the can not be familiar with, but the name of the label is replaced by a, there is a tag inside put some text
And these four words are red all over China.
I'll tell you first. <a> the meaning of the tag is the meaning of the link
The next thing you can guess is what the text in the a tag does.
Yes, it is used to click, the point is transferred to Baidu
But people think, <a> Baidu a bit </a> this virtue, can go to Baidu just to hell
Or what I just wrote about the href, target or whatever, it's useless.
It's impossible.
OK, with the top div to pave the mat, I believe a don't need me to say anything more
Yes, Href,target,style is a property of a, which means that the properties of a tag can have multiple
Let's give it a little bit of your ingenuity, and basically know what the three properties are.
Href:hyperlink reference is probably the meaning of the link.
Target: Translated into a goal, it seems a little abstract
Style If you don't know what's going on, I think you have a very good memory.
tags, that is, the properties of the label, how to say, each label commonly used properties are just a few, but also very good to remember
In fact, there are a lot of tags, such as P tag img tag span tag, etc.
These tags together make up our web page
Let's talk about these labels from the next class.
Web front-end from beginner to proficient-4 introduction to HTML