In any language, we all need to master a few things about it!
1. Concept
We all know what is Chinese, what is Chinese, and what is English. So what is the language of html? We need to understand its concept.
2. Purpose
What is its purpose and what can it do.
3. Basic grammar
Chinese has grammar, English has grammar, html as a language, it also has its own basic grammar, and how to use it.
4. Use
How should we use it?
So for any language, we should separate these 4 aspects to understand.
The concept of html language
HTML language, also known as hypertext markup language, the full name HyperText markup language. You don't need to remember its English words, you just need to remember that html is a hypertext markup language.
In order to make it easier to remember, we can break it down into three parts to explain, namely hypertext, markup, and language.
What is language? Well understood, it is the language of the browser. We need to communicate with the browser, and if we want the browser to help us display the page we want, then we have to learn the language of the browser, and this html belongs to the language that the browser can directly interpret.
What is a mark?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale-1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html的概念-前端培训基础学习</title>
<style>
/*css语言*/
body{
font-size:20px;
color:#333;
text-align:center;
}
</style>
</head>
<body>
<h1>html的概念-前端培训基础学习</h1>
<p>任何一门语言，我们都需要掌握它的几样东西！</p>
</body>
As shown in the above code, <html><head><meta><title><style><body><h1><p>, these are called tags.
From the previous code, we can also see that there are two styles of tags, some tags have a head and a tail, and some tags only have a beginning and no end.
There may be nesting between different tags. For example, the h1 title tag and p paragraph tag in the previous code are independent. But all their tags as a whole are placed in a tag called body. Another example is the head tag in the previous code, which contains meta, title, and style tags. It shows that tags are nested, but no matter how it is nested, no matter how complex it is, it is composed of tags one by one.
So it's called a markup language.
What is hypertext? Or why is it called hypertext? This is actually related to the development of our web page.
We all know that there are many elements that a web page provides for users to see. The common elements of early web pages were only text, that is, text. And hypertext means all the information on a web page, including text, pictures, links, forms, audio and video, etc., not limited to text.
Through our understanding of these three parts, they are called hypertext markup language together.
The purpose of html
constitutes all the structure and content on the web page and is displayed to users. That is to say, all the content on the web page can be described with appropriate markup. A word-structure is mentioned here, which is actually the layout and typesetting of web pages. Reasonable typesetting layout makes the web page beautiful. Just like our house, there are three bedrooms, one living room, one kitchen and one bathroom. It needs a layout and structure, and we can't pile up everything in a large space.
Our tags are divided into two parts, one part is used to store content, such as the h1 and p tags mentioned above, which are mainly content tags, mostly used to store content. The other part is used for layout, such as div, li, etc. It is like dividing our house into many spaces. The big box contains small boxes, and the small boxes contain content. Of course, this is not absolute, and the content can also be placed directly in the box.
So our pages are not just content, not all the text and pictures are kneaded together, without distinguishing their structures, but also must have layout marks, so that the pages have an organized structural relationship.
The grammar of html
I think the grammar of html can be said to be the simplest of all languages. It has only two grammatical structures:
<tag name>content</tag name>, two identical tags, with an extra slash at the end tag to form a tag pair.
<tag name>, only starts, not ends.
When you see this kind of angle bracket mark in the future, it must belong to the html language.
In use, attributes are usually added to tags, and attributes can be added to both syntax structures, with the style of
<tag name attribute="attribute value" attribute="attribute value">content</tag name>
The use of html (the basic structure of html documents)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale-1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="关键词">
<meta name="description" content="这是一个页面">
<title>文档标题</title>
</head>
<body>
<!-- 用户看到的网页内容 -->
</body>
＜!DOCTYPE html＞, to declare the type of the document, this statement means to tell the browser that this is an html document, and it should be interpreted with the html language structure.
Then connect the html tag <html></html>, the html tag is divided into two parts, the first part is the header information tag head, which needs to provide some basic information to the browser. Among them:
＜meta charset="UTF-8"＞declare the encoding, tell the browser to use the international universal encoding, which can recognize all languages, and there will be no garbled characters.
<title>Document title</title> declares the title, tells the browser what document this webpage is, and it is also displayed on the webpage navigation bar, so users can see it. This title is very useful for SEO. We all know that search engines have rankings, and this ranking shows the title.
＜meta name="viewport" content="width=device-width, initial-scale=1.0"＞
The viewport, also called the viewport. The function is to adapt to the mobile terminal. Generally, responsive websites must have this code. If it is removed, it can only be used as a PC-side website and cannot adapt to the mobile terminal.
＜meta http-equiv="X-UA-Compatible" content="ie=edge"＞
For compatibility issues, as long as our browser has an edge kernel, no matter whether we open ie7 or ie8, the browser will choose to use the latest edge kernel to explain it, so that the webpage will not look messy. can be removed.
＜meta name="keywords" content="关键词"＞What keywords are our webpages about? Crawl them for search engines, assign personality to the webpages, and what type of webpages they belong to. If users search for related keywords in the future, the search engines may list them and let users make choices. .
＜meta name="description" content="这是一个页面"＞For a description of a web page, its function is similar to keywords, and it is also captured by search engines to assist users in searching and viewing.
The second part is the content that the user views, and all content is placed inside the body tag. We will divide the body into many modules for layout and content. No matter how complex the layout and content are, all are placed in the body tag.
This constitutes the basic structure of our html document, and any html document is composed of this basic structure.
HTML5 is also very simple, there is no need to specify a language version, all compatible, browsers can interpret it normally.