【博学谷学习记录】超强总结，用心分享|前端开发持续一周的感受

大家好，作为初次接触前端的小白，学习了一周的时间，从网页的认知学习到css的盒子模型，从中收获良多，总结来讲就是多敲代码，多练习,这才是关键。

今天我先从HTML基础来分享一下：

1、列表包含无序列表、有序列表和自定义列表

无序列表：ul标签中只允许嵌套li标签，li标签中可以嵌套任意内容

有序列表：ol标签中只允许包含li标签，li标签可以包含任意内容

自定义列表

dl标签：表示自定义列表的整体

dt标签：表示自定义列表的主题

dd标签：表示对于主题的每一项内容

列表在我们网页布局中使用的频率还是很高的

2、表格

表格的组成：

• table标签：表格整体

• thead：表格头部

• tbody：表格主体

• tfoot：表格底部

• tr标签：表格每行

• td标签：表格单元格

• width属性：表格整体的宽度

• height属性：表格整体的高度

• border属性：表格边框

• caption：表格的主题

•th：表头单元格

合并单元格

rowspan：跨行合并

colspan：跨列合并

注：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

3、表单

a、input系列标签

占位符：

placeholder，提示用户输入内容的文本 

单选按钮：

radio，相同name属性名的单选框为一组，一组同时只能一个被选中，checked默认选中，

文件选择

file，文件选择  multiple  可以多文件选择

按钮标签

注：如果需要实现以上按钮功能，需要配合form标签使用；

        form使用方法：用form标签把表单标签一起包裹起来即可。

b、button系列标签

 

 注：谷歌浏览器中button默认是提交按钮

        button标签是双标签，更便于包裹其他内容：文字、图片等

c、select下拉菜单

标签组成 

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

selected：下拉菜单的默认选中

d、 textarea文本域标签

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注：

右下角可以拖拽改变大小

实际开发时针对于样式效果 推荐用CSS设置

e、 label 标签

使用方法一：

1.、使用label标签把内容（如：文本）包裹起来

2.、在表单标签上添加id属性

3、 在label标签的for属性中设置对应的id属性值

使用方法二：

1、 直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2、 需要把label标签的for属性删除即可

今天列表、表格和表单的内容分享就到这了，希望大家都有所收获！