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

1. 该篇适用于从零基础学习前端的小白

2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。

一、HTML导言

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

二、具体标签效果演示

1. 视频标签

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

运行效果

2. 图片标签

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

效果图

3. 标题和文本标签

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

4. 输入框和按钮

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

5. 表格

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

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

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

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

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

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

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

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

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

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

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

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

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

运行效果图如下

效果上有两个问题：

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

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

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

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

运行效果如图

看着终于和百度网站首页的做右上角接近了。这次代码里面包含了一点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>

运行效果图

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

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

效果图如下