图片、表单、下拉选项
2018-01-23 本文已影响0人
竹忧
图片
<img src="01.jpg" alt="这是一张图片" title="点我下载" usemap="map">
- src 图片的地址
- alt 图片的代替性文字
- title 鼠标悬浮时的提示性文字
- usemap 定义客服端图像映射
图像映射
<map name="map" id="map">
<area shape="rect" coords="0,50,70,70" href="1.html" target="_black"
title="下载">
</map>
- shape 形状 ： rect(矩形，需要2个坐标) 、circle(圆形，需要圆心坐标+半径)、play(多边形，几条边几个坐标)
- coords 形状的坐标
H5新增图片标签
- figure 独立的流文档，通常用于文章中的插图
- figcaption 流文档标题
- canvas 定义图形
<figure>
<figcaption>故乡的小芳</figcaption>
<img src="../../dist/images/1.jpg" alt="">
</figure>
表格
<table>
<colgroup>
<col style="background-color:#ccc">
<col style="background-color:#f5f5f5" span="3">
</colgroup>
<caption>
<h2>信息统计</h2>
</caption>
<thead>
<tr style="background-color:#999">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>曹操</td>
<td>男</td>
<td>45</td>
</tr>
<tr>
<td>2</td>
<td>诸葛亮</td>
<td>男</td>
<td>28</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
- table 表格标签
- colgroup 对一列进行统一设置
- span 后三列颜色设置相同
- caption 表格标题
- thead 表格头部
- tr 行标签
- th 单元格(表头)
- tbody 表格主体
- td 单元格标签
- colspan 跨列
<table>
<tr>
<td rowspan="3">图像</td>
<th style="width:100px">姓名</th>
<td> </td>
<th style="width:100px">年龄</th>
<td> </td>
</tr>
<tr>
<th>籍贯</th>
<td> </td>
<th>性别</th>
<td> </td>
</tr>
<tr>
<th>个人描述</th>
<td colspan="3"> </td>
</tr>
</table>
- rowspan 跨行
- tfoot 表格脚
H5新增列表语义
- dl / dt / dd 表示对话
- menu
- menuitem
<dl>
<dt>小明：</dt>
<dd>小红，明天有空吗</dd>
<dt>小红：</dt>
<dd>不约</dd>
</dl>
表单
<form action="1.php" method="" ectype="">
- <form> 定义一个 HTML 表单，用于用户输入。
- action 提交数据的地址
- name 必须有，否则数据无法传递
- value 默认值
- checked 当type为radio/checkbox的时候，默认选中项目
- readonly 定义只读
- disabled 禁用
- text 文本
<input type="text" placeholder="请输入文本" name="usertext" value="hahaha">
- password 密码
<input type="password" placeholder="请输入密码" name="pwd">
- radio 单选框
<input type="radio" name="sex" value="m" checked>男
<input type="radio" name="sex" value="w">女
<input type="radio" name="sex" value="e">其他
- checkbox 复选框
您的财产：
<input type="checkbox" name="caichan[]">房产
<input type="checkbox" name="caichan[]">车
<input type="checkbox" name="caichan[]">银行存款
<input type="checkbox" name="caichan[]" checked>股票
<input type="checkbox" name="caichan[]" checked>地
- submit 提交按钮
<input type="submit" value="submit提交">
- reset 重置按钮
<input type="reset" value="reset重置">
- button 按钮
<input type="button" value="按钮">
- imgage 提交按钮，按钮样式为图片
<input type="image" src="../../dist/images/baidu.gif">
- file 上传文件
请选择要上传的文件
<input type="file" name="myfile">
- hidden 隐藏内容
<input type="hidden" name="is_hot" value="1231313">
HTML5表单
input 新增的type属性值
- email:匹配邮箱地址
<tr>
<td>email : </td>
<td>
<input type="email" placeholder="请输入邮箱" required name="email" >
</td>
</tr>
- number:输入值必须是数字 配合的属性 max / min / step
<tr>
<td>number : </td>
<td>
<input type="number" max="1000000" min="0" step="2" placeholder="请输入数字" autofocus>
</td>
</tr>
- range:取值范围 配合的属性 max/ min / step
<tr>
<td>range : </td>
<td>
<input type="range" max="100" min="0" step="10">
</td>
</tr>
- search:效果和text一样，专用于搜索框 表示搜索宽 同text
<tr>
<td>search : </td>
<td>
<input type="search" results pattern="\d{5}">
</td>
</tr>
- tel 同text 移动设备弹出数字按键
- date 日期
- date 选取 日 月 年
- month 选取月年
- week 选取周和年
- time 选取时间，小时和分钟
- datetime 选取utc时间，日月年
- datetime-local 选取本地时间，日月年
- color 调出取色面板
- time 事件
- file 新增了配合的属性 multiple 用来选择多个上传文件
<tr>
<td>file : </td>
<td>
<input type="file" multiple>
</td>
</tr>
新增表单标签
- output <output> 定义输入的类型
- datalist 配合 options 与之配合的input元素新增了list属性 值要设为datalist的id值
- keygen <keygen> 定义生成秘钥
<h2>output</h2>
<input type="text" onkeyup="output.innerHTML = this.value">
<output id="output"></output>
<hr>
<h2>datalist</h2>
<input type="text" list="mydata"> <button>搜索</button>
<datalist id="mydata">
<option value="abc"></option>
<option value="abac"></option>
<option value="abb"></option>
<option value="bac"></option>
<option value="acc"></option>
<option value="ade"></option>
</datalist>
<hr>
<h2>keygen</h2>
<keygen name="" value="">
新增属性（适用于部分表单控件）
- placeholder 默认提示文字
- required 必须
- autocomplete 设置 off 取消浏览器对输入框的记录
- autofocus 自动获取焦点
- pattern 验证规则 适合于input
form元素新增的属性
- autocomplete 设置 off
<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi voluptas odit nulla ad molestiae sunt quo quos nesciunt aliquid laborum, asperiores quidem ducimus esse, consequatur. Voluptatum similique architecto sunt, unde.
</p>
- novalidate 规定在提交表单时不应该验证 form 或 input 域
<form action="01.php" method="post" novalidate>
下拉选项
<select>
<!-- <optgroup label="基础"> -->
<option disabled value="1">文盲</option>
<option value="2">小学</option>
<option value="3">中学</option>
<!-- </optgroup> -->
<option value="4" selected>大学</option>
<option value="5">研究生</option>
</select>
- <select> 定义选择列表（下拉列表）
- name 必须有
- multiple 多选,默认会显示所有,名字要使用数组like[]
- disabled禁用
- size 显示几个下拉
- <option> 定义选择列表中的选项
- value 提交的值，若没有，则提交内容
- selected 定义选中项
- disabled 选项禁用
- <optgroup> 把相关的选项组合在一起
- disabled 规定禁用该选项组。
- label 为选项组规定描述。
文本域
<textarea name="mytext" cols="40" rows="10">
sLorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, maiores.
</textarea>
- cols 可见宽度
- rows 可见行数
- readonly 文本区只读
- name 必须有
- disabled 禁用
其他
<form action="#">
<fieldset>
<legend>我的表单</legend>
<label for="userInput">姓名： </label>
<input type="text" name="username" id="userInput"> <br>
</fieldset>
</form>
- <label> 定义 fieldset 元素的标题。 （当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。）
- <fieldset> 定义围绕表单中元素的边框
- <legend> 定义 fieldset 元素的标题。
