HTML基础知识(表格、表单)HTML—-第二不好笔记(第四天)

6、表格

1.列表

列表的花色要发生三种:无序列表,有序列表,和由定义列表

1.1无序列表(使用比较多)

无序列表的独列表中无各个级别之分,是一视同仁的干,其语法结构为:

图片 1

无序列表常被用来和超链接a一起打导航漫长,新闻等;

1.2 有序列表ol

以不变应万变列表中的独列表是本一定的相继进行排的,其语法格式如下:

图片 2

不变列表的语法结构

1.3自定义列表

从今定义列表常用于对术语或者名词进行诠释和讲述,定义列表的列表项前莫任何项目标志,其语法格式如下:

图片 3

打定义列表

横流:自定义列表主要用以网页底部有底统筹。

l  概念:表格一定有所行和列

2、表格table

于网页遭到想只要创建表格,就用使用表格相关的签,创建表格的基本语法格式如下:

图片 4

2.1<table></table>用于创造一个表

<tr></tr>用于定义表格中之均等行,必须嵌套在<table></table>标签中,在<table></table>标签中发生几对<tr></tr>就代表该表来几执行。

<td></td>用于定义表格中的无非首位只,必须嵌套在<tr></tr>标签中,一对<tr></tr>中包含几针对性<td></td>就表示该行中发出几乎列。

2.2表的属性

表主要含有以下几个属性:

(1)边框(border):有宽,颜色等属于性值;

(2)单元格及单元格边框之间的离:cellspacing,默认的也罢2像素;

(3)单元格内容与单元格边框之间的相距:cellpadding,默认为1像素;

(4)表格的幅度:width

(5)表格的可观:Height

(6)表格中文本之对齐方式:align 其属性值有:left,center,right 

2.3表头标签

表头一般位于表格的首先推行抑则第一排,其文本加粗居中,设置表头只待将表头的符号<th></th>替代相应的就元格标记<td></td>.

2.4报表结构

当运用表格进行布局时,可以拿表格划分也脑部,主体及底部,具体组织如下:

<thead></thead>用于定义表格的脑壳,必须放在<table></table>标签中,一般包含网页logo和导航等首信息。

<tbody></tbody>用于定于表格的主体,在<table></table>标签中在thead标签下。

<tfoot></tfoot>用于定义表格的底层信息,在<table>中居tbody签下。

2.5表格的题

<caption>表格标题</caption>用于定义表格的题,紧跟table标签下,在表之上居中显,一般情形下一个表格只同意写一个标题。

注:使用<thead><tbody><tfoot>,使浏览器会独立为表格表头和表格页脚的表格主体滚动。当包含多独页面的报表让打印,表格的表头和页脚可于打印在蕴藏表格数据的各级张页面上。

3、表单标签

一个一体化的表单通常由:表单控件(表单元素)、提示信息和阐明单域3单有;

表单控件:包含了切实可行的表单功能件。如大的单文本输入框、密码输入框、复选框、提交按钮。重置按钮等。

提示信息:一个表单中司空见惯还亟需包含有说明性的仿,提示用户进行填写跟操作。

申单域:用来包容有表单控件和提示信息,可以由此她定义处理变淡数据所用程序的URL地址,以及数额交到至服务前之办法,如果不定义表单域,表单中的数量就是无法传送至后台服务器。

广大的表单标签如下所示:

3.1input 控件

input常用之性能有:type,name,value,size,checked,maxlength等。

不等之type值对应的input的效益各不相同。

type类型的陈以及说明:

(1)type=”text”单行文本输入框,如我辈周边的用户称输入框

(2)type=”password”密码输入框

(3)type=”radio”单选框,若使设置单选框,这要装同样的name名

(4)type=”checkbox”复选框,一组选项的name须相同,这是就入选项checked=”checked”

(5)type=”button”普通按钮

(6)type=”submit”提交按钮

(7)type=”reset”重置按钮

(8)type=”image”图像形式的付按钮

(9)type=”file”文件域

input 控件的其它性能:

name:控件的称号,由用户自己定义

value:input控件被之默认文本值,由用户从定义

size:input控件在页面中显得的增幅,正整数

checked:checked=“checked”用于定义选择控件默认为入选的起

maxlength:定义控件允许输入的最多字符数

<table>

<caption>表格的标题</caption>

<thead>               

<th>                  —<th>元素:表示表格中的表头

<td></td>         —<tr>元素:表示表格中之履

</th>                 —<td>元素:表示表格中的仅元格

</thead>

<tbody>              

<tr>             
    —<thead>:包含<th>表头,显示在表的最好前头

<td></td>         —<tbody>:表格中的数量内容

</tr>                
—<tfoot>:表格的表尾,显示在表的最后

</tbody>               

<tfoot>                     

<tr>                    

<td></td>              —<td colspan=”数字”> 
表示过几排

</tr>                  —<td rowspan =” “>  表示过几履

</tfoot>

</table>

图片 5l  属性:  <table 属性: 
<table border=”设置表格的边框(双边框)”  width=”设置表格的增幅” >

l  页面布局

 图片 6

图片 7

图片 8

                                     使用表格概念实现页面布局

 图片 9

7、表单

ü <form>元素 – 表单元素

图:将表单内数据开展付出(服务器端)

特性:<form action=”设置当前表单提交的地点(服务器端)”>

<form method=”设置当前表单提交的方式”>

就:实现提交功能,需配合<input type=”submit”>

ü <input>元素 – 输入框

  • 输入框:

文件输入框1:<input type=”text” disabled>

    文本输入框2:<input type=”text” readonly>

    文本输入框3:<input type=”text”>

    密码输入框3:<input type=”password”>  
默认显示的功能就算是真心的接触

    email输入框3:<input type=”email”>     email等品种是 HTML5
新增项目

  • 单选或多选框:

<input type=”radio” name=”1″ checked>abc  checked属性
设置当前选取被选中

      <input type=”checkbox” name=”2″>abc

【设置同一之name属性值为同样组,才不过单选或多选择,
否则单选框中擅自选取项都只是挑选】

  • 按钮:value属性-设置当前按钮的名称

<input type=”button” value=”登录按钮” > 
<button>普通按钮</button>

<input type=”reset” value=”重置按钮” >

<input type=”submit” value=”提交按钮” >

  • 文件域:<input type=”file” >  

意: 选择地面文件;在其实支付被,用于文书及污染

流动: 默认情况下,每次只能挑一个文件

     设置当前之文件域同时选择多个公文: <input type=”file”
multiple=”multiple”>

     实现公文及传功能:<form enctype=”multipart/form-data”>

  • 隐藏域:<input type=”hidden”>

用意:存储一些不希望于用户观看的情节(数据);不会见显得在浏览器页面被  

  • 图表:  <input type=”image” src=”111.png”>    —
    HTML5新增加项目

² 表单提交(服务器密码)

表单内元素必须定义name属性值;且要配合提交按钮使用

method: 设置当前表单的交由方式

²  get方式

格式:请求地址 ? 元素的name属性值 = 值 & 元素的name属性值 = 值

特点:数据传不足够安全,即明码(未加密);对数据内容的分寸会限制

²  post方式

措施优化 GET 方式; 在骨子里开发中,一般采取 POST 方式

²  下拉列表

流淌:<select>在form外,则无从发送至服务器

(1)单选列表

<select>         

        <option>     </option>          —
一般默认第一个<option>内容选择

<option selected>   </option>     — 属性selected
表示目前之选料项为入选

</select>

(2)多选列表

<select multiple>      —默认显示效果,至少显示四只选项

<select multiple  size=”数字”>                — size属性 –
设置默认显示的个数

                       

 

相关文章

admin

网站地图xml地图