JavaScript-HTML-CSS Days2 Notes

1、定义列表-这里的dl, dt, dd的全称分别是什么？

在 HTML 中，<dl> 标签表示定义列表 (Definition List)，而 <dt> 和 <dd> 是其子元素，用于定义列表项的术语和描述。

  • <dt>: Definition Term，表示定义列表中的一个术语或名称（在你的例子中，它是“服务中心”）。

  • <dd>: Definition Description，表示与 <dt> 相关联的定义或描述（在你的例子中，它们是“申请售后”和“售后政策”）。

例子解释：

<dl>
  <dt>服务中心</dt>  <!-- 定义的术语 -->
  <dd>申请售后</dd>  <!-- 对术语的描述 -->
  <dd>售后政策</dd>  <!-- 对术语的描述 -->
</dl>

在这个例子中，<dt> 定义了一个术语（服务中心），而每个 <dd> 则为该术语提供了相关描述（申请售后、售后政策）。

 

2、如下标签的全称又是什么？另外border这个参数是什么含义？

  <table border="1">
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td>100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>100</td>
      <td>198</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>全市第一</td>
      <td>全市第一</td>
      <td>全市第一</td>
    </tr>
  </table>

在 HTML 中，以下是你提到的标签的全称以及它们的含义：

  • <table>: Table，表示一个表格，用于展示数据的行和列结构。

  • <tr>: Table Row，表示表格中的一行。它包含多个单元格，用来排列表格数据。

  • <th>: Table Header，表示表格的标题单元格（通常位于表格的顶部或某列的开始）。这些单元格中的内容通常会加粗以表示其重要性。

  • <td>: Table Data，表示表格中的数据单元格，包含表格中的数据项。

border 参数的含义：

在 <table> 标签中，border 参数定义了表格的边框宽度，以像素为单位。比如：

<table border="1">

这个设置为表格及其单元格添加了1像素宽度的边框。border="1" 意味着表格会有1像素的边框。如果你不设置 border，表格将默认没有边框。

其他示例：

  • border="0": 表格没有边框。
  • border="5": 表格和单元格边框宽度为 5 像素。

 

3、如下代码的 thead, tbody, tfooter加了和没加，其实最后渲染效果看上去也没多大区别？ 那为什么还要加上这3个标签，有什么必要性吗？

<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
      </tr> 
    </tfoot> 
    
  </table>
</body>

在 HTML 中，<thead>、<tbody> 和 <tfoot> 标签虽然对表格的视觉渲染影响不大（特别是简单表格中，它们的有无并不会改变最终显示效果），但它们的主要作用并不在于视觉呈现，而是在语义化和功能性上，具有以下几方面的必要性：

1. 语义化结构：

  • <thead> (表头)：表格的头部，通常包含列标题。
  • <tbody> (表体)：表格的主要数据部分。
  • <tfoot> (表尾)：表格的尾部，通常用于显示汇总信息或注释。

这种结构化的标记方式让代码更具语义性，表明不同的表格部分各自的用途。

更语义化的 HTML 对可读性和维护性更好，尤其在表格较大时，这种结构能更清晰地呈现数据布局。

2. 增强的可访问性：

使用这些标签有助于屏幕阅读器等辅助工具更好地理解表格的内容和结构，方便有视觉障碍的用户。比如，辅助技术可以通过这些标签更精确地导航到表格的不同部分。

3. 与样式和脚本的配合：

这些标签还可以帮助开发者通过 CSS 和 JavaScript 更方便地操作表格：

  • CSS：你可以使用 CSS 选择器为表格的不同部分单独定义样式。比如，针对表头、数据部分或表尾进行不同的样式设置。
  • JavaScript：在脚本中，分离表头、表体和表尾可以使动态操作表格（例如排序、筛选等）变得更容易。例如，表头和表尾可能会在表格排序或分页时保持固定，而仅对表体部分进行动态操作。

4. 表格分页时的用处：

在某些情况下，当表格内容较多时，可能需要分页显示数据。<thead> 和 <tfoot> 标签可以让表头和表尾在分页时保持固定，从而提供更好的用户体验。即使在换页时，表头和表尾仍然能保持可见，而表体内容可以进行滚动或分页切换。

总结：

  • 视觉上看不出明显区别，特别是简单表格中；
  • 语义化结构更清晰，提升代码可读性；
  • 增强可访问性，方便辅助工具理解内容；
  • 有助于脚本操作和样式定义，可以精确控制表头、表体和表尾的行为；
  • 分页时作用明显，能保持表头和表尾固定。

因此，虽然它们的视觉影响有限，但在语义化、功能性和可维护性上，这些标签非常有用。

 

4、rowspans参数的作用——合并单元格，效果如下。

 

 

5、如下代码，如何将label带进去，实现点击标签附近也能勾选单选框。

为了让点击文本标签（例如“男”或“女”）时也能勾选相应的单选按钮，你可以使用 HTML 的 <label> 标签。

<label> 标签与 <input> 元素绑定，使得点击标签文本时也会触发对应的输入控件（在你的例子中是单选框）。

有两种方式实现这个效果：

方法 1: 将 <input> 嵌入到 <label> 中

你可以把单选框和对应的标签文本一起放入 <label> 标签中，这样点击整个标签区域（包括文本部分）都会触发单选框的选择。

性别：
<label><input type="radio" name="gender"> 男</label>
<label><input type="radio" name="gender" checked> 女</label>

方法 2: 使用 for 属性和 id 关联

你也可以为每个 <input> 元素设置一个唯一的 id，并在对应的 <label> 标签中使用 for 属性，指向该 id。这样，点击标签也可以触发对应的单选框。

性别：
<input type="radio" id="male" name="gender">
<label for="male">男</label>
<input type="radio" id="female" name="gender" checked>
<label for="female">女</label>

解释：

  • 方法 1：<label> 标签包裹了 <input> 元素，所以点击整个区域时，单选按钮会被选中。
  • 方法 2：<label for="male"> 中的 for 属性与 <input id="male"> 关联，点击“男”标签时，id="male" 对应的单选按钮会被选中。

这两种方法都能让你点击标签文字时也能勾选对应的单选框。

 

6、如下代码的这个multiple参数有无，到底有什么区别？

<!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>
  上传文件：<input type="file">
</body>
</html>

multiple 参数在文件上传中有以下几个主要区别和作用：

1. 允许选择多个文件

没有 multiple 参数：

  • 用户只能选择一个文件进行上传。
  • 示例代码：
<input type="file">

有 multiple 参数：

  • 用户可以选择多个文件进行上传。
  • 示例代码：
<input type="file" multiple>

2. 文件选择对话框行为

没有 multiple 参数：

  • 打开文件选择对话框时，用户只能选择一个文件，选择后文件框中显示该文件。

有 multiple 参数：

  • 打开文件选择对话框时，用户可以按住 Ctrl（Windows）或 Command（Mac）键来选择多个文件，或者通过拖动来选择一组文件。

3. 提交方式

没有 multiple 参数：

  • 上传时，表单数据只包含一个文件的内容。

有 multiple 参数：

  • 上传时，表单数据包含多个文件的内容。后端可以接收一个文件列表进行处理。

 

7、文本域右下角禁用拖拽，记一下即可

<!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>
  <!-- 工作中，使用 CSS 禁用右下角的拖拽功能；使用 CSS 设置尺寸 -->
  <textarea rows="8" cols="50" style="resize:none">请输入评论</textarea>
</body>

</html>

也可以通过css控制，效果是一样的

<!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>
  <style>
    textarea{
      resize: none;
      width: 300px;
      height: 200px;
    }
  </style>
</head>

<body>
  <!-- 工作中，使用 CSS 禁用右下角的拖拽功能；使用 CSS 设置尺寸 -->
  <textarea>请输入评论</textarea>
</body>

</html>

 

8、div和span有什么区别？

<body>
  <!-- div：大盒子 -->
  <div>这是 div 标签</div>
  <div>这是 div 标签</div>
  <!-- span：小盒子 -->
  <span>这是 span 标签</span>
  <span>这是 span 标签</span>
</body>

<div> 和 <span> 是 HTML 中的两个常用元素，它们的主要区别在于其用途和默认的显示行为：

1. 显示类型

  • <div>：

    • 块级元素：默认情况下，<div> 是一个块级元素，会占据一整行。它可以包含其他块级元素或行内元素。
    • 用途：通常用于布局和分组较大的内容块，如段落、图片、其他元素等。
<div>这是一个块级元素</div>
<div>这是另一个块级元素</div>

　　<span>：

    • 行内元素：默认情况下，<span> 是一个行内元素，只占据其内容所需的空间，不会强制换行。
    • 用途：常用于对文本的部分内容进行样式或其他处理，而不影响周围的文本流。
<span>这是一个行内元素</span>
<span>这是另一个行内元素</span>

2. 用途

  • <div>：用于结构化页面，通常在 CSS 中用于布局。
  • <span>：用于样式化文本或特定部分的内容，而不会中断文本流。

3. 示例

以下是一个简单的例子，展示了如何使用 <div> 和 <span>：

<body>
  <div style="background-color: lightgray; padding: 10px;">
    这是一个 div 标签，包含多个块级内容。
    <div>这是内部的 div 标签。</div>
  </div>
  
  <p>这是一个段落，其中包含一些 <span style="color: red;">重要的文本</span>，使用了 span 标签来强调。</p>
</body>

总结

  • <div>：块级元素，用于布局和分组较大内容。
  • <span>：行内元素，用于样式化小块内容。

 

posted @ 2024-09-21 20:40  AlphaGeek  阅读(38)  评论(0)    收藏  举报