前端进阶（3）

1. table 

     表格的作用：具备固定格式的信息的布局

   table的使用

        <table></table>的列数是相同的

       <tr></tr>   行-----table row

       <td></td>  列、单元格----table data  数据放在td中，td中可以放任意元素。

4、表格属性

      宽度：width

      高度：height

      边框：border

       水平对齐方式：align   <table>中放align是table在外容器中居中对齐

       背景颜色:bdcolor  

      外边距：cellspacing  外边距是容器与容器之间的边距，

      内边距：cellpadding 容器内的元素到容器的边距

5、tr 属性

      tr 表示行，里面只能有td

       align：该行内容的水平对齐方式   left、right、center

       valign： 该行内容的垂直对齐方式： top 、middle、bottom

6、td属性

      td表示列，可以承载任何内容

      align：

       valign：

      width：

      height：

      跨列：colspan,合并列，指定一个数值，那么将向右合并指定的列数（包含自己）

      跨行：rowspan,合并行，指定一个数值，从当前单元格开始向下合并指定的单元格（包含自己）

      table的缺点：table的展示需要将所有的内容下载下来才能展示。

7、表格标题

     <caption></caption>  独立任何tr

 8、列标题

      <th></th>与td平级，放在tr里边

9、行分组

      表头行分组：thead

      表主体行分组：tbody

      表尾的行分组：tfoot

2、列表

      有序列表：

            <ol><li></li></ol>

             属性：

                         type：列表前标识类型（用的比较多）

                         start：开始的值

                          

      无序列表：

                  <ul><li></li></ul>

             属性：

                   type：

     自定义列表：

              <dl>   ----->定义列表

             <dt></dt>----->列表标题

             <dd></dd>--------->列表内容

                   </dl>

               多数出现在图文混排的样式效果

                 dt:插入一副图像

                 dd:文字描述

3、结构标记

      <header>:文档头部

      <nav>:导航

      <section>:定义网页文档的主体

       <aside>:定义页面中额外的组成部分

        <article>: 定义帖子、文章等信息

         <footer>:网页底部信息

          最大特点：语义清楚，基本div都能实现，非重点

4、表单

           1、表单标签

              <form></form>

            2、表单元素（控件）

                 作用：用户接受用户的数据

              1. input(单标签)

                     type：类型

                    <input type="text"/> -------文本框,接受用户输入的普通数据

                    <input type="zouting"/>

                     <input type="password"/> -------密码框，以密码的方式显示数据

                     <input  type="radio"/> -------单选按钮

                      <input  type="checkbox">-----复选框

                       注意：name属性，同一组复选框name属性必须要保持一致

                         <input type=“submit” value="按钮显示的文字">          submit  提交按钮

                          功能：用户提交表单到服务器

1、表单元素form

         1、不放在form里边的内容是不被提交的

        2、作用      用于定义表单中的基本信息，如提交地址，提交防止 

        3.  属性

                 1、action

                           动作： 服务器处理数据的程序地址，有服务端开发人员来提供。默认提交到本页

                  2.method 

                            表单将以什么样的方式将数据提交到服务器（明文还是密文）

                          常用值：

                                1. post 以密文的方式发送数据到服务器，不限制传递数据的长度

                                2. get 以明文的方式发送数据到服务器,  有传递数据的长度限制，2kb-4kb

                  3.name  定义表单的名称

                       作用：方便用户通过JavaScript来获取表单

                  4. enctype 表单数据的编码方式

                        不同的数据使用不同的编码方式，主要体现在普通文本的传输和文件的传输。

                       值： application/x-www-form-urlemcoded(默认值)----普通文本的编码方式

                              multipart/form-data 手动设置-----传递数据有文件的时候，上传文件的编码值

                               text/plain   文本编码方式（不推荐）

 2、 表单元素

         1. input 元素 

                text、password、CheckBox、submit

               input的属性：

                  type  区分各个不同的input 的元素的样式和功能

                   value  当前表单元素的值（默认值）

                    name 当前表单元素的名称，用于提交给服务器去使用

                    disabled 禁用控件，注意只要该属性出现在表单元素中，那么该元素就不能用

           2. 文本框与密码框

                    文本框：<input type=text/>

                    密码框:  <input  type="password"/>

                    属性：maxlength:最大长度

                               readonly:只读

             3、 单选按钮、多选按钮

                         单选按钮： <input type="radio"/>

                        属性： 

                                  name   如果一组单选按钮被选中，那么name值必须一样。    

                       4、按钮

                          1、提交按钮：将表单数据提交给服务器端

                               <input type="submit" value="按钮显示的文字"/>

                           2、重置按钮：将所有的表单元素恢复到默认值状态。

                                   <input type="reset" value="按钮显示的文字"/>

                          3、普通按钮：不带有任何功能的按钮。主要去执行自定义的脚本内容。

                                 <input type="button" onclick="alert('hello');"/>

                  5、隐藏域和文件框

                       隐藏域：在页面看不见的地方保存一段信息。

                       <input type="hidden"/>

                       一般情况下，会将安全系数较高的并且不想让用户看到的数据保存在隐藏域中

                      文件框：能够实现文件选择的功能

                       使用场合：上传文件（头像、rar、....）

                           <input type="file"/>

                            例子:  用户头像：<input type="file" name="txt"/>

                            注意：要将form的enctype属性改为：multipart/form-data

         2. textarea  多行文本域

                 <textarea>文本内容</textarea>

              属性：

                   name

                  id

                  cols:指定文本区域的列数（定义宽度）

                  rows:指定文本区域的行数（定义高度）

                 使用场合：注册信息时的详细的条款（只读），接受用户输入的多行数据

                 例子:  <textarea name="info" cols=“20”rows=“10”readonly>

                               1、暮春之初，岁在癸丑

                                2、放浪形骸之外

                               3、兰亭集序

                          </textarea>  格式保持不变

                         

         3. select 和option

              分类：1.下来列表

                        2. 滚动列表

                  语法：

                   <select></select>表示下拉（滚动）列表

                      属性：

                           name:

                          size:显示的备选信息的数量

                           multiple:是否允许多选

                  <option></option>表示下拉列表中的选项

                        属性：

                              value:选项值

                              selected：预选中

         例子：   <select name="selForm" size="4" multiple>

                         <option selected>当前选中</option>

                       </select>

          4.其他元素

              1. label元素

                   作用：与表单元素相关联，点击该label时就如同点击那个表单元素

                              <label>文本</label>

                             属性：for：用于关联表单元素的id

                              例子：将“用户名称”文字与文本框进行关联

                         <label for="txtUName">用户名称</label>：<input type="text" name="unname" id="txtUName"/>

                           2、为控件分组

                            <fieldset>:为控件分组

                             <legend>:分组的标题

                        例子：    <fieldset>

                                   <legend>基本信息</legend>

                                    用户名称：<input type="text"/>

                                    用户密码：<input type="password"/>

                           </fieldset>

              3、其他常用标记

                     1.浮动框架

                        可以在一个html页面显示多个html文档内容,也就是将其他的页面嵌入到当前的页面中

                       <iframe></iframe>

                      属性：

                                src:浮动框架中的网页URL

                                height:高度

                                 width：宽度

     2、摘要与细节

            作用：将网页的一部分信息通过类似于下拉列表的方式进行显示和隐藏

            <details></details> : 用于定义细节

             <summary></summary>:显示当前details中的标题

             注意：summary必须出现在details中的第一个子元素的位置。summary定义的元素允许点击。

             例子：

                    <details><!--定义细节-->

                         <summary>车票信息</summary> <!--定义细节的标题-->

                          北京 -&gt；天津<br/>

                         票价： &yen；35.8<br/>

                        发车时间：19:35<br/>

                    </details>

     3. 度量元素

            <meter></meter>

           多数表示进度的显示、比例的显示

             主要属性：

            min：范围的最小值，默认为0，

            max：范围的最大值，默认为1，

             value：度量值，默认为0

   4、时间元素（了解）

            <time></time>用来定义公历时间（24）小时制或日期

          语法：<time>显示内容</time>

          属性：datetime:规定日期/时间，日期与时间之间，通过T来表示分割

         例子：

                 国庆节：<time datetime="2015-10-1">2015年10月1日</time>

       5、高亮显示文本元素

         <mark></mark>

        作用：用于突出显示文本