<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--form可以与table一起使用-->
<!--action属性指定表单数据提交到哪里去
method属性:指定网络请求的方式(默认方式为get)
(1)get请求 传递到服务端的数据以追加到URL路径后的方式发送
规则:所有数据都在?之后,多个数据以&符号进行分割
优点:数据传送比较直观,适合传输小批量数据,服务端处理比较方便
缺点:1网络请求数据直接暴露在URL里面,敏感数据易被窃取
2数据传输量比较小,限定长度为255个字节
(2)post请求
传递到服务器端的数据隐藏起来,放在请求体里面,达到隐藏敏感数据的效果
优点:1相对于get请求,传输数据的隐秘性较好
2数据传输量基本上不存在上限
-->
<!--name属性:数据要组成键值对的方式发送,否则不能获取数据-->
<!--fieldset 个表单加个框,legend个框加个标题说明-->
<!--tabindex="1" 设置按tab键跳到哪个框去,再次按会跳到tabindex="框中2"的-->
<!-- input的类型 name属性必须添加!!!!为了正常提交数据到服务器
type="text":单行输入文本 如果type="password"密码隐藏
type=radio
单选框 互斥效果通过同名name实现 ,用value组成键值对
默认认为name相同的为一组,为互斥的,如只能选男不能同时选男和女
而传递到服务器端的数据只显示状态为ON,设置value后就行
type="checkbox" 复选框
type="submit 提交按钮,默认value值为提交
type="reset" 重置按钮
type="file" 添加附件,提交一个文件名(后面会细讲)
type="image"src="图片按钮
type="button" value="普通个按钮
type="select" 下拉列表 size显示下拉个数的大小,size="2"设置展开2 ,
multiple:下拉数据可同时选择多个,按住ctrl为多选
type="textarea" 文本域 rol和cols定义文本域的大小
写法:<textarea></textarea>
设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用
readonly="readonly" 设置为只读模式,不允许编辑。
style="resize: none;" 设置为宽高不允许修改。
style="overflow: ;" 设置当文字超出区域时,如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字,隐藏无法显示
scroll 无论文字多少,均会显示滚动
auto 自动,根据文字多少自动决定是否显示滚动条(默认样式
<!--给form添加ID,在表单外面的元素添加form=“表单ID”,也可以提交数据
H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交。
--><!-- 表单input属性新东西 placeholder为input的提示信息 placeholder="请输入密码" autocomplete="off"/ 自动补全的关开 autofocus 光标自动放在框中 required必填项- email、URL、date、time、month、week、number、range、color
input元素的新增属性:
Autocomplete:自动完成功能.记录用户之前输入的内容,并在下次输入时自动提示完成输入。
>>> 属性值: on/off
>>> 可以在form表单上使用,对整张表单的所有控件进行自动完成的开关
也可以在input上使用,对特定输入框进行修改。
>>> 绝大部分浏览器,默认开启。
Autofocus:自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。
Form:所属表单。通过form表单的id,确定此input输入哪张表单。
Required:必填.required="required" 设置input必填,否则阻止提交。
Pattern:使用正则表达式验证input的模式(后续讲解)
Placeholder:提示内容,当有value时,取消提示。-->
-><!--HTML5提供多种输入风格,美化页面input type=-->
<form action="Test.html" method="get" id="foo">
<fieldset>
<legend>登陆注册</legend>
<table>
<tr>
<td>会员名:</td>
<td><input type="text" name="name" tabindex="1" autocomplete="off"
autofocus required placeholder="请输入会员名" value="冥王的左手"
readonly/></td>
<td>(可包含a-z,0-9和下划线)</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" placeholder="请输入密码"/></td>
<td>(至少包含六个字符)</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" tabindex="2"/></td>
<td>(至少包含六个字符)</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="man"/>男</td>
<td><input type="radio" name="sex" value="women"/>女</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="basketball"/> 篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="pingpang"/> 乒乓球
</td>
</tr>
<tr>
<td>附件</td>
<td><input type="file"/></td>
</tr>
<tr>
<td>图片按钮</td>
<td><input type="image" src="../../img/2.png" width="40"/></td>
</tr>
<tr>
<td>普通按钮</td>
<td><input type="button" value="普通按钮"/></td>
</tr>
<tr>
<td>普通按钮</td>
<td>
<button>普通按钮</button>
</td>
</tr>
<tr>
<td>爱好</td>
<td colspan="2">
<select name="hobby1" id="hobby1" multiple size="2">
<option value="1">q</option>
<option value="2">w</option>
<option value="3">e</option>
<option value="4">r</option>
</select>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>协议</td>
<td colspan="2">
<textarea cols="25" rows="5">
杰瑞教育!! 杰瑞教育!! 杰瑞教育!! 杰瑞教育!! 杰瑞教育!!
</textarea>
</td>
</tr>
<tr>
<td><input type="submit" value="123"/></td>
<td><input type="reset"/></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit"/></td>
</tr>
</table>
</fieldset>
</form>
<input type="text" name="nick" placeholder="请输入昵称" form="foo"/>
<form action="Test.html">
<fieldset>
<legend>h5新增表单属性</legend>
<table>
<tr>
<td>邮箱</td>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<td>地址</td>
<td><input type="url" name="url"/></td>
</tr>
<tr>
<td>日期</td>
<td><input type="date" name="data"/></td>
</tr>
<tr>
<td>时间</td>
<td><input type="time" name="time"/></td>
</tr>
<tr>
<td>月份</td>
<td><input type="month" name="month"/></td>
</tr>
<tr>
<td>星期</td>
<td><input type="week" name="week"/></td>
</tr>
<tr>
<td>数字格式</td>
<td><input type="number" name="number"/></td>
</tr>
<tr>
<td>滑动条</td>
<td><input type="range" name="range"/></td>
</tr>
<tr>
<td>选择颜色</td>
<td><input type="color" name="color"/></td>
</tr>
<tr>
<td><input type="submit" name="submit"/></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5规范</title>
</head>
<body>
<input id="myCar" list="food">
<datalist id="food">
<option>baidu</option>
<option>meituan</option>
<option>eleme</option>
</datalist>
<br>
<mark>mark标签</mark>
<br>
<div style="width: 120px;height: 200px;border: 1px solid red">
<!--wbr标签为不换行 -->
11<wbr>111111<wbr>11111111111111111111111111111111111111
</div>
<!--progress标签显示为一个进度条,-->
<p>下载进度:</p>
<br>
<progress value="80" max="100"></progress>
<br>
<progress></progress>
<br>
<p>显示度量值:</p>
<!--meter标签 显示测量值-->
<meter value="9" min="2" max="10">3/10</meter>
<br>
<meter value="0.6">60%</meter>
<br>
<!--<details> 标签用于描述文档或文档某个部分的细节。可以折叠起来P标签里面的内容-->
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<div>2121212</div>
</body>
</html>
<!--补充
1 在html中有一些元素的属性,当只写属性名称而不指定属性值时,表求属性值为true, 如果设置该属性值为false,则不使用该属性即可。另外,要想将属性值设定true时,也可以将属性名设定为属性值, 或将空字符串设定为属性值。例如input元素中的disabled与readonly就是这样的属性。
2 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
3 另外 ,html5在指定属性值时做了一些改进,在属性值不包括“<”、">"、"="、单引号、双引号等字符时,属性值两边的引号可以省去
4 注意的是如果省略全部标记 但是元素还是存在的
(1)空元素语法的元素:area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr
(2)可以省略结束标签的元素:colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th
(3)可以全部省略标签的元素:html、head、body、tbody
空元素定义,摘自W3C
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。-->
<!--查询h5标签,HTML+名称-->