HTML5

tech2025-07-07  2

文章目录

01 初识HTML02 网页的基本信息03 网页基本标签04 图像标签05超链接标签及应用06 块元素和行内元素07 列表标签08 表格标签09 媒体元素10 页面结构分析11 iframe内联框架11 初识表单post和get提交*13 文本框和单选框14 按钮和多选框15 列表框文本域和文件域16 搜索框滑块和简单验证17 表单的应用18 表单初级验证19 HTML总结

01 初识HTML

HTML:Hyper Text Markup Language(超文本标记语言) 超文本包括:文字,图片,音频,视频,动画等。 单个的标签比如

<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8">

等叫做自闭合标签。

02 网页的基本信息

DOCTYPE声明

<title>标签

<meta>标签

<!-- 注释 --> <!-- DOCTYPE:告知浏览器使用的规范 --> <!DOCTYPE html> <!--所有内容都必须在<html lang="en"></html>里面写--> <html lang="en"> <!--head标签代表网页头部--> <head> <!--meta描述性标签,用来描述网站的一些信息--> <!--meta标签一般用来做SEO--> <meta charset="UTF-8"> <meta name="keywords" content="我的HTML5"> <meta name="description" content="飞吧,乌鸦"> <!--title标签代表网页标题--> <title>我的第一个网页</title> </head> <!--body标签代表网页主体--> <body> Hello, World! </body> </html>

03 网页基本标签

标题标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>

段落标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签--> <p>两只老虎, 两只老虎,</p> <p>跑得快, 跑得快。</p> <p>一只没有耳朵, 一只没有尾巴,</p> <p>真奇怪! 真奇怪!</p> </body> </html>

换行标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签--> <p>两只老虎, 两只老虎,</p> <p>跑得快, 跑得快。</p> <p>一只没有耳朵, 一只没有尾巴,</p> <p>真奇怪! 真奇怪!</p> <!--换行标签--> 两只老虎, 两只老虎,<br/> 跑得快, 跑得快。<br/> 一只没有耳朵, 一只没有尾巴,<br/> 真奇怪! 真奇怪!<br/> </body> </html>

水平线标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签--> <p>两只老虎, 两只老虎,</p> <p>跑得快, 跑得快。</p> <p>一只没有耳朵, 一只没有尾巴,</p> <p>真奇怪! 真奇怪!</p> <!--水平线标签--> <hr/> <!--换行标签--> 两只老虎, 两只老虎,<br/> 跑得快, 跑得快。<br/> 一只没有耳朵, 一只没有尾巴,<br/> 真奇怪! 真奇怪!<br/> </body> </html>

字体样式标签

注释和特殊符号

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!--段落标签--> <p>两只老虎, 两只老虎,</p> <p>跑得快, 跑得快。</p> <p>一只没有耳朵, 一只没有尾巴,</p> <p>真奇怪! 真奇怪!</p> <!--水平线标签--> <hr/> <!--换行标签--> 两只老虎, 两只老虎,<br/> 跑得快, 跑得快。<br/> 一只没有耳朵, 一只没有尾巴,<br/> 真奇怪! 真奇怪!<br/> <!--粗体,斜体--> <h1>字体样式标签</h1> 粗体:<strong>I love you</strong><br/> 斜体:<em>I love you</em><br/> <!--特殊符号--> 空 格:中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> 大于号:&gt; <br> 小于号:&lt; <br> <!-- 特殊符号 1.代码提示 2.百度 --> </body> </html>

04 图像标签

JPG

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> <!--img标签学习 src:图片地址 相对地址(推荐): ../表示上一级目录 绝对地址: --> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </body> </html>

GIF PNG BMP

05超链接标签及应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签学习</title> </head> <body> <!--使用name作为锚标记--> <a name="top">顶部</a> <!--a标签学习 herf:必填,表示要跳转到哪个页面 target:表示窗口在哪里打开,默认在当前网页打开_self _bank 在新标签中打开 _self 在自己的网页中打开 --> <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a> <a href="https://www.baidu.com">点击我跳转到百度</a> <br> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <p> <!--图片超链接--> <a href="1.我的第一个网页.html"> <img src="../resources/image/T-mac.jpg" alt="麦迪桌面" title="悬停文字" width="500" height="300"> </a> </p> <!--锚链接 1.需要一个锚标记 2.跳转到标记 #加标记名字 --> <a href="#top">回到顶部</a><br> <a href="3.图像标签.html#pic">跳转到图像标签页面的图片</a><br> <!--功能性链接 邮件链接:mailto qq链接:登录不上hp艹 --> <a href="mailto:763860505@qq.com">点击联系我</a> </body> </html>

06 块元素和行内元素

07 列表标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!--有序列表orderlist 应用范围:试卷,问答 --> <ol> <li>Java</li> <li>Python</li> <li>C/C++</li> <li>web</li> <li>sql</li> <li>ssm</li> </ol> <!--分割线--> <hr/> <!--无序列表unorderlist 应用范围:导航,侧边栏 --> <ul> <li>Java</li> <li>Python</li> <li>C/C++</li> <li>web</li> <li>sql</li> <li>ssm</li> </ul> <hr/> <!--自定义列表definitionlist dl:自定义列表标签 dt:列表名称 dd:列表选项 应用范围:公司网站底部 --> <dl> <dt>科目</dt> <dd>Java</dd> <dd>Python</dd> <dd>Linux</dd> <dd>C/C++</dd> <dd>ssm</dd> <dt>位置</dt> <dd>山东</dd> <dd>北京</dd> <dd>上海</dd> <dd>深圳</dd> </dl> </body> </html>

08 表格标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格学习</title> </head> <body> <!--表格table 行tr 列td 边框border --> <table border="1px"> <!--第1行有3列--> <tr> <!--colspan跨列 --> <td colspan="4">1-1</td> <!-- <td>1-2</td>--> <!-- <td>1-3</td>--> <!-- <td>1-4</td>--> </tr> <!--第2行有3列--> <tr> <!--rowspan跨行 --> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <!--第3行有3列--> <tr> <!-- <td>3-1</td>--> <td>3-2</td> <td>3-3</td> </tr> </table> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格作业</title> </head> <body> <table border="1px"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">狂神</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> <tr> <td rowspan="2">笨笨</td> <td>语文</td> <td>99</td> </tr> <tr> <td>数学</td> <td>100</td> </tr> </table> </body> </html>

09 媒体元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体元素学习</title> </head> <body> <!--音频和视频 src:资源路径 controls:控制条 autoplay:自动播放 --> <video src="../resources/video/动态规划简介.mp4" controls autoplay></video> <audio src="../resources/audio/xxx.mp3" controls autoplay></audio> </body> </html>

10 页面结构分析

11 iframe内联框架

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联框架学习</title> </head> <body> <!--bilibili分享视频代码--> <!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"--> <!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">--> <!--</iframe>--> <!--iframe内联框架 src:地址 w-h:宽度高度 name: --> <iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe> <!--通过a标签往iframe里面加东西,没有hello则会跳转,不会内联打开--> <a href="1.我的第一个网页.html" target="hello">点击跳转</a> </body> </html>

11 初识表单post和get提交*

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text">--> <p>名字:<input type="text" name="username"></p> <!--密码框<input type="password">--> <p>密码:<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>

13 文本框和单选框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text"> value="否否好帅" 默认初始值 maxlength="8" 最长能写几个字符 size="30" 文本框长度 --> <!-- <p>名字:<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>--> <p>名字:<input type="text" name="username"></p> <!--密码框<input type="password">--> <p>密码:<input type="password" name="pwd"></p> <!--单选框标签 input type="radio" value:单选框的值 name:表示组名 --> <p>性别: <input type="radio" value="male" name="gender"/><input type="radio" value="female" name="gender"/></p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>

14 按钮和多选框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text"> value="否否好帅" 默认初始值 maxlength="8" 最长能写几个字符 size="30" 文本框长度 --> <!-- <p>名字:<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>--> <p>名字:<input type="text" name="username"></p> <!--密码框<input type="password">--> <p>密码:<input type="password" name="pwd"></p> <!--单选框标签 input type="radio" value:单选框的值 name:表示组名 --> <p>性别: <input type="radio" value="male" name="gender"/><input type="radio" value="female" name="gender"/></p> <!--多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="smoking" name="hobby">抽烟 <input type="checkbox" value="drink" name="hobby">喝酒 <input type="checkbox" value="perm" name="hobby">烫头 </p> <!--创建按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 value:按钮上面显示的字 图片也可以作为按钮 --> <p> <input type="button" name="btn1" value="点击变长"> <input type="image" src="../resources/image/T-mac.jpg"> </p> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body> </html>

15 列表框文本域和文件域

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text"> value="否否好帅" 默认初始值 maxlength="8" 最长能写几个字符 size="30" 文本框长度 --> <!-- <p>名字:<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>--> <p>名字:<input type="text" name="username"></p> <!--密码框<input type="password">--> <p>密码:<input type="password" name="pwd"></p> <!--单选框标签 input type="radio" value:单选框的值 name:表示组名 --> <p>性别: <input type="radio" value="male" name="gender"/><input type="radio" value="female" name="gender"/></p> <!--多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="smoking" name="hobby">抽烟 <input type="checkbox" value="drink" name="hobby">喝酒 <input type="checkbox" value="perm" name="hobby" checked>烫头 <!--checked表示默认选中--> </p> <!--创建按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 value:按钮上面显示的字 图片也可以作为按钮 --> <p> <input type="button" name="btn1" value="点击变长"> <!-- <input type="image" src="../resources/image/T-mac.jpg">--> </p> <!--下拉框--> <p>国家: <select name="列表名称"> <option value="选项的值">中国</option> <option value="选项的值">美国</option> <option value="选项的值" selected>日本</option> <!--selected表示默认选中--> <option value="选项的值">英国</option> </select> </p> <!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!--文件域--> <p>文件域: <input type="file" name="files"> <input type="button" value="上传文件" name="upload"> </p> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body> </html>

16 搜索框滑块和简单验证

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text"> value="否否好帅" 默认初始值 maxlength="8" 最长能写几个字符 size="30" 文本框长度 --> <!-- <p>名字:<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>--> <p>名字:<input type="text" name="username"></p> <!--密码框<input type="password">--> <p>密码:<input type="password" name="pwd"></p> <!--单选框标签 input type="radio" value:单选框的值 name:表示组名 --> <p>性别: <input type="radio" value="male" name="gender"/><input type="radio" value="female" name="gender"/></p> <!--多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="smoking" name="hobby">抽烟 <input type="checkbox" value="drink" name="hobby">喝酒 <input type="checkbox" value="perm" name="hobby" checked>烫头 <!--checked表示默认选中--> </p> <!--创建按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 value:按钮上面显示的字 图片也可以作为按钮 --> <p> <input type="button" name="btn1" value="点击变长"> <!-- <input type="image" src="../resources/image/T-mac.jpg">--> </p> <!--下拉框--> <p>国家: <select name="列表名称"> <option value="选项的值">中国</option> <option value="选项的值">美国</option> <option value="选项的值" selected>日本</option> <!--selected表示默认选中--> <option value="选项的值">英国</option> </select> </p> <!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!--文件域--> <p>文件域: <input type="file" name="files"> <input type="button" value="上传文件" name="upload"> </p> <!--邮件验证--> <p>邮件验证: <input type="email" name="email"> </p> <!--URL验证--> <p>URL验证: <input type="url" name="url"> </p> <!--数字验证--> <p>数字验证: <input type="number" name="number" max="100" min="0" step="1"> </p> <!--滑块--> <p>音量: <input type="range" name="voice" min="0" max="10"> </p> <!--搜索框--> <p>搜索框: <input type="search" name="search"> </p> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body> </html>

17 表单的应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text"> value="否否好帅" 默认初始值 maxlength="8" 最长能写几个字符 size="30" 文本框长度 --> <!-- <p>名字:<input type="text" name="username" value="否否好帅" maxlength="8" size="30"></p>--> <p>名字:<input type="text" name="username" value="admin" readonly></p> <!--默认admin,只读不可修改--> <!--密码框<input type="password">--> <p>密码:<input type="password" name="pwd" hidden value="123456"></p> <!--hidden隐藏选项--> <!--单选框标签 input type="radio" value:单选框的值 name:表示组名 --> <p>性别: <input type="radio" value="male" name="gender" disabled/><!--disabled禁用选项--> <input type="radio" value="female" name="gender"/></p> <!--多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="smoking" name="hobby">抽烟 <input type="checkbox" value="drink" name="hobby">喝酒 <input type="checkbox" value="perm" name="hobby" checked>烫头 <!--checked表示默认选中--> </p> <!--创建按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 value:按钮上面显示的字 图片也可以作为按钮 --> <p> <input type="button" name="btn1" value="点击变长"> <!-- <input type="image" src="../resources/image/T-mac.jpg">--> </p> <!--下拉框--> <p>国家: <select name="列表名称"> <option value="选项的值">中国</option> <option value="选项的值">美国</option> <option value="选项的值" selected>日本</option> <!--selected表示默认选中--> <option value="选项的值">英国</option> </select> </p> <!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10">文本内容</textarea> </p> <!--文件域--> <p>文件域: <input type="file" name="files"> <input type="button" value="上传文件" name="upload"> </p> <!--邮件验证--> <p>邮件验证: <input type="email" name="email"> </p> <!--URL验证--> <p>URL验证: <input type="url" name="url"> </p> <!--数字验证--> <p>数字验证: <input type="number" name="number" max="100" min="0" step="1"> </p> <!--滑块--> <p>音量: <input type="range" name="voice" min="0" max="10"> </p> <!--搜索框--> <p>搜索框: <input type="search" name="search"> </p> <!--增强鼠标可用性 点击选项可以锁定到文本输入框或选择框 --> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p> <!--提交重置--> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body> </html>

18 表单初级验证

常用方式 placeholder 提示信息 required 非空判断 pattern 正则表达式判断

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action:表单提交的位置,可以是网站,也可以是一个请求处理地址 method:提交方式 post:比较安全,可以传输大文件, get:get方式提交,我们可以在url中看到我们提交的信息,不安全,高效 --> <form action="1.我的第一个网页.html" method="post"> <!--文本输入框<input type="text"> value="否否好帅" 默认初始值 maxlength="8" 最长能写几个字符 size="30" 文本框长度 --> <!-- <p>名字:--> <!-- <input type="text" name="username" value="否否好帅" maxlength="8" size="30">--> <!-- </p>--> <!-- --> <!-- <p>名字:--> <!-- <input type="text" name="username" value="admin" readonly>&lt;!&ndash;默认admin,只读不可修改&ndash;&gt;--> <!-- </p> --> <p>名字: <input type="text" name="username" placeholder="请输入用户名" required> <!--placeholder文本框提示信息,required非空判断--> </p> <!--密码框<input type="password">--> <p>密码: <input type="password" name="pwd" hidden value="123456" required> </p> <!--hidden隐藏选项--> <!--单选框标签 input type="radio" value:单选框的值 name:表示组名 --> <p>性别: <input type="radio" value="male" name="gender" disabled/><!--disabled禁用选项--> <input type="radio" value="female" name="gender"/></p> <!--多选框 input type="checkbox" --> <p>爱好: <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="smoking" name="hobby">抽烟 <input type="checkbox" value="drink" name="hobby">喝酒 <input type="checkbox" value="perm" name="hobby" checked>烫头 <!--checked表示默认选中--> </p> <!--创建按钮 input type="button" 普通按钮 input type="image" 图像按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 value:按钮上面显示的字 图片也可以作为按钮 --> <p> <input type="button" name="btn1" value="点击变长"> <!-- <input type="image" src="../resources/image/T-mac.jpg">--> </p> <!--下拉框--> <p>国家: <select name="列表名称"> <option value="选项的值">中国</option> <option value="选项的值">美国</option> <option value="选项的值" selected>日本</option> <!--selected表示默认选中--> <option value="选项的值">英国</option> </select> </p> <!--文本域--> <p>反馈: <textarea name="textarea" cols="50" rows="10" required>文本内容</textarea> </p> <!--文件域--> <p>文件域: <input type="file" name="files"> <input type="button" value="上传文件" name="upload"> </p> <!--邮件验证--> <p>邮件验证: <input type="email" name="email" required> </p> <!--URL验证--> <p>URL验证: <input type="url" name="url" required> </p> <!--数字验证--> <p>数字验证: <input type="number" name="number" max="100" min="0" step="1"> </p> <!--滑块--> <p>音量: <input type="range" name="voice" min="0" max="10"> </p> <!--搜索框--> <p>搜索框: <input type="search" name="search"> </p> <!--增强鼠标可用性 点击选项可以锁定到文本输入框或选择框 --> <p> <label for="mark">你点我试试</label> <input type="text" id="mark"> </p> <!--自定义邮箱--> <p> <!--pattern正则表达式验证--> <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p> <!--提交重置--> <p> <input type="submit"> <input type="reset" value="清空表单"> </p> </form> </body> </html>

19 HTML总结

最新回复(0)