文章目录
一、列表标签
1.应用场景:如新闻列表、排行榜、账单等
~特点:按照行的方式,整齐显示内容
~种类:无序列表、有序列表、自定义列表
1、无序列表
ul→表示无序列表的整体,用于包裹li标签
li→表示无序列表的每一项,用于包含每一行的内容
2、有序列表
场景:在网页中表示一组有顺序之分的列表,如:排行榜
~ol标签中只允许包含li标签
~li标签可以包含任意内容
3、自定义列表
场景:在网页的底部导航中通常会使用自定义列表实现。
~dl:表示自定义列表的整体,用用于包裹dt/dd标签
~dt:表示自定义列表的主题
~dd:表示自定义列表的针对主题的每一项内容
dd 前会默认显示缩进效果
二、表格标签
1.基本属性
·table标签:表格整体
·tr标签:表格每行
·td标签:对于主题的每一项内容
嵌套规范:table>tr>td
2.属性
~给表格加边框用border属性
~设置表格整体的宽高
·width宽度 and ·height高度
3.表格标题和表头单元格标签
~表格整体大标题,使用caption标签完成,书写在table标签的内部
~在表格第一行设置一列的小标题,使用th标签
书写在tr标签内部(用于替换td标签)
4.结构标签
5.合并单元格
场景:将水平或垂直多个单元格合并成一个单元格
小结
①表格基本标签:table(整体)>tr(每行)>td(单元格)
②表格标题和表头单元格标签:table(整体)caption(整体大标题)+tr >th(表头单元格标签)
③表格结构标签:table > thead > tr > td
三、表单标签
1.input系列标签
~场景:网页中显示收集用户信息的表单效果,如:登录页、注册页
(拓展)value属性和name属性作用介绍
实现按钮功能,需要配合form标签使用
form使用方法:用form标签吧表单标签一起包裹起来即可
如果需要实现单选效果,需要设置相同的name属性值
单选框和多选框的默认选中:checked
2.button按钮标签
3.select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
select标签:下拉菜单的整体
option标签:下拉菜单的每一项
常见属性:selected下拉菜单的默认选中
4.textarea文本域标签
适用于网页评论
5.label标签
四、语义化标签
·没有语义的布局标签div 和span
~div:一行只显示一个(独占一行)
~span:一行可以显示多个
五、字符实体
总结
如果有问题的话,大家可以在评论区提醒一下