【前端知识点总结】HTML 基础二

156 阅读3分钟

「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」。

HTML 列表标签

无序列表:

<ul><li></li></ul> (ul是无序列表,li是列表项,ul里只能嵌套li,li里面可以嵌套任意)

有序列表:

<ol><li></li></ol> (ol是有序列表,li是列表项,ul里只能嵌套li,li里面可以嵌套任意)

自定义列表:

<dl><dt></dt><dd></dd></dl>

  • dl是自定义列表
  • dt是列表的小标题
  • dd是小标题的解释项
  • dl里只能嵌套dt和dd,dt和dd里面可以嵌套任意)

HTML 表格标签

<table></table>

表格基本结构

table (表格)> tr (行)> td (单元格)

表格属性

  • border 边框
  • width 宽
  • height 高
  • cellspacing 单元格间的距离

表格的结构标签

  • caption 表格大标题,在表格整体顶部居中位置,紧挨着<table>
  • thead 表格头部,通常只放第一行
  • tbody 表格主体,除第一行以外的其他行
  • th 表头单元格

表格的单元格合并

  1. 先确定跨行还是跨列
  2. 在代码中找到要合并单元格的位置
  3. 跨列 在第一个单元格输入 colspan = "单元格数量"
  4. 跨行 在第一个单元格输入 rowspan = "单元格数量"

HTML 表单标签

<form></form>

input 标签系列: input type=""

  • text (默认项)单行文本输入框
  • password 密码输入框
  • radio 单选框,设置相同的 name 属性实现单选效果,添加 checked属性,设置默认选中项
  • checkbox 多选框,添加 checked 属性设置默认选中项
  • file 文件域,文件上传控件。设置 multiple 属性,实现多文件上传 按钮系列
  • submit 提交按钮
  • button 普通按钮(不能提交 后期配合js使用)
  • reset 重置按钮 回复初始值
  • value属性 值 修改文字按钮 常用属性 : placeholder 占位符提示信息,hidden 隐藏标签属性(一般搭配 file 使用)
       用户名: <input type="text" placeholder="请输入用户名">
       密码: <input type="password" placeholder="请输入6位密码">

<button> 按钮系列

button type =""

  • submit 提交按钮 可以省略
  • reset 重置按钮 恢复到初始值
  • button 普通按钮 不能提交

select 标签,下拉菜单控件

  1. option 标签,设置下拉菜单选项
  2. 添加 selected 设置下拉菜单默认选中项
  3. 添加 multiple 属性,设置下拉菜单多选

textarea 标签,文本域(多行文本输入框)

常用属性 :

  • cols ="每行可输入的字符"
  • rows ="可输入行数"
  • placeholder ="" 占位符提示信息

lable标签,绑定内容和元素

label标签 绑定内容和表单元素,点击label里边内容的时候,绑定的表单元素获取光标焦点

方法一: <input type="radio" id="nan"> <label for="nan"> 男 </label>

注意 : input 标签的 id 属性,和 label 标签的 for 属性 相对应。

方法二: <label><input type="radio">男</label>

注意 : 把 for 属性删除掉

表单常用属性 :

  • action 收集的信息提交给那个页面处理

          <form action="http://www.163.com">
    
  • name 名称,作用是用来区分不同的表单元素

  • value 值,设置表单内容

HTML 没有语义的标签(实际开发中常用)

div 标签 :

嵌套任意标签独占一行

span 标签 :

一行显示多个

字符实体

  • &nbsp; : 空格
  • &emsp; : 一个字符串大小的空格
  • &lt; : 小于号 <
  • &gt; : 大于号 >
  • &yen; : 中文 ¥ 符号