HTML- 标签学习之- 列表、表格

无序列表/有序列表:

标签组成( 无序ul    有序 ol )    -> li  父子级标签, ul只能包含li标签, li标签可以包含任意内容。

HTML- 标签学习之- 列表、表格_第1张图片HTML- 标签学习之- 列表、表格_第2张图片HTML- 标签学习之- 列表、表格_第3张图片 

自定义列表

  • dl :自定义列表的整体,用于包裹dt/dd  标签
  • dt:自定义列表主题
  • dd:自定义列表的针对主题的每一项内容

特点:

  • dd前会默认显示缩进效果

注意点:

  • dl 标签中只允许包含 dt/dd 标签
  • dt/dd 标签可以包含任意内容

    

无序列表


  • 电子数码
  • 生活家具
  • 餐饮美食
  • 母婴产品

有序列表


  1. 电子数码
  2. 生活家具
  3. 餐饮美食
  4. 母婴产品

自定义列表


帮助中心
账户管理
账户介绍

表格     table -> tr -> td

table : 表格整体;

     tr :    行, 用于包裹多个td;

    td :   单元格, 用于包裹内容;

border: 表格线的粗细

width: 每个格子的最小宽度

height: 每个格子高度:

capition : 表格大标题, 表示表格整体的大标题,默认在表格整体顶部居中位置;

th:  表头单元格,  表示一列小标题,通常用于表格第一行, 默认内部文字加粗并居中;

head、body、footer 用于提高代码渲染效率, 视觉上没变化 :如图

HTML- 标签学习之- 列表、表格_第4张图片

Code:




    
    
    
    Document


    
  
    

表格


用户信息表
编号 姓名 性别 编号 爱好 评语
1 NN 007 打篮球 优秀的不要不要的
2 XX 006 睡觉 完犊子了
3 DD 008 打篮球 完美666
4 结束总结 - - 积极 飞得更好

单元格合并:

跨行合并 rowspan、 跨列合并 colspan

  •  明确合并那几个单元格
  • 左上原则, 左右合并保留左边,删除其他
  • 上下合并保留上边, 删除其他

注意点: 只有同一个结构标签中的单元格才能合并,不能夸结构合并

HTML- 标签学习之- 列表、表格_第5张图片

 Code:

 

表格


用户信息表
编号 姓名 性别 编号 爱好 评语
1 NN 007 打篮球 优秀的不要不要的
3 DD 008 打篮球 完美666
2 XX 006 睡觉 完犊子了
4 结束总结 - 飞得更好

你可能感兴趣的:(前端从0到1,陪你成长,html,单元格合并,html,表单,html,表格)