关闭

(9)HTML5-表格与窗体

标签: html5布局html
107人阅读 评论(0) 收藏 举报
分类:

在纯粹只有HTML5语句的时候,可以简单地使用<table>,<th>,<tr>,<td>来构造表格的结构。

<table>标签:表示整个表格的范围

<tr>标签:表示表格中一行的单元格

<th>标签:表示表格中的一列的单元格

<td>标签:表示表格中的一个基本单元格


HTML文件


<table border="1">
    <tr>
        <th>科目</th>
        <th>小明</th>
        <th>小花</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>55分</td>
        <td>100分</td>
    </tr>
     <tr>
        <td>英语</td>
        <td>30分</td>
        <td>92分</td>
    </tr>
     <tr>
        <td>数学</td>
        <td>99分</td>
        <td>10分</td>
    </tr>
</table>

加入CSS控制表格

运用我们在前面所学过的图文属性,为表格加上不同的装扮。



窗体

窗体是网页中频繁使用的互动元素,主要担任搜集用户信息并存储至后台数据库的角色。在窗体中会会使用到HTML标签包括<form>,<input>,<select>,<textarea>等。

<form>标签:标记窗口的结构范围

<input>标签:调用一个输入字段

<select>标签:调用一个下拉式选单字段

<textarea>标签:调用一个多行输入的文字栏

HTML文件


<form method="post">
    <p>姓名:<br><input type="text" name="name" id="name"></p>
    <p>居住城市:<br>
    <select name="city" id="city">
        <option value="Taipei">台北市</option>
        <option value="Taichung">台中市</option>
        <option value="Kaohsiung">高雄市</option>
    </select>
    </p>
    <p>自我介绍:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea>></p>
    <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
    </p>
</form>

加入CSS样式后:


 <style type="text/css">
        form{
            border:5px solid #696969;
            width:300px;
            padding:3px 6px 3px 6px;
            margin:0px;
            font:16px Arial;
        }
        select,input,textarea{
            color:#4682B4;
            background-color:#00BFFF;
            border:1px solid #4682B4;
        }
        select {
            width:80px;
        }
        textarea{
            width:200px;
            height:40px;
        }
    </style>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:235751次
    • 积分:10262
    • 等级:
    • 排名:第1642名
    • 原创:777篇
    • 转载:186篇
    • 译文:1篇
    • 评论:37条
    博客专栏