devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

入门HTML(含常见标签)—附实现案例_html案例

作者：盐析白兔 | 2024-02-29 17:09:19

赞

踩

html案例

目录

一、初识HTML

1.1 认识标签

1.2 HTML文件基本结构

1.3 认识标签层次结构

 二、HTML常见标签

2.1 注释标签:ctrl + / 

2.2 标题标签: h1~h6

2.3 段落标签：p

2.4 换行标签：br

2.5 格式化标签

2.6 图片标签 ：img

2.7 超链接标签：a

2.8 表格标签

 2.9 列表标签

2.10 表单标签

2.10.1 form标签

2.10.2 input标签

2.10.3 select标签

 2.10.4 textarea 标签

2.11 无语义标签

2.12 空格、特殊字符的输入及注释

2.12.1 空格的输入

三、实现案例

3.1 展示简历

3.2 填写简历

前言：

HTML不同于我们所熟知的C，Java等编程语言，它是一种标签化语言，其形式类似于XML。

实现一个简单的.html文件

html这样的代码是通过浏览器运行的，只需要用浏览器打开对应的html文件即可执行其中的代码，不需要安装额外的运行环境（jdk之类的）。

示例：

我们直接在记事本中写下“hello world”

07b1ac2a2f9e4b86aeeb4ea512dbc2cd.png

 后将其用浏览器打开：

0fa1d6c4b2a84591ac24860c90a6febf.png

 我们发现虽然我们并没有严格执行html的语法，但是依然可以在浏览器中运行，这是因为浏览器具有 鲁棒性（robustness）

c8c41005b80840fd9aed2a8c6ca5ffd2.png

Tip：html不需要编译，浏览器读取后即可执行。

一、初识HTML

HTML是由一个个标签所构成的。

1.1 认识标签

形如：

<body>hello</body>
  • 标签名（body）放在< >中
  • 大部分标签成对出现,<body>为开始标签，</body>为结束标签
  • 少数标签只要开始标签，称其为“单标签”
  • 开始标签和结束标签之间，写的是标签内容（hello）
<body id="myId">hello</body>

开始标签中可能会带有“属性”，id属性相当于给这个标签设置了一个唯一的标识符（身份证号码）

1.2 HTML文件基本结构

 3024cbbfba4d40af948391d92c37b253.png

  • html标签是整个html文件的根标签（最顶层的标签）
  • head标签中写页面的属性
  • body标签中写的是页面上显示的内容
  • title标签中携带是页面的标题

效果如下：

60b8fc52da3243859af61f8b96fd4a1e.png

快速生成代码框架

我们也可以通过vscode来快速建立其结构，快捷键：！+ 回车

31f2b4b66ea042f5b68c1da00a64b165.png

  • <!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
  • <html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
  • <meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区
    域.
  • content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)

强调：通过观察，我们发现，html可以在 开始标签 中写一些属性（键值对）

使用空格来分割键值对，使用=来分割键和值（注意这里的 = 两侧不能有空格）

1.3 认识标签层次结构

大致分为两类：父子关系，兄弟关系

举个栗子：

2b848826432b4dc1b5abe3baf40c2c41.png

其中：

  • head 和 body 是 html 的子标签（html 是 head 和 body 的父标签）
  • title是head的子标签，head是title的父标签
  • head和body之间是兄弟关系

标签之间的结构关系, 构成了一个 DOM 树（DOM 是 Document Object Mode (文档对象模型) 的缩写.）

 286dbc2d54b54471942b1450ff825c5a.png

 二、HTML常见标签

2.1 注释标签:ctrl + / 

注释不会显示在界面上，目的是提高代码的可读性

80734b427eb34ccea28d0e9660c93eb8.png

 快捷键：ctrl + / 

2.2 标题标签: h1~h6

有6个标题标签，从h1~h6,数字越大，则字体越小。

  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=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <h1>一级标题</h1>
  11.     <h2>二级标题</h2>
  12.     <h3>三级标题</h3>
  13.     <h4>四级标题</h4>
  14.     <h5>五级标题</h5>
  15.     <h6>六级标题</h6>
  16. </body>
  17. </html>

展示效果：

06093f85807f4e778a587c1632341bc8.png

2.3 段落标签：p

<p>这是一个段落</p>

p是paragraph的缩写，表示分段。

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.
例如：

26903571dbd246188dc2243db180e350.png

虽然我们手动分段了，但是html文件并不识别，所以需要用段落标签：p

546a2a3052044b36a25755abf85582c1.png

2.4 换行标签：br

br 是 break 的缩写. 表示换行.

为什么会有换行标签的存在？

我们发现在 html 中，直接进行换行是没有作用的，必须使用 br 标签来换行，html对于制表符，换行符，多个连续的空格，都不会将其当成代码的内容，自动会将其忽略。

以下是没有写换行符的情况：

2e9f249d6c004ce3aa4b63605808ce29.png

 写了换行符之后：

76dde23a7a7b4d25a237fad194724912.png

 其中需要注意的一点是：br是一个单标签，只有开始标签，无结束标签。

2.5 格式化标签

  • 加粗：strong 标签 和 b 标签
  • 倾斜： em （emphasis的缩写）标签 和 i 标签
  • 删除线: del 标签 和 s （strike）标签
  • 下划线：ins（insert的缩写） 标签 和 u（underline的缩写） 标签
  1. <strong>strong 加粗</strong>
  2. <b>b 加粗</b>
  3. <em>倾斜</em>
  4. <i>倾斜</i>
  5. <del>删除线</del>
  6. <s>删除线</s>
  7. <ins>下划线</ins>
  8. <u>下划线</u>

472869ec2862425a91b3aae89684467c.png

Tip：

块级元素和行内元素的区分：

6bc89551d0a848bcb7ed1b735a969706.png

2.6 图片标签 ：img

<img src="rose.jpg">

img单标签(没有结束标签)

img 标签必须带有 src 属性. 通过这个属性来指定你要显示的图片的路径。

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片
  • 失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
     

f48405df2c3140638bf496e3ea2218a5.png

  • 属性之间用空格分割, 可以是多个空格, 也可以是换行.
  • 属性之间不分先后顺序

2.7 超链接标签：a

<a href="http://www.baidu.com">百度</a>

链接是一种快捷方式(通过链接可以找到另外一个资源)，”超“表示的是链接的资源可以来自外部的网站。

6f3f4ffbc1c14099a952574edc958660.png

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

当然了，不止可以跳转到外部的网站，我们自己编写的网页也是可以被跳转到的：

b16bd1cd6d0849fe8553251889220919.png

 实现效果：

8ce5eaea4dbb469db6b6248f7a10c3b4.png

 我们还可以使用超链接展示出：点击图片跳转到网站的行为。

af1e5a06d7284e7a8671f5492066fc63.png

2.8 表格标签

  • table标签：表示整个表格
  • tr：表示表格的第一行
  • td：表示一个单元格
  • th：表示表头单元格，会居中加粗
  • thread：表格的头部区域（注意和 th 进行区分，范围比 th 大）
  • tbody：表格的主体区域

表格标签，顾名思义，用来设计表格的，展示效果如下：

e4f832d3a78c40159cde8355cd22033c.png

 增加边框和设置大小后效果展示：2209cff4f72a4c2ea94f455f3d46c148.png

 2.9 列表标签

  • 无序列表 ul（unordered list）
  • 有序列表 ol （ordered list）
  • 列表项 li （list item）

c7e90ea1ff1e478487f8f349ed537365.png

2.10 表单标签

表单是让用户输入信息的重要途径，大致分为两部分：

  • 表单域：包含表单元素的区域，重点为form标签
  • 表单控件：输入框，提交按钮等，重点为input标签

2.10.1 form标签

关于 form 需要结合 服务器 & 网络编程 来进一步理解. 后续再详细研究。

2.10.2 input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

文本框和密码框


10539864576e42fb8ad9211266ad814b.png

 单选框：

  1. <input type="radio" name="sex">男
  2. <input type="radio" name="sex" checked="checked">女

checked 的作用是默认为 女 这个选项。

e652c5692d974bed98f18d1424afe273.png

注意:

  • 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果
  • lable中的for属性是需要用到其他标签的id这个属性的。

复选框

<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏

03116602033f4d7aa3ed16edb13d0a56.png

普通按钮

<input type="button" value="我是个按钮”>

fee29d0a1bc945a18557016182221797.png

提交按钮（当前只用html，观察不出区别，需要后续与http结合from表单才可）

  1. <form action="test.html">
  2.         <input type="text" name="username">
  3.         <input type="submit" value="提交">
  4. </form>

ee9b67fa94394ed28034b143886de2e3.png

文件选择框

<input type="file">

 点击按钮后，可以选择文件上传，需搭配http使用

77090562b49e42b582618ac19b781ecc.png

2.10.3 select标签

功能：下拉菜单。

  1.     <select name="" id="">
  2.         <option value="">北京</option>
  3.         <!-- 这里通过selected来给上海设置为默认选项 -->
  4.         <option value="" selected="selected">上海</option>
  5.         <option value="">广州</option>
  6.         <option value="">深圳</option>
  7.     </select>

 实现效果：

38d7ae36228747dc9d93aac5a9e95e7f.png

 2.10.4 textarea 标签

input只能进行单行攥写，而textarea可以使用多行攥写。

  1. <textarea rows="3" cols="50">
  2. </textarea>

8a29336157cb4a4e90427170dd092312.png

 小结

以上的各个标签，都是语义化标签（每一个标签代表着一个特定的功能和用途）

2.11 无语义标签

div标签，division的缩写，含义为分割。

span标签，含义是跨度。

还剩两个特殊的标签（无语义化标签），div（独占一行的块级元素）和span（不独占一行的行内元素）。

这两个标签搭配CSS和JS，基本是可以实现语义化标签的大部分。

2.12 空格、特殊字符的输入及注释

2.12.1 空格的输入

通常情况下，在制作网页的时候，通过空格输入的多个空格，在浏览器浏览的时候将只保留一个空格，其余空格都被自动的截掉了。于是有了以下语句来实现插入空格。

&nbsp;

说明：一个“ ”表示一个不换行的空格，需要多个空格的时候，需要连续的输入多个“ ”。

在" "中，“nbsp”是Non-Breaking Space 的缩写形式。

需要注意的是，“ ”在不同浏览器中显示的宽度是不一样的，例如在IE浏览器中，4个“ ”等于一个汉字，而在chrome中，有些是2个“ ”等于一个汉字。空格宽度不相等原因主要是因为各个浏览器默认使用的请求和响应的编码是不一样的，

因此在实际开发的过程中，最好使用CSS样式来生成空格，比如段首的缩进空格，最好使用CSS样式属性 text-indent 来设置。

为了方便，这里做了日常可能会用到的特殊符号：

特殊符号字符实体
“

"

&&amp;
<&lt;
>&gt;

三、实现案例

3.1 展示简历

  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=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <h1>小白</h1>
  11.     <h2>基本信息</h2>
  12.     <img src="C:\Users\86136\Desktop\修勾.webp" alt="" width="400px" height="300px">
  13.     <p>求职意向: JAVA开发工程师</p>
  14.     <p>联系电话：8008820</p>
  15.     <p>邮箱：xxx@foxmaail.com</p>
  16.     <p>
  17.         <a href="">我的github</a>
  18.     </p>
  19.     <p>
  20.         <a href="">我的博客</a>
  21.     </p>
  22.     <p>
  23.         <h2>教育背景</h2>
  24.     </p>
  25.     <ol>
  26.         <li>2005~2009 安溪幼儿园 幼儿园</li>
  27.         <li>2009~2015 安溪小学</li>
  28.         <li>2015~2018 安溪中学 初中</li>
  29.         <li>2018~2021 安溪中学 高中</li>
  30.         <li>2021~2024 安溪幼儿园 大学</li>
  31.  
  32.     </ol>
  33.     <p>
  34.         <h2>专业技能</h2>
  35.         <ul>
  36.             <li>Java基础语法扎实，已经刷了800道力扣</li>
  37.             <li>熟知计算机网络理论，并且可以独立排查常见问题</li>
  38.             <li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能</li>
  39.         </ul>
  40.     </p>
  41.     <p>
  42.         <h2>我的项目</h2>
  43.     </p>
  44.     <ol>
  45.         <li>
  46.             <h4>留言墙</h4>
  47.         </li>
  48.         <p>
  49.             开发时间:2020.9~2020.12
  50.         </p>
  51.         <p>
  52.             功能介绍:
  53.             <ul>
  54.                 <li>支持留言发布</li>
  55.                 <li>支持匿名留言</li>
  56.             </ul>
  57.         </p>
  58.         <li>
  59.             <h4>学习小助手</h4>
  60.         </li>
  61.         <p>
  62.             开发时间:2021.9~2021.12
  63.         </p>
  64.         <p>
  65.             功能介绍:
  66.             <ul>
  67.                 <li>支持错题检索</li>
  68.                 <li>支持同学探讨</li>
  69.             </ul>
  70.         </p>
  71.     </ol>
  72.     <p>
  73.         <h2>个人评价</h2>
  74.         在校期间学习成绩良好，排名前%15。
  75.     </p>
  76. </body>
  77. </html>

 展示效果图：

1b421e6f19144cdfa1a45abcf6d5d2b0.png

3.2 填写简历

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

展示效果：

0c8fadbe12714a5e9d8ecc3681b68491.png

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/167032
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号