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属性 –
设置默认显示的个数

                       

 

相关文章