标签八表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域 ( 注意和 th 区分, 范围是比 th 要大的 )
tbody: 表格得到主体区域.

大致示意图：

展示1

<!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>表格标签测试</title>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>male</td>
            <td>21</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>female</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

展示结果：

展示2

在展示1 中，我们可以看到，所谓的表格标签并没有格子，于是我们就可以通过添加一些属性来显示我们想要的结果。

① width 和 height 属性分别表示宽度和长度

② border 表示边框，但是因为加在 table 上，而 table 表示整个表格，所以大大小小的表格都加上边框了。

③ cellspacing 属性可以控制两个单元格之间的空隙

<!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>表格标签测试</title>
</head>
<body>
    <table width="500px" height="300px" border="1px" cellspacing="0px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Jack</td>
            <td>male</td>
            <td>21</td>
        </tr>
        <tr>
            <td>Rose</td>
            <td>female</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

展示结果：

展示3

如果我们将 cellspacing 写成 “5px”，那么情况就不一样了

<table width="500px" height="300px" border="1px" cellspacing="5px">

展示结果：

标签九列表标签

无序列表标签：ul + li
有序列表标签：ol + li
自定义列表标签：dl (总标签) +  dt (小标题) + dd (围绕标题来说明)
/说明/
u: unordered (无序的)
o: ordered (有序的)
l: list (列表)

<!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>列表标签测试</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>吃饭</li>
        <li>学习</li>
        <li>睡觉</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>吃饭</li>
        <li>学习</li>
        <li>睡觉</li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <dt>大学生的一天</dt>
        <dd>吃饭</dd>
        <dd>学习</dd>
        <dd>睡觉</dd>
    </dl>
</body>
</html>

展示结果：

标签十表单标签

1. form 标签

form 标签描述了要把数据按照什么方式，提交到哪个页面中，action 输入的是待提交页面的路径。

form 标签需要搭配其他标签使用，其他标签亦需要搭配 form 标签使用。简单来说，form 标签用来做最后提交服务器的动作，而其他标签用来自定义内容的动作。

<form action=" "></form>

2. input 标签

说明

input 标签，可以表示各种用来输入的控件。

简单来说，一个按钮、一个文本框、一个单选框、一个复选框、或表示一个图形界面的基本元素，都被称为控件。而 input 标签中最核心的属性，就是 type，type 不同的取值就能表示不同的控件类型。

展示1 单行文本框和密码框

<!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>展示1</title>
</head>
<body>
    <form action="">
        <input type="text"><br/>
        <input type="password">
    </form>
    <form action=""></form>
</body>
</html>

这与我们平时登录网页的输入账号和密码很相似，当我们忘记密码的时候，而网页又默认保存了之前的密码，我们就可以通过将 type 属性的 password 改成 text，也就是将框中的密码从不可见变成可见。这里也应该注意这两个都是单行输入的，不能换行。

展示结果：

展示2 单选框

name 属性：多个单选框之间可以通过 name 属性来关联，如果多个单选框的 name 属性相同，那么就只能取其中的一个。

checked 属性：使用 checked 属性表示默认的值

<body>
    <form action="">
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender" checked="checked">未知
    </form>
</body>

展示结果：

展示3 多选框

<body>
    <form action="">
        <input type="checkbox"> 吃饭
        <input type="checkbox"> 睡觉
        <input type="checkbox"> 学习
    </form>
</body>

展示结果：

展示4 普通按钮

可以通过 onclick 属性来做提示

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

展示结果：

展示5 提交按钮

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

<body>
    <form action=" ">
      <input type="text" name="key"><br/>
        <input type="submit" value="提交">
    </form>
</body>

展示结果：

展示6 清空按钮

<body>
    <form action="">
        <input type="text" name="key"><br/>
        <input type="reset" value="清空">
    </form>
</body>

展示结果：

展示7 选择文件

<body>
    <form action="">
        <input type="file">
    </form>
</body>

展示结果：

3. label 标签

label 标签主要是用来搭配 input 标签使用，具体来说是搭配单选框或复选框使用。

label 标签存在的意义就是为了让用户方便的来选中选项，for 属性就表示当前 label 要和哪个input 标签关联起来，这里就需要给对应的 input 标签创建一个唯一身份标识。

<body>
    <form action="">
        <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>
    </form>
</body>

我们不仅点击小圆点让选择的内容生效，当点击文字的时候，也能生效。

展示结果：

4. select 标签

展示1

<body>
    <form action="">
        <select>
            <option>选择你的出生年份</option>
            <option>1997</option>
            <option>1999</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
        </select>
    </form>
</body>

展示结果：

展示2

selected 属性可以用来展示默认的内容，然后再做选择。

<body>
    <form action="">
        <select>
            <option>吃饭</option>
            <option selected="selected">学习</option>
            <option>睡觉</option>
            <option>运动</option>
        </select>
    </form>
</body>

展示结果：

5. textarea 标签

textarea 标签可以用来使用多行编辑。

<body>
    <form action="">
    <textarea cols="30" rows="5"></textarea>
    </form>
</body>

展示结果：

标签十一无语义标签

无语义标签：div + span

div 相当于独占一行的一个大盒子

span 相当于不独占一行是一个小盒子

盒子里面可以装其他的标签，或盒子里面也可以再装盒子。

<!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>
</head>
<body>
    <div>
        <span>吃饭</span>
        <span>吃饭</span>
        <span>吃饭</span>
    </div>
    <div>
        <span>睡觉</span>
        <span>睡觉</span>
        <span>睡觉</span>
    </div>
    <div>
        <span>学习</span>
        <span>学习</span>
        <span>学习</span>
    </div>
</body>
</html>

展示结果：

三、HTML 的特殊字符

因为 HTML 语法的原因，导致了一些特殊字符的冲突，所以我们可以通过类似于转义字符的形式来表达我们所想要的一些字符，下面是四个常用的特殊字符。

空格:      &nbsp;
小于号:    &lt;
大于号:    &gt;
按位与:    &amp;

<!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>特殊字符</title>
</head>
<body>
    这是一个       文本<br/>
    这是一个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文本
    <div> &lt; </div>
    <div> &gt; </div>
    <div> &amp; </div>
</body>
</html>

展示结果：

综合案例一展示简历信息(不涉及往服务器发送)

<!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>展示个人简历</title>
</head>
<body>
    <h1>十七</h1>
    <h2>基本信息</h2>
    <img src="D:\文件\计算机资料\6. 前端代码\123.png" alt=""
            width="200px" height="150px"><br/>
    <p>求职意向: Java 开发工程师</p>
    <p>联系电话: 123</p>
    <p>邮箱: 123@123.com</p>
    <a href="https://gitee.com/" target="_blank"> 码云链接</a>
    <br/><br/>
    <a href="https://www.csdn.net/" target="_blank"> 博客链接</a>
    <h2>教育背景</h2>
    <ol>
        <li>葵花幼儿园</li>
        <li>葵花小学</li>
        <li>葵花中学</li>
        <li>葵花大学</li>
    </ol>
    <h2>专业技能</h2>
    <ul>
        <li>C 语言</li>
        <li>Java SE</li>
        <li>数据结构</li>
        <li>MySQL 数据库</li>
        <li>Java Web</li>  
    </ul>
    <h2>我的项目</h2>
    <h3>1. 留言墙</h3>
    <u>功能介绍: </u>
    <ul>
        <li>支持线上留言</li>
        <li>支持线下留言</li>
        <li>支持匿名留言</li>
    </ul>
    <h3>2. 学习小助手</h3>
    <u>功能介绍: </u>
    <ul>
        <li>支持错别字检索</li>
        <li>支持线上沟通</li>
        <li>支持计时任务</li>
    </ul>
    <h2>个人评价</h2>
    <p>踏踏实实、诚诚恳恳</p>
</body>
</html>

展示结果：

综合案例二填写个人简历(不涉及往服务器发送)

<!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>填写个人简历</title>
</head>
<body>
    <h3>请填写简历信息</h3>
    <table width="650px">
        <tr>
            <td> 姓名 </td> 
            <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> 性别 </td>
            <td>
                <input type="radio" name="gender" id="male">
                <label for="male">
                    <img src="D:\文件\计算机资料\6. 前端代码\male.png" alt="" width="20px" height="20px">男
                </label>
                <input type="radio" name="gender" id="female">
                <label for="female">
                    <img src="D:\文件\计算机资料\6. 前端代码\female.png" alt="" width="20px" height="20px">女
                </label> 
            </td>       
        </tr>
        <tr>
            <td> 出生日期 </td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                    <option>2006</option>
                    <option>2007</option>
                    <option>2008</option>
                    <option>2009</option>
                    <option>2010</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日期--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> 就读学校 </td>
            <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> 应聘岗位 </td>
            <td> 
                <input type="checkbox"> 前端开发
                <input type="checkbox"> 后端开发
                <input type="checkbox"> 测试开发
                <input type="checkbox"> 运维开发
            </td>
        </tr>
        <tr>
            <td> 掌握的技能 </td>
            <td> <textarea cols="30" rows="10"></textarea> </td>
        </tr>
        <tr>
            <td> 项目经历 </td>
            <td> <textarea cols="30" rows="10"></textarea> </td>
        </tr>
        <tr>
            <td> <input type="checkbox">我已仔细阅读过公司的招聘要求 </td>
        </tr>
        <tr>
            <td> 
                <a href="D:\文件\计算机资料\6. 前端代码\2022_7_30\demo4.html" target="_blank">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td> <h3>请应聘者确认：</h3> </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>以上信息真实有效</li>
                    <li>能够尽早去公司实习</li>
                    <li>能接受公司的加班文化</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

展示结果：

HTML 基础（下）

标签八表格标签

展示1

展示2

展示3

标签九列表标签

标签十表单标签

1. form 标签

2. input 标签

说明

展示1 单行文本框和密码框

展示2 单选框

展示3 多选框

展示4 普通按钮

展示5 提交按钮

展示6 清空按钮

展示7 选择文件

3. label 标签

4. select 标签

展示1

展示2

5. textarea 标签

标签十一无语义标签

三、HTML 的特殊字符

综合案例一展示简历信息(不涉及往服务器发送)

综合案例二填写个人简历(不涉及往服务器发送)

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML 基础（下）

标签八 表格标签

展示1

展示2

展示3

标签九 列表标签

标签十 表单标签

1. form 标签

2. input 标签

说明

展示1 单行文本框和密码框

展示2 单选框

展示3 多选框

展示4 普通按钮

展示5 提交按钮

展示6 清空按钮

展示7 选择文件

3. label 标签

4. select 标签

展示1

展示2

5. textarea 标签

标签十一 无语义标签

三、HTML 的特殊字符

综合案例一 展示简历信息(不涉及往服务器发送)

综合案例二 填写个人简历(不涉及往服务器发送)

热门文章

最新文章

相关课程

相关电子书

相关实验场景

标签八表格标签

标签九列表标签

标签十表单标签

标签十一无语义标签

综合案例一展示简历信息(不涉及往服务器发送)

综合案例二填写个人简历(不涉及往服务器发送)