第三章 与浏览器交互,表单标签

  使用表单标签,与用户交互
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
  语法:
    <form method="传送方式" action="服务器文件">
讲解:
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。

  
注意:
    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    
2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。


  文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。
    语法:
      <form>
<input type="text/password" name="名称" value="文本" />
</form>

    
1、type:
      当type="text"时,输入框为文本输入框;
      当type="password"时, 输入框为密码输入框。
    2、name:为文本框命名,以备后台程序ASP 、PHP使用。
    3、value:为文本输入框设置默认值。(一般起到提示作用)

  文本域,支持多行文本输入
当用户需要在表单中输入大段文字时,需要用到文本输入域。
    语法:
      <textarea rows="行数" cols="列数">文本</textarea>


    1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
    2、cols :多行输入域的列数。
    3、rows :多行输入域的行数。
    4、在<textarea></textarea>标签之间可以输入默认值。

  使用单选框、复选框,让用户选择
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:
    语法:
      <input type="radio/checkbox" value="值" name="名称" checked="checked"/>


    1、type:
      当 type="radio" 时,控件为单选框
      当 type="checkbox" 时,控件为复选框
    2、value:提交数据到服务器的值(后台程序PHP使用)
    3、name:为控件命名,以备后台程序 ASP、PHP 使用
    4、checked:当设置 checked="checked" 时,该选项被默认选中
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

  使用下拉列表框,节省空间
下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。
讲解:
    1、value:提交值
  2、selected="selected":
      设置selected="selected"属性,则该选项就被默认选中。
    使用下拉列表框进行多选
下 拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。

  使用提交按钮,提交数据
在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
    语法:
      <input type="submit" value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
      value:按钮上显示的文字

  使用重置按钮,重置表单信息
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
    语法:
      <input type="reset" value="重置">
      type:只有当type值设置为reset时,按钮才有重置作用
      value:按钮上显示的文字

  form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,abel 标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该 label标签相关连的表单控件上) 
。
    语法:
      <label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。


第四章 学习CSS,为网页添加样式

  认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
  CSS代码语法
css 样式由选择符和声明组成,而声明又由属性和值组成。
选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
  声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
  p{font-size:12px;color:red;}
注意:
    1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
    2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内
  CSS注释代码
就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。

转载于:https://www.cnblogs.com/jiangtengteng/p/5293228.html

一、HTML和CSS基础--HTML+CSS基础课程--第2部分相关推荐

  1. 【基础】CSS实现多重边框的5种方式

    原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...

  2. html多重边框,中间空白,【基础】CSS实现多重边框的5种方式

    原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...

  3. Bootstrap基础一 CSS 概览

    原文:Bootstrap<基础一> CSS 概览 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 ...

  4. CSS基础(part2)--CSS选择器

    学习笔记,仅供参考,有错必纠 文章目录 CSS CSS语法 CSS简单属性 CSS注释 CSS选择器 通配符选择器 ID选择器 类选择器 CSS复合选择器 标签指定式选择器(既...又...) 后代选 ...

  5. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  6. 前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,lt;bodygt;中的一些常用标记

    前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...

  7. W3school:CSS基础:CSS注释、颜色(颜色、RGB、HEX、HSL)、背景(背景、背景图像、背景重复、背景附着、简写背景属性)

    W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...

  8. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

  9. 手把手学习Vue3.0:CSS样式基础和HTML5基础收藏

    背景 最近在做管理系统的时候我还不会用Vue,时间紧任务重就先用J2EE那套,利用layUI先实现了.现在从头学习前后端分离技术来搞,在做的过程中对CSS和HTML5的基础语法都已经全忘了,正好总结一 ...

  10. Java学习07–前端基础之CSS

    Java学习07–CSS基础 1.CSS介绍 1.1.发展史 css1.0 基本 css2.0 div(块)+css html与css结构分离的思想网页变简单 css2.1 浮动,定位 css3.0 ...

最新文章

  1. 计算机辅助教育的可行性和存在的问题,论计算机辅助教学存在的问题及解决思路..docx...
  2. 每日一皮:当我在处理别人的代码时...
  3. Linux NFS服务器的安装与配置
  4. Microsoft Visual Studio 2010 和 TFS 下载
  5. SAP HANA中创建与时间相关的数据及Time Attribute View(Gregorian)
  6. 计算机设备维修税率是多少,设备维修税率是多少
  7. 四、CSS知识总结(下篇)
  8. mysql绿色版安装
  9. mysql utf8mb4 造成慢_mysql使用utf8mb4经验吐血总结
  10. Oracle基础篇--01数据库控制语言DCL
  11. (秒杀项目) 4.7 缓存商品与用户
  12. 51CTO的企业文化——水文化
  13. kotlin在线转java_Kotlin转Java记录
  14. 燕山大学教务系统官网计算机学院,燕山大学教务处_燕山大学教务信息网_燕山大学教务管理系统入口...
  15. LeetCode面试热题十二
  16. 2008中国网游老总语录之史玉柱
  17. IEC 62304 - 2006 医疗器械软件 软件生存周期
  18. Mac如何固定桌面排序
  19. 复现Thinkphp5 5.0.22/5.1.29远程代码执行漏洞
  20. PVLAN 技术介绍

热门文章

  1. c语言中用了double语句,求助 C语言 中 double语句用法
  2. cpu风扇声音大_小米游戏本风扇声音大的处理方法
  3. acrobat 控件可以发布吗_自己能做小程序商城吗?可以发布使用吗
  4. 【CF1244C】The Football Season(思维枚举/扩展欧几里德)
  5. java工程package红叉_Java程序中没有错,项目上面显示一个红叉的解决办法
  6. 要连plsql是不是要装oracle,PLSQL直接连接数据库,不装ORACLE
  7. linux访问vdma的数据,Xilinx VDMA 24位流输出与32位AXI总线的内存流数据关系
  8. 神经图灵机NTM —— 元学习
  9. 克隆的虚拟机一直重复出现登录界面_QQ空间里的装扮怎样才能克隆到自己空间?...
  10. 2019年 AI 顶会速递