1、HTML图像
在 HTML 中,图像由 <img /> 标签定义。
属性:
src (图像的 URL 地址);
width(图像显示的宽度);
height(显示的高度);
alt (替换文字,无法正常显示的时候显示文字来代替)
<img src="/i/phone.jpg" width="128" height="128" />
插入互联网上的图像:
<img src="https://www.runoob.com/images/pulpit.jpg" width="200px" />
上面的代码运行结果:
2、HTML表格
表格的标签是<table>
属性border代表表格的边框粗细
一行是<tr>
一单元格(一列)是<td>,单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
运行效果:
<table>属性:
border 表格边框粗细
align 表格相对周围元素的对齐方式(left,right,center) ,不推荐使用
width 表格的宽度
<tr>属性:
align 内容对齐方式(left,right,center)。
valign 规定表格行中内容的垂直对齐方式。(top顶部对齐,middle居中对齐,bottom底部对齐)
bgcolor 颜色,不推荐使用
<td> 属性
align 内容水平对齐方式(left,right,center)。
valign 垂直排列方式(top,middle,bottom)
height 单元格高度,不推荐使用
rowspan 单元格可横跨的行数
colspan 单元格可横跨的列数
width 单元格宽度
rowspan 例子:合并列
<table border="1">
<tr >
<td>第一行第1列</td>
<td>第一行第2列</td>
<td rowspan="2">第一行第3列</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
</tr>
</table>
运行效果:
colspan 例子:合并行
<table border="1">
<tr >
<td>第一行第1列</td>
<td colspan="2">第一行第2列</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
<td>第二行第3列</td>
</tr>
</table>
运行效果:
合并行列例子:
<table border="1">
<tr >
<td>第一行第1列</td>
<td >第一行第2列</td>
<td rowspan="2" colspan="2">合并的单元格</td>
</tr>
<tr>
<td>第二行第1列</td>
<td>第二行第2列</td>
</tr>
<tr>
<td>第三行第1列</td>
<td>第三行第2列</td>
<td>第三行第3列</td>
</tr>
</table>
运行效果:
<table>的应用:班级座位表,成绩表,课程表,简历、导航栏、相册、订单列表,商品列表等等
3、HTML表单
HTML 表单用于收集用户输入。表单是一个包含表单元素的区域。
表单元素包含:输入框(input)、文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<form action="">
账号: <input type="text" name="firstname">
<br>
密码: <input type="password" name="lastname">
<br>
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>
<input type="text" > <!-- 单行文本 -->
<input type="password" > <!-- 密码框,输入密码的 -->
<input type="radio" > <!-- 单选 -->
<input type="checkbox" > <!--多选 -->
<!-- 下拉选择框 -->
<select name="color">
<option value="red">红色</option> <!-- 选项 -->
<option value="gray">灰色</option> <!-- 选项 -->
</select>
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
输入框自动选中:
<input type="text" autofocus />
<datalist>H5新增的,需要与 <input> 标签配合使用,用来表示可选的列表。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
例:
<form action="">
账号: <input type="text" name="firstname" autofocus>
<br>
密码: <input type="password" name="lastname">
<br>
<input type="text" placeholder="单行文本"> <!-- 单行文本 -->
<br />
<input type="password" placeholder="密码框"> <!-- 密码框,输入密码的 -->
<br />
<label><input type="radio" />单选</label> <!-- 单选 -->
<br />
<label><input type="checkbox" >多选(复选框)</label> <!--多选 -->
<br />
<!-- 下拉选择框 -->
<span>下拉选择框:</span>
<select name="color">
<option value="red">红色</option> <!-- 选项 -->
<option value="gray">灰色</option> <!-- 选项 -->
</select>
<br />
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br />
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>
运行效果:
用<label>把单选(radio)或者多选(checkbox)包含起来,点中<label>整个元素就可以选中,不然必须点中单选或者多选框元素才能选中。
比如下面点中文字无效:
<input type="radio" />选中
下面的点中文字可以选中:
<label>
<input type="radio" />选中
</label>