列表标签

无序列表

  1. <ul> 
  2. <li></li>
  3. </ul>
  • 场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
  • ul里边只能嵌套li,li里边可以嵌套任意标签
  • ul标签：表示无序列表的整体
  • li标签：表示无序列表的每一项

有序列表

  1. <ol>
  2. <li></li>
  3. </ol>
  • 场景：在网页中表示一组有顺序之分的列表，如：排行榜
  • ol表示有序列表的整体,用于包裹li标签
  • li 表示有序列表的每一项,用于包含每一行的内容
  • 列表的每一项前默认显示序号标识
  • ol标签中只允许包含li标签
  • li标签可以包含任意内容

自定义列表

  1. <dl>
  2.    <dt></dt>
  3.    <dd></dd>
  4. </dl>
  • 场景：在网页的底部导航中通常会使用自定义列表实现。
  • dl 表示自定义列表的整体,用于包裹dt和dd标签
  • dt表示自定义列表的主题
  • dd表示自定义列表针对主题的每一项内容
  • dd前会默认显示缩进效果
  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容

表格的基本标签

  1. <table>  
  2.     <tr>
  3.        <td>
  4.        </td>
  5.     </tr>
  6. </table>
  • 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
  • table标签: 表格整体,可包裹多个tr标签
  • tr标签:表格每行,可用于包裹td标签
  • td标签:表格单元格,可包裹内容
  • 标签的嵌套关系：table > tr > td

表格的相关属性

  1.   <table border="" width="" height="">
  • 场景：设置表格基本展示效果
  • border:表格的边框
  • width:表格的宽度
  • height:表格的高度

实际开发时针对于样式效果推荐用CSS设置

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

  1. <table border=""  width=""  height=""></table>
  2.  必须紧挨着table下边写 
  3.     <caption>
  4.       <h3>内容</h3>
  5.     </caption>
  6.     <thead>
  7.       <tr height="">
  8.         <th>文字</th>
  9.         <th>文字</th>
  10.         <th>文字</th>
  11.       </tr>
  12.     </thead>
  13. </table>
  • 场景：在表格中表示整体大标题和一列小标题
  • caption:表格大标题 表示表格整体大标题,默认在表格整体顶部居中显示
  • th:表头单元格 表示一系列小标题,通常用于表格第一行,默认内部字体加粗并居中显示
  • caption标签书写在table标签内部
  • th标签书写在tr标签内部(用于代替td标签)

表格的结构标签(了解)

  1. <table>
  2.     <thead>
  3.       <tr></tr> 
  4.     </thead>
  5.     <tbody>
  6.       <tr></tr>
  7.     <tbody>
  8.     <tfoot>
  9.       <tr></tr>
  10.     <tfoot>
  11. </table>
  • 场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
  • thead:表格头部 tbody 表格主体 tfoot 表格底部
  • 表格标签内部用于包裹tr标签
  • 表格的结构标签可以省略
  • 表格结构标签写在table标签内部

合并单元格

  1.   跨行  <td rowspan="合并的数量"></td>(保留第一个,其余删除掉或者注释掉)
  2.   跨列  <td colspan="合并的数量"></td>(上同)
  • 合并单元格-代码实现
  • 合并单元格步骤：
  1. 明确合并哪几个单元格
  2. 通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
  3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
  4. rowspan: 合并单元格的个数,跨行合并,将多行的单元格垂直合并
  5. colspan: 合并单元格的个数,跨列合并,将多行的单元格平行合并

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

表单标签

input系列标签的基本介绍

  1. input系列标签-文本框
  1.  <input type="text" placeholder="">
  • 场景：在网页中显示输入单行文本的表单控件
  • type属性值：text
  • placeholder: 占位符,提示用户输入内容的文本
  1. （拓展）value属性和name属性作用介绍
  • value属性：用户输入的内容，提交之后会发送给后端服务器 name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
    后端接收到数据的格式是：name的属性值 = value的属性值
  1. input系列标签-密码框
  1. <input type="password"  placeholder="">
  • 场景：在网页中显示输入密码的表单控件
  • type属性值：password 常用属性（同文本框）
  • type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
  1. input系列标签-单选框
  1. <input type="radio" name="" checked>
  • 场景：在网页中显示多选一的单选表单控件
  • type属性值：radio
  • name: 分组. 有相同name属性值的单选框为一组,一组只能同时有一个被选中
  • checked : 默认选中
  1. input系列标签-复选框
  1.         <input type="checkbox">
  • 场景：在网页中显示多选多的多选表单控件
  • type属性值：checkbox
  • 常用属性（同单选框）
  1. input系列标签-文件选择
  1. <input type="file" multiple><br><br>
  • 场景：在网页中显示文件选择的表单控件
  • 文件域 文件选择：file
    multiple 多选 按住ctrl键 多选
  1. input系列标签-按钮
  1. <input type="submit" value="立即注册">
  3.     <input type="reset" value="重新填写">
  5.     <input type="button" value="普通按钮">
  • submit：提交按钮 可以提交
  • reset：重置按钮 重置到默认值
  • button：普通按钮 不能提交 配合js使用

button按钮标签

  1. button按钮标签
  1.     <button type="submit">button提交按钮</button>
  3.     <button type="reset">button重置按钮</button>
  5.     <button type="button">button普通按钮</button>
  • 场景：在网页中显示用户点击的按钮
  • type属性值同input的按钮系列
  • submit：提交按钮 可以提交
  • reset：重置按钮 重置到默认值
  • button：普通按钮 不能提交 配合js使用

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

  1. select下拉菜单标签
  1. <select>
  2. <option value=""></option>
  3. <option value=""></option>
  4. <option value=""  selected></option>
  5. </select>
  • 场景：在网页中提供多个选择项的下拉菜单表单控件
  • 标签组成： select标签：下拉菜单的整体
    option标签：下拉菜单的每一项
  • 常见属性： selected：下拉菜单的默认选中
  1. textarea文本域标签
  1. <textarea  cols="30" rows="10" placeholder=""></textarea>
  • 场景：在网页中提供可输入多行文本的表单控件
  • 标签名：textarea
  • 常见属性： cols： 一行可以输入的字符数
    rows: 可以输入的行数

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

  1. label标签
  1. <input type="" name="" id=""> <label for=""></label> 
  2. <label > <input type="" name="" >  </label>
  3. <input type=""  name="">
  5. <br><br>
  • label标签用来绑定表单元素,当点击label里边的内容的时候,绑定的表单元素会获取光标焦点
  • 第一种方法, 表单标签里边设置id=”值” label for =”id值”
  • 第二种方法 把表单元素和内容都放到label里边,将label的for属性删除掉
  • 场景：常用于绑定内容与表单标签的关系