0
0

那些你不得不了解的HTML基础

瞧一瞧，看一看，新鲜的HTML出笼了

在总的介绍之前，先说明一下，以下所有内容均是由VSCode来进行实现的。

这里为大家介绍一些好用的小技巧：

1.运用快捷键！+ tab 就可以直接创建出一个新的基本框架。

2.当我们输入需要的后，再按tab的话就可以直接生成相对的键值对

3.使用lorem是可以生成随机的一段字符串的,这个可以为后面的调试起到一定作用,

一、HTML基本语法（标签）

注释

①基本格式：

②结合代码：

③注意：

首先，我们可以通过ctrl+/来对选中的行列进行注释与否的切换。

其次，在写注释的时候，我们不能够乱写，不能因为是注释就写些侮辱性言语，这个样子是不好的。

标题

①格式：（标题有六级，不同的级数的大小对应是不同的）

  1.     <h1>我是一级标题</h1>
  2.     <h2>我是二级标题</h2>
  3.     <h3>我是三级标题</h3>
  4.     <h4>我是四级标题</h4>
  5.     <h5>我是五级标题</h5>
  6.     <h6>我是六级标题</h6>

②结果演示：

段落

①基本格式：

  1.  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem animi exercitationem saepe similique qui voluptatibus officia asperiores soluta magnam veritatis. Ut officia asperiores adipisci, expedita ad libero cupiditate quo eveniet!</p>
  2.     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos qui repellendus veritatis deleniti itaque voluptate officia nostrum ad quia placeat! Autem illo beatae non pariatur, impedit similique saepe neque in.</p>

②结果展示：

这个时候，同学们不免会产生疑问，既然是段落，那为什么开始没有空两格？

这个事情HTML 是无法实现的，只能够靠CSS来实现，因为HTML更多是描述页面的内容（骨架），而CSS是描述页面的样式，即每个地方到底是怎么样的（皮相）

下面我们通过CSS来进行改进：（这里不详说，我会在后续博客中给大家介绍的）

  1.  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem animi exercitationem saepe similique qui voluptatibus officia asperiores soluta magnam veritatis. Ut officia asperiores adipisci, expedita ad libero cupiditate quo eveniet!</p>
  2.     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos qui repellendus veritatis deleniti itaque voluptate officia nostrum ad quia placeat! Autem illo beatae non pariatur, impedit similique saepe neque in.</p>
  3.     <style>
  4.         p{
  5.             text-indent: 2em;
  6.         }
  7.     </style>

产生的结果：

换行

为什么要换行？我们在编写HTML的代码时候换行不就行了吗？为什么要专门用换行符？

因为像例如我们前面讲的标题，这种是属于块级元素，块级元素是可以独占一行的，而除了块级元素还有行内元素，这就不能够独占一行。除此之外，在HTML里面换行是会被直接忽略掉的。必须要用换行对应的
元素

下面给大家举个例子：

那么正确操作怎么样呢？我们向下看看

①基本格式：(这是一个单标签，不需要像其他标签那样成对引用)

  1.    <p>我是用来测试HTML里是否会换行的<br>
  2.         你猜猜我会换行吗
  3.     </p>

②结果展示:

所以，我们要记住，要想在网页中实现换行，是需要用
来实现的

特殊转义字符

由上述，我们知道了HTML需要用专门的换行符，否则在HTML中的换行将是无效的，所以，我们进一步思考，那么要是想输入空格啥的，直接在HTML中输入，有用吗？我们也举个例子给大家伙看看：

所以我们引入了特殊的转移字符

①特殊转移字符表：（这里是显示的我们日常生活中常用的）

②我们仍以空格为例，来更正上述的错误：

  1.     <p>我要空格空格，要三个空格&nbsp &nbsp &nbsp三个空格完了   
  2.     </p>

结果如下：

格式化标签

这里的格式化标签，就是我们前面提到的行内元素，也就是说在不加
的情况下，会排列在一行中

①格式如下：

  1.  <strong>我是加粗的</strong>
  2.     <b>我也是加粗的</b>
  3.     <em>我是倾斜的</em>
  4.     <i>我也是倾斜的</i>
  5.     <ins>我是下划线的</ins>
  6.     <u>我也是下划线的</u>

②结果显示：

图片

图片标签img这也是一个单标签,不需要结束标签。

img中可以写很多属性，不过最重要的当属scr，scr的作用是用来描述图片的具体所属的位置的。这里就会涉及到图片的路径问题，可以是绝对路径，可以是相对路径，也可以是网络路径。我们下面来一一进行示范

①通过绝对路径来访问一个图片:

②通过相对路径来访问一个图片:

③通过网络路径来访问一个图片:

那么其中，alt的作用是什么呢？

alt的属性是用来表示路径有问题，与否，就算有了问题，仍然会加以提示，如下：

  1.  <img src="/www.dsafdsvdgergdgd.jpg" alt="这是一个哆啦A梦">

结果如下：

④除此之外，我们也可以对照片进行尺寸的设置。

通过width和high来对其宽度，高度来进行指定

（我们这里的单位用px像素来进行表示，因为我们屏幕的呈现是由一个个像素点组成的）

  1.   <img src="C:/Users/张洋洋的小布偶/Desktop/博客/哆啦A梦.webp" width=30px high=40px alt="这是一个哆啦A梦">

效果如下：

要是我们仅仅对长度或宽度进行指定，那么它会根据系统来进行等比例缩放

  1. <img src="C:/Users/张洋洋的小布偶/Desktop/博客/哆啦A梦.webp" width=300px alt="这是一个哆啦A梦">

结果如下：

超链接a标签

①什么是超链接a标签中的外部链接？

就是点击之后可以跳到相应的界面

格式如下：

  1.    <p>
  2.         点击下面的链接，跳转到我的博客主页
  3.         <a href="https://blog.csdn.net/weixin_58850105?type=blog">红苹果超好吃的博客主页</a>
  4.     </p>

结果如下：

②内部链接：

（网站内部页面之间的连接,写相对路径即可）

  1. <a href="Untitled-2.html">实现内部的跳转</a>

结果展示：

③空链接：（#）

(空链接的作用是起到占位的作用，因为在实际开发中，有时候并没有确定跳转到哪时，常用空链接来进行占位的操作) 

  1. <a href="#">这是一个空链接</a>

结果演示：

空链接点击后是不会进行跳转的哦

④下载链接：（顾名思义，点击后，会对文件进行下载，这里，我们用桌面上任意一压缩包来进行演示）

  1.  <a href="C:/Users/张洋洋的小布偶/Desktop/新冠疫情爬虫.rar">点击此进行下载的操作</a>

结果演示：

表格标签

①表格标签的介绍：

它是属于一组标签。其中，table：表示整个表格；tr表示一行；td表示一列；th表示表头的一列；

②我们来用这些属性绘制一个简单的表格，代码如下：

  1.     <table>
  2.         <!--首先构造第一行的表头-->
  3.         <tr>
  4. <th>姓名</th>
  5. <th>年龄</th>
  6.         </tr>
  7.         <!--第二行进行输入张三的信息-->
  8.        <tr>
  9.            <!--第一列-->
  10.            <td>张三</td>
  11.            <!--第二列-->
  12.            <td>18</td>
  13.        </tr>
  14.        <!--第三行进行输入李四的信息-->
  15.        <tr><!--第一列-->
  16. <td>李四</td>
  17. <!--第二列-->
  18. <td>19</td>    
  19.     </tr>
  20.     </table>

结果如下:我们会发现，这只是一个简单的表格的内容，并没有任何的修饰

因此我们对它进行一些简单的设计。

我们应该怎么去设计？（在实际开发中，我们大多用CSS来实现，我们会在后续给大家详说）

border:加上边框

width/height：设置表格的尺寸

cellspacing：去掉单元格之间的间隙

text-align:使得内容居中

③修改后代码及结果：

  1.  <style>
  2.         tr{
  3.             text-align: center;
  4.         }
  5.     </style>//使用CSS来进行居中(使得每一行进行居中，当然切换成td列也可以)
  6.     <table border="4px" width="300px" cellspacing="0">
  7.         <!--首先构造第一行的表头-->
  8.         <tr>
  9. <th>姓名</th>
  10. <th>年龄</th>
  11.         </tr>
  12.         <!--第二行进行输入张三的信息-->
  13.        <tr>
  14.            <!--第一列-->
  15.            <td>张三</td>
  16.            <!--第二列-->
  17.            <td>18</td>
  18.        </tr>
  19.        <!--第三行进行输入李四的信息-->
  20.        <tr><!--第一列-->
  21. <td>李四</td>
  22. <!--第二列-->
  23. <td>19</td>    
  24.     </tr>
  25.     </table>

结果如下：

列表标签

①列表表单的作用：

用来罗列一组并列的数据

②列表表单的分类及实现：

a.无序列表：

ul:unordered list

  1. 无序列表如下：
  2. <ul>
  3.     <li>西瓜</li>
  4.     <li>蓝莓</li>
  5.     <li>火龙果</li>
  6. </ul>

结果如此：

b.有序列表：

ol:ordered list

  1. 有序列表如下：
  2. <ol>
  3.     <li>西瓜</li>
  4.     <li>蓝莓</li>
  5.     <li>火龙果</li>
  6. </ol>

结果如此：

c.自定义列表：

li:list item

  1. <h3>自定义列表</h3>
  2.    <dl>
  3.        <dt>西瓜</dt>
  4.        <dt>蓝莓</dt>
  5.        <dt>火龙果</dt>
  6.    </dl>

结果如此：

表单标签

①什么是表单标签？

表单标签是用户和页面进行交互的过程大部分的 html 标签都是给用户"展示",表单标签,是让用户来"输入"。

②表单标签中的几个典型标签：

1.form标签：

（利用form标签就可以允许用户输入一些信息,并且交到服务器上）

2.input标签：

a.单行文本框：

b.input搭配label标签，实现点击文字，也可以等同选中选项的结果

注意！！！在一个页面中id的取值是不能够重复的。

c.input来选择文件：

<input type="file">保存运行后,打开网站,点击选择文件，就会弹出一个对话框，就可以选择本地的一个文件，紧接着浏览器就会打开这个文件进一步的就可以实现 提交/上传文件到服务器。

d.select标签：

（用来实现一个下拉菜单）

f.textarea标签：

它是一个多行编辑框的标签

无语义标签

①两种无语义标签的介绍：

div默认是一个块级元素（独占一行）
span默认是一个行内元素（不独占一行）

②无语义标签的作用是什么？

这两个无语义标签的作用相当于我们上述提到的大部分有语义标签的作用，而且极端来讲，对于一个网页而言，90%的标签基本上都是（div/span）

二、基于上述实现的两个案例

下面的两个案例就是基于对上面所讲述内容的一个汇总

制作一份简历信息

①代码如下：

  1. <!DOCTYPE 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=, initial-scale=1.0">
  7.     <title>简历页面</title>
  8. </head>
  9. <body>
  10.   <h1>张三</h1>
  11.   <h2>基本信息</h2>
  12.   <p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12272451953%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654689908&t=b5879117d5ecb392a3bf95ce7f0b4736" alt="玫瑰" title="这是我的照片" width="200px"></p>
  13. <p>求职意向: Java测试开发工程师</p>
  14. <p>联系电话: 13778112098</p>
  15. <p>邮箱: 199877***@qq.com</p>
  16. <p><a href="https://blog.csdn.net/weixin_58850105?type=blog">我的博客主页</a></p>
  17.  
  18.   <h2>教育背景</h2>
  19. <ol>
  20.     <li>2002 - 2005  跟斗幼儿园</li>
  21.     <li>2006 - 2012 跟斗小学</li>
  22.     <li>2013 - 2016 跟斗初中</li>
  23.     <li>2017 - 2019 跟斗高中</li>
  24.     <li>2020 - 2023 跟斗大学 英语 本科</li>
  25. </ol>
  26.  
  27.   <h2>专业技能</h2>
  28. <ul>
  29.     <li>熟悉java，C，python等基本语言,;</li>
  30.     <li>熟悉常见数据结构;</li>
  31.     <li>熟悉mysql的基本操作;</li>
  32.     <li>对计算机网络，操作系统，计算机组成原理有一定的了解;</li>
  33.    
  34. </ul>
  35.  
  36.   <h2>我的项目</h2>
  37.   <h3>实现了三子棋游戏</h3>
  38.  
  39.   
  40.  
  41.  
  42.   <h2>个人评价</h2>
  43.   <p>多次获得三好学生</p>
  44. </body>
  45. </html>

②结果如下：

填写一份简历信息

①代码如下：

  1. <!DOCTYPE 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=, initial-scale=1.0">
  7.     <title>简历页面 </title>
  8. <table width="500px"cellspacing="0"></table>
  9.     <h3>请您填写简历信息</h3>
  10.     <table>
  11.         <tr>
  12.             <td>
  13.                 姓名
  14.             </td>
  15.             <td>
  16.                 <input type="text">
  17.             </td>
  18.         </tr>
  19.         <tr>
  20.             <td>
  21.                 性别
  22.             </td>
  23.             <td>
  24.                 <input type="radio" name="sex" id="male" checked="checked">
  25.                 <label for="male"><img src="./image/男.png" alt="" width="20px"> 男</label>
  26.                 <input type="radio" name="sex" id="female">
  27.                 <label for="female"><img src="./image/女.png" alt=""
  28.                width="20px">女</label>
  29.             </td>
  30.         </tr>
  31.         <tr>
  32.             <td>
  33.                 出生日期
  34.             </td>
  35.             <td>
  36.                 <select>
  37.                     <option>--请选择年份--</option>
  38.                     <option>2000</option>
  39.                     <option>2001</option>
  40.                     <option>2002</option>
  41.                     <option>2003</option>
  42.                     <option>2004</option>
  43.                     <option>2005</option>
  44.                 </select>
  45.                 <select>
  46.                     <option>--请选择月份--</option>
  47.                     <option>1</option>
  48.                     <option>2</option>
  49.                     <option>3</option>
  50.                     <option>4</option>
  51.                     <option>5</option>
  52.                     <option>6</option>
  53.                     <option>7</option>
  54.                     <option>8</option>
  55.                     <option>9</option>
  56.                     <option>10</option>
  57.                     <option>11</option>
  58.                     <option>12</option>
  59.                 </select>
  60.                 <select>
  61.                     <option>--请选择日期--</option>
  62.                     <option>1</option>
  63.                     <option>2</option>
  64.                     <option>3</option>
  65.                     <option>4</option>
  66.                     <option>5</option>
  67.                     <option>6</option>
  68.                     <option>7</option>
  69.                     <option>8</option>
  70.                     <option>9</option>
  71.                     <option>10</option>
  72.                     <option>11</option>
  73.                     <option>12</option>  
  74.                     <option>13</option>
  75.                     <option>14</option>
  76.                     <option>15</option>
  77.                     <option>16</option>
  78.                     <option>17</option>
  79.                     <option>18</option>
  80.                     <option>19</option>
  81.                     <option>20</option>
  82.                     <option>21</option>
  83.                     <option>22</option>
  84.                     <option>23</option>
  85.                     <option>24</option>  
  86.                     <option>25</option>
  87.                     <option>26</option>
  88.                     <option>27</option>
  89.                     <option>28</option>
  90.                     <option>29</option>
  91.                     <option>30</option>
  92.                     <option>31</option>  
  93.                 </select>
  94.             </td>
  95.         </tr>
  96.         <tr>
  97.             <td>
  98.                 毕业学校
  99.             </td>
  100.             <td>
  101.                 <input type="text">
  102.             </td>
  103.         </tr>
  104.         <tr>
  105.             <td>
  106.                 应聘岗位
  107.             </td>
  108.             <td>
  109.                 <input type="checkbox" id="frontend">
  110.                 <label for="frontend">前端开发</label>
  111.                 <input type="checkbox" id="backend">
  112.                 <label for="backend">后端开发</label>
  113.                 <input type="checkbox" id="qa">
  114.                 <label for="qa">测试开发</label>
  115.                 <input type="checkbox" id="op">
  116.                 <label for="op">运维开发</label>
  117.             </td>
  118.         </tr>
  119.         <tr>
  120.             <td>掌握的技能</td>
  121.             <td>
  122.                 <textarea cols="30" rows="20"></textarea>
  123.             </td>
  124.         </tr>
  125. <tr>
  126.     <td>项目经历</td>
  127.     <td>
  128.         <textarea cols="30" rows="20"></textarea>
  129.     </td>
  130. </tr>
  131.         <tr>
  132.             <td></td>
  133.             <td>
  134.                 <input type="checkbox" id="confirm">
  135.                 <label for="confirm">我已仔细阅读过公司的招聘要求</label>
  136.             </td>
  137.         </tr>
  138.         <tr>
  139.             <td></td>
  140.             <td>
  141.                 <a href="#">查看我的状态</a>
  142.             </td>
  143.         </tr>
  144.         <tr>
  145.             <td></td>
  146.             <td>
  147.                 <h3>请应聘者确认: </h3>
  148.                 <ul>
  149.                     <li>
  150.                         以上信息真实有效
  151.                     </li>
  152.                     <li>
  153.                         能够尽快去公司实习
  154.                     </li>
  155.                     <li>
  156.                         能够接受公司的加班文化
  157.                     </li>
  158.                 </ul>
  159.             </td>
  160.         </tr>
  161.  
  162.     </table>
  163. </body>

②结果如下：

今天就到这里啦，下次将会为大家带来CSS，敬请期待哦

标签： html 前端
本文转载自: https://blog.csdn.net/weixin_58850105/article/details/124648785
版权归原作者 红苹果超好吃 所有， 如有侵权，请联系我们删除。
登录后发布评论

“那些你不得不了解的HTML基础”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？