一、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、字符实体