前端学习-HTML-02

1、结构标记    

   1、作用    为了提升标记的语义性

   2、结构标记

      1、<header></header>  作用：用于定义文档的页眉，就是html文档中最上面的内容

 等同于 ：<div id="header"></div>

 <header><h1>Welcome</h1><img src="..."/> </header>

      2、<nav></nav>       作用：用来定义页面的导航链接部分

  <nav><ul><li></li></ul></nav>  等同于：<div id="nav"></div>

      3、<section></section>      作用：文档主体内容中的小节,现在，section可以表示整 个页面中的主体内容  等同于：<div id="main"></div>

      4、<article></article>   作用：用于描述 文本性 较强，或艺术气息较强的

      一般情况下，论坛中的帖子信息、报纸中的文章信息、博客或微博中的条目信息、用户回复信息优先考虑放在 article中

      5、<footer></footer>  作用：定义页面中或某个区域中的脚注信息（位置靠下的信息）

      6、<aside></aside>   作用：多数情况用于定义页面中的 侧边栏 信息

2、表单

   1、表单作用   用于显示、收集信息 并且将信息提交个服务器

      表单中主要包含两组内容：1、表单元素 2、表单控件

   2、表单元素 <form>      标签：<form></form>

      注意： 1、使用表单控件提交数据时，表单不能省略

      属性： 1、action :动作，后台处理程序的地址(服务器端工程师提供)。默认 提交给本页。  2、method :方法、方式，表单的提交方式。不同的提交方式，约束的内容不一样。

   常用取值：2个

get ：

          1、显示提交数据，会将提交信息显示在地址栏上，安全性不够高

  2、大小限制，最大支持到 2KB的提交

  3、如果 不设置 method属性的话，默认就会按照get的方式进行提交

  4、使用场合：向服务器索取数据时，优先使用get。

        post :

          1、隐式提交数据，不会将提交的信息显示在地址栏上，安全性较高，所有有关密码的信息提交时，必须用post

  2、post没有大小限制(大量数据提交时，可以使用)

  3、使用场合：

     1、安全性要求较高的页面(如包含敏感信息)

     2、要求服务器 去处理数据时， 使用post

     3、传递数据量较大时使用

        3、enctype(了解)

功能：设置 表单中提交的数据的编码方式  规范哪些数据可以提交给服务器...

   取值： 1、applicatioin/x-www-form-urlencoded  默认值，可以将普通的文本，特殊的字符，一起提交给服务器  2、multipart/form-data允许将表单中的文件，传递给服务器，普通文本不能直接传递  3、text/plain  只能将普通文本(英文、数字)传递给服务器，特殊字符(=,& ...)不允许  4、id 5、name

   3、表单控件

      1、什么是表单控件

         包含在 表单 中的元素 ，具备可视化外观，并且可以接受用户输入的数据

      2、分类

         1、input元素2、textarea文本域  3、select和option选项框

  1、input元素   作用：收集用户信息   语法：<input>

    属性：

       1、type：根据不同的类型值，可以创建不同的输入控件

       2、value：控件的值，提交给服务器的数据

       3、name：控件的名称，必须设置，否则无法提交。服务器主要根据name的值，来获取value。

       4、disabled：禁用控件,该属性可以没有值。

     具体的 input 类型的控件

     1、文本框 与 密码框    文本框: type="text"    <input type="text">

  作用：允许用户输入任意字符的数据，明文显示。

密码框：type="password"     <input type="password">

  作用：允许用户输入任意字符的数据，密文显示。

属性：

   1、maxlength：限制输入的字符数

   2、readonly：只读,无需给值，只有有该属性即可

   3、value：控件值，同时也可以设置控件的默认值

注意：input元素下，如果不写type值，或者type值写错时，都默认为 文本框

     2、单选框 和 复选框  

单选框：type="radio"   <input type="radio">

    属性：

     1、name：定义名称 并且 实现控件分组。只有一组内的元素才能实现单选

     2、value    3、checked：设置默认被选中,该属性不需要值

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

     属性：name ：定义名称 并且 分组       value :  checked :

     3、按钮

        1、提交按钮   功能固定化，负责将数据提交给服务器  <input type="submit">

2、重置按钮功能固定化，负责将表单控件恢复到初始化的状态<input type="reset">

3、普通按钮  没有固定功能，由 开发者 通过 JS来设置  <input type="button">

属性：   value : 显示在按钮上的文本    name : 名称

 

4、非 input标签的按钮   <button></button>    属性：type

    4、隐藏域 和 文件选择框

        1、隐藏域 不想让用户看见，但是又要提交给服务器的数据，可以放在 隐藏域 中    eg：用户id   type="hidden" <input type="hidden">       属性：name  value     https://www.baidu.com/?username=admin&userpass=admin&repass=admin&gender=Male&hobby=drink&userID=334455

2、文件选择框 作用：提供一个基础控件，允许用户选择本机的文件上传到服务器

   type="file"    <input type="file">    属性：     name    

   注意：1、表单的method属性值必须为post

2、表单的enctype属性值必须为multipart/form-data

  2、textarea文本域，能够接收用户录入的多行数据标签：<textarea>默认文本</textarea>

    属性：name ：名称readonly：只读

 cols : 指定文本区域的列数,变相的设置控件的宽度

 rows : 指定文本区域的行数,变相的设置控件的高度，数据如果超出高度的话，则出现滚动条

  3、选项框    1、下拉选项框    2、滚动列表

    标签：

      1、选项框<select></select>属性：name：   size：默认显示的选项数量是几个

         如果 值  大于1则为 滚动列表，否则就是下拉选项框

   multiple : 设置多选，可以没有值，配合着 键盘上的 ctrl或shift键位 一起

      2、选项  <option>显示的值</option>

 属性：value ：提交给后台服务器的值   selected :设置默认被选中，可以没有值    

         4、其他标记

    1、<label><label>

       作用：关联文本和表单控件，关联后，点击文本就如同是点击控件一样。

       语法：<label>文本<label>属性：for :指定 与当前 label相关联的控件的id值

    2、为控件分组    分组：<fieldset></fieldset>      标题：<legend></legend>

3、其他标记

   1、浮动框架  可以将多个页面放到一个页面中去显示，就是页面间的嵌套

      标签：<iframe></iframe>

      属性：1、src要引入的网页url   2、width    3、height    4、frameborder

       浮动框架的边框，可以手动设置为 0

   2、摘要与细节    简单模拟 展开 与 收缩的动作的标记

      标记：<details></details> 用于定义细节信息 <summary></summary> 定义细节内容的标题，允许被用户点击的部分，是<details>的子标记

   3、度量元素    可以在页面中定义一个度量衡,可以描述有关 比例 信息

      标记： <meter>文本</meter>

      属性：min : 定义范围的最小值,默认值为0  max :定义范围的最大值,默认值为1

 value : 度量值，当前显示的值，默认为0

   4、时间元素     用于定义 显示的时间 与 具体时间值的一个关联操作

      标记: <time>显示的文本</time>

      属性：datetime : 设置关联的日期 和 时间,日期与时间之间用T来分割

   5、高亮文本显示     标记：<mark>高亮显示的文本</mark>