day02--html基础标签

一、html标签的学习

1、列表标签

1. 无序标签

   ul 表示无序列表的整体，用于包裹li标签

   li 表示无序列表的每一项，用于包含每一行的内容

   注意：ul标签中只允许包含li标签，li标签可以包含任意内容

   特点：列表的每一项前默认显示原点标识

2. 有序标签

   ol 表示有序列表的每一项 ，用于包裹li标签

   li 表示有序列表的每一项，用于包含每一行的内容

   注意：ol标签中只允许包含li标签，li标签可以包含任意内容

   列表的每一项前默认显示序号标识

3. 自定义标签

   dl 表示自定义列表的整体，用于包裹dt/dd标签

   dt 表示自定义列表的主题

   dd 表示自定义列表的针对主题的每一项内容

   注意：dl标签中只允许包含dt/dd标签，dt/dd标签可以包含任意内容

   特点：dd前会默认显示缩进效果

2、表格标签

• 表格的基本标签

  标签名	说明
  table	表格整体，可用于包裹多个tr
  tr	表格每行，可用于包裹td
  td	表格单元格，可用于包裹内容

  注意：标签的嵌套关系：table>tr>td

• 表格相关属性

  属性名	属性值	效果
  border	数字	边框宽度
  width	数字	表格宽度
  height	数字	表格高度

  注意：实际开发是针对样式效果推荐用CSS设置

• 表格标题和表头单元格标签

  标签名	名称	说明
  caption	表格大标题	表示表格整体大标题
  th	表头单元格	表示一列小标题，通常 用于表格第一行，默认内部文字加粗并居中显示

  注意：

  caption标签书写在table标签内部

  th标签书写在tr标签内部（用于替换td标签）

• 表格的结构标签（了解）

  标签名	名称
  thead	表格头部
  tbody	表格主体
  tfoot	表格底部

  注意：

  表格结构标签内部用于包裹tr标签

  表格的结构标签可以省略

• 合并单元格

  属性名	属性值	说明
  rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
  colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

  注意：

  只有同一个结构标签中的单元格才能合并，不能跨结构合并

3、表单标签

• input系列标签

  标签名	TYPE属性值	说明
  input	text	文本框，用于输入单行文本
  input	password	密码框，用于输入密码
  input	radio	单选框，用于多选一
  input	checkbox	多选框，用于多选多
  input	file	文件选择，用于之后上传文件
  input	submit	提交按钮，用于提交
  input	reset	重置按钮，用于重置
  input	button	普通按钮，默认无功能，知乎配合js 添加功能

  一、input标签中-文本框text

  常用属性：placeholder——占位符。提示用户输入内容的文本

  name的属性值=value的属性值

  二、input标签中-密码框password 常用属性：placeholder——占位符。提示用户输入内容的文本

  三、input标签中-单选框radio

  常用属性：

  name 分组。同一组中只能有一个被选中

  checked 默认选中

  四、input标签中-复选框checkbox

  常用属性：

  checked 默认选中

  五、input标签中-文件选择file

  常用属性：

  multiple 文件选择

  六、input标签中-按钮

  常用属性：

  submit 提交按钮

  reset 重置按钮

  button 普通按钮

  注意点：如果需要使用功能：需要配合form标签一起使用（使用form标签把表单标签一起包裹起来即可）

• button按钮标签

  常用属性：

  submit 提交按钮

  reset 重置按钮

  button 普通按钮

• select下拉菜单标签

  <select>   //下拉菜单的整体
      <option></option>    //下拉菜单的每一项
  </select>

• textarea文本域标签

  <textarea cols="规定了文本域可见宽度" rows="可见行数"></textarea>

  注意：

  右下角可以改变大小，推荐用CSS设置样式

• label标签

4、语义化标签

div标签：独占一行

span标签：一行显示多个

5、字符实体

 二、相关的思维导图