List label ol ul dl
What is a list
It is a display form of information resources, which can make information structured and organized, and displayed in the form of a list, so that the viewer can obtain the corresponding information more quickly
Classification of the list:
Ordered list
order list
Numbers in front
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
Application scope: test paper options, question and answer
Unordered list
a list
There is a small black spot on the front
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Application: website navigation bar, sidebar
Custom list
dl diylist
There are neither numbers nor small black dots, but you can set a subtitle
<dl>
<dt>标题</dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
dl tag
dt title/list name
dd list content
Application: the bottom of the website
Table label
Why use tables: simple and universal, stable structure
border="" add border
basic structure
Cell, row, column, cross row, cross column
Row tr column td
Cross-column colspan="4" Cross-four columns is to merge 1-4 columns into one column
Inter-row rowspan="2"
Student grades across columns | ||
---|---|---|
Mad god | Language | 100 |
Interbank | mathematics | 100 |
Qin Jiang | Language | 100 |
Interbank | mathematics | 100 |
<!--五行三列的表格-->
<table border="1px">
<tr>
<!-- 跨三列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!-- 跨两行-->
<td rowspan="2">狂神</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!-- 此处删掉了一行-->
<td>数学</td>
<td>100</td>
</tr>
<tr>
<!-- 跨两行-->
<td rowspan="2">秦疆</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!-- 此处删掉了一行-->
<td>数学</td>
<td>100</td>
</tr>
</table>
First judge a few lines and columns and then write line by line