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

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

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

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

     一、HTML导言

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

    二、具体标签效果演示 

    1. 视频标签

    1.  <video width="320" height="240" controls>
    2.         <source src="https://vdept3.bdstatic.com/mda-phrimcz66a4zn6pz/sc/cae_h264/1693170816471115029/mda-phrimcz66a4zn6pz.mp4" type="video/mp4">
    3.  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. 标题 和 文本标签

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

    4. 输入框 和 按钮

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

    5. 表格

    1.   <table border="1">
    2.       <thead>
    3.         <tr>
    4.           <th>列标题1th>
    5.           <th>列标题2th>
    6.           <th>列标题3th>
    7.         tr>
    8.       thead>
    9.       <tbody>
    10.         <tr>
    11.           <td>行1列1td>
    12.           <td>行1列2td>
    13.           <td>行1列3td>
    14.         tr>
    15.         <tr>
    16.           <td>行2列1td>
    17.           <td>行2列2td>
    18.           <td>行2列3td>
    19.         tr>
    20.       tbody>
    21.     table>

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

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

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

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

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

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

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

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

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

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

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

    1.  <ul class="leftTopBox">
    2.         <li>新闻li>
    3.         <li>hao123li>
    4.         <li>地图li>
    5.         <li>贴吧li>
    6.         <li>视频li>
    7.         <li>图片li>
    8.         <li>网盘li>
    9.         <li>更多li>
    10.   ul>

    运行效果图如下

    效果上有两个问题：

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /*这星号是通配符，指所有标签内容，默认内外边距都去掉*/
    10.         *{
    11.             padding: 0;
    12.             margin: 0;
    13.         }
    14.         .leftTopBox{
    15.             margin-left: 30px;
    16.             display: flex;    /*设置flex弹性盒子布局，默认情况子元素 横向排列*/
    17.         }
    18.         .leftTopBox li{
    19.             /*去掉li标签的黑点*/
    20.             list-style:none;
    21.  
    22.             /*此处设置内边距是一个简写，它表达的含义是，上下内边距为8px，左右内边距为16px*/
    23.             padding: 8px 16px;  
    24.         }
    25.     style>
    26. head>
    27. <body>
    28.     <ul class="leftTopBox">
    29.         <li>新闻li>
    30.         <li>hao123li>
    31.         <li>地图li>
    32.         <li>贴吧li>
    33.         <li>视频li>
    34.         <li>图片li>
    35.         <li>网盘li>
    36.         <li>更多li>
    37.     ul>
    38. body>
    39. html>

    运行效果如图

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

    5. 完成右上角内容 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /*这星号是通配符，指所有标签内容，默认内外边距都去掉*/
    10.         *{
    11.             padding: 0;
    12.             margin: 0;
    13.         }
    14.      
    15.  
    16.         .rightTopBox{
    17.             display: flex;    /*设置flex弹性盒子布局，默认情况子元素 横向排列*/
    18.             cursor: pointer;  /*鼠标移入，鼠标箭头变为手形*/
    19.         }
    20.         .rightTopBox img{     /*选中class为rightTopBox  下面的img标签元素*/
    21.             width: 24px;
    22.             height: 24px;
    23.         }
    24.         .rightTopBox span{    /*选中class为rightTopBox  下面的span标签元素*/
    25.             margin-left: 10px;
    26.             margin-right: 10px;
    27.         }
    28.         .rightTopBox button{  /*选中class为rightTopBox  下面的button标签元素*/
    29.             background-color: #4E6EF2;  /* 设置背景颜色  */
    30.             color: #fff;                /* 设置文字颜色  */
    31.             height: 24px;                 /*为什么这里是34 而不是30*/
    32.             border: none;                 /* 设置按钮的边框不显示  */
    33.             padding-left: 5px;            /* 设置按钮左边内边距为 5px  */
    34.             padding-right: 5px;           /* 设置按钮右边内边距为 5px  */
    35.         }
    36.     style>
    37. head>
    38. <body>
    39.    
    40.     <div class="rightTopBox">
    41.         <img src="./img/ai.png" />
    42.         <span>设置span>
    43.         <button>登陆button>
    44.     div>
    45. body>
    46. html>

    运行效果图

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

    1. <style>
    2.      .head{
    3.             display: flex;
    4.             justify-content: space-between; /*让子元素 排列在左右两侧*/
    5.             align-items: center;            /*让子元素 非主轴方向居中对齐*/
    6.        }
    7.  
    8. style>
    9.  
    10. <body>
    11.     <div class="head">
    12.         
    13.         <ul class="leftTopBox">ul>
    14.         
    15.         <div class="rightTopBox">div>
    16.     div>
    17. body>

    效果图如下

    四、结束语

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

            记下来，继续学习css 

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

          我写了一个零基础学前端系列的博客，这个系列的目标是帮助初学者，学会HTML、CSS，我相信经过两个实战小项目，初学者一定能独立开发页面，最后我们还要将做好的项目发布成网站。

            发布成网站主要是帮助初学者明白最终我们要做的事情，虽然有些繁琐，但经过这个过程相信你对前端一定会有一个新的认识。

     

  • 相关阅读:
    Google Earth Engine ——利用where来合理划分NDVI阈值
    Transformer 综述 & Transformers in Vision: A Survey
    【无标题】
    brpc 学习(一)M1 MacOS构建方法
    ARM芯片层相关术语和缩写汇总(一）
    VoLTE端到端业务详解 | 应用实例一
    Android 关于IC卡的读写和加密
    windows系统kettle9.3一键安装启动
    MySQL 8.0 最新版详细安装教程(下载+安装+配置+登录测试)
    4.3.4-Testing_for_Account_Enumeration_and_Guessable_User_Account
  • 原文地址：https://blog.csdn.net/tengyuxin/article/details/132870805