(9)HTML5-表格与窗体

原创 2016年08月30日 17:47:23

在纯粹只有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>



版权声明:本文为博主原创文章,转载必须声明出处,thank。

相关文章推荐

HTML5_样式,链接和表格

  • 2016-02-03 21:22
  • 19KB
  • 下载

HTML5 移动开发 -- Canvas 9.4 表格 , 折线图

表格                         (function (){ &#...

HTML5基础(一)——元素、属性、格式化、样式、链接、表格、列表、块、布局

点击查看原文开始学习html5,自己记录学习笔记,基本上是代码: 开发工具:Intellij IDEA或者HBuilder 首先学习的自然是html标签语言,其实w3cschool中都有,我上传了...

2-HTML5样式、链接和表格

HTML样式 HTML 链接 表格 HTML样式1, 标签: <style>: 样式定义 <link>: 资源引用2, 属性: rel=”stylesheet”:外部样式表的引用 type =”t...

HTML5之表格

1:表格的描述(summary属性)       表格使用summary属性来为表格的目的和结构提供一个概要说明,这个概要说明一般用于可视化浏览器,如语音合成器和布莱耶盲文。       ...

基于bootgrid,利用HTML5拖拽实现表格列互换并添加至localStorage

基于bootgrid,利用HTML5拖拽实现表格列互换,支持换页和刷新数据,首先找到用bootgrid加载表格数据的方法,类似下面的 function getList() { $("#grid")...

HTML5表格和布局

1.雪碧图,精灵图 .div1,.div2{ border: 1px soli...

扩展HT for Web之HTML5表格组件的Renderer和Editor

HT for Web的HTML5表格组件具有很强的拓展性,可以自定义Renderer和Editor,为表格组件的展示及编辑提供多样化。

HTML5移动开发(8)——链接,图片,表格,框架

一、HTML是什么? HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音… HTML只能做静态网...

HTML5:表格

表格的作用是显示二维数据,在HTML5中不再允许用表格控制页面内容的布局,而是采用新增的CSS表格特性(这里不涉及CSS,将在后面介绍)。下面主要介绍用于制作表格的HTML元素。构建表格表格的基本元素...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)