HTML5+CSS

13.列表表签

• 作用：布局内容整齐的区域
• 分类：无序列表（不需要规定顺序）【多用】，有序列表（有数字序号），定义列表（一个标题有多个列表）
• 无序列表：标签：ul嵌套li，ul是无序列表，li是列表条目
• 格式：<ul>
• <li>第一项</li>
• </ul>
• 注：ul标签里面只能包裹li标签
  • li里面可以包裹任何内容
• 有序列表：标签：ol嵌套li，ol是有序列表，li是列表条目
• 格式：<ol>
• <li>第一项</li>
• </ol>
• 注：ol标签里只能包裹li标签
• li标签里面可以包裹任何内容
• 定义列表：一般用在网页底部，eg帮助中心
• 标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
• 格式：<dl>
• <dt>列表标题</dt>
• <dd>列表描述/详情</dd>
• </dl>
• 注意：dl里面只能包含dt和dd
• dt和dd里面可以包含任何内容

14.表格

• 作用：与excel类似，用来展示数据
• 标签：table嵌套tr，tr嵌套td/th
  • table 表格
  • tr 行
  • td 内容单元格
  • th 表头单元格
• 注：在网页中表格默认没有边框线，使用border属性可以为表格添加边框线

15.表格结构标签~了解

• 作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰
• thread 表格头部 表格头部内容
• tbody 表格主体 主要内容区域
• tfoot 表格底部 汇总信息区域

16.合并单元格

• 将多个单元格合并成一个，以合并同类信息
• 可跨行合并，可跨列合并
• 合并步骤：1.明确合并目标
• 2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
  • 跨行合并：保留最上单元格，添加属性rowspan
  • 跨列合并：保留最左单元格，添加属性colspan
• 删除其他单元格
• 注意：不能跨结构合并

17.表单

• 作用：收集用户信息
• 使用场景：搜索区域；登陆页面；注册页面
• input标签 type属性值不同，则功能不同
• <input type=”…”>
  • text 文本框，用于输入单行文本（输入什么就显示什么）
  • password 密码框（输入什么都是以 · 的形式出现的）
  • radio 单选框
  • checkbox 多选链
  • file 上传文件
• 占位文本：提示信息
  • <input type=”…”placeolder=”提示信息”>
  • 文本框，密码框都能使用
• 单选框radio:常用属性
  • name 控件名称 控件分组， 同组只能选中一个（单选功能）
  • checked 默认选中 属性名和属性值相同，简写为一个单词
  • <input type=”radio” name=”组别名”checked>文字
• 上传文件：file
• 默认情况下，文件上传只能上传一个文件，添加multiple属性可以实现文件多选的功能
• <input tupe=”file” multiple>
• 多选框：也叫复选框
• 默认选中：cheked
• <input type=”checkbox” checked>敲前端代码

18.下拉菜单

• 标签：select嵌套option select是下拉菜单整体，option是下拉菜单的每一项
• <select>
• <option>文字</option>
• …
• <option selected> 文字</option>
• </select>

19.文本域

• 作用：多行输入文本的表单控件
• 标签：textarea 双标签
• 可以换行；文本框可以放缩（若未限制）

20.label标签

• 作用：网页中，某个标签的说明文本
• 经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
• 增大点击范围：1.完整：label只包裹内容，不包裹表单控件
  • 设置label标签的for属性值和表单控件的id属性值相同
  • <input type=”属性“ id=”文字1”>
  • <label for=”文字1”> 文字2</lable>
• 2.使用label标签包裹文字和表单控件，不需要属性
• <label><input type=”属性”>文字1</label>
• 提示：支持label标签增大点击范围的表单控件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等等

21.按钮

• <button type=””>按钮</button>
• type属性值：submit 提交按钮，点击后可提交数据到后台（默认）
  • reset 重置按钮，点击后将表单控件恢复到默认值
  • button 普通按钮，默认无功能，一般配合javascript使用
• form：表单区域标签；想要button能用，得把button相关的所有内容都放进form里面
• <form action=””></form>
  • action：发送数据的地址

22.无语义的布局标签

• 作用：布局网页（划分网页区域，摆放内容）
  • div：独占一行（大盒子）
  • span：不换行（小盒子）
• <div>文字</div>
• <span>文字</span>
• 字符实体：作用：在网页中显示预留字符
  • 空格 &ntsp;
  • 小于 <
  • 大于 >
• 在代码中敲键盘的空格，网页只显示1个空格