一、html标签的学习
1、列表标签
无序标签
ul 表示无序列表的整体,用于包裹li标签
li 表示无序列表的每一项,用于包含每一行的内容
注意:ul标签中只允许包含li标签,li标签可以包含任意内容
特点:列表的每一项前默认显示原点标识
有序标签
ol 表示有序列表的每一项 ,用于包裹li标签
li 表示有序列表的每一项,用于包含每一行的内容
注意:ol标签中只允许包含li标签,li标签可以包含任意内容
列表的每一项前默认显示序号标识
自定义标签
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、字符实体