manbetx官方网站

HTML基础知识(表格、表单)HTML—-第二次笔记(第四上)

十月 1st, 2018  |  manbetx官方网站

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

                       

 

相关文章

标签:,

Your Comments

近期评论

    功能


    网站地图xml地图