零基础学前端（三）重点讲解 HTML

亦凉 2024-04-22 15:17 104阅读 0赞

> 1. 该篇适用于从零基础学习前端的小白
> 
> 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识
> 
> 3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。

## 一、HTML导言 ##

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签表示文字，图形、动画、视频、声音、表格、链接等。

## 二、具体标签效果演示 ##

### 1. 视频标签 ###

运行效果

![e94b445361d141c3acb4df185a0aff83.png][]

### 2. 图片标签 ###

效果图

![ac3d746d9c424526851c70a6b25bc0b7.png][]

### 3. 标题 和 文本标签 ###

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

![9a550417b6714c50af25e73f25e75ba3.png][]

### 4. 输入框 和 按钮 ###

![64ca93d436a64c6fb73f54b59cf63462.png][]

### 5. 表格 ###

![bcba79bbc62c4d668a423db3200cc34e.png][]

## 三、实践是检验一切真理的唯一标准 ##

> 接下来，我们依旧以实践为主，概念为辅的方式，讲述HTML标签

### 1. 初学者都是以模仿现有页面为开始的，我们来模仿写一个简单的百度网站的首页，效果图如下 ###

![67bd75ec25ee4aeca296c9adf5e7c182.png][]

### 2. 看了效果图，我们在头脑里需要明白两件事 ###

第一，我们要做百度网站的首页

第二，我们需要分析百度网站首页有那些内容，这些内容都对应什么HTML标签（**重点**）

### 3. 分析我们要做的内容，对应什么标签 ###

> 目前作为初学者，还不晓得有哪些标签，先不要慌张，接下来直接从我对百度网站内容分析上，直接学习标签以及使用方式。因为常用标签就那几个，不需要全部一个一个敲代码。

分析内容对应的标签效果图如下

![5e2fe31fe5204566af0550a43e952317.png][]

### 4. 完成左上角内容：新闻、ha0123、地图、贴吧、视频、图片、更多 ###

> 我在上面的标签效果图中说到使用li列表标签，其实div标签可以同样做到，因为div标签几乎是万能的，可以替代大多数标签。目前为了初学者理解 “标签语义化” ，就使用li标签做。

运行效果图如下

![a9069b603083442993f88304d31bab4b.png][]

**效果上有两个问题：**

第一，每个内容前面有一个黑点（这个黑点就是li标签默认自带的）

第二，它没有横着排列（此刻初学者可以模糊的感受到，li标签内容是独占一行的）

接下来就来解决一下，代码如下

运行效果如图

![2ca9775599e2443eac48ba7bfcac04ff.png][]

**看着终于和百度网站首页的做右上角接近了。这次代码里面包含了一点css的样式，根本原因是写网页布局时 HTML和 CSS 知识是关联在一起的。先体会，带着疑问走下去，完成本篇章内容后，下一篇博客为您解惑。（千万别打乱现在的节奏，四处乱跳着学习）。**

### 5. 完成右上角内容 ###

<!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>

运行效果图

![1786969f6cd44978bf2097f243349510.png][]

目前观察图要让左上角 和 右上角保持对其，我们需要用css样式调整一下它的结构，给他们两个最外层添加一个div ，class命名为 head ， 里面的样式用flex布局。

效果图如下

![23ded50ded194cb6b7ef0080c32f0d08.png][]

## 四、结束语 ##

我担心继续写太多，会让初学者更加困惑，剩下的部分还是等CSS讲解完后，再将百度网站首页代码写完。

记下来，继续学习css

[零基础学前端（四）1. 重点讲解 CSS：盒子模型、样式选择器\_tengyuxin的博客-CSDN博客][1. _ CSS_tengyuxin_-CSDN]

> 我写了一个零基础学前端系列的博客，这个系列的目标是帮助初学者，学会HTML、CSS，我相信经过两个实战小项目，初学者一定能独立开发页面，最后我们还要将做好的项目发布成网站。
> 
> 发布成网站主要是帮助初学者明白最终我们要做的事情，虽然有些繁琐，但经过这个过程相信你对前端一定会有一个新的认识。

[e94b445361d141c3acb4df185a0aff83.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/76afb185dd3946e48f87fbbf3db4f4f0.png
[ac3d746d9c424526851c70a6b25bc0b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3152bf9ea19a47a0a30b922331ab3451.png
[9a550417b6714c50af25e73f25e75ba3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b25fc5e3f00d43968f6d2ce823a1cf10.png
[64ca93d436a64c6fb73f54b59cf63462.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d4b9f26e6c644f7d8994205c8e91abbf.png
[bcba79bbc62c4d668a423db3200cc34e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7794dfffe6de45cf814a2c9a782ce152.png
[67bd75ec25ee4aeca296c9adf5e7c182.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/bcb31f3ea8884f8ea677968142a6e50b.png
[5e2fe31fe5204566af0550a43e952317.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/fb484b61267448e98790c5e257e13e1d.png
[a9069b603083442993f88304d31bab4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/821b60fedf194e648f691e4fbe8f1114.png
[2ca9775599e2443eac48ba7bfcac04ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d3e90140b9174491af0cda77ded52a79.png
[1786969f6cd44978bf2097f243349510.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e43180a66026494f96e8d1000bd15e91.png
[23ded50ded194cb6b7ef0080c32f0d08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/431c44ac6ea34aa6aeda5d6f17111f0b.png
[1. _ CSS_tengyuxin_-CSDN]: https://blog.csdn.net/tengyuxin/article/details/133020773