网站首页 > 知识剖析正文

二、HTML列表、表格

nixiaole 2024-11-25 15:43:06 知识剖析 18 ℃

1.列表（对相同类型的数据进行合理的展示）

列表分为有序、无序和自定义列表。

a、无序列表（ul）：

  ul 标签用来声明无序列表 ，所有的列表项（li）都要包含在ul标签当中  
      <ul>
         <li> xx</li>
         <li> xx</li>
     </ul>

标识符类型样式：改变type属性值来控制当前列表的标识符类型。

circle 实心圆样式

square 实心正方形

disc 默认值实心圆

<ul type="none">    <!--无标识符-->
		  <li>吃饭</li>
</ul>   
<ul type="square">
  		<li>睡觉</li>
</ul>
<ul type="circle">
			<li>看电视</li>
</ul>

注意：li 标签中一般不能出现样式，比如 <li type = "circle">XX</li>写法不是很规范：

ul标签当中只能出现 li 标签，不能出现其他标签和文字，列表内容写在li标签中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="none">
			<!--li列表项-->
			<li>吃饭1</li>
			<li>吃饭2</li>
			<li>吃饭3</li>
			<li>吃饭4</li>
		</ul>
	</body>
</html>

b、有序列表（ol）：

   <ol>
        <li> xx</li>
        <li> xx</li>
   </ol>

修改标识符：改变type属性值

1 数字1 2 3 ......

a/A 小/大写字母

i/I 小/大写的罗马数字

<ol type="none">XX</ol> 无标识符

注意：同样，ol标签和li标签是配合使用的，不能单独使用，而且ol标签内部不能存在任何其他标签，一般情况下只能存在li标签。

c、自定义列表（dl）：

<dl>标签和<dt><dd>标签是配合使用，不能单独使用，而且<dl>标签内部不能存在

任何其他标签。（dt是标题，dd是列表内容）

      <dl>
           <!--自定义列表的标题-->
              <dt>广东省</dt>
           <!--可以写自定列表的内容-->
              <dd>广州</dd>
              <dd>潮汕</dd>
              <dd>中山</dd>
              <dt>广西省</dt>
              <dd>南宁</dd>
              <dd>柳州</dd>
              <dd>桂林</dd>
       </dl>

小结：

列表有三种表现形式；

有序列表和无序列表必须配合li标签使用；

列表的type属性可以改变列表标识符；

2.表格

<table>XX</table> 声明表格
<tr>XX</tr> 行
<td>XX</td> 列
<th>XX</th> 表头单元格，粗体居中
<caption>XX</caption> 表格的标题，写在table下面

<table border = "2">     <!--border 表格边框粗细-->  
    <caption>XX</caption>
    <tr>
        <td>吃饭1</td>
        <td>吃饭2</td>
    </tr>
    <tr>
        <td>吃饭3</td>
        <td>吃饭4</td>
    </tr>
</table>

补充：W3C：万维网联盟，制定web标准。

web标准分为结构（html）、表现（css）、行为（js）

标签名称、属性名称必须小写

标签必须严格嵌套，并且必须闭合，即使空元素标签也必须闭合

属性值必须用引号引起来

上一篇： HTML的窗口分帧
下一篇： HTML-Table表格1 209

网站首页 > 知识剖析 正文

二、HTML列表、表格

猜你喜欢

网站首页 > 知识剖析正文