标签（二）

2019-11-13 本文已影响0人水之飞亦

1.表格

table：表格
tr：table row，行
td: table dock，单元格

嵌套关系为table>tr>td，快捷键table>tr>td*3，加tab键，创建一个一行三列的表。 table>(tr>td*3)*3，加tab键，创建一个三行三列的表格。

  <!-- 表格 -->
  <table border="1">
      <tr>
          <td>第一行第一列</td>
          <td>第一行第二列</td>
          <td>第一行第三列</td>
      </tr>
      <tr>
          <td>第二行第一列</td>
          <td>第二行第二列</td>
          <td>第二行第三列</td>
      </tr>
      <tr>
          <td>第三行第一列</td>
          <td>第三行第二列</td>
          <td>第三行第三列</td>
      </tr>
  </table>

三行三列表格

th: table header 表头，将第一行的td换成th即可，当然，用快捷键也是可以的，但是要理解他们的层级：table>((tr>th*3)+(tr>td*3)*3)，加tab键

  <table border="1">
      <tr>
          <th>一</th>
          <th>二</th>
          <th>三</th>
      </tr>
      <tr>
          <td>第一行第一列</td>
          <td>第一行第二列</td>
          <td>第一行第三列</td>
      </tr>
      <tr>
          <td>第二行第一列</td>
          <td>第二行第二列</td>
          <td>第二行第三列</td>
      </tr>
      <tr>
          <td>第三行第一列</td>
          <td>第三行第二列</td>
          <td>第三行第三列</td>
      </tr>
  </table>

有表头的表格

1.合并单元格

rowspan：合并行
colspan：合并列

属性值为数字，是几表示合并几个单元格
如下图：

image.png

布局方面，按照行从上到下，列从左到右的顺序来布局，已经设置过的自动跳过，比如1，既属于第一行，也占据了第二行，所以，第一行设置了之后，第二行再设置时，跳过，直接设置5即可，其他类似。

1.先设置4行：table>tr*4

    <table>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </table>

2.设置第一行，有4列：td*4，设置1，2，3，4。因为第一行第一列与二行第一列合并了两行，所以需要添加rowspan="2"

    <table>
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </table>

2.设置第二行，也有4列（第一列在第一行时已经设置过了）：td*4，设置5，6，7，8

        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>

3.设置第三行，有3列（其中两列是合并后的）：td*3，设置9，10，11

        <tr>
            <td>9</td>
            <td colspan="3">10</td>
            <td>11</td>
        </tr>

4.设置第四行，有2列（其中两列是合并后的）：td*3，设置12，13

        <tr>
            <td colspan="2">12</td>
            <td colspan="3">13</td>
        </tr>

5.最后，为了好区分，我们加上边框，并设置单元格宽度

<head>
    <style type="text/css">
        th,td{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td>
            <td colspan="3">10</td>
            <td>11</td>
        </tr>
        <tr>
            <td colspan="2">12</td>
            <td colspan="3">13</td>
        </tr>
    </table>
</body>

实际效果

2.表格分区

标题：caption
表头：thread
主体：tbody

大概结构如下：

    <table>
        <caption>标题</caption>
        <thead>
            tr>th
        </thead>
        <tbody>
            tr>td
        </tbody>
    </table>

我们把上文的表格改造一下：

    <!-- 表格分区 -->
    <table border="1">
        <caption>标题</caption>
        <thead>
            <tr>
                <th>一</th>
                <th>二</th>
                <th>三</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
            </tr>
            <tr>
                <td>第二行第一列</td>
                <td>第二行第二列</td>
                <td>第二行第三列</td>
            </tr>
            <tr>
                <td>第三行第一列</td>
                <td>第三行第二列</td>
                <td>第三行第三列</td>
            </tr>
        </tbody>
    </table>

效果图

3.表格综合实践案例

如下图，是我写的一个简单项目评估：

1.有标题：VIB项目评估
2.有表头：模块，功能，时间，备注
3.有单元格的合并
4.文字的居中先不用考虑

项目评估

代码实例：

  <table border="1">
      <caption>VIB项目评估</caption>
      <thead>
          <tr>
              <th>模块</th>
              <th colspan="2">功能</th>
              <th>时间</th>
              <th>备注</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td rowspan="7">首页</td>
              <td>首页</td>
              <td></td>
              <td>0.5</td>
              <td></td>
          </tr>
          <tr>
              <td rowspan="6">资产</td>
              <td>资产</td>
              <td>1</td>
              <td>待确认</td>
          </tr>
          <tr>
              <td>兑换</td>
              <td>0.5</td>
              <td></td>
          </tr>
          <tr>
              <td>兑换记录</td>
              <td>0.25</td>
              <td></td>
          </tr>
          <tr>
              <td>记录详情</td>
              <td>0.25</td>
              <td></td>
          </tr>
          <tr>
              <td>转账</td>
              <td>0.25</td>
              <td></td>
          </tr>
          <tr>
              <td>收款</td>
              <td>0.25</td>
              <td></td>
          </tr>
          <tr>
              <td rowspan="3">登录注册</td>
              <td>注册</td>
              <td></td>
              <td>0.5</td>
              <td>待沟通</td>
          </tr>
          <tr>
              <td>登录</td>
              <td></td>
              <td>0.5</td>
              <td></td>
          </tr>
          <tr>
              <td>忘记密码</td>
              <td></td>
              <td>0.25</td>
              <td></td>
          </tr>
      </tbody>
  </table>

效果

2.表单

网页上供用户输入和选择的一些控件

1.form

<form></form>
我们所有表达元素都需要写在form标签内部，不是一个结构性标签，而是一个功能性标签。
规定我们提交的数据发送到哪里，发送的方法是哪种
method：post，get...
action：提交的位置

2.文本框

<input type="" name=""> 输入
type：根据不同的type的值的不同，input标签代表的不同的表单元素
value：默认文字

<1>普通文本type值为text

<input type="text" value="请输入内容">

<2>密码框为password

<input type="password">

<3> 按钮

按钮有三种：

普通type值：button
<input type="button" value="普通按钮">
提交：submit
<input type="reset" value="重置">
重置：reset
<input type="submit" value="提交">

<4> 单选框

type值为radio：收音机，同时只能选一个
需要设置name属性为相同，name值不一样，不能起到单选的作用
<input type="radio" name="sex">男

<5> 多选框

type值为checkbox：同一组内进行多选，分组不强求，但是尽量分组
<input type="checkbox" name="skill">Swift

<6> 文本域

可以输入多行文本

rows：多少行
cols：多少字节
<textarea rows="5" cols="30">多行内容</textarea>

<7> 下拉菜单

是一组标签，必须同时出现，为嵌套关系，select>option*5

select：选择
option：选项
<select name="" id=""><option value=""></option></select>

完整事例

    <h2>表单</h2>
  
    <!-- 表单 -->
    <form method="post">

        <p>
            普通文本框：
            <input type="text" value="请输入内容">
        </p>
        <p>
            密码框：
            <input type="password">
        </p>
        <p>
            性别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
            <input type="radio" name="sex">保密
        </p>

        <p>
            技能：
            <input type="checkbox" name="skill">Objective-C
            <input type="checkbox" name="skill">Swift
            <input type="checkbox" name="skill">HTML
            <input type="checkbox" name="skill">其他
        </p>
        <p>
            简介：
            <textarea rows="5" cols="30">秋天来临了天空像一块覆盖大地的蓝宝石。村外那个小池塘睁着碧澄澄的眼睛，凝望着这美好的天色。一对小白鹅侧着脑袋欣赏自己映在水里的影子。山谷里枫树的叶子，不知是否喝了过量的酒，红的像一团火似的。村前村后的稻子，低着头弯着腰，在秋风中默默地等待着人们去收割，半空中，排着“人”字形的雁群，高兴的唱着歌，告别人们，向天边慢慢飞去……</textarea>
        </p>

        <p>
            简介：
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option>其他</option>
            </select>
        </p>

        <p>
            <input type="button" value="普通按钮">
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </p>
    </form>

效果图

3.其他

1.注释

<!-- 其他 -->

快捷键：command + /

1.字符实体

一些特殊符号，比如标签，想要在文本中显示，需要借助转义字符，即字符实体
例如：

小于<: less than。<
大于>: greater than。>

空格 : non-breaking space。&nbsp

<p>显示一个p标签：&lt;p&gt;</p>
<p>中间显示多个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结尾</p>

字符实体

1.废弃标签

也不是完全废弃，还可以使用，但是已有可替代的

<font>文字</font>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<strong>strong标签,加强，也有加粗效果</strong>
<em>em标签，加强，也有倾斜效果</em>
<br>换行
<hr>水平分割线

废弃标签效果