前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写

Salute-Y

已于 2022-03-05 15:09:21 修改

阅读量1k

点赞数 3

分类专栏： Java API LeetCode 文章标签：数据结构 java 开发语言

于 2022-03-05 14:15:38 首次发布

本文链接：https://blog.csdn.net/Merciful_Lion/article/details/123276670

版权

Java API 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

LeetCode

14 篇文章 0 订阅

订阅专栏

文章目录

回顾复习
超链接标签a（补充）
无语义标签 div&& span
实战案例
- 个人简历网页展示
- 个人简历网页填写

回顾复习

由上文我们已经知道

HTML是由标签构成的。
并且标签一般是成对出现的，但是也有些标签是“单标签”
标签是可以嵌套的~（树形结构.DOM树等）
HTML是运行在浏览器中的。

已经了解到了HTML的基本结构如下：

<html>
  <head>
  <body>
  //需要编写的内容
  </body>
  </head>
</html>

上述基本结构不需要每次都写出，可以通过！+tab键快速生成。

在上文中我们学习了一些基本的标签：h1-h6的标题标签，超链接标签a,段落标签p ,图片标签img,换行标签br,基本的格式标签加粗、斜杠、下划线等等。

超链接标签a（补充）

herf属性：表示点击后会跳转到哪个页面（必备的属性）
taget属性：描述了超链接的打开方式，是直接在本标签页打开，还是用新的标签页打开。一般默认是_self.如果是_blank则用新的标签页打开。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码示例</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_self">这是百度的链接</a>
</body>
</html>

taget默认self 点击后会在本标签页跳转链接
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码示例</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">这是百度的链接</a>
</body>
</html>

taget设置为_blank,点击后会打开新的标签页，并跳转链接。

链接的几种形式

外部链接：href引用其他网站的地址。（上文已提到）

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

内部链接：网页内部页面之间的链接。在href中写入相对路径即可。

在一个目录中，先创建1.html,再创建一个2.html.

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接：使用“ # ”在href中占位。点击后不会链接到其他网址。

<a href="#">空链接</a>

下载链接：href路径中写入一个文件。（可以使用zip文件）

<a href="test.zip">下载文件</a>

网页元素链接：可以给图片等任何元素添加链接（把元素放入a标签中）

<a href="http://www.sogou.com">
    <img src="rose.jpg" alt="">
</a>

锚点链接：可以快速定位到页面中的某个位置。

表格标签

基本使用

table 标签：表示整个表格
tr：表示表格的一行(table row)
td:表示一个单元格
th:表示表头单元格。会居中加粗
thread:表格的头部区域（不是th,范围比th要大一些）
tbody：表格得到主体区域
后两个用到的不多。

table包含tr,tr包含td或者th.

表格属性
改变尺寸：width、heigth
单位是px像素。
加上边框
border

列表标签

无序列表标签(重要)：ul和li
ul:整个无序列表(u:unordered)
li:列表项，一个列表包含多个列表项(li:l是list,i是item列表项)
有序列表标签（用的不多）：ol和li
ol:整个有序列表(o:ordered)
li:列表项，一个列表项中包含多个表项。

代码示例：

<ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>喝奶茶</li>
</ol>
   <!-- 无序列表-->
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>喝奶茶</li>
</ul>

效果：
在这里插入图片描述

自定义列表标签（重要）： dl dt dd
dl:整个表项
dt:小标题
dd:标题里的内容
在这里插入图片描述

表单标签

表单标签就是让用户“填表”。此处的填表并不是让用户填表格，而是让用户输入一些信息。

通过表单，就可以让用户和服务器之间进行一些简单的交互。

表单标签包括好几个标签，统称为标签。

分成两个部分：

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

form标签

<form action="test.html">
    ...form的内容
</form>

描述了要把数据按照什么方式提交到哪个页面中。

关于form需要结合服务器&网络编程来进一步理解。后面再详细介绍

imput标签
input标签可以用来表示各种输入的控件~
"控件"是在以前的图形化界面编程中的词，简单来说，一个按钮、一个文本框、就是一个控件，一个单选框、复选框也都是控件~
表示一个图形界面的基本元素，都可以称为控件~

input最核心的属性，叫做type.
type不同的取值就能表示不同的控件类型~

type(必须有)：取值种类很多，button,checkbox,text,file,image,password,radio等。
name:给input命名，尤其是对于单选按钮，具有相同的那么才能多选一。
value:input中的默认值。
checked:默认被选中（用于单选按钮和多选按钮）
maxlength:设定最大长度

下面介绍input标签中几种常用的type。
1）文本框
最基本输入框，只能保存1行内容，不能换行

<input type="text">

2）密码框

密码框中输入的内容会隐藏。表示输入的内容为密码时，使用密码框。

<input type="password">

在这里插入图片描述

如果有一个网页默认保存了密码，又忘记了具体是啥，可以通过chrome的开发者工具，把input的type改了，就可以看到内容。

3）单选框

 <input type="radio">

通常情况下，需要把多个input type=“radio” 关联起来，才能达到“N选1”的效果。
多个单选框的关联，需要用到name属性。
如果多个单选框的name相同，那么就只能取其中一个~

      <input type="radio" name="action">敲代码学习
         <input type="radio" name="action">玩游戏上号

在这里插入图片描述
checked属性：默认。即选项默认位置。

<input type="radio" name="action" checked="默认">敲代码学习
  <input type="radio" name="action">玩游戏上号

在这里插入图片描述
4）复选框
checkbox,可以选择多个选项。

  <input type="checkbox">吃饭
         <br>
         <input type="checkbox">睡觉
         <br>
         <input type="checkbox">敲代码/上号

在这里插入图片描述
5)普通按钮
button.

 <input type="button" value="这是一个按钮" onclick="alert('hello')">

value属性：在按钮上显示的文字。
onclick:绑定了一个点击事件。调用后面的alert函数，打印一个字符串“hello”

效果如下：
在这里插入图片描述
6）提交按钮
submit.

<input type="submit" value="提交" >

提交按钮就是把当前表单里的用户输入数据，包装成一个http请求，发送给服务器~
7）清空按钮

<input type="reset" value="清空">

8）选择文件
一般在上传文件的时候用到。

  <input type="file">

点击选择文件后，就会让我们选择一个文件
在这里插入图片描述

label标签

一般搭配input使用。具体来说，是搭配input中的单选框或者复选框使用
label标签的作用：当我们点击单选框/或者复选框后面的文字时，等同于我们直接点击单选框/复选框。
其实就是为了让用户更方便的选中选项。

<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
<input type="radio" name="gender" id="unknown"><label for="unknown">未知</label>

for属性表示当前的label要和哪个input标签关联起来~
这里就需要给对应的input标签起一个唯一的身份标识id

在这里插入图片描述

select标签

select标签：下拉框/下拉菜单。

    <select name="" id="">
             <option value="">北京</option>
             <option value="" selected="selected">上海</option>
             <option value="">深圳</option>
             <option value="">广州</option>
             <option value="">杭州</option>
         </select>

select是标识下拉框本身。
里面的选项是一个一个的option标签。
通过selected属性来指定默认的选项，如果没有指定，那么会默认选中第一项。
在这里插入图片描述

textarea标签

多行文本编辑框

   <textarea name="" id="" cols="30" rows="10"></textarea>

cols属性：规定有几列。row属性：规定有几行。
在这里插入图片描述

无语义标签 div&& span

上面介绍的很多标签，都是有语义标签，即标签有明确的意义，功能明确，作用明显。
而无语义标签的功能并不明确，或者说，无语义标签啥都能干，有语义标签的功能都能用无语义标签来实现。（大部分标签都可以使用div和span来代替）
无语义标签没有专门的用途。
div和span标签往往用来对页面结构进行布局~（虽然也可以实现上述标签功能）

div可以视为是一个独占一行的“大盒子”
span可以视为是一个不独占一行的“小盒子”。
"盒子"里面又可以装其他标签，或者盒子里面也可以再装盒子~

       <div>
               <span>俄罗斯</span>
               <span>乌克兰</span>
               <span>美国</span>
           </div>
           <div>
               <span>波兰</span>
               <span>玻利维亚</span>
               <span>意大利</span>
           </div>
           <div>
               <span>欧盟</span>
               <span>北约</span>
               <span>华约</span>
           </div>

在这里插入图片描述

实战案例

个人简历网页展示

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历</title>
</head>
<body>
  <h1>汤老湿</h1>
   <h3>基本信息</h3>
  <img src="0191b65d392b63a80120695c1316f3.jpg@1280w_1l_2o_100sh.jpg" alt="我的头像" width="200px" height="130px">
   <p>求职意向：Java开发工程师</p>
   <p>联系电话：911</p>
  <p>邮箱：123qq.com</p>
  <a href="https://github.com">我的github</a>
  <br>

  <a href="https://csdn.com">我的博客</a>

    <h3>教育背景</h3>
  <ol>
      <li>
          小葵花幼儿园
      </li>
      <li>
          小葵花小学
      </li>
      <li>
          小葵花中学
      </li>
      <li>
          小葵花高中
      </li>
      <li>
          小葵花大学
      </li>
  </ol>
     <h3>专业技能</h3>
       <ul>
           <li>
               熟练掌握Java的基础语法

           </li>
           <li>
               熟练掌握常用的数据结构，例如链表，二叉树，哈希表等
           </li>
           <li>
               熟练掌握操作系统原理，熟悉多线程编程，理解线程安全的相关问题
           </li>
           <li>
               熟练掌握网络原理，熟悉网络编程，熟悉TCP/IP协议栈的基本原理
           </li>
           <li>
               熟练掌握MySql数据库，能够进行简单的增删改查操作，理解索引和事物的底层原理。
           </li>
       </ul>
       <h3>我的项目</h3>
     <ol>
           <!--第一个项目-->
         <li>
             <h4>留言墙</h4>
             <p>开发时间：2021年11月10号</p>
             <p>功能介绍：
                 <ul>
             <li>
                 支持留言发布
             </li>
             <li>
                 支持匿名留言
             </li>
         </ul>
             </p>
         </li>
           <!--第二个项目-->
         <li>
             <h4>学习小助手</h4>
             <p>开发时间：2021年11月10号
             </p>
             <p>功能介绍：
                 <ul>
             <li>支持错题检索</li>
             <li>支持复习预习</li>
         </ul>
             </p>
         </li>
     </ol>
         <h3>个人评价</h3>
  <p>在校期间，学习成绩优良，多次获得奖学金</p>

</body>
</html>

效果及链接如下:
在这里插入图片描述

链接:http://localhost:63342/TestDemo_20220302/DemoTest10.html?_ijt=5o4khccd1t4qv6osmu5odcfuc5

个人简历网页填写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写简历信息</title>
</head>
<body>
<h3>请填写简历信息</h3>
    <table width="500px">
        <tr>
            <td>姓名</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" checked="checked" id="male"> <label for="male"><img src="male.png" alt="" width="20px" height="20px">男</label>
                <input type="radio" name="gender" id="female"><label for="female"><img src="female.png" alt="" width="20px" height="20px">女</label>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">1999</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                    <option value="">2004</option>
                    <option value="">2005</option>
                    <option value="">2006</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
                <select name="" id="">
                    <option value=""> --请选择日期--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                    <option value="">13</option>
                    <option value="">14</option>
                    <option value="">15</option>
                    <option value="">16</option>
                    <option value="">17</option>
                    <option value="">18</option>
                    <option value="">19</option>
                    <option value="">20</option>
                    <option value="">21</option>
                    <option value="">22</option>
                    <option value="">23</option>
                    <option value="">24</option>
                    <option value="">25</option>
                    <option value="">26</option>
                    <option value="">27</option>
                    <option value="">28</option>
                    <option value="">29</option>
                    <option value="">30</option>
                    <option value="">31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>就读学校</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" id="frontend"> <label for="frontend">前端开发</label>
                <input type="checkbox" id="backend"> <label for="backend">后端开发</label>
                <input type="checkbox" id="qa"><label for="qa">测试开发</label>
                <input type="checkbox" id="op"> <label for="op">运维开发</label>
            </td>
        </tr>
        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td>
                <textarea name="" id="" cols="50" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="confirm"><label for="confirm">我已仔细阅读过公司的招聘要求</label>
            </td>
        </tr>
        <tr>
            <td>

            </td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>应聘者确认：</h4>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>
                        能够尽早来公司实习
                    </li>
                    <li>
                        能够接受公司的加班文化
                    </li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>