第五天学习：html标签的学习3

关键字：html标签的学习3

晨跑计划：

学习任务：

 

  1. 第4章 认识标签(第三部分)

  2. 第5章 与浏览者交互，表单标签

 

学习记录：

4-1使用<a>标签，链接到另一个页面

    • 使用<a>标签可以实现超链接，从一张页面链接到另一张页面
    • 语法：
      • <a href ="目标地址" title“鼠标滑过显示的文本”>链接显示文本</a>
    • 属性：
      • href：规定链接指向的页面的url     值：URL
      • hreflang：规定被链接文档的语言　值：language_code
      • target：规定在何处打开链接文档    值：_blank、_parent、_self、_top　
      • title：鼠标滑过显示的文本
  • 4-3使用mailto在网页中链接email地址
    • 使用mailto能让访问者便捷向网站管理者发送电子邮件。
    • 功能：
      • mailito:邮箱地址（有分号隔开多个收件人的地址）
      • cc= 抄送地址
      • bcc= 密件抄送地址
      • subject= 添加邮件主题
      • body= 添加邮件内容
    • 注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数没一个都以“&”分隔
    • 例如：<a href="mailito:yy@inooc.com?cc=xiaoming@imooc.com&subject=主题&body=内容">发送</a>
  • 4-4认识<img>标签，为网页插入图片
    • 语法：<img src="图片地址" alt="下载失败时的替换文本" title="提示文本" />
    • 属性：
      • src= 标识图像的位置，规定显示图像的URL
      • alt= 指定图像的描述性文本，当下载不成功时，可看到该属性指定的文本
      • title= 提供在图像可见时对图像的描述
      • height= 定义图像的高度
      • width= 定义图像的宽度
      • longdesc= 指向包含长的图像描述文档的url
      • ismap=图像定义为服务器端图像映射
      • usemap= 图像定义为客户端图像映射
  •  5-1使用表单标签，与用户交互
    • 表单可以把浏览器输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据
    • 语法：<form method="传输方式" action=“服务器文件”></form>
    • method的传送方式有（get/post）
    • 表单标签
      • <form>：定义供用户输入的表单
      • <input>：定义输入域
        • name：定义input元素的名称
        • value：定义input元素的值
        • size：定义输入字段的宽度
        • type：规定input元素的类型
          • button：定义可点击按钮（多数情况下，通过JS启动脚本）
          • chekbox：定义复选框
          • file：定义输入字段和“浏览”按钮，供文件上传
          • hidden：定义隐藏的输入字段
          • image：定义图像形式的提交按钮，必须把src属性和alt属性结合使用
          • password：定义密码字段，该字段汇总的字符被覆盖
          • radio：定义单选按钮
          • reset：定义重置按钮
          • submit：定义提交按钮。
          • text：定义单行输入字段，用户可在其中输入文本，默认宽度为20字符
      • textarea：定义多行的文本输入控件
        • cols：规定文本区域内的可见高度
        • name：文本域的名称
        • readonly：规定文本区为只读
        • required：规定文本区是必填的
        • rows：规定文本区内的可见行数
      • label：当用户选中该label标签时，浏览器就会自动选中和该label标签相关联的表单空间上
        • 语法：<label for=“控件id名称”>
        • 注意：标签的for属性中的值应当与相关控件的id属性值一定要相同。　　　　　　
      • fieldset:定义域，将表单内容的一部分打包，生产一组相关表单的字段
        • form：规定所属的一个或多个表单
        • name：规定名称
      • legend：定义域的标题
        • select：定义一个选择表单
        • name：规定下拉表单的名称
      • optgroup：定义选项组
        • label 为选项组规定描述
        • option：定义下拉列表中的选项
        • value：定义送往服务器的值
        • button：定义一个按钮
          • name：按钮的名称
          • type：按钮的类型
            • button：可点击按钮
            • reset：重置按钮
            • submit：提交按钮
          • value：规定按钮的初始值
    • 表单控件：
      • 文本输入
        • 单行文本输入
          • <input type=“text”>
            • name属性：用于提供“名/值”，将发送给服务器，表示每个表单控件和用户输入的值中的名称，每个控件需要一个名称
            • value属性：为文本输入控件提供一个初始值，提示用户应该输入什么数据
        • 密码文本输入
          • <input type="password">
          • 注意：密码输入控件的名称的起始字符通常是pwd，从而在服务器端处理数据时，可以知道关联的值来自一个密码输入框
          • 虽然密码在屏幕上是隐藏的，但它们仍然作为纯文本通过internet发送，为了确保他的安全，应当在客户端和服务器之间建立一天SSL连接
        • 多行文本输入
          • <textarea></textarea>
          • 注意：<textarea>元素内的文本没有缩进
            • name：控件的名称，用于发给服务器的“名/值”
            • rows：指定高度
            • cols：指定宽度　
      • 按钮
        • 使用<input>y元素创建按钮
          • 通过type属性来指定按钮的类型
            • submit：能够自动提交表单的按钮
            • reset：自动将表单控件复位为初始值的按钮
            • button：用于在用户单击时触发客户端脚本按钮
          • name：设置按钮的名称
          • value：作为该表单控件的“名/值”发送给服务器
          • size：指定按钮宽度
        • 使用图像作为按钮
          • type的属性值为image
            • src：图像文件的来源
            • alt：可选文本
        • 使用<button></button>元素创建按钮
      • 复选框
        • 利用一些控件提供简单的是否相应“例如接受一些条款”
        • 从可能的选项的列表中选择其中几项
        • 使用<input>元素创建复选框，将type属性改为checkbox
        • 注意：用get发送数据，则选中的复选框将作为查询字符串中URL的一部分发送，如果选择post发送数据，则将获得一个遍历数组
          • name：控件名称
          • value：选中发送该值给服务器
          • cheked：加载页面时复选框应该被选中
      • 单选按钮
        • 使用<input>，将type属性改为radio
          • checked：自动选择其中一个值
      • 选项框（下拉列表）
        • <select><option></option></select>
          • size:值是列表中同时可见的行数（创建滚动选项框）
          • multipe：允许用户从选项框中一次选择多个项
          • optgroup：如果选项框中的选项特别多的话，可以使用该元素将它们分组到一起，该元素类似一个元素容器　　　　
          • disable：分组元素
      • 文件选项框
        • 使用<input>，将type属性改为file
        • 使用文件上传框时，method属性必须是post
      • 隐藏控件
        • 用于在页面间传递信息并且不让用户看到它们
        • 使用<input>，将type属性改为hidden
        • 隐藏表单控件必须附带name属性和value属性
      • 利用<fielfset>和<legend>结构化表单
        • <fieldset>在表单控件组周围创建边框，以表明这些表单控件是相关的。
        • <legend>元素允许用户为<fieldset>指定一个标题，该标题作为表单控件组的名称。使用<legend>元素时
        •    

        • 注意：如果使用表格来格式化表单，则<table>元素必须在<fieldset>元素内，如果<fieldset>元素在用于格式化页面的表之内，则整个字段集必须驻留在一个单元格内。

           

          　　　　

扩展阅读：

  • 表单传送方式get和post的区别？
    • get是从服务器上获取数据，post是想服务器传送数据。
    • get传输数据会暴露在url中，post不会
    • get获取变量的值，post获取提交 数据
    • get传送的书记了小，不能大于2KB，post不受限
  • 什么是SSL连接
    • 用以保障在Internet上数据传输的安全，利用数据加密技术，可以确保数据在网络上传输过程中不会被截取及窃听
    • SSL协议提供的服务主要有：
      • 认证用户和服务器，确保数据发送到正确的客户机和服务器
      • 加密数据以防止数据中途被窃取
      • 维护数据的完整性，确保数据在传输过程中不被改变
    • SSL协议的工作流程：
      • 服务器认证阶段
      • 用户认证阶段

问题的记录与总结：

  • 什么是超文本？
    • 超文本的基本特征是可以超链接文档；你可以指向其他位置，该位置可以在当前的文档中、局域网中的其他文档，也可以在因特网的任何位置的文档中。
    • 超链接也叫锚，是使用<a>标签标记的，可以用两种方式表示：
      • 在文档中创建一个热点，当用户激活或选中这个热点时，会导致浏览器进行链接。
      • 在文档中创建一个标记，该标记可以被超链接引用
    • 注释：把提供热点和超链接地址的锚看作“超链接”，而用于标记文档的目标部分的锚称为“锚”
  • img标签中ismap和usemap的区别及用法？
    • ismap没什么用
    • usemap相当于说，把图片分割成几分区域，然后不同区域可以链接到不同的地方？
  • 表单中单选框怎么默认选中？
    • 在<input>代码中加入checked
  • 单选按钮与复选按钮的区别：
    • 当存在一组共享相同名称的单选按钮时，仅可以从其中选择一个单选按钮。当选择某个单选按钮之后，如果用户点击另一个选项，则新的选项将被选中，原有的选项将被取消选中
    • 不能讲单选按钮用作单个表单控制来指明开或关状态，因为此时一旦选中该单选按钮，将无法取消选择它。

 

posted @ 2016-07-09 11:51  桂  Views(202)  Comments(0)    收藏  举报