HTML基础-------HTML标签(3)

HTML标签(3)

表格

作用:制作一个表格

属性:

HTML基础-------HTML标签(3)

标签;table>tr>td(或者th)

语义; table:一个表格

tr:一行

td:一个单元格

th:单元格的表头

caption:表格的名字

代码实现一个表格:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表格练习</title>
    <style type="text/css">
        tr,th,td{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1" >
           <tr>
               <th>1</th>
               <th>2</th>
               <th>3</th>
               <th>4</th>
               <th>5</th>
           </tr>
           <tr>
               <td>6</td>
               <td>7</td>
               <td>8</td>
               <td>9</td>
               <td>10</td>                               
           </tr>
                      <tr>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>                               
           </tr>
                      <tr>
               <td>16</td>
               <td>17</td>
               <td>18</td>
               <td>19</td>
               <td>20</td>                               
           </tr>
    </table>
</body>
</html>

View Code

效果图

HTML基础-------HTML标签(3)

代码实现合并一个单元格(目标图如下)

HTML基础-------HTML标签(3)

我心中的目标图是如上这样的,但是我发现仅通过tr,td,th这些工具有些事是无法做到的,并且我出于初学阶段,可能还有其他方法去解决我的问题吧。

问题如下:可以看出我是准备把一行的长度设置为5的,但是却无法完成,结果图如下,大家可以对比一下看

HTML基础-------HTML标签(3)

构造出来的骨架一行只有四格,我的代码如下,我的代码里是想要构造出一行有5格的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表格练习</title>
    <style type="text/css">
        tr,th,td{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1" >
           <tr>
               <th rowspan="2">1</th>
               <th>2</th>
               <th rowspan="2" colspan="2">3</th>
               <th>4</th>        
           </tr>
           <tr>
               <th>5</th>
               <th>6</th>                           
           </tr>
            <tr>
               <td>7</td>
               <td>8</td>
               <td>9</td>
               <td colspan="2" rowspan="2">10</td>                           
           </tr>
               <tr>
               <td>11</td>
               <td colspan="2">12</td>     
           </tr>
    </table>
</body>
</html>

View Code

所以我在想是不是我需要一个完整的5行来撑起整个结构,所以就试了一下,好像还真是这样,效果图与代码如下：

HTML基础-------HTML标签(3)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表格1</title>
    <style type="text/css">
        tr,td,th{
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1" >
        <tr>
            <th rowspan="2">1</th>
            <th>2</th>
            <th  colspan="2" rowspan="2">3</th>
            <th>4</th>
        </tr>
         <tr>
             <th>5</th>
             <th>6</th>
         </tr>
             <td>7</td>
             <td>8</td>
             <td>9</td>
             <td>10</td>
             <td>11</td>
         </tr>
         <tr>
             <td>12</td>
             <td>13</td>
             <td>14</td>
             <td rowspan="2" colspan="2">15</td>
         </tr>
             <td>16</td>
             <td colspan="2">17</td>
         </tr>
    </table>
</body>
</html>

View Code

感觉这样想是对的,因为本来每一个单元格的长短是随着里面内容的多少在变化的。

HTML基础-------HTML标签(3)

表单元素

表单这里的内容较多,暂时只学习了最基础的,所以可能会缺一些,慢慢会补充的,先记自己已经学到的吧。

表单：网页上可以提供用户输入和选择的控件。

form:所有的表单元素写在form标签内部.不是一个结构标签而是一个功能标签

功能:规定我们提交的数据发送到哪里,发送的方法是哪种。

文本框

作用:允许用户输入文本。

标签: input

使用方式:通过属性type所对应的属性值的不同来实现不同功能。

HTML基础-------HTML标签(3)

用代码来完成下列效果图

HTML基础-------HTML标签(3)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表单元素</title>
</head>
<body>
    <form >
        <p>*手机号码<input type="text" />@163.com</p>
      <p>*图片验证码<input type="text" /><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=496740924,3861938915&fm=26&gp=0.jpg" width="70px"/></p>
      <p><input type="button" value="免费领取验证码" /></p>
      <p>*短信验证码<input type="text" /></p>
      <p>*密码<input type="password" /></p>
      <p>*确认密码<input type="password" /></p>
      <p><input type="checkbox" id="1"/><label for="1">同意服务条款和用户须知,隐私权相关政策</label></p>
      <!--上面的labor  for是用来绑定标签的一个方法,可以解决用户点不到小方框,这样用户点击字也行-->
      <p><input type="submit"  value="确认注册"/></p>
    </form>
</body>
</html>

View Code

代码实现下列效果图

HTML基础-------HTML标签(3)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表单元素2</title>
</head>
<body>
    <form >
        <p>最喜欢的水果</p>
        <p><input type="radio"/  name="1">1.苹果</p>
        <p><input type="radio"/ name="1">1.西瓜</p>
        <p><input type="radio"/ name="1">1.香蕉</p>
        <!--这里只有把名字全设置成一样的才能实现单选-->
    </form>
</body>
</html>

View Code

文本域

标签:textarea

属性：rows控制文本框高度 cols控制文本长度

下拉菜单

是组标签,必须同时出现,有嵌套关系

select>option

用代码实现下列效果图

HTML基础-------HTML标签(3)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>表单元素3</title>
</head>
<body>
    <form >
        <p>您对于我们公司的看法是：</p>
        <p><textarea name="" rows="10" cols="30"></textarea></p>
        <p>
            您的学历是
            <select >
                <option >大学</option>
                <option >高中</option>
                <option >初中</option>
                <option >小学</option>
                <option >幼儿园</option>
            </select>
        </p>
    </form>
</body>
</html>

View Code

HTML杂项

注释

感觉这玩意在任何语言中都存在,格式()

字符实体

有一些特殊符号,并不能在文本内容中直接写。

HTML提供了一套书写特殊字符的替代符号,就是字符实体,或叫转义字符。

常用:

HTML基础-------HTML标签(3)

废弃标签

一些已经废弃,但还依旧被程序员使用的标签。

HTML基础-------HTML标签(3)

相关推荐