Hello everyone, and welcome to the first blog in the Getting Started with Front End series. In this series, together we'll learn the basics of front-end development, building web pages and web applications from scratch. This blog will introduce you to the basic concepts and tags of HTML (Hypertext Markup Language), helping you get started quickly.
The basic introduction and first attempt of HTML
Preface: Learning Objectives
The goals for this semester are:
- Know what is HTML
- Learn to understand the HTML structure of a complete page
- Understand the relationship between HTML tags and elements
- hello world practice
- Master common development tools
- Learn about common browsers and their kernels
What is HTML?
HTML is a language used to describe web pages.
- HTML stands for Hypertext Markup Language : Hyper T ext Markup Language
- HTML is not a programming language, but a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
- HTML documents contain HTML tags and text content
- HTML documents are also called web pages
HTML tags and elements
HTML tags
HTML markup tags are often referred to as HTML tags (HTML tag).
- HTML tags are keywords surrounded by angle brackets , such as
- HTML tags usually come in pairs , such as and
- The first tag in a tag pair is the opening tag and the second tag is the closing tag
- Opening and closing tags are also known as opening and closing tags
<标签>内容</标签>
HTML elements
"HTML tags" and "HTML elements" usually describe the same thing.
But strictly speaking, an HTML element contains a start tag and an end tag, as in the following example:
HTML elements:
<p>这是一个段落。</p>
HTML page structure
Here is an HTML skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<p>程序员小豪</p>
</body>
</html>
Example analysis
![[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-Sr0n11P2-1687583272139)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230623164323975. png)]](https://img-blog.csdnimg.cn/e476e1aba62e4dc1a054219876386b17.png)
1. <!DOCTYPE html>声明为 HTML5 文档
2. <html>元素是 HTML 页面的根元素
3. <head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
4. <title>元素描述了文档的标题
5. <body>元素包含了可见的页面内容
6. <h1>元素定义一个大标题
7. <p>元素定义一个段落
Note : On the browser page, use the F12 key on the keyboard to open the debug mode, and you can see the component tags.
Handwritten Hello World
Select development tools
We can choose the following development tools to develop html:
- Visual Studio Code (preferred)
- WebStorm
- Sublime Text
- DreamWeaver
- HBuilder
Create a file
I am using vs code, we can open a folder, create a new file, name it test.html, and enter '!+Enter' in this new file, it will directly generate an html skeleton, we are in the body Use the div tag to write hello word in the tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端入门-html系列</title>
</head>
<body>
<div>hello world</div>
</body>
</html>
open browser
Right click on 'open in default browser' in this file, we can see that html is rendered on the web page
![[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-x0YTW66J-1687583272142)(/Users/adherezheng/mynote/note/csdn/html/assets/image-20230623165500223. png)]](https://img-blog.csdnimg.cn/3ebcdba1710f42e3a09893938b35affd.png)
The five common browsers and their kernels
Here, by the way, popularize the five common browsers:
| browser | rendering engine core |
|---|---|
| Chrome/Chromium | Blink |
| Firefox | Gecko |
| Safari | WebKit |
| Microsoft Edge | EdgeHTML (old version) / Blink (new version) |
| Opera | Blink |
Each browser uses a different rendering engine to parse and render web content, and these rendering engines may have differences in performance, functions, and standard support.