HTML基础知识-列表、表格、框架、表单

HTML中的列表

• 无序列表

ul标签下只能放li标签，其他标签放到li标签下（规范）

		<ul>
			<li>
				<div>商品名称：小米6</div>
				<div>价格:￥2000</div>
			</li>
			<li>
				<div>商品名称：小米TV</div>
				<div>价格:￥3999</div>
			</li>
			<li>
				<div>商品名称</div>
				<div>价格</div>
			</li>
		</ul>

实例图：

• 有序列表

通常用来做排行榜

		<ol>
			<li>加州理工</li>
			<li>清华</li>
			<li>北大</li>
		</ol>

实例图：

HTML中的表格

		<table border="1">
			<!-- 表头 -->
			<thead>
				<!-- tr是table row缩写 -->
				<tr>
					<th>#</th>
					<th>姓名</th>
					<th>性别</th>
					<th>学校</th>
					<th>专业</th>
					<th>班级</th>
				</tr>
			</thead>
			<!-- 表主体 -->
			<tbody>
				<tr>
					<!-- td table data缩写 -->
					<td>1</td>
					<td>黄小米</td>
					<td>女</td>
					<!-- colspan属性 横轴合并 -->
					<td colspan="2">青岛大学-计算机科学</td>
					<!-- rowspan属性 纵轴合并 -->
					<td rowspan="2">1901班</td>
				</tr>
				<tr>
					<td>2</td>
					<td>黄渤</td>
					<td>男</td>
					<td colspan="2">德州学院-计算机科学</td>
				</tr>
			</tbody>
		</table>

iframe框架

<iframe src="https://www.jd.com" width="100%" height="300"></iframe>

在自己的网页中嵌入一个外部网站，感觉用处好像不大

HTML中的表单

▲注意：表单所有内容必须放在form标签里

• label

<label for=""> </label>

Label标签为input元素定义标签，其for属性应与相关元素的 id相同

• input

<input type="" placeholder="提示语" />

1. type="text"单行文本框
2. type="password"密码框
3. type="checkbox"多选框
4. type="radio"单选框
   ▲同一问题的多个单选框必须有相同的name

• select框，下拉选框

			<div>
				<label for="">区域：</label>
				<select name="">
					<option value ="">请选择省份</option>
					<option value ="">山东</option>
					<option value ="">湖南</option>
					<option value ="">湖北</option>
					<option value ="">山西</option>
				</select>
			</div>

• textarea多行文本框

<textarea rows="5" cols="20"></textarea>多

• button按钮

<button type=" ">按钮</button>

1. type="button"普通按钮
2. type="reset"重置按钮
3. type="submit"提交按钮