提示:以下是本篇文章正文内容,下面案例可供参考
一、列表
1.有序列表 --> OL
<!-- 有序列表
ol -> li
属性值:
type:1,a,A,I,i
start:排序起始值
reversed : 倒序排列
-->
<ol type="1" reversed start="10">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
<li>有序列表5</li>
</ol>
2.无序列表 --> UL
<!-- 无序列表
ul -> li
属性值:
type:disc实心圆,circle空心圆,square实心方框
-->
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
3.自定义列表
<!-- 自定义列表
dl -> dt -> dd
-->
<dl>
<dt>表头</dt>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
<dd>自定义列表</dd>
</dl>
二、表格
<!-- table表格
属性值:
border:表格外边框粗细
align="center":使表格居中
rowspan="x":行合并,使用时值为x就把对应x行td删除
colspan="x":列合并,使用时值为x就把本行x个td删除
bgcolor:背景颜色
-->
<table border="1" align="center">
<tr>
<th>表头部分</th>
<th>表头部分</th>
<th>表头部分</th>
</tr>
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
</tr>
</table>
(1)合并表格单元格练习
<table border="1" width="500" height="500" align="center">
<tr align="center">
<td colspan="2" bgcolor="#CCFFCC"></td>
<td rowspan="2" bgcolor="#FFFFCC"></td>
<!-- <td>3</td> -->
</tr>
<tr align="center">
<td rowspan="2" bgcolor="#FFFFCC"></td>
<td bgcolor="#99CCCC"></td>
<!-- <td>6</td> -->
</tr>
<tr align="center">
<!-- <td>7</td> -->
<td colspan="2" bgcolor="#CCFFCC"></td>
<!-- <td>9</td> -->
</tr>
</table>
效果图
三、表单
<!-- 表单 -->
<!-- input输入框
type属性:
text:任意字符串文本框(默认)
password:密码输入框,显示为·····
number:数字输入框,只能输入数字
-->
<form action="Table.html">
<label for="name">姓名<input type="text" name="username" id="name"></label><br>
<label for="pwd">密码<input type="password" name="password" id="pwd"></label><br>
<label for="num">电话<input type="number" name="number" id="num"></label><br>
<label for="">男<input type="radio" name="sex" id="sex" checked></label>
<label for="">女<input type="radio" name="sex" id="sex"></label>
<label for="">其他<input type="radio" name="sex" id="sex"></label><br>
<label for="">爱好:</label>
<input type="checkbox" name="like" id="" value="eat" checked>吃
<input type="checkbox" name="like" id="" value="drink">喝
<input type="checkbox" name="like" id="" value="play">玩
<input type="checkbox" name="like" id="" value="happy">乐<br>
<label for="">籍贯
<select name="add" id="address">
<option value="shanxi">山西</option>
<option value="shandong">山东</option>
<option value="henan">河南</option>
<option value="hebei">河北</option>
</select>
</label>
<label for="">
<input type="submit" name="" id="">
</label>
</form><br>
<!-- 扩展标签 -->
<!-- 内联框架
属性值:
width:宽
height:高
src:引入地址
frameborder:边框显示,1显示 0隐藏
-->
<iframe src="Table.html" frameborder="1" width="500" height="200"></iframe><br>
<!-- 滚动标签
属性值:
direction:方向(right,left)
behavior:滚动方式(scoll->结束后重新开始,slide->结束后停止,alternate->结束后逆向返回)
crollamount:速度,值为正,默认6
scrolldelay:时间,值为正,默认0,单位毫秒
οnmοuseοver="stop()" 鼠标悬浮停止移动
οnmοuseοut="start()" 鼠标离开时开始移动
-->
<marquee behavior="scoll" direction="right" onmouseover="stop()">🐦</marquee>
总结
列表,表格,表单是 HTML 基础中重要一环,实用范围很广,需熟练掌握