学习HTML的第三天-CSDN博客

本文链接：https://blog.csdn.net/weixin_43979257/article/details/128171919

HTML的表格标签、表单标签、语义化标签、字符实体

一、表格标签

5、合并单元格

跨行合并（rowspan）或者跨列合并（colspan）

代码片段

<table border="1" width="300" height="300">
    <caption><h3>学生成绩单</h3></caption>
    <!-- 表格的头部 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
      </tr>
    </thead>
    <!-- 表格的身体 -->
    <tbody>
      <tr>
        <td>小A</td>
        <!-- 保留 -->
        <td rowspan="2">100分</td>
        <td>小A真棒</td>
      </tr>
      <tr>
        <td>小B</td>
        <!-- 删除 -->
        <!-- <td>100分</td> -->
        <td>小B真棒</td>
      </tr>
    </tbody>
    <!-- 表格的底部 -->
    <tfoot>
      <tr>
        <td>总结</td>
        <!-- 保留 -->
        <td colspan="2">都很厉害</td>
        <!-- 删除 -->
        <!-- <td>郎才女貌</td> -->
      </tr>
    </tfoot>
  </table>

结果截图

在这里插入图片描述

合并步骤

明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
上下合并→只保留最上的，删除其他
左右合并→只保留最左的，删除其他
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

注意事项

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

二、表单标签

1、input系列标签

标签名：input
input标签可以通过type属性值的不同，展示不同效果

type属性值	说明
text	文本框，输入单行文本
passage	密码框
radio	单选框
checkbox	多选框
file	选择文件框
submit	提交按钮
reset	重置按钮
button	普通按钮，之后配合js使用

代码片段

</head>
<body>
  <form>
    <!-- 1、文本框：text（type属性的默认值） -->
    昵称：<input type="text" placeholder="请输入您的昵称"><br><br>

    <!-- 2、密码框：password -->
    密码：<input type="password" placeholder="请输入您的密码"><br><br>

    <!-- 3、单选框：radio -->
    性别：<input type="radio" name="sex" checked>男
          <input type="radio" name="sex">女<br><br>
    
    <!-- 4、多选框：checkbox -->
    爱好：<input type="checkbox" checked>敲代码
          <input type="checkbox" checked>熬夜
          <input type="checkbox">掉头发<br><br>

    <!-- 5、文件选择：file -->
    <input type="file" multiple><br><br>

    <!-- 按钮 -->
    <!-- 1、submit：提交按钮 -->
    <input type="submit">

    <!-- 2、reset：重置按钮 -->
    <input type="reset">

    <!-- 3、button：普通按钮 -->
    <input type="button" value="普通按钮">
  </form>
</body>

结果截图

在这里插入图片描述

注意事项

type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
radio标签中：
1、name属性对于单选框有分组功能；有相同name属性值的单选框为一组，一组中只能同时有一个被选中
2、checked属性表示默认选中
file标签中：mulltiple属性表示可以选择多个文件
三个按钮标签中，若需要实现按钮功能，需要配合form标签使用：
1、form使用方法：用form标签把表单标签一起包裹起来即可

2、button按钮标签

场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮系列）

type属性值	说明
submit	提交按钮
reset	重置按钮
button	普通按钮，之后配合js使用

代码片段

 <form>
    昵称：<input type="text" placeholder="请输入您的昵称"><br><br>

    <!-- 提交按钮 -->
    <button type="submit">button提交按钮</button>

    <!-- 重置按钮 -->
    <button type="reset">button重置按钮</button>

    <!-- 普通按钮 -->
    <button type="button">button普通按钮</button>
  </form>

结果截图

在这里插入图片描述

注意事项

谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等

3、select下拉菜单标签

代码片段

  <!-- 下拉菜单 -->
  <!-- select：表示下拉菜单的整体 -->
  <!-- option：表示下拉菜单的每一项 -->
  所在城市：<select>
            <option>上海</option>
            <option selected>北京</option>
            <option>广州</option>
            <option>深圳</option>
          </select>

结果截图

在这里插入图片描述

注意事项

selected表示默认选中值
4、textarea文本域标签

常见属性

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

代码片段

<body>
  <!-- 文本域标签 -->
  <textarea cols="60" rows="30"></textarea>
</body>

结果截图

在这里插入图片描述

注意事项

右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置

5、label标签

使用场景

常用于绑定内容与表单标签的关系

使用方法

第一种
1、使用label标签把内容（如：文本）包裹起来
2、在表单标签上添加id属性
3、在label标签的for属性中设置对应的id属性值

第二种
1、直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2、需要把label标签的for属性删除即可

代码片段

<body>
  爱好：

  <!-- 第一种 -->
  <input type="checkbox" id="one"><label for="one">敲代码</label>

  <!-- 第二种 -->
  <label>
    <input type="checkbox">熬夜
  </label>
</body>

结果截图

在这里插入图片描述

显示特点

在点击id属性一致的标签或者被包裹的其他标签时也可以选中

三、语义化标签

1、无语义的布局标签

div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个

代码片段

<body>
  <!-- 没有语义的布局标签 -->
  <div>我是一个div</div>
  <div>我是一个div</div>
  <div>我是一个div</div>
  <span>我是一个span</span>
  <span>我是一个span</span>
  <span>我是一个span</span>
</body>

结果截图

在这里插入图片描述

2、有语义的标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

在这里插入图片描述

代码片段

<body>
  <!-- 有语义的布局标签 -->
  <header>网页的头部</header>
  <nav>网页的导航</nav>
  <footer>网页的底部</footer>
  <aside>网页的侧边栏</aside>
  <section>网页的区块</section>
  <article>网页的文章</article>
</body>

结果截图

在这里插入图片描述

注意事项

类似于div

四、字符实体

1、HTML中的空格合并现象

代码片段

<!-- HTML空格合并现象 -->
1234~&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5678~ 
  p标签长这个样子：&lt;p&gt;&lt;/p&gt;