html5控件大全_html中,在表单中产生输入控件命令

1天速成HTML 　　VSCode注释快捷键：crtl+/ 　　VSCode生成骨架快捷键：！+回车 　　VSCode打开网页快捷键：alt+B 　　HTML标签的结构 　　

　　结构说明： 　　1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名 　　2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容 　　3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。 　　HTML标签与标签之间的关系 　　

　　标题标签 　　代码：h系列标签 　　<h1>1级标题</h1> 　　<h2>2级标题</h2> 　　<h3>3级标题</h3> 　　<h4>4级标题</h4> 　　<h5>5级标题</h5> 　　<h6>6级标题</h6> 　　语义：1~6级标题，重要程度依次递减 　　特点：文字都有加粗 　　文字都有变大，并且从h1→h6文字逐渐减小 　　独占一行 　　段落标签 　　如： 　　换行标签 　　分割线标签 　　文本格式化标签 　　

　　媒体标签 　　图片标签 　　代码： 　　特点： 　　单标签 　　img标签需要展示对应的效果需要借助标签的属性进行设置 　　

　　PS: 　　1、当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可 　　2、路径的情况很多 　　如： 　　属性注意点： 　　1.标签的属性写在开始标签内部 　　2.标签上可以同时存在多个属性 　　3.属性之间以空格隔开 　　4.|标签名与属性之间必须以空格隔开 　　5.属性之间没有顺序之分 　　alt属性 　　属性名：alt 　　属性值：替换文本，当图片不显示时显示的文字 　　title属性 　　鼠标悬停时显示的文字 　　ps：title属性不仅仅可以用于图片标签，还可以用于其他标签 　　width和height属性 　　属性名：width和height| 　　属性值：宽度和高度（数字） 　　注意点： 　　如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形） 　　如果同时设置了width和height两个，若设置不当此时图片可能会变形 　　绝对路径和相对路径 　　绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径 　　例如： 　　盘符开头：D:\day01\images\1.jpg 　　完整的网络地址|https://www.itcast.cn/2018czgw/images/logo.gif（了解） 　　相对路径： 　　同级目录 　　当前文件和目标文件在同一目录中 　　代码步骤：直接写目标文件名即可 　　如： 　　方法一：<img src=https://zhuanlan.zhihu.com/p/“目标图片.gif”> 　　方法二：<img src=https://zhuanlan.zhihu.com/p/”https://zhuanlan.zhihu.com/p/目标图片.gif”> 　　下级目录 　　目标文件在下级目录中 　　步骤： 　　文件夹名/文件名 　　如： 　　<img src=https://zhuanlan.zhihu.com/p/images/目标图片.gif”> 　　上级目录 　　https://zhuanlan.zhihu.com/目标文件名 　　或https://zhuanlan.zhihu.com/目标文件夹/目标文件名 　　音频标签 　　代码：<audio src=https://zhuanlan.zhihu.com/p/”https://zhuanlan.zhihu.com/p/music.mp3″ controls></audio> 　　ps：音频标签是双标签 　　

　　音频标签目前支持三种格式：MP3、WAV、OGG 　　视频标签 　　代码：<video src=https://zhuanlan.zhihu.com/p/”https://zhuanlan.zhihu.com/p/video.mp4″ controls></video> 　　

　　超链接（a标签/锚链接） 　　代码：<a href=https://zhuanlan.zhihu.com/p/”https://zhuanlan.zhihu.com/p/目标网页.html”>超链接</a> 　　特点： 　　双标签，内部可以包裹内容 　　如果需要a标签之后去指定页面，需要设置a标签的href属性 　　属性：target 　　属性值：目标网页的打开形式 　　

　　列表标签 　　无序列表 　　标签组成： 　　

　　显示特点：列表的每一项前默认显示圆点标识 　　ps：ul标签中只允许包含li标签 　　li标签可以包含任意内容 　　有序列表 　　标签组成: 　　

　　特点： 　　列表的每一项前默认显示序号 　　ps：ol标签中只允许包含li标签 　　li标签可以包含任意内容 　　自定义列表 　　标签组成： 　　

　　显示特点：dd前会默认显示缩进效果 　　ps： 　　dl标签中只允许包含dt/dd标签 　　dt/dd标签可以放任意内容 　　表格 　　场景：在网页中以行+列的单格的方式整齐战士数据，如学生成绩表 　　基本标签： 　　

　　ps：标签的嵌套关系：table>tr>td 　　table相关属性： 　　

　　border-collapse语法：border-collapse : separate | collapse取值：separate : 默认值。边框独立（标准HTML）collapse : 相邻边被合并 　　功能一 　　让 table 的 border 属性指定的边框看起来不那么粗大，在前面文章中已经介绍。 　　功能二 　　让 td 边框重合 　　其他标签： 　　caption：表格大标签 表示表格整体大标题，默认在表格整体顶部居中位置显示 　　th：表头单格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 　　ps：caption标签书写在table标签内部 　　th标签书写在tr标签内部（用于替换td标签） 　　表格的结构标签 　　使用场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰 　　结构标签： 　　

　　注意点： 　　表格结构标签内部用于包裹tr标签 　　表格的结构标签可以省略 　　使用结构化的标签可能视觉上没有太大改变，但可以提高浏览器的效率 　　表格合并 　　跨行合并：垂直合并成一个 　　跨列合并：水平合并成一个 　　

　　ps： 　　只有同一个结构标签的单格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot） 　　如： 　　表单标签 　　应用场景：登录、注册、搜索等 　　input系列 　　input标签可以通过type属性值的不同，展示不同效果 　　type属性值 　　

　　文本框 　　type属性值：text 　　常用属性： 　　placeholder （占位符。提示用户输入内容的文本） 　　如： 　　单选框 　　type属性值：radio 　　常用属性： 　　name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 　　checked 默认选中 　　ps：name属性对于单选框有分组功能 　　有相同name属性值的单选框为一组，一组中只能同时有一个被选中 　　如： 　　文件选择框 　　type属性值：file 　　常用属性： 　　multiple 多文件选择 　　如： 　　按钮 　　type属性值： 　　标签名 type属性值 说明 　　input submit 提交按钮。之后提交数据给后端服务器 　　input reset 重置按钮。之后恢复表单默认值 　　input button 普通按钮。默认无功能，之后配合js添加功能 　　注意点： 　　·如果需要实现以上按钮功能，需要配合form标签使用 　　·form使用方法：用form标签把表单标签一起包裹起来即可 　　用value = “”可以给按钮添加或改变文本 　　button按钮标签 　　场景：在网页中显示用户的按钮 　　标签名 button 　　type属性值（同input的按钮系列）： 　　标签名 type属性值 说明 　　button submit 提交按钮。之后提交数据给后端服务器 　　button reset 重置按钮。之后恢复表单默认值 　　button button 普通按钮。默认无功能，之后配合js添加功能 　　注意点： 　　·谷歌浏览器中button默认是提交按钮 　　·button标签是双标签，更便于包裹其他内容：文字、图片等 　　下拉菜单标签 　　场景：在网页中提供多个选择项的下拉菜单表单控件 　　标签组成： 　　select标签：下拉菜单的整体 　　·option标签：下拉菜单的每一项 　　<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。 　　注意：如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。 　　常见属性： 　　·selected：下拉菜单的默认选中 　　textarea文本域标签 　　场景：在网页中提供可输入多行文本的表单控件 　　标签名：textarea 　　常见属性： 　　·cols：规定了文本域内可见宽度 　　·rows：规定了文本域内可见行数 　　注意点： 　　·右下角可以拖拽改变大小 　　·实际开发时针对于样式效果推荐用CSS设置 　　lable标签 　　常用于绑定内容与表单标签之间的关系 　　使用方法1： 　　1.使用label标签把内容（如：文本）包裹起来 　　2.在表单标签上添加id属性 　　3.在label标签的for属性中设置对应的id属性值,第一个id值与for属性值相同的素可与标签关联，如果这个素不可关联则for属性没有效果 　　使用方法2： 　　1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来 　　2.需要把label标签的for属性删除即可 　　语义化标签 　　没有语义的布局标签 　　场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签 　　div标签：一行只显示一个（独占一行） 　　span标签：一行可以显示多个 　　有语义的布局标签 　　场景：H5新版本中推出，可用于手机网页的制作 　　

　　ps: 　　以上标签显示特点和div一致，但是比div多了不同的语义 　　字符实体 　　在网页中展示特殊符号效果时，需要使用字符实体代替 　　结构：&英文； 　　

　　引入外部文件标签 Link 　　在 HTML 中，<link> 标签没有结束标签。在 XHTML 中，<link> 标签必须被正确的关闭。 　　rel属性：规定当前文档与被链接文档之间的关系。 　　(1) stylesheet — 调用外部样式表 　　(2) icon — 定义网站收藏夹图标 　　(3) canonical — 指明网址的规范版本 　　canonical属性用于让搜索引擎知道当前网站中的重复或相似网页中，哪一个页面才是站长想让其抓取与收录的。 　　(4) author — 申明文档作者 　　(5) home — 连接到站点的主页 　　(6) search — 链接到文档的搜索工具 　　(7) sidebar — 链接到应该在浏览器边栏中显示的文档 　　(8) friend — 友情链接 　　href属性：规定被链接文档的位置。 　　type 属性：规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表 　　其值有：text/css、image/x-icon