Web前端零基础HTML5入门（4）

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>