The relationship between HTML, CSS, and JavaScript
HTML is the carrier of webpage content. Content is the information that web creators place on a page to allow users to browse, which can include text, images, videos, etc.
CSS style is the representation. Just like the outer layer of a webpage. For example, changing the font and color of the title, or adding background images, borders, etc. to the title. All these things that are used to change the appearance of content are called expressions.
JavaScript is used to achieve special effects on web pages. For example, hovering over the mouse will bring up a drop-down menu. Or the background color of the table can be changed by scrolling the mouse over it. There is also a rotation of focus news (news images). It can be understood that animations and interactions are generally implemented using JavaScript.
Fixed file structure
Code explanation:
<- HTML>is called the root tag, and all web page tags are located in<- HTML>.
The<- head>tag is used to define the header of a document and serves as a container for all header elements. The header elements include tags such as<- title>,<- script>,<- style>,<- link>,<- meta>, etc. The header tags will be explained in detail in the next section.
The content between the<- body>andtags is the main content of a webpage, such as<- h1>,<- p>,<- a>,<- img>, etc. The content in these tags will be displayed in the browser.
Add language type instructions for HTML documents
It will be used in many international websites!
<- html lang=”en”>
Tell browsers and other devices to use English as the basic language for display and reading!
Meta tag
Meta is a meta tag in HTML that contains relevant information about the corresponding HTML. The client browser or server-side program will process this information based on it.
HTTP-EQUIV is similar to the header protocol of HTTP, which responds to the browser with useful information to help display webpage content correctly and accurately.
Content: Important!! The format of this webpage is text, web page mode
Charset (encoding): Especially important!!! The encoding of this webpage is UTF-8, Chinese encoding. It should be noted that this is the encoding of the webpage content, not the file itself. Other types of encoding may result in garbled Chinese characters.
The function of meta tags
- Help homepage login by major search engines;
- Define the language of use for the page
- Automatically refresh and point to new pages
- Animated effects during webpage conversion
- Control page buffering
- Control the window for webpage display
Title tag
The paragraphs of the article are labeled with<- p>, so what label is used for the title of the article? In this section, we will use<- hx>tags to create the title of the article.
There are a total of 6 title tags, h1, h2, h3, h4, h5, and h6 are the first level title, second level title, third level title, fourth level title, fifth level title, and sixth level title, respectively. And decrease in importance<- H1>is the highest level.
Grammar:
<- hx>Title Text(x is 1-6)
The title of the article has already been mentioned, and title tags can be used. In addition, the titles of various columns on the webpage can also use them.
Semantic
The purpose of semantic tags: When we learn how to create web pages, we often hear a word that is semantic. So what is semantization? Simply put, it means understanding the purpose of each tag (when it is reasonable to use this tag). For example, the title of an article on a webpage can be labeled with a title tag, and the column names of various columns on the webpage can also be labeled with a title tag. The paragraphs in the article should be placed in paragraph tags. If there is text that needs to be emphasized in the article, the em tag can be used to indicate emphasis, and so on.
We have talked about so much semantics, but what benefits can semantics bring us?
- More easily indexed by search engines.
- It is easier for screen readers to read webpage content.