2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单-优快云博客

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>