Web前端开发学习笔记 - Day02

Day02学习笔记

1. 列表

1.1 无序列表

<ul>：定义无序列表，并且只能包含<li>元素。

<li>：定义列表项，可以包含与<div>完全类似的内容，也可以包含较多类型的子元素。

有效记忆法：ul是unordered lists的缩写（无序列表） li是list item的缩写（列表项目）

<ul>
	<li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

注意：

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性,用css写。

1.2 有序列表

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

• 所有特性基本与ul一致
• 实际工作中较少用到
• 有两个属性 type、start
• type属性有五个属性值，默认为数字，1、a、A、i、I（罗马数字），表示前缀。
• start：属性值为数字，代表type从第几个数字开始

1.3 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

<dt>和<dd>是并列关系。
有效记忆：
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）

1.4 列表总结

标签名	定义	说明
<ul></ul>	无序标签	里面只能包含li 没有顺序
<ol></ol>	有序标签	里面只能包含li 有顺序， 使用情况较少
<dl></dl>	自定义列表	里面有2个兄弟， dt 和 dd

2. 表格

表格作用： 常见显示、展示表格式数据。

2.1 创建表格

创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字</td>
  </tr>
</table>

1. table用于定义一个表格标签。
2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。
3. td 用于定义表格中的单元格，必须嵌套在标签中。
4. 字母 td 指表格数据（table data），是数据单元格的内容。

总结：

• 表格的主要目的是用来显示特殊数据的
• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
• <tr></tr>中只能嵌套<td></td>