HTML基础（二）

HTML表格

• thead，table head
• tr，table row
• th，table head，<thead>使用<th>写单元格数据
• tbody，table body
• tfoot，table foot
• td，table data，<tbody>和<tfoot>使用<td>写单元格数据

<!-- 表格 -->
<table border="1">
    <!-- 表格标题 -->
    <caption>table title</caption>
    <!-- 表格头部 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>A</td>
            <td>male</td>
            <td>26</td>
        </tr>
    </tbody>
    <!--  表格脚注  -->
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>合计</td>
        </tr>
    </tfoot>
</table>

表格属性

<table border="边框（px）" width="" height="" cellspacing="单元格间距（px）"></table>

<thead height="" align="left | center | right" valgin="top | middle | bottom"></thead>

<tbody height="" align="left | center | right" valgin="top | middle | bottom"></tbody>

<tfoot height="" align="left | center | right" valgin="top | middle | bottom"></tfoot>

<tr height="" align="left | center | right" valgin="top | middle | bottom"></tr>

<th height="" width="" align="left | center | right" valgin="top | middle | bottom"></th>

<td height="" width="" align="left | center | right" valgin="top | middle | bottom"></td>

合并单元格（跨行跨列）

• colspan，跨列
• rowspan，跨行

<!-- 表格 -->
<table border="1" cellspacing="0">
    <!-- 表格标题 -->
    <caption>课程表</caption>
    <!-- 表格头部 -->
    <thead>
        <tr>
            <th>1-1（项目）</th>
            <th colspan="5">1-2（上课）</th>
            <th colspan="2">1-7（休息）</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>2-1（星期）</td>
            <td>2-2（星期一）</td>
            <td>2-3（星期二）</td>
            <td>2-4（星期三）</td>
            <td>2-5（星期四）</td>
            <td>2-6（星期五）</td>
            <td>2-7（星期六）</td>
            <td>2-8（星期日）</td>
        </tr>
        <tr>
            <td rowspan="4">3-1（上午）</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
            <td>3-5</td>
            <td>3-6</td>
            <td>3-7</td>
            <td rowspan="4">3-8（休息）</td>
        </tr>
        <tr>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
            <td>4-5</td>
            <td>4-6</td>
            <td>4-7</td>
        </tr>
        <tr>
            <td>5-2</td>
            <td>5-3</td>
            <td>5-4</td>
            <td>5-5</td>
            <td>5-6</td>
            <td>5-7</td>
        </tr>
        <tr>
            <td>6-2</td>
            <td>6-3</td>
            <td>6-4</td>
            <td>6-5</td>
            <td>6-6</td>
            <td>6-7</td>
        </tr>
        <tr>
            <td rowspan="2">7-1（下午）</td>
            <td>7-2</td>
            <td>7-3</td>
            <td>7-4</td>
            <td>7-5</td>
            <td>7-6</td>
            <td>7-7</td>
            <td rowspan="2">7-8（休息）</td>
        </tr>
        <tr>
            <td>8-2</td>
            <td>8-3</td>
            <td>8-4</td>
            <td>8-5</td>
            <td>8-6</td>
            <td>8-7</td>
        </tr>
    </tbody>
</table>

HTML表单

基本结构

<form action="http://" target="_blank" method="get">
  <input type="text" name="key值">
  <button></button>
</form>

表单控件

<form action="index.html?" method="get" target="_self">
  <!-- 隐藏域 -->
  <div>
    <input type="hidden" name="id" disabled>
  </div>

  <!-- 区域划分 -->
  <fieldset><legend>Main Information</legend>
    <!-- 文本框 -->
    <div>
      <label for="account">Account: </label>
      <input id="account" type="text" name="account" value="default value">
    </div>
    <!-- 密码框 -->
    <div>
      <label for="password">Password: </label>
      <input id="password" type="password" name="password">
    </div>
    <!-- 单选框 -->
    <div>
      <span>Gender: </span>
      <input type="radio" name="gender" value="male" checked>Male
      <input type="radio" name="gender" value="female">Female
    </div>
    <!-- 复选框 -->
    <div>
      <span>Hobby: </span>
      <input type="checkbox" name="hobby" value="smoking" checked>Smoking
      <input type="checkbox" name="hobby" value="drinking">Drinking
      <input type="checkbox" name="hobby" value="playing">Playing
    </div>
    
  </fieldset>
  <fieldset><legend>Other Information</legend>
    <!-- 文本域 -->
    <div>
      <span>Other: </span>
      <textarea name="other" cols="30" rows="5"></textarea>
    </div>
    <!-- 下拉选择框 -->
    <div>
      <span>Country: </span>
      <select name="country">
        <option value="ch" selected>China</option>
        <option value="en">UK</option>
      </select>
    </div>
  </fieldset>
  
  <!-- 按钮 -->
  <div>
    <!-- 提交按钮 -->
    <input type="submit" value="Confirm">
    <!-- 重置按钮-->
    <input type="reset" value="Reset">
    <!-- 普通按钮 -->
    <button type="button">Check</button>
  </div>
</form>

HTML框架标签

<!-- 利用 <iframe> 嵌入一个网页 -->
<!-- 利用 <iframe> 嵌入一个广告 -->
<!-- 利用 <iframe> 嵌入文件 -->
<iframe src="" width="" height="" frameborder=""></iframe>

HTML字符实体

<!-- no break space -->
&nbsp;
&#160;

<!-- <h1> -->
&lt;h1&gt;

<!-- &nbsp -->
&amp;nbsp;

<!-- ¥99 -->
&yen;99

<!-- ©️版权所有 -->
&copy;版权所有

<!-- ✖️ -->
&times;

<!-- ➗ -->
&divide;

HTML全局属性

<div id="" class="" style="" title=""></div>

HTML元信息meta

<!-- 兼容性设置，当使用 ie 浏览器时，以 edge 浏览器渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- 适配移动端的视口配置 -->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- 网页关键字（SEO） -->
<meta name="keyword" content="k1,k2,k3,...">

<!-- 网页描述信息（SEO） -->
<meta name="description" content="descrption...">

<!-- 爬虫设置 -->
<meta name="robots" content="">

<!-- 自动刷新（10s后），并跳转地址（可选） -->
<meta http-equiv="refresh" content="10;url=http://">