Start learning front-end development

It is said that the best input is output, so listen as I tell you what I have learned.

When learning to get started with the front-end, we are told everywhere that we need to learn HTML+CSS+JS. After google, I found that html is HyperText Markup Language (English: HyperText Markup Language, abbreviated as: HTML). Markup language means that this is not a programming language, but is used to mark text. Mark the title as a title and the paragraph as a paragraph. In this way, the browser can know what the text is and display it in a better format. In other words, if you only use HTML+CSS to create a web page, the various special effects and formats on it are chosen by you, not created.

Let’s look at the content of an ordinary HTML file next.

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>         <span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">></span>这是网页标题<span style="color: #0000ff"></span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="style"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="style.css"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>         <span style="color: #0000ff"><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>         <span style="color: #0000ff"><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="js.js"</span><span style="color: #0000ff">></span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>         <span style="color: #0000ff"><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>     <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>         <span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>这是最大的标题<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>         <span style="color: #0000ff"><span style="color: #800000">p</span><span style="color: #0000ff">></span>这是段落<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span>     <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span> <span style="color: #0000ff"></span><span style="color: #800000">html</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span>

The method of marking text in this markup language is very simple, that is

Tagged content

They appear in pairs, and the "label" in the back is one more "/" than the former

There is another type of tag that does not appear in pairs, such as

Let’s explain the content of the above html document from top to bottom.

1. Historical issue, used to tell the browser that this is an HTML5 web page, which means that there is an old version of html, and the old version needs to define something else. But don’t worry, it will be from now on, well, probably.

2.html tells the browser that this is an html document, which contains head tags and body tags

3.head and body are used to store various information and settings of web pages, and body is used to store web content

4.head　title The webpage title is the text displayed on the browser webpage label after opening a webpage

　　 link is used to reference a CSS style sheet. The so-called style sheet means that if you think the default style of the browser is too ugly, you can set the style yourself

　　 Style The content in the CSS style sheet can also be placed in the html document

　　 Script refers to a JS file, and the content can also be written in an HTML document

　　There are also some tags like meta, base, etc. In any case, the things in the head are used to set up the web page, not the web page content

5.body p paragraph

　　H1 title and h2 h3 h4 h5 font gradually become smaller

Everything is difficult at the beginning. I finally started writing the first article. It was a bit annoying to write, haha.