By the end of this article you can:

  • Implement the first HTML page

Front-end content to master includes:

  • HTML (Structure)
  • CSS (style, is similar to the structure paint makeup, look better)
  • Javascript (making the page interactive, including clicking, popping, or requesting data, etc.)

My learning resources:

  • MDN: Basic syntax explanation, code examples are available, including HTML CSS JS
  • Stackoverflow: The world’s place for programmers to ask and answer questions, high quality
  • Google: Use the search engine well. 99% of the problems you encounter have already been encountered by others and have a proven solution
  • Github: The world’s open source code hosting place, you can see great projects, open source, free to use

The development environment

  • Operating system: MAC
  • Code editor: vscode
  • Browser: Chrome
  • Vscode plug-in Live Server: after saving changes locally, automatically refresh the browser and synchronize the latest results
  • Vscode plug-in Open in browser: vscode inside the corresponding browser to Open the corresponding HTML file

What is HTML

  1. HyperText Markup Language(HTML)
  2. What is an HTML file?A file ending in.html
  3. Where can I edit this file? Just like writing a diary, writing code requires a piece of software, which I’m using herevscode

The first HTML page

  1. Open thevscodenewindex.htmlIt doesn’t matter what the name is. It’s just an.html suffix
  2. In the inputhello html!
  3. savecmd + sLater, rightopen in browserYou can see it in your browser
  4. Once you open your browser, open the consoleoption + command + iWhat you see:
  5. Initialize a basic HTML structure: input!+ according to thetabKey, you can quickly generate the basic structure of HTML: enter Hello HTML inside the body tag, refresh the corresponding page of the browser again, you can see the latest effect.

Three, improve work efficiency

  1. This completes the first HTML page. But finding that every time there is a change in the editor, the browser needs to manually refresh the browser to see the latest effect, could it be easier? The answer is yes: install the vscode plug-inlive serverLater: Every time you modify the page, the browser can see the latest effect without refreshing.

Four, the first HTML page corresponding element interpretation:

  • <! DOCTYPE html>: Specifies the document type. Tell the browser how to parse.
  • <html></html>: the element. This element wraps around the entire page and is the root element.
  • <head></head>This element is a container,It contains everything you want to include in an HTML page but don’t want to display in an HTML page. These include keywords and page descriptions that you want to appear in search results, CSS styles, character set declarations, and so on.
  • <meta charset="utf-8">: This element sets the document to be encoded using the UTF-8 character set, which contains most of the human text. Basically, he can read all the text you put there. Use it without a doubt, and it can avoid many other problems later.
  • <title></title>: Sets the page title, which appears on the browser TAB and describes the page when you tag/bookmark it.
  • <body></body>: the element. It contains everything that appears on the page when you visit it, text, images, audio, games, etc.

5. Straighten out various relationships (elements and labels here represent the same meaning)

  1. What is the relationship between web sites and HTML? A web site can consist of one or more HTML files
  2. What does an HTML file consist of? Consists of corresponding HTML elements, or tags: for example<html> </html> 、<body></body>, etc.
  3. What is the syntax of HTML elements?<tageName>For example, HTML elements<html>For others, just replace tagName
  4. How are HTML elements written? The value can be single label or double label
    • Double label: pairs appear, starting with a label (<tagName>) and closing tag (</tagName). For example,<html></html>, below is the corresponding noun explanation:
    • A single tag:<tagName>Such as:<meta><br><hr><img><input><param><link>
  5. What are the attributes of the tag? It can be built-in or custom, for example, the IMG tag<img src="" alt="firefox icon">

6. The relationship between labels can be? Nested or juxtaposed

  • Nested:<html> <body></body></html>The HTML element is the parent of the body element, whereas the body element is the child of the HTML element
  • Joint:<html> <head></head><body></body></html>Where the head and body elements are siblings, they are children of HTML

summary

  • This is the first time to write an article, if there is anything wrong or wrong to understand, welcome to give valuable advice!

This article is formatted using MDNICE