HTML标签（下）

HTML标签（下）

表格标签

表格主要用来显示、展示数据

表格的基本语法

<table>
    <tr>
    	<td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

举例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GAh8xGe5-1635695010018)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210428224108942.png)]

表头单元格标签

一般表头单元格位于表格的第一行 里面文字会居中加粗显示

表头

表格结构标签

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分

在表格标签中，分别用：标签 表格的头部区域、 标签 表格的主体区域 这样可以更好的分清表格结构 都在table 标签中

合并单元格

方式：

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

目标单元格：（写合并代码）

• 跨行：最上侧单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格 最后要删除多余的单元格

列表标签

无序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>

中只能嵌套

• 无序列表会带有自己的样式属性，但在实际使用是，我们会使用CSS来设置

  有序列表

  <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      ...
  </ol>
  

  中只能嵌套

• 有序列表会带有自己的样式属性，但在实际使用是，我们会使用CSS来设置

  自定义列表

  在HTML标签中，

  标签用于定义描述列表（或定义列表），该标签会与 （定义项目/名字）和

  （描述明一个项目/名字）一起使用

  基本语法：

  <dl>
      <dt>名词1</dt>
      <dd>名词解释1</dd>
      <dd>名词解释2</dd>
  </dl>
  

  • 里面只能包含

  表单标签

  使用表单的目的是为了收集用户信息

  组成

  在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分组成

  表单域

  表单域是一个包含表单元素的区域

  在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。

  会把它范围内的表单元素信息提交给服务器

  input之type属性

  

  文本框和密码框

  单选按钮和复选按钮

  

  • name和value是每个表单元素都有的属性值，主要给后台人员使用
  • name表单元素的名字，要求 单选按钮和复选框要有相同的name值

  提交按钮和重置按钮

  普通按钮和文件域

  多数情况下，用于通过javaScript启动脚本

  使用场景：上传文件

  标签

  标签用于绑定一个表单元素，当点击标签内的文本是，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

  语法：

  <label for="sex">男</label>
  <input type="radio" name="sex" id="sex"/>
  

  核心：标签的for属性应当与相关元素的id属性相同

  select下拉表单

  使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义 下拉列表

  语法：

  <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
  </select>
  

  中至少包含一对

  在中定义selected="selected"时，当前项即为默认选中项

  textarea文本域标签

  在表单元素中，标签是用于定义多行文本输入的控件。

  <textarea rows="3" cols="20">
  	文本内容
  </textarea>
  

  cols=“每行中的字符数” rows=“显示的行数” 实际开发中不会使用，都是用css来改变大小

  查阅文档

  https://www.w3school.com.cn/

  为默认选中项*

  textarea文本域标签

  在表单元素中，标签是用于定义多行文本输入的控件。

  <textarea rows="3" cols="20">
  	文本内容
  </textarea>
  

  cols=“每行中的字符数” rows=“显示的行数” 实际开发中不会使用，都是用css来改变大小

  查阅文档

  https://www.w3school.com.cn/