1. This article is suitable for beginners who are learning front-end from scratch.

2. Beginners who don’t understand the meaning of code should insist on imitating and typing code line by line, and use physical insights to drive their minds to understand new knowledge.

3. Beginners should not be dazzled, do not look for other documents everywhere, stick to the teacher's method, and learn it thoroughly is the best way to learn.

1. Introduction to HTML

HTML stands for Hypertext Markup Language and is a markup language. It includes a series of tags through which text, graphics, animations, videos, sounds, tables, links, etc. are represented.

2. Demonstration of specific label effects

1. Video tag

 <video width="320" height="240" controls>
        <source src="https://vdept3.bdstatic.com/mda-phrimcz66a4zn6pz/sc/cae_h264/1693170816471115029/mda-phrimcz66a4zn6pz.mp4" type="video/mp4">
 </video>

running result

2. Image tags

  <img src="https://img0.baidu.com/it/u=3232582821,3516640051&fm=253&fmt=auto&app=138&f=JPEG?w=625&h=500" />

renderings

3. Title and text labels

   <h1>第一级标题</h1>
    <h2>第二级标题</h2>
    <h3>第三级标题</h3>
    <h4>第四级标题</h4>
    <p>普通文本：风急天高猿啸哀⑵， 渚清沙白鸟飞回⑶。无边落木萧萧下⑷， 不尽长江滚滚来。万里悲秋常作客⑸，百年多病独登台⑹。艰难苦恨繁霜鬓⑺， 潦倒新停浊酒杯</p>

4. Input boxes and buttons

 <input placeholder="请输入电话号码" />
 <button>按钮</button>

5. Forms

  <table border="1">
      <thead>
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <th>列标题3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>行1列1</td>
          <td>行1列2</td>
          <td>行1列3</td>
        </tr>
        <tr>
          <td>行2列1</td>
          <td>行2列2</td>
          <td>行2列3</td>
        </tr>
      </tbody>
    </table>

3. Practice is the only criterion for testing all truths

Next, we will still focus on practice and supplemented by concepts to describe HTML tags.

1. Beginners all start by imitating existing pages. Let’s imitate and write a simple Baidu website homepage. The rendering is as follows

2. After looking at the renderings, we need to understand two things in our minds:

First, we need to make the homepage of Baidu website

Second, we need to analyze what content is on the homepage of Baidu website and what HTML tags these contents correspond to ( key points )

3. Analyze what we want to do and what tags it corresponds to

As a beginner, I still don’t know what tags there are, so don’t panic first. Next, I will directly learn tags and how to use them from my analysis of the content of Baidu website. Because there are only a few commonly used tags, there is no need to code them all one by one.

The label renderings corresponding to the analyzed content are as follows:

4. Complete the content in the upper left corner: news, ha0123, map, post bar, video, picture, and more

I mentioned using the li list tag in the tag rendering above. In fact, the div tag can do the same, because the div tag is almost universal and can replace most tags. Currently, in order for beginners to understand "tag semantics", we use the li tag.

 <ul class="leftTopBox">
        <li>新闻</li>
        <li>hao123</li>
        <li>地图</li>
        <li>贴吧</li>
        <li>视频</li>
        <li>图片</li>
        <li>网盘</li>
        <li>更多</li>
  </ul>

The operation effect diagram is as follows

There are two problems with the effect:

First, there is a black dot in front of each content (this black dot is the default that comes with the li tag)

Second, it is not arranged horizontally (beginners can vaguely feel at this moment that the content of the li tag is on its own line)

Let’s solve it next. The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*这星号是通配符，指所有标签内容，默认内外边距都去掉*/
        *{
            padding: 0;
            margin: 0;
        }
        .leftTopBox{
            margin-left: 30px;
            display: flex;    /*设置flex弹性盒子布局，默认情况子元素 横向排列*/
        }
        .leftTopBox li{
            /*去掉li标签的黑点*/
            list-style:none;

            /*此处设置内边距是一个简写，它表达的含义是，上下内边距为8px，左右内边距为16px*/
            padding: 8px 16px;  
        }
    </style>
</head>
<body>
    <ul class="leftTopBox">
        <li>新闻</li>
        <li>hao123</li>
        <li>地图</li>
        <li>贴吧</li>
        <li>视频</li>
        <li>图片</li>
        <li>网盘</li>
        <li>更多</li>
    </ul>
</body>
</html>

The operation effect is as shown in the figure

It seems that it is finally close to the upper right corner of the Baidu website homepage. This time the code contains some CSS styles. The fundamental reason is that HTML and CSS knowledge are related when writing web page layout. Experience it first and go on with questions. After completing the content of this chapter, the next blog will answer your questions. (Don’t disrupt your current rhythm and study by jumping around) .

5. Complete the content in the upper right corner

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*这星号是通配符，指所有标签内容，默认内外边距都去掉*/
        *{
            padding: 0;
            margin: 0;
        }
     

        .rightTopBox{
            display: flex;    /*设置flex弹性盒子布局，默认情况子元素 横向排列*/
            cursor: pointer;  /*鼠标移入，鼠标箭头变为手形*/
        }
        .rightTopBox img{     /*选中class为rightTopBox  下面的img标签元素*/
            width: 24px;
            height: 24px;
        }
        .rightTopBox span{    /*选中class为rightTopBox  下面的span标签元素*/
            margin-left: 10px;
            margin-right: 10px;
        }
        .rightTopBox button{  /*选中class为rightTopBox  下面的button标签元素*/
            background-color: #4E6EF2;  /* 设置背景颜色  */
            color: #fff;                /* 设置文字颜色  */
            height: 24px;                 /*为什么这里是34 而不是30*/
            border: none;                 /* 设置按钮的边框不显示  */
            padding-left: 5px;            /* 设置按钮左边内边距为 5px  */
            padding-right: 5px;           /* 设置按钮右边内边距为 5px  */
        }
    </style>
</head>
<body>
   
    <div class="rightTopBox">
        <img src="./img/ai.png" />
        <span>设置</span>
        <button>登陆</button>
    </div>
</body>
</html>

Operation renderings

At present, to keep the upper left corner and the upper right corner of the observation picture aligned, we need to adjust its structure using CSS styles, add a div to the two outermost layers, name the class head, and use flex layout for the inner styles.

<style>
     .head{
            display: flex;
            justify-content: space-between; /*让子元素 排列在左右两侧*/
            align-items: center;            /*让子元素 非主轴方向居中对齐*/
       }

</style>

<body>
    <div class="head">
        <!-- 左上角的内容 -->
        <ul class="leftTopBox"></ul>
        <!-- 右上角的内容 -->
        <div class="rightTopBox"></div>
    </div>
</body>

The renderings are as follows

4. Conclusion

I am worried that if I continue to write too much, it will make beginners more confused. I should wait for the rest of the CSS to be explained before finishing the code for the Baidu website homepage.

Write it down and continue learning css

Learning front-end from scratch (4) focusing on CSS-CSDN blog

Learning front-end from scratch (3) focusing on HTML