2017-2-15从0开始前端学习笔记-图片-表格-表单

标签

图片
图片<img src="#" alt="文本说明 不能加载图片时显示" title="附加信息 鼠标停留时显示" />
img元素是内联元素 内联元素在块级元素中不会另起一行显示

align特性 align="left/right" left 文字在图片左侧显示 right文字在图片右侧显示
align="top/middle/bottom" 文字的第一行与图片的上/中/下对齐

HTML5中使用figure元素将图片和图片说明关联起来

<figure><img src="#" alt=" " title=" " align="left" /><figcaption>说明信息</figcaption>
</figure>

表格

  • 基本的表格结构
    <table></table>用来创建表格 表格内容逐行编写
    <tr></tr>表格的每行以tr开始
    <td></td>每个单元格为td
    <th></th>th表示每行或列的标题 具有scope特性 scope="row/col" 表示行/列标题
    <th scope="row/col"></th>
    跨列/跨行
    td的特性rowspan/colspan <td rowsapn="2">跨行</td> <td colspan="4">跨列</td>

  • 长表格
    .<thead>标题</thead>表格的标题在thead元素中
    .<tbody>主体</tbody>表格的主体在tboody元素中
    .<tfoot>脚注</tfoot>表格的脚注放在tfoot元素中
    表格的样式用css实现 旧代码中可能会在表格元素中添加特性

表单

  • 表单结构
    表单控件在form元素中<form action="#服务器上的一个URL" method="post/get">表单</form>
    使用get方法时，表单中的值被附加在action特性所指定的url末尾 适用于短表单 例如搜索框 或者只从服务器检索数据的情形
    使用post方法时表单中的值被放在http头信息中进行发送。 一般适用一下：允许用户上传文件 非常长 包含敏感信息 修改数据库中信息

  • 单行文本框/密码框

<form><p>用户名：<input type="text" name="与数据库一致" maxlength="30" size="15"/></p><p>密码：<input type="password" name="" maxlength="6" size="15"/></p>
</form>

  • 文本域（多行文本）
    textarea<textarea name="content" cols="20" rows="4">预设消息<textarea>cols特性指定文本域的宽度 rows特性指定占据的行数

  • 单选按钮/复选框
    <input type="radio" name="" value="" checked="checked"/>value值为选中时向服务器提交的值 checked值为checked时，加载网页默认选项
    <input type="checkbox" name="" value="" checked="checked"/>

  • 下拉列表框/多选框
    <select name=""></select>创建下拉列表框name特性指这个表单控件的名称，此名称与用户选择的值一并发到服务器

<select name=" "  ><option value=" " select="select">select为默认选项</option><option value=" ">value特性指定选项的值</option>
</select>

<select name="" size="3" multiple="multiple">size指定下拉框显示的个数 multiple特性指定用户可以选择多个选项</select>

  • 文件上传域/提交按钮/图像按钮
    <input type="file" name=" " />
    <input type="submit" name="" value=""/> name特性可以使用但不是必须得 value特性为按钮显示的文本
    <input type="image" src="#" alt="" width="" height=""/>图像按钮，使用图像作为提交按钮

  • 按钮和隐藏控件
    button元素 <button ></button>可嵌套img元素
    <input type="hidden" name=" " value=" "/>

  • 标签表单控件/组合表单元素
    可以使用两种方法使用label元素
    1.将文本说明和表单输入框全部包围起来<label>个人介绍：<input type="text" name="" placeholder="占位符 预输入"/></label>
    2.与表单控件分开用for特性关联 <label for="male">male<label> <input id="male" type="radio" value="m" name=" "/>
    组合表单元素
    fieldest元素 可将相关表单控件放在<fieldset></fieldset>中分成一组
    legend元素跟在fieldest后包含一个标题 <fieldset><legend>标题</legend></fieldset>

  • html5控件
    表单验证<label><input type="password" name="" required="required"/></label>
    日期控件<input type="date" name=""/>
    电子邮件（email）、URL（url）、搜索输入控件（search） placeholder特性 在输入前显示的内容
    <input type="search" name="" palceholder="请输入关键词"/>
    实例

<html><head><title>Forms</title></head><body><form action="http://www.example.com/review.php" method="get"><fieldset><legend>Your Details:</legend><label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br /><label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br /></fieldset><br /><fieldset><legend>Your Review:</legend><p><label for="hear-about">How did you hear about us?</label><select name="referrer" id="hear-about"><option value="google">Google</option><option value="friend">Friend</option><option value="advert">Advert</option><option value="other">Other</option></select></p><p>Would you visit again?<br /><label><input type="radio" name="rating" value="yes" /> Yes</label><label><input type="radio" name="rating" value="no" /> No</label><label><input type="radio" name="rating" value="maybe" /> Maybe</label></p><p><label for="comments">Comments:</label><br /><textarea rows="4" cols="40" id="comments"></textarea></p><label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br /><input type="submit" value="Submit review" /></fieldset></form></body>
</html>

转载于:https://www.cnblogs.com/wangxiaofeng5277/p/6406201.html

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单相关推荐

  1. 【前端学习日志】HTML表格表单注册页面案例+CSS选择器

    今日学习 一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...

  2. 我的前端学习之路＜表格表单标签＞

    1,表格标签<table> 作用:用来展示数据 <table> /**表格**/<tr> /**行**/<th></th> /**表头单元格 ...

  3. 前端学习（2476）：表单数据绑定处理

    request.js <template> <div class="artical-container"><!--卡片--><el-car ...

  4. SpringMVC:学习笔记(5)——数据绑定及表单标签

    SpringMVC--数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

  5. redux-form V.7.4.2学习笔记（六）表单同步校验技术

    一.客户端同步校验支持 redux-form V.7.4.2提供了两种方法可以为表单提供同步客户端校验支持. 第一种是为整个redux-form提供校验函数,该函数接受一个以表单中所有值组成的对象作为 ...

  6. springSecurity的学习笔记--使用spring-Security完成表单登陆，手机验证码登陆，第三方登陆

    环境搭建好后,之后的练习进入了一个十分痛苦的阶段!! 但是与此同时,收获也是比较可观的. 老师通过详细的视频讲解,完成了表单登陆,包括账号密码和验证码登陆,手机验证码登陆,第三方登陆. 每一个部分都进 ...

  7. 前端学习（2967）：表单验证

  8. 前端学习（2475）：表单数据绑定处理

  9. 前端学习（2404）：表单验证总结

最新文章

  1. 黑苹果没有找到触控板为什么还是能用_为什么Macbook触控板体验领先Windows那么多，却难以取代鼠标？...
  2. .NET简谈组件程序设计之(上下文与同步域)
  3. 这所双非高校硕士生一作发Science！系学校上半年第13篇CNS!
  4. 怎么看Windows11系统是激活的 Windows11检查激活状态方法
  5. Matplotlib 中文用户指南 4.1 文本介绍
  6. 启动和停止一个服务，修改服务的启动类型 Start and Stop Service for windows
  7. 下载m3u8加密视频的一些经验和小细节
  8. 别再问如何用 Python 提取 PDF 内容了！
  9. 不使用手机代理，进行手机抓包
  10. USB之基本协议和数据波形1
  11. 【Java 集合框架】最全的 Java 集合框架入门手册
  12. ios 后台唤醒应用_iOS 前后台机制以及后台唤醒机制【个人学习】
  13. PID实现水平姿态角控制
  14. Python.习题六 字典与集合（下）
  15. 苏宁易购，淘宝网，京东商城，百万级价格数据海量抓取
  16. revel MySQL_使用Revel（go）开发网站
  17. Color类 设置字体颜色、背景颜色
  18. java 累加函数_请你编写一个方法(函数)，功能要求从参数x累加到y,并返回累加后的整数结果。...
  19. U盘装系统(Linux)
  20. BUUCTF：大流量分析（一）

热门文章

  1. Redis与其他缓存框架的对比
  2. Java中的nextInt()和next()与nextLine()区别详解
  3. 通过 SpringBoot 中使用 lombok 实现自动创建JavaBean的get/set方法、全参/无参构造方法、toString()、equals()、hashCode()
  4. blockingqueue java_记录 Java 的 BlockingQueue 中的一些坑
  5. getPath()和getResource()找不到文件(NullPointerException)的原因(idea创建properties文件)
  6. python批量读取tiff文件_Python图像分析：从共焦显微镜读取多维TIFF文件
  7. Mysql For Windows安装图解
  8. 《深入理解java虚拟机》笔记2——GC算法与内存分配策略
  9. webpack使用教程 翻译自阮一峰(机翻)
  10. 使用 Equinox 开发 OSGi 应用程序