意味着表格中的行,+tab  html5的标签结构

6、表格

 

 

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

1 快捷格局:html:xt +tab   过渡XHTML

1 急迅方式:html:xt +tab   过渡XHTML

注:使用<thead><tbody><tfoot>,使浏览器能独立于表格表头和表格页脚的表格主体滚动。当包蕴八个页面包车型大巴报表被打字与印刷,表格的表头和页脚可被打字与印刷在蕴藏表格数据的每张页面上。

      html:xs+tab  严格XHTML

      html:xs+tab  严格XHTML

<table>

      !+tab  html5的价签结构

      !+tab  html5的标签结构

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

2.Charset   编码

2.Charset   编码

<thead>               

<meta
charset=”UTF-8″>

<meta
charset=”UTF-8″>

<th>                  —<th>成分:表示表格中的表头

Ascll

Ascll

<td></td>         —<tr>成分:表示表格中的行

图片 1

图片 2

</th>                 —<td>成分:表示表格中的单元格

Ansi

Ansi

</thead>

Unicode   

Unicode   

<tbody>              

Gbk 包蕴全部华语字符  繁体

Gbk 包罗全部中文字符  繁体

<tr>             
    —<thead>:包括<th>表头,突显在表格的最前边

Gb2312 轻便中文

Gb2312 轻易汉语

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

Big5  繁体普通话

Big5  繁体中文

</tr>                
—<tfoot>:表格的表尾,呈现在报表的末段

Utf-8   通用字符集
包涵全球全部国家要求动用的字符

Utf-8   通用字符集
包罗环球享有国家需求采取的字符

</tbody>               

2 .1、Meta标签介绍

meta 的性子有二种:name和http-
equiv

2.1.1 name

图片 3

内部的质量表达如下:
  设定为all:文件将被搜寻,且页面上的链接能够被询问;
  设定为none:文件将不被搜寻,且页面上的链接不能够被询问;
  设定为index:文件将被搜寻;
  设定为follow:页面上的链接能够被询问;
  设定为noindex:文件将不被寻觅,但页面上的链接能够被询问;
  设定为nofollow:文件将不被搜索,页面上的链接能够被询问

 2.1.2 网页重定向

                   <!– 页面5秒后刷新跳转Nokia官方网址 –>
     <meta http-equiv=”refresh”
content=”5;http://www.mi.cn"&gt;

2.2
、link标签: 
 

   1: 
引用外界css
   2:   引用title图片  (icon)    
例如: <link  rel=”icon”  href=”1.icon”>

  链接外界样式表

 图片 4

 设置icon图标

2 .1、Meta标签介绍

meta 的习性有三种:name和http-
equiv

2.1.1 name

图片 5

内部的质量表达如下:
  设定为all:文件将被搜索,且页面上的链接可以被询问;
  设定为none:文件将不被找寻,且页面上的链接不能被询问;
  设定为index:文件将被搜寻;
  设定为follow:页面上的链接能够被询问;
  设定为noindex:文件将不被搜寻,但页面上的链接能够被询问;
  设定为nofollow:文件将不被寻觅,页面上的链接能够被询问

 2.1.2 网页重定向

                   <!– 页面5秒后刷新跳转小米官方网址 –>
     <meta http-equiv=”refresh”
content=”5;http://www.mi.cn"&gt;

2.2
、link标签: 
 

   1: 
引用外界css
   2:   引用title图片  (icon)    
例如: <link  rel=”icon”  href=”1.icon”>

  链接外部样式表

 图片 6

 设置icon图标

<tfoot>                     

 图片 7

 图片 8

<tr>                    

3、 表格

 

<table>
   表格

  
<tr>       行

     
<td></td> 列

     
<td></td>

   
</tr>

</table>

图片 9

报表的属性:填充属性和间隔属性

图片 10

报表中的属性

图片 11

3.1表格的科班组织

  在选择表格进行布局时,能够将表格划分为尾部、主体和页脚

图片 12

<thead></thead>:用于定义表格的头顶,必须放在<table></table>标记中,一般包蕴网页的logo和导航等尾部消息。

<tbody></tbody>:用于定义表格的主导,位于<table></table>标志中<thead></thead>标识之后,一般包涵网页中除尾部和尾巴部分之外的此外内容。

<tfoot></ tfoot
>:用于定义表格的页脚,位于<table></table>标识中<tbody></tbody>标识之后,一般包括网页尾巴部分的厂家音信等。

 3.3 表头和单元格合併

**<caption></caption>
成分定义表格标题,caption 标签必须紧随
table
标签之后。您不得不对种种表格定义一个标题。经常那些标题会被居中于表格之上。**

图片 13

3.4报表标题、边框颜色、内容垂直对齐

◆表格标题 <th></th>用法和td同样  题指标文字自动加粗水平居中对齐

◆边框颜色  bordercolor =“ ”

◆内容垂直对齐情势  <td valign=“top”>
账上</td>  

      Valign=”top   |  middle   |  bottom”

 

PS:报表细线  table 背景象    td 
背景紫红

3、 表格

 

<table>
   表格

  
<tr>       行

     
<td></td> 列

     
<td></td>

   
</tr>

</table>

图片 14

报表的性质:填充属性和间隔属性

图片 15

报表中的属性

图片 16

3.1表格的正儿八经组织

  在选取表格举办布局时,能够将表格划分为底部、主体和页脚

图片 17

<thead></thead>:用于定义表格的头顶,必须放在<table></table>标识中,一般包蕴网页的logo和导航等尾部新闻。

<tbody></tbody>:用于定义表格的本位,位于<table></table>标志中<thead></thead>标志之后,一般包涵网页中除底部和尾巴部分之外的别的内容。

<tfoot></ tfoot
>:用于定义表格的页脚,位于<table></table>标识中<tbody></tbody>标识之后,一般蕴涵网页底部的厂家音讯等。

 3.3 表头和单元格合併

**<caption></caption>
成分定义表格题目,caption 标签必须紧随
table
标签之后。您不得不对每一个表格定义三个标题。常常那些标题会被居中于表格之上。**

图片 18

3.4报表标题、边框颜色、内容垂直对齐

◆表格标题 <th></th>用法和td同样  题指标文字自动加粗水平居中对齐

◆边框颜色  bordercolor =“ ”

◆内容垂直对齐形式  <td valign=“top”>
账上</td>  

      Valign=”top   |  middle   |  bottom”

 

PS:报表细线  table 背景象    td 
背景浅蛋黄

<td></td>              —<td colspan=”数字”> 
表示跨几列

4.表单

   表单的成效是采撷新闻

表单的咬合

 

◆提示消息

    三个表单中国和东瀛常还要求包涵部分表明性的文字,提醒用户实行填写和操作,如用户名、密码等

◆表单控件

        饱含了切实的表单作用项,如单行文本输入框、密码输入框、复选框、提交开关、重新设置开关等。

◆表单域

    他一定于一个容器,用来包容全数的表单控件和提醒新闻,能够经过他定义管理表单数据所用程序的url地址,以及数额提交到服务器的不二诀要。假设不定义表单域,表单中的数据就不能够传送到后台服务器。

    
<form name=”form_name” action=”1.php”
method=”post”>

 

品质:action:管理消息

         Method=”get | post”   

                        Get通过地点栏提供(传输)音信,安全性差。

                       Post 通过1.php来拍卖消息,安全性高。

 

◆input 控件

    
用户名:<input type=”text” maxlength=”8″ disabled=”disabled”
name=”username”  value=”study”>

    
<input
/>标识为单标志,type属性为其最宗旨的质量,其取值有多样,用于钦命不一致的控件类型。除了type属性之外,<input
/>标识还可以定义繁多别样的习性,其常用属性如下表所示

图片 19

 

◆下拉列表

<select>

  <option>下拉列表选项</option>

  <option>下拉列表选项</option>

  ……

</select>

在HTML中,可感到<select>和<option>标志定义属性,以改换下拉菜单的外观突显效果,具体如下表所示

图片 20

 

<optgroup></optgroup>
 
 对下拉列表举办分组。 
Label=””  分组名称。

多选框:

图片 21

Checked=”checked” 设置默认选中项


textarea控件

 
假设急需输入大批量的音讯,就须求用到<textarea></textarea>标志。通过textarea控件能够轻巧地开创多行文本输入框

图片 22

Cols:调整输入字符的长度,也就是宽度 
Rows:决定输入的行数,也正是中度

◆表单消息分组

图片 23

<田野(field)set></田野同志set>    对表单新闻分组

<legend></legend>      表单消息分组名称

 

html5补给表单控件

图片 24

 

4.表单

   表单的作用是搜聚音信

表单的三结合

 

◆提醒新闻

    叁个表单中一般还供给包罗部分表明性的文字,提醒用户进行填写和操作,如用户名、密码等

◆表单控件

        带有了现实的表单功用项,如单行文本输入框、密码输入框、复选框、提交按键、重新恢复设置开关等。

◆表单域

    他一定于叁个容器,用来包容全体的表单控件和提示音讯,能够通过她定义管理表单数据所用程序的url地址,以及数据交由到服务器的法门。假如不定义表单域,表单中的数据就无法传送到后台服务器。

    
<form name=”form_name” action=”1.php”
method=”post”>

 

属性:action:管理消息

         Method=”get | post”   

                        Get通过地点栏提供(传输)消息,安全性差。

                       Post 通过1.php来管理信息,安全性高。

 

◆input 控件

    
用户名:<input type=”text” maxlength=”8″ disabled=”disabled”
name=”username”  value=”study”>

    
<input
/>标志为单标识,type属性为其最主旨的天性,其取值有三种,用于钦命差别的控件类型。除了type属性之外,<input
/>标识还足以定义好些个别的的质量,其常用属性如下表所示

图片 25

 

◆下拉列表

<select>

  <option>下拉列表选项</option>

  <option>下拉列表选项</option>

  ……

</select>

在HTML中,可以为<select>和<option>标识定义属性,以改变下拉菜单的外观展现效果,具体如下表所示

图片 26

 

<optgroup></optgroup>
 
 对下拉列表举行分组。 
Label=””  分组名称。

多选框:

图片 27

Checked=”checked” 设置暗中同意选中项


textarea控件

 
假如急需输入大量的音讯,就须求用到<textarea></textarea>标识。通过textarea控件能够轻巧地创造多行文本输入框

图片 28

Cols:决定输入字符的长短,相当于宽度 
Rows:垄断输入的行数,也正是中度

◆表单消息分组

图片 29

<田野先生set></田野先生set>    对表单消息分组

<legend></legend>      表单音讯分组名称

 

html5互补表单控件

图片 30

 

</tr>                  —<td rowspan =” “>  表示跨几行

5.标签语义化

-标签语义化概念:依据故事情节的结构化(内容语义化),选取适当的竹签(代码语义化)

-标签语义化意义:    1:网页结构合理          

          2:有利于seo:和探究引擎创建优质关系,有了地利人和的组织和语义你的网页内容自然轻便被搜寻引擎抓取;
         

          3:方便别的设施深入分析(如荧屏阅读器、盲人阅读器、移动设备)
         

            4:便于团队开拓和掩护

标签语义化(注意事项)

1:尽也许少的选择万般无奈义的竹签div和span;

2:在语义不认定时,不仅可以够选用div或许p时,尽量用p,
因为p在默许情状下有上下间距,对金童玉女特殊终端有利;

3:不要选取纯样式标签,如:b、font、u等,改用css设置。

4:需求重申的文件,能够分包在strong大概em标签中strong暗许样式是加粗(不要用b),em是斜体(不用i);

5.标签语义化

-标签语义化概念:依据剧情的结构化(内容语义化),采纳适当的竹签(代码语义化)

-标签语义化意义:    1:网页结构合理          

          2:有利于seo:和寻找引擎营造优质关系,有了能够的结商谈语义你的网页内容自然轻易被搜索引擎抓取;
         

          3:方便别的设备剖判(如显示屏阅读器、盲人阅读器、移动道具)
         

            4:便于共青团和少先队开辟和尊敬

标签语义化(注意事项)

1:尽或然少的施用无可奈何义的竹签div和span;

2:在语义不令人惊讶时,既可以够应用div也许p时,尽量用p,
因为p在私下认可情状下有上下间距,对金童玉女特殊终端有利;

3:不要选用纯样式标签,如:b、font、u等,改用css设置。

4:需求重申的文本,能够包涵在strong可能em标签中strong暗中同意样式是加粗(不要用b),em是斜体(不用i);

</tfoot>

</table>

图片 31l  属性:  <table 属性: 
<table border=”设置表格的边框(双边框)”  width=”设置表格的宽窄” >

l  页面布局

 图片 32

图片 33

图片 34

                                     使用表格概念达成页面布局

 图片 35

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属性 –
设置默许展现的个数

                       

 

相关文章