Web前端基础Day08

这是一个关于Web前端基础Day08的思维导图，介绍了HTML表单、HTML参考手册、 CSS 用户界面属性、 布局技巧等。

Day08

• 1、HTML表单
  • 1.1、概述
    • 表单的作用：用于搜集不同类型的用户输入。
    • 表单的组成：表单元素（控件）、表单区域。
  • 1.2、表单元素
    • 1.2.1、input标签 <input type="类型">
      • 概述： <input> 标签是最重要的表单元素。type属性取值不同，可以展示出不同的表单形式。
      • 作用：用来定义不同种类的输入控件
      • 常用类型
        • <input type="text" > 作用：用于文本输入的单行输入字段
        • type="password"作用：定义密码字段 <input type="password" value="密码">
        • type="radio"作用：定义单选按钮 <input type="radio">
        • type="checkbox"作用：定义复选框 <input type="checkbox">
        • type="button"作用：定义普通按钮 <input type="button" value="按钮">
        • type="submit"作用：定义用于向表单处理程序提交表单的按钮 <input type="submit" value="提交按钮">
          • 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”提交”（不同浏览器表现不同）
        • type="reset"作用：定义重置按钮 <input type="reset" value="重置">
        • type="image"作用：定义图像形式的提交按钮 <input type="image" src="button.png" alt="开始游戏">
          • 属性 src=""：指定图片地址 alt=""：指定替换文本 提示：src 属性和alt 属性必须与 提交 结合使用
        • type="file"作用：用于文件上传 <input type="file">
        • 子主题
    • 1.2.2、textarea标签作用：定义多行输入字段（文本域）
      • 语法：<textarea>初始值</texarea>
      • 注意：不能够使用value属性规定它的初始值，初始值在开始和结束标签之间设置
    • 1.2.3、select标签
      • 概述：select标签用于定义下拉列表，下拉列表种通过option标签定义选项
      • 语法： <select name="" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">天津</option> </select>
  • 1.3、表单元素属性
    • 1.3.1、name属性
      • 作用：定义表单元素的名称，用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据
      • 注意：name属性是必须的，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
      • <input type="text" name="username">
    • 1.3.2、value属性
      • 作用：规定输入字段的初始值和修改按钮上的文字内容
      • <input type="text" value="用户名">
    • 1.3.3、readonly属性
      • 作用：规定输入字段为只读（不能修改）
      • <input type="text" name="username" value="请输入用户名" readonly>
    • 1.3.4、disabled 属性
      • 作用：规定输入字段是禁用的，被禁用的表单元素不能编辑也不能被提交
      • <input type="text" name="username2" value="请输入用户名" disabled>
    • 1.3.5、maxlength属性
      • 作用：maxlength 属性，规定输入字段允许的最大长度
      • <input type="text" maxlength="3">
    • 1.3.6、selected 属性
      • 作用：规定 <select> 的选项 <option> 在页面加载时预先选定该选项。
      • <select name="" id=""> <option value="">北京</option> <option value="" selected>成都</option> //成都会作为默认选项显示 <option value="">上海</option> </select>
    • 1.3.7、size属性
      • 作用：规定下拉列表中可见选项的数目
      • <select name="" id="" size="2"> <option value="">北京</option> <option value="" selected>成都</option> <option value="">上海</option> </select>
  • 1.4、表单元素标注
    • 作用： 为 input 元素定义标注（标记） 通过 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素
    • 语法：<label for="id名"></label>
    • 效果描述： 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
    • <label for="usname">用户名</label><input type="text" id="usname">
  • 1.5、表单区域
    • 1.5.1、form标签
      • 语法：<form></form>
      • 作用： 定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等
      • 注意： form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等
    • 1.5.2、form的属性
      • 1.5.2.1、action属性
        • action="数据提交地址.php,.net"
        • 作用： 表单的动作属性，定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 可以是绝对路径或相对路径也可以是接收数数据的email邮箱地址。
        • 注意： 如果省略 action 属性，则 action 会被设置为当前页面。
      • 1.5.2.2、target属性
        • 作用：设置目标地址的打开方式
        • 取值： _self 当前窗口(默认值) _blank 新窗口
      • 1.5.2.3、method属性
        • 作用：规定发送表单数据的 HTTP 方法
        • 取值：GET/POST get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。 post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式， 传递到 action 所指向 URL。
        • get 和 post 区别（了解）： 简单阐述，当前阶段不作为重点
          • 用途： get 从指定的资源请求数据，是用来从服务器上【获得数据】， 而 POST向指定的资源提交要被处理的数据，是用来向服务器【上传递数据】
          • 安全性： get 是【不安全的】，因为规定发送表单数据的HTTP方法一些系统内部消息将会一同显示在用户面前。 post 的所有操作对用户来说都是【不可见的】
          • 数据量： 【get传输的数据量小】，这主要是因为受 URL 长度限制； 而 post 可以传输大量的数据，所以上传文件只能使用 post（当然还有一个原因，将在后面的提到）。
    • <!-- button如果不设置type类型，放在form标签中默认是提交按钮的功能，如果不放在form标签中，默认是普通按钮的功能 --> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button> <button>按钮</button>
• 2、HTML参考手册
  • 作用 帮助我们快速查阅完整的html元素并给出目标元素的相应释义 方便我们学习和使用 经常查阅文档是一个好的学习习惯
  • 推荐的网址
    • W3C : http://www.w3school.com.cn/
    • MDN: https://developer.mozilla.org/zh-CN/
• 3、CSS 用户界面属性
  • 3.1、轮廓线: outline
    • 概述：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
    • outline简写 在一个声明中设置所有的轮廓属性 可以设置的属性分别是（按顺序）： outline-color， outline-style， outline-width
    • 说明： 轮廓样式 outline-style 轮廓颜色 outline-color 轮廓宽度 outline-width 语法：空格隔开
    • 取值：参考边框
    • 注意：如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
  • 3.2、重置元素大小: resize
    • 默认：文本域可以用户可以通过鼠标拖拽改变大小
    • resize:none指定一个元素不允许用户调整大小
    • textarea{ /* 禁止用户重置元素大小 */ resize: none; }
      • /* 用户可以调整水平方向的尺寸 */ /* resize: horizontal; */ /* 用户可以调整垂直方向的尺寸 */ /* resize: vertical; */ /* 用户可以调整水平方向和垂直方向的尺寸 */ resize: both; overflow: auto;
  • 3.3、CSS 鼠标样式: cursor
    • 通过在CSS中，cursor属性指定鼠标指针放在一个元素边界范围内时所用的光标形状
    • 常用值 默认值：auto default 通常是一个箭头 text 显示为光标 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。
• 4、布局技巧
  • 4.1、等高布局
    • 等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。
    • 4.1.1、实现要点（需求） 多列 每一列背景不同 其中任意一列变高，其它列同步变高
    • 4.1.2、方法一：利用padding和margin负值相抵消
      • 4.1.2.1、原理 利用padding提前延伸背景 利用margin负值抵销padding的占位
      • 4.1.2.2、实现步骤 通过浮动创建一个正常的三列布局（不同列背景不同） 父容器清浮动 每一列固定padding-bottom，同时指定一个margin负值，抵销padding的占位 父容器overflow:hidden
      • 4.1.2.3、优缺点 合理的控制padding和margin值 可以实现任意列等高布局
    • 4.1.3、方法二：利用内容撑开父元素的特点实现等高
      • 4.1.3.1、原理 盒子层层嵌套，利用内层盒子高度变化，外层盒子的高度也会同步变化
      • 4.1.3.2、实现步骤 准备三个负责背景的盒子.bg1，.bg2，.bg3，HTML结构上层层嵌套 将.left，.center，.right盒子放入最内层的背景盒子.bg3里 最内层的盒子.bg3清浮动 将.bg2，.bg3相对于当前位置进行移动，形成三列背景效果 将.left，.center通过margin负值移动到对应的背景处即可
      • 4.1.3.3、优缺点 结构复杂 可以创建任意列数 方便通过百分比实现自适应
• 5、溢出显示省略号
  • 5.1、单行文本溢出显示省略号
    • 方法一： .box { width: 200px; border：1px solid red； white-spare:nowrap;--强制显示一行 overflow: hidden;--溢出隐藏 text-overflow:ellipsis;--溢出文字是否以省略号形式来代替 } 溢出文字是否以省略号形式来代替 text-overflow:clip（直接裁剪） | ellipsis(溢出部分以省略号形式来代替)
    • 方法二： .box:after{ content:"..."; position:absolute; right:0; bottom:0; background-color: red; width:1em; }
  • 5.2、多行文本溢出显示省略号
    • 5.2.1、方法一：after实现
      • .box { width: 200px; line-height:30px; height:90px; background-color: red; position:relative; text-align:justify; overflow: hidden; }
      • .box:after{ content:"..."; position:absolute; right:0; bottom:0; background-color: red; width:1em; }
    • 该方法适用范围广，但文字未超出行的情况下也会出现省略号，可结合js优化该方法。
    • 说明： 1. 将height设置为line-height的整数倍，防止超出的文字露出 2. 给p::after添加渐变背景可避免文字只显示一半 3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换 成:after
    • 5.2.2、方法二：弹性盒
      • box { width: 200px; line-height:30px; background-color: red; /* 旧版弹性盒 */ display:-webkit-box; /* 弹性盒子元素垂直排列 */ -webkit-box-orient: vertical; /* 控制要显示的行数 */ -webkit-line-clamp: 4; overflow: hidden; }
      • 注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端！
      • 代码说明： -webkit-line-clamp;用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他 的WebKit属性。 display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。