HLTM5
html5：超文本标签语言（标签）
<heml> <heml>
<br/>:强制换行 <hr/>:水平线 <strong>开始</strong>：粗体
<h1>:一级标题 最高只能6级 <p> 开始 </p>结束：标签一个段落 <en> 开始<en/>结束：斜体
运算符：
空格 >>大于 <<小于 $quot;引号 &coyp;版权符号?
注释和特殊符号：<!--输入内容-->
 字符空格
超链接
<a href="http://www.baidu.com"target="_blank">百度</a>
列表
无序:无序列表由<ul>标签和<li>标签组成
有序:有序列表由<ol>标签和<li>标签组成
<ul>（<ol>）标签作为无序（有序）列表的 声明 <li>标签作为每个列表的起始
有序 无序 都是这样使用的
<ul>(<ol>)标签里面只能嵌套<li>标签不能嵌套其他标签。
<li>标签里面可以嵌套任意标签
定义列表:定义列表由<dl>标签代表开始 <dt>标签代表每个列表的起始 <dd>标签代表定义
表格
<table border=" ">
<tr>
<td></td>
<tr>
</table>
跨列colspan=""
跨行rowspan=""
视频元素
<video src="视频路径"controls="controls"></video>
video 视频元素
controls属性是用于播放视频的暂停、播放、音量的控件
使用格式：
<video controls>
<source src="路径以及格式"><voideo>
source用来连接格式
另一种格式
<video autoplay>
<source src="路径以及格式"><voideo>
慎用autoplay元素：设置autoplay属性后，不需要与用户进行任何交互，视频文件加载完成后就自动播、
放。所以大部分用户对这个功能很反感，应该慎用
音频元素
<audio src="音频路径"controls="controls"></audio>
audio音频元素
controls属性是用于播放音频的暂停、播放、音量的控件
使用格式：
<audio controls>
<source src="路径以及格式"><voideo>
还可以用loop属性循坏播放
表单语法
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
-------------------------------------------------------
<form method="规定如何发送表单数据" action="表示向何处发送表单数据">
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据。
表单元素语法
<input type="text" name="fname" value="text"/>
--------------------------------------------------
<input type="input元素类型" name="input元素名称" value="input元素值"/>
type：指定的元素类型。text、password、checkbox、radio、submit、reset、file、hiage和button，默认为 text
name：指定表单元素的名称
value：元素的初始值type为radio时必须指定一个值
size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型， 宽度以像素为单位
maxlength：type为text或password时，输入的最大字符数
checkbox：type为radio或checkbox是，指定按钮是否是被选中
input的属性，说明type取不同值时，表示不同的表单元素，并且讲解表格中每个值表示的表单元素
文本框
<input type="text" name="userName" value="用户名" size="30" maxlength="20" />
-------------------------------------------------------------------------------
<input type="文本框" name="文本框名称" value="文本框初始值" size="文本框长度" maxlength="文本框 可输入最多字符数" />
1.当type取值为text时为文本框，name属性是必须的，其他几个属性并不是必须的，其他几个属性将根据表单需 要而设置
2.value的初始值，size与maxlength的区别，当没有设置maxlength时向文本框中输入内容没有限制，当设置 maxlength时再向文本框中输入值将会有字符数的限制
密码框
<input type="password " name="pass" size="20" />
----------------------------------------------------
<input type="密码框 " name="密码框名称" size="密码框长度" />
1.当type取值为password时为密码框，name属性是必须的，其他属性并不是必须的，实际开发中通常不设置value 初始值。
2.向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。
单选按钮
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
------------------------------------------------------------
<input name="单选按钮" type="radio" value="男"值 checked 单选勾中状态 />男
<input name="gen" type="radio" value="女" />女
1.当type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的。
2.同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
3.希望在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的 checked属性
复选框
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
-----------------------------------------------------------------
<input type="复选框" name="interest" value="sports"值/>运动
<input type="复选框" name="interest" value="talk"值 checked 复选框选中状态/>聊天
<input type="复选框" name="interest" value="play"值/>玩游戏
1.当type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。
2.同一组复选框，根据需要可设置name属性值相同，也可不同
3.希望在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有多个复选框有默认的 checked属性。
列表框
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected"></option >
<option value="选项的值">…</option >
</select>
-----------------------------------------------------------
<列表框 name="列表名称" size="行数">
<选项 value="选项的值" selected="selected默认选中项">对应的值</option >
<选项 value="选项的值">…</option >
</select>
1.列表框的语法,重点说明它的标签组成，一个<select>中至少包含一下<option>。
2.name和value属性是必须的，其他属性并不是必须的。
3.一个列表框中只能有一个列表项默认被选中。
4.希望在页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则第一个选项默认被 选中；演示时改变size的值和selected默认值，让学员看显示效果，加深对这两个属性的理解。
按钮
<input type="reset" name="butReset" value="reset按钮">
<input type="image" src="images/login.gif" />
<input type="button" name="butButton" value="button按钮"/>
-----------------------------------------------------------
<input type="reset重置按钮" name="butReset" value="reset按钮 按钮上面显示文字">
<input type="image提交按钮" src="images/login.gif"图片路径 />
<input type="button普通按钮" name="butButton" value="button按钮"/>
1.type取值不同表示不同的功能，讲解各种按钮的功能。
2.name和value属性是必须的，其他属性并不是必须的
3.有时会使用图片代替按钮，讲解图片按钮的用法，强调type和src属性，强调“type”属性没有设置为“submit ”，但仍然具备提交表单的功能。
4.单击三个按钮，让学员看三个按钮提交后显示的不同效果，主要演示提交按钮和重置按钮，提一下普通按钮是需 要添加onclick事件的，后期课程会讲解，这里稍微提一下就可以了。
多行文本框
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
---------------------------------------------------------------------------
<textarea name="多行文本域" cols="显示列数" rows="显示行数">文本内容 </textarea >
1.强调多行文本域的内容是在<textarea >和</textarea >之间
文件域
form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
-----------------------------------------------------------------
form action="" method="post" enctype="multipart/form-data表单码属性">
<p><input type="file"文件域 name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
1.强调在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单 数据分为多部分提交。简单说明即或，并且告诉学员这部分的内容，在后续课程中会有详细的讲解。
2.说明type值为file即为文件域。
邮箱
<p>邮箱:<input type="email" name="email"/></p>
<input type="submit"/>
---------------------------------------------------
<p>邮箱:<input type="邮箱" name="email"/></p>
<input type="submit"/>
注意：会自动验证Email地址格式是否正确
1.type值为email即为邮箱。
网址
<p>请输入你的网址:<input type="url" name="userUrl"/></p>
<input type="submit"/>
----------------------------------------------------------
<p>请输入你的网址:<input type="网址" name="userUrl"/></p>
<input type="submit"/>
注意：会自动验证URL地址格式是否正确
1.说明type值为url即为网址
数字
<p>请输入数字:<input type="number" name="num" min="0" max="100"
step="10"/></p>
<input type="submit"/>
-------------------------------------------------------------------
<p>请输入数字:<input type="数字" name="num" min="允许的最小值" max="允许的最大值"
step=合法的数字间隔"10"/></p>
<input type="submit"/>
1.说明type值为number即为数字。
滑块
<p>请输入数字:<input type="range" name="range1" min="0" max="10"
step="2"/></p>
<input type="submit"/>
------------------------------------------------------------------
<p>请输入数字:<input type="滑块" name="range1" min="允许的最小值" max="允许的最大值"
step=合法的数字间隔"2"/></p>
<input type="submit"/>
1.说明type值为range即为滑块。
搜索框
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>
<input type="submit"/>
------------------------------------------------------------------
<p>请输入搜索的关键词:<input type="搜索框" name="sousuo"/></p>
<input type="submit"/>
1.说明type值为search即为搜索框。
表单的初级验证:
表单验证的好处:
减轻服务器的压力
保证数据的可行性和安全性
placeholder
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
---------------文本框输入内容提醒
required
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/>
----------- 必填项
pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
------------------------验证规则，正则表达式
常用的表单元素：
文本框（text）
密码框（password）
单选按钮（radio）
复选框（checkbox）
列表框（<select>和<option>）
按钮（button submit和reset ）
邮箱（<email>）
网址（<url>）
数字（<number>）
滑块（<range>）
搜索（<search>）
多行文本框（<textarea >）
文件域（<file>）
表单的高级应用：
隐藏域
只读
禁用
表单元素的标注
表单的初级验证：
placeholder
required
pattern
扫一扫
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
