找回密码
 立即注册

QQ登录

只需一步,快速开始

微信公众号开发资源

关注:848

所属分类: 微信开发 微信公众号开发资源

本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] html学习

[复制链接]
查看: 6117|回复: 14
最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2015-10-26 23:13:48 | 显示全部楼层 |阅读模式

今天我们要学习的是html中重要部分,结构标记和表单。结构标记用于网页页面的整体布局排版,而表单则是用于将数据提交给服务器,与服务器进行数据交换,没有加入表单元素,页面效果显示的再完美,数据也无法传给服务器。
一、结构标记
   1、作用
      增强标签的语义性
   2、结构标记
      1<header>元素
         用作与网页头部,可能包含网页标题、LOGO、导航信息
             该元素可以出现多次,等同于 <div id="header"></div>
               <header>
               <img src="logo.gif"/>
               <h1>欢迎光临。。。</h1>
               </header>
      2<nav>元素
         用于定义网页导航
             
  1. <nav>
  2.      <ul>
  3.         <li>首页</li>
  4.         <li>母婴用品</li>
  5.         <li>家居用品</li>
  6.     </ul>
  7.         </nav>
复制代码

              等同于:<div id="nav"></div>
      3<section>元素
         section:小节
               该元素标识网页内容中的某一具体部分。定义文章章节、内容的楼层(购物类网站居多)
      4<article>元素
         article:文章,内容 。。。
         在论坛中表式某一具体帖子信息、新闻类网站的某一具体新闻信息、博客类网站  具体博客条目、用户评论等
      5<footer>元素
         定义网页底部信息,多用于企业介绍、标识等部分内容
              等同于 <div id="footer"></div>
      6<aside>元素
           侧边栏,可以标识正规内容额外的部分内容
               边栏内容优先使用<aside>元素
        
  1. <!DOCTYPE html>
  2.           <html>
  3.           <head>
  4.           <title> 结构标记 </title>
  5.           <meta charset="utf-8" />
  6.             </head>
  7.               <body>
  8.              <header>网页头部</header>
  9.               <nav>网页导航</nav>
  10.               <section>
  11.          <aside>产品分类</aside>
  12.          <div id="banner">广告</div>
  13.              </section>
  14.              <section id="f1">母婴用品</section>
  15.              <section id="f2">家具用品</section>
  16.              <footer id="footer_box">配送信息</footer>
  17.              <footer id="footer">企业介绍</footer>
  18.              </body>
  19.               </html>
复制代码
图片1.png
                  
二、表单
    1、表单的作用
        1、显示、收集用户信息
        2、将收集到的信息提交给服务器
    2、表单语法
       语法:<form></form>
      注意:表单中的内容是可以提交给服务器的,提交给服务器的内容要放在表单元素里
      属性:
          action : 表单提交时的动作,提交地址,值为url,默认值为本页
              method : 提交方式,常用取值:getpost
              get(默认值) : 明文提交,安全性较低,提交数据大小有限制,为2kb(根据浏览器决定)
          get提交数据的格式
              url?name=value&name1=value1&name2=value2 ...
              ...test.jsp?uName=SanFeng&uPass=Hello&gender=3
                post : 密文提交,安全性较高,无大小限制
                注意:用户登录、用户注册一律使用post提交
                   向服务器索取数据时(搜索引擎搜索数据),可以使用get,也可以使用post
                 1.enctype : 表单数据的编码方式
                   取值 :  
                   1application/x-www-form-urlencoded(默认)
                           可以将正常字符、特殊符号(&)提交给服务器(不支持文件上传)
                       2text/plain
                           可以将正常字符提交给服务器
                       3multipart/form-data
                          如果上传文件的时候,必须使用该值
               name : 定义表单名称
             
  1. <form action="...." method="post/get">
  2.            ....
  3.        </form>
复制代码

        
   3、表单元素
          表单元素指的是出现在表单中能够与用户进行交互的控件
          表单元素分类:
         1input元素:由input标签组成的
                   2textarea元素:<textarea> ,多行文本域
                   3select option :下拉框
                   4、其他元素
             1input元素
               input元素是空标记 <input />
                           属性:
                         type : 可以创建各种类型的input元素,比如:文本框、密码框、单选按钮、复选框
                         value : 当前表单元素的值,可以是提交给服务器的值,也可以是默认显示的初始值
                         name : 名称,要提交给服务器去使用
                         id : 唯一标识,只能在当前页面使用,服务器不能用
                        disabled : 禁用控件
                        1、文本框
                        type="text"
                        <input type="text" />
                             注意:如果type不写,或不在指定值范围内,那么默认都为 text
                         <input />
                         <input type="abcdefg" />
                  
  1. <!DOCTYPE html>
  2.                    <html>
  3.                         <head>
  4.                        <title> new document </title>
  5.                        <meta charset="utf-8" />
  6.                        </head>

  7.                  <body>
  8.                  <form action="test.jsp" method="get">
  9.                 <input type="text"/>
  10.                   </form>
  11.                    </body>
  12.                    </html>
复制代码
QQ图片20151026225957.png
               
               
                         2、密码框
                       以密文的方式接收和显示用户的数据
                   type="password"
                       <input type="password" />
                 
  1. <!DOCTYPE html>
  2.                            <html>
  3.                         <head>
  4.                        <title> new document </title>
  5.                        <meta charset="utf-8" />
  6.                        </head>
  7.                          <body>
  8.                           <form action="test.jsp" method="post">
  9.                            <input type="password"/>
  10.                            </form>
  11.                             </body>
  12.                            </html>
复制代码
图片3.png
         
                       
              以上两个控件的通用属性:
                        1nameidvalue
                        2maxlength : 限制输入的字符数
                        3readonly : 设置控件为只读
                   3、单选按钮
                       type="radio"
                       <input type="radio" />
                       name : 定义名称、分组
                       value :
                       checked : 默认被选中
                       
  1. <!DOCTYPE html>
  2.                          <html>
  3.                            <head>
  4.                            <title> new document </title>
  5.                            <meta charset="utf-8" />
  6.                             </head>
  7.                            <body>
  8.                              <form action="test.jsp" method="get">
  9.                           用户性别:
  10.                           <input type="radio" name="gender" checked value="0" />男
  11.                            <input type="radio" name="gender" value="1" />女
  12.                                </form>
  13.                                </html>
复制代码
图片4.png
                                
                   4、复选框
                        能够实现多选的控件
                       type="checkbox"
                       <input type="checkbox" />
                         name :定义名称、分组
                            value :
                            checked :默认选中
                           
  1. <!DOCTYPE html>
  2.                             <html>
  3.                             <head>
  4.                              <title> new document </title>
  5.                              <meta charset="utf-8" />
  6.                              </head>
  7.                              <body>
  8.                                <form action="test.jsp" method="get">
  9.                            爱好:
  10.                             <input type="checkbox" name="hobby" value="eat" />吃
  11.                           <input type="checkbox" name="hobby" value="drink" />喝
  12.                            <input type="checkbox" name="hobby" value="play" />玩
  13.                           <input type="checkbox" name="hobby" value="happy" />乐
  14.                                </form>
  15.                                  </body>
  16.                                  </html>
复制代码
图片5.png
                           
                             
                   5、按钮
                         1、提交按钮
                            功能固定化,用于将表单的数据提交给服务器
                             语法:
                              type="submit"
                              <input type="submit" value="按钮上的文字" />
                        2、重置按钮
                             功能固定化,将表单控件值恢复到默认状态
                            语法:
                             type="reset"
                             <input type="reset" value="文本" />
                         3、普通按钮
                             没有任何功能的标准按钮,用于执行客户端脚本(自定义功能)
                              语法:
                               <input type="button" value="文本" />
                              
  1. <!DOCTYPE html>
  2.                               <html>
  3.                                <head>
  4.                                <title> new document </title>
  5.                                 <meta charset="utf-8" />
  6.                                 </head>
  7.                                  <body>
  8.                                 <form action="test.jsp" method="get">
  9.                            <input type="checkbox" />我已同意以上条款
  10.                            <!-- 添加按钮 -->
  11.                             <br />
  12.                           <input type="submit" value="提交"  />
  13.                            <input type="reset" value="重置" />
  14.                             <input type="button" value="普通按钮" />
  15.                                </form>
  16.                                 </body>
  17.                                  </html>
复制代码
图片6.png
                              
                    6、文件选择框
                        <input type="file" />
                    注意:如果有文件上传的话,必须将表单的enctype更改为 multipart/form-data,同时method必须为post
                     
  1. <!DOCTYPE html>
  2.                        <html>
  3.                         <head>
  4.                      <title> new document </title>
  5.                      <meta charset="utf-8" />
  6.                      </head>
  7.                       <body>
  8.                      <form action="test.jsp" method="get">
  9.                 <!-- 文件选择框 -->
  10.                 请选择头像:<input type="file" name="uImg" />
  11.                      </form>
  12.                      </body>
  13.                       </html>
复制代码
图片7.png
                       
                           7、隐藏域
                        <input type="hidden" name="" value="" />
                        使用场合:隐藏域在页面中是看不到的,一般会配合后台开发一起使用,从来不单独使用。
           2、选项框
                  别名:下拉框、下拉列表
                           1、下拉列表
                           2、滚动列表
                        语法:
                              <select></select>
                          属性:
                          name : 定义名称
                          size : 大于1,则为滚动列表,否则,九十下拉列表
                          multiple : 设置多选
                               <option></option>
                          属性:
                            value : 选项的值
                            selected : 预选中
                             <select>
                               <option></option>
                           </select>
                             
  1. <!DOCTYPE html>
  2.                                  <html>
  3.                                 <head>
  4.                                 <title> new document </title>
  5.                                <meta charset="utf-8" />
  6.                                  </head>
  7.                                   <body>
  8.                                   <form action="test.jsp" method="get">
  9.                                <!-- 下拉列表(滚动列表) -->
  10.                               <select name="province">
  11.                          <option value="-1">==请选择==</option>
  12.                      <option value="BJ">北京</option>
  13.                     <option value="SH">上海</option>
  14.                     <option value="TJ">天津</option>
  15.                      <option value="CQ">重庆</option>
  16.                      </select>
  17.                            </form>
  18.                              </body>
  19.                                 </html>
复制代码
图片8.png
                          
                3、多行文本域
                     语法:
                          <textarea>默认显示文本</textarea>
                          属性:
                           name : 名称
                           cols : 指定文本域的列数,一行能显示多少个字符,表示宽度(以字符个数为单位)
                           rows : 指定文本域的行数,如果真是数据超出设定行数,将出现滚动条,表示高度
                       
  1. <!DOCTYPE html>
  2.                         <html>
  3.                        <head>
  4.                        <title> new document </title>
  5.                        <meta charset="utf-8" />
  6.                         </head>
  7.                           <body>
  8.                          <form action="test.jsp" method="get">
  9.                    <!-- 多行文本域-->
  10.                   <textarea name="userInfo" cols="20" rows="5" readonly>
  11.                       1、遵纪守法
  12.                      2、爱党爱国
  13.                      3、年纪已满18岁
  14.                  </textarea><br />
  15.                        </form>
  16.                           </body>
  17.                           </html>
复制代码
图片9.png
                              
                4、其他表单元素 - <label>
                      关联文本 与 表单元素
                                   语法:
                                   <label>文本</label>
                             属性:
                              for : 表示与该元素相关联的控件的ID
三、其他标记
      1、浮动框架
          在一个浏览器中同时显示多个页面文档
           语法:
             <iframe></iframe>
             属性:
               src : 引入的网页路径(url)
                           width : 宽度
                           height : 高度
                           frameborder : 边框
                  注意:尽可能的少使用 iframe 元素
                     
  1. <!DOCTYPE html>
  2.                        <html>
  3.                        <head>
  4.                        <title> new document </title>
  5.                       <meta charset="utf-8"/>
  6.                       </head>
  7.                        <body>
  8.                       <form action="test.jsp" method="get">
  9.                    <!-- 多行文本域-->
  10.                   <textarea name="userInfo" cols="20" rows="5" readonly>
  11.                        1、爱国
  12.                        2、爱人民
  13.                         3、爱党
  14.                 </textarea><br /><br /><br /><br />
  15.                        </form>
  16.                         <!-- 将01.html引入到当前页面中 -->
  17.      <iframe frameborder="0" src="01.html" width="520px">该浏览器不支持iframe</iframe>
  18.           </body>
  19.           </html>
复制代码
图片10.png
                    
       2、摘要与细节
            将一部分内容进行 收缩或展开 的动作
            语法:
            <details>
                           <summary>标题</summary>
                           显示的内容
               </details>
                     
  1. <!DOCTYPE html>
  2.                        <html>
  3.                           <head>
  4.                            <title> new document </title>
  5.                          <meta charset="utf-8"/>
  6.                          </head>
  7.                          <body>
  8.                      <!-- 摘要与细节 -->
  9.                   <details>
  10.                        <summary>自我介绍</summary>
  11.              <div>
  12.                       性别 :男<br />
  13.              爱好 :计算机<br />
  14.                  </div>
  15.                      </details>
  16.                           </body>
  17.                          </html>
复制代码
图片11.png          图片12.png
                  
                  
      3、度量元素
            语法:
            <meter></meter>
             属性:
              min : 度量范围的最小值,默认为0
                          max : 度量范围的最大值,默认为1
                         value : 当前的度量值,默认为0
                  
  1. <!DOCTYPE html>
  2.                     <html>
  3.                       <head>
  4.                        <title> new document </title>
  5.                       <meta charset="utf-8"/>
  6.                        </head>
  7.                        <body>
  8.                       <!-- 度量元素 -->
  9.              设备1:<meter min="0" max="100" value="50" title="50%"></meter><br/>
  10.              设备2:<meter min="0" max="100" value="90" title="90%"></meter><br/>
  11.               <br />
  12.                </details>
  13.                       </body>
  14.                         </html>
复制代码
图片13.png
                             
      4、时间元素
          语法:
            <time datetime="时间值">显示的文本</time>
      5、分组元素
           <fieldset>
                          <legend></legend> 定义组标题
                          显示内容
          </fieldset>定义组
                 
  1. <!DOCTYPE html>
  2.                   <html>
  3.                   <head>
  4.                  <title> new document </title>
  5.                   <meta charset="utf-8"/>
  6.                    </head>
  7.                 <body>
  8.               <!-- 分组元素 -->
  9.                 <fieldset>
  10.                        <legend>必填信息</legend>
  11.                 用户名称:<input /><br />
  12.                          用户密码:<input /><br />
  13.              </fieldset>
  14.                   </body>
  15.                    </html>
复制代码
图片14.png
                        
      6、高亮文本显示
           以突出的方式显示一段文本
           语法:<mark>高亮显示的文本</mark>
                  
  1. <!DOCTYPE html>
  2.                   <html>
  3.                    <head>
  4.                   <title> new document </title>
  5.                    <meta charset="utf-8"/>
  6.                      </head>
  7.                        <body>
  8.                       <!-- 高亮显示文本 -->
  9.                          <h2>搜索"<mark>html5</mark>"</h2>
  10.                           </body>
  11.                          </html>
复制代码
图片15.png
                        
                           
                       
  这章需要注意,所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间,否则数据将无法传递给服务器,如果是密文上传文件则务必将method值给位post,学习完这章,html的基础语法就差不多学完了,现在你可以开始你的代码编写了。

图片2.png
回复

使用道具 举报

最佳答案
0 

0

主题

5

帖子

59

积分

专家路上

积分
59
发表于 2015-10-27 06:49:49 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

最佳答案
109 

717

主题

2386

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
36291

HKC

QQ
发表于 2015-10-27 09:26:40 | 显示全部楼层
谢谢分享:)

点评

不谢!  详情 回复 发表于 2015-10-27 22:38
回复 支持 反对

使用道具 举报

发表于 2015-10-27 09:59:16 | 显示全部楼层
不错,挺详细啊,适合新手一步步来操作,感谢楼主

点评

不客气!!!  详情 回复 发表于 2015-10-27 22:36
回复 支持 反对

使用道具 举报

最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2015-10-27 22:36:52 | 显示全部楼层
一肚子坐到地上 发表于 2015-10-27 09:59
不错,挺详细啊,适合新手一步步来操作,感谢楼主

不客气!!!
回复 支持 反对

使用道具 举报

最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2015-10-27 22:38:45 | 显示全部楼层

不谢!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

17

帖子

23

积分

等待验证会员

积分
23
发表于 2015-11-9 09:15:35 | 显示全部楼层
学习下!!!!
回复

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-2 04:46:03 | 显示全部楼层
希望可以用,没有浪费铜板
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 21:25:26 | 显示全部楼层
真的好用吧?
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 21:26:24 | 显示全部楼层
这个牛逼啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com