关于一个小白学习html的一点笔记

143 阅读2分钟

html提供了三种列表

1:无序列表

作用是布局排列整齐的不需要规定顺序的区域。 以ul为开头,嵌套li为作为列表目录 (这里的无序列表的左边小黑点可以更换模式,就在ul标签里添加属性style,并把值改为"list-style-type:X", 这里的X可以有多种形式,比如说实心方块的square或者空心圆形的circle) image.png

2:有序列表

 作用是布局排列整齐的需要规定顺序的区域 以ol开头,嵌套li作为列表目录 (可以更换序列的样式,比如 style="list-style-type: lower-latin;"就是变成字母类型)

image.png

3:定义列表

   dl(defined list)嵌套dt(defined title)和dd(defined detail),dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情

image.png  

表格:

表格是由行和列(表格数据)组成的结构化数据集,它让你快速简单地查找某个表示不同类型数据之间的某种关系的值 表格由table标签为开头,加以嵌套tr,td,th来组成一个表格,table里嵌套tr,而tr里面则嵌套td或者th 其中tr代表着新的一行,而th则是表头的单元格,td是内容的单元格。 需要注意的是,table的初始并没有默认边框线,可以通过table里的border属性来添加。th相较于td有字体加黑重点提醒。 table中可以添加colgroup标签,colgroup中可以嵌套col标签,每一个col标签代表一列,也可以在里面添加span来指定此标签连续几列 。同样的,为了让浏览器的表格结构更加清晰,可以table里添加表格结构标签,thead说明是头部,tbody说明是主要内容,t说明是尾部总结,对人们看不出区别。

合并单元格(跨行合并和跨列合并) 首先要明确合并目标。然后保留最上(最左)的单元格,在最上的表格添加属性rowspan(最左添加属性colspan),属性值为需要合并的单元格数目,最后把需要被合并的其他单元格删除。个人理解可以把合并理解成一个单元格变大跨行(跨列),而添加的属性就是它的单元长度,之所以要把其余的单元格删除是因为其不会被变大的单元格覆盖,而且是会依旧往后添加。

`

<tr>
    <th colspan="2" rowspan="1">姓名</th>
    
    <th >性别</th>
    <th >年龄</th>
</tr>
<tr>
    <td>张三</td>
    <td></td>
    <td colspan="2" >18</td>
</tr>
<tr>
    <td>李四</td>
    <td></td>
    <td rowspan="2">19</td>
    <td>66</td>
<tr>
</tr>
`

image.png