2020-4-25 251 0
编程杂谈

按钮类普通按钮<inputtype="button"name=""id=""value="普通按钮"/>提交按钮点击会提交表单内容,跟表单组合使用<inputtype="submit"name=""id=""value="提交按钮"/>清空按钮点击会清空表单内容,跟表单组合使用<inputtype="reset"name=""id=""value="清空按钮"/>选择框一组选择框,name属性需要一直。单选框单选框类型:type="radio",多个单选框的name需要一直才能互斥。<label>男<inputtype="radio"name="sex"id=""value="male"/></label><label>女<inputtype="radio"name="sex"id=""value="female"/></label>复选框<label>男<inputtype="checkbox"name="sex"id=""value="male"/></label><label>女<inputtype="checkbox"name="sex"id=""value="female"/></label>邮箱&电话&网址设置不同的类型,支持HTML5的浏览器,会在提交的时候。对内容进行初步的校验。<label>邮箱:<inputtype="email"name=""id=""value=""/></label><br><label>电话:<inputtype="tel"name=""id=""value=""/></label><br><label>网址:<inputtype="url"name=""id=""value=""/></label>自定义校验规则添加pattern属性,就支持使用正则表达式,进行内容校验。placeholder属性,能友好的提示required自动非空校验maxlength能输入的最长的长度<label>邮箱:<inputtype="email"pattern="\w[-\w.+]*@(163.com|126.com)"placeholder="仅限163和126邮箱"requiredname=""id=""value=""/></label><br><label>电话:<inputtype="tel"pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}"placeholder="仅限座机号码"maxlengthrequiredname=""id=""value=""/></label><br><label>网址:<inputtype="url"pattern="^((https|http)?:\/\/)[^\s]+"placeholder="仅限以http和https开头的网址"requiredname=""id=""value=""/></label>输入框备用选项list属性和datalist标签搭配使用,通过id关联起来,实现参考效果。<label>明妃:<inputtype="text"list="urllist"name=""id=""value=""/></label><datalistid="urllist"><optionvalue="https://bigdataboy.cn/">大数据男孩</option><optionvalue="https://douyin.bigdataboy.cn/">抖音无水印解析</option></datalist>数据类数字类3个可选属性min:显示的最小值max:显示的最大值step:步长<label>年龄:<inputtype="number"min="1"max="10"step="2"name=""id=""value=""/></label>数据滚动条<label>数据滚动条:<inputtype="range"name=""id=""value=""/></label>文件上传默认情况下,enctype属性被设置为"application/x-www-form-urlencoded",它会对所有的字符进行编码,并不适用于文件传输。文件传输需要将该属性设置为"multipart/form-data"。<formaction=""method="post"enctype="multipart/form-data"><label>请选择您要上传的文件:<inputtype="file"name="file"id="file"value=""/></label><br/><label><inputtype="submit"name=""id=""value="提交"/></label></form>限定上传文件的类型input元素有一个accept属性,表示可以选择的文件类型,多个类型之间使用英文的逗号隔开。前端的限制并不能真正起作用,还是需要后端判断。<label><inputtype="file"name="file"id="file"value=""accept="image/*"/></label>完整限制类型限定上传文件的尺寸隐藏技能:通过在上传文件这个input元素前面,追加一个name为MAX_FILE_SIZE的隐藏字段,value指定允许上传的文件尺寸,单位是字节。前端的限制并不能真正起作用,还是需要后端判断。<formaction=""method="post"enctype="multipart/form-data"><inputtype="hidden"name="MAX_FILE_SIZE"value="1024"><label>请选择您要上传的文件:<inputtype="file"name="file"id="file"value=""accept="image/*"/></label><br/><label><inputtype="submit"name=""id=""value="提交"/></label></form>日期&时间time小时:分钟<label>时间:<inputtype="time"name=""id=""value=""/></label>date年月日<label>年月日:<inputtype="date"name=""id=""value=""/></label>month年月<label>年月:<inputtype="month"name=""id=""value=""/></label>week能选择某一天,是这年的第几周<label>年周:<inputtype="week"name=""id=""value=""/></label>datetime-local完整的时间<label>年月日时分:<inputtype="datetime-local"name=""id=""value=""/></label>其他类型搜索其实并没有正真的搜索功能,搜索需要后端实现,只是输入框多了一个X,用来清空。<label>搜索:<inputtype="search"name=""id=""value=""/></label>颜色选择会弹出一个颜色选择框<label><inputtype="color"name=""id=""value=""/></label>图片类型需要带上src一起使用<label><inputtype="image"src="图片路径"/></label>隐藏Input标签<label><inputtype="hidden"name=""id=""value=""/></label>

2020-4-24 258 0
编程杂谈

表单表单本身的提交会刷新网页,所以大多数场景是使用Ajax异步提交的。<form>标签用于为用户输入创建HTML表单。用于向服务器传输数据。表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、legend和label元素。<formaction="welcome.php"method="post"><label>账号:</label><inputtype="text"name=""id=""value=""/><br><label>密码:</label><inputtype="password"name=""id=""value=""/><br><buttontype="submit">登录</button><buttontype="reset">清空</button></form>from的属性属性值描述actionURL规定当提交表单时向何处发送表单数据。methodget、post规定表单提交的HTTP方法。autocompleteon、off是否启用表单自动填充功能,记住历史提交记录(默认是on开启)nameform_name规定表单的名称。target_blank、_self、_parent、_top、framename规定在何处打开actionURL。input的相关属性自动获取焦点autofocus属性<formaction=""method="post"><label>账号:</label><inputtype="text"autofocus/></form>输入框历史记录form标签设置的autocomplete属性,对该标签下的输入框生效,输入框也能单独设置autocomplete属性。<formaction=""method="post"><label>账号:</label><inputtype="text"autocomplete="off"/></form>输入框默认值input输入框能通过设置value属性,设置默认值。<formaction=""method="post"><label>姓名:</label><inputtype="text"value="大数据男孩"/></form>禁用输入框该输入框被禁用,在submit时,也不会被提交。input,button都能设置禁用。<formaction=""method="post"><label>姓名:</label><inputtype="text"disabled/><br><buttontype="submit"disabled>登录</button></form>输入框只读readonly只读,则无法改变输入框的值。<formaction=""method="post"><label>姓名:</label><inputtype="text"value="大数据男孩"readonly/></form>

2020-4-24 253 0
2020-4-23 233 0
编程杂谈

无序列表可以通过css的list-style-type属性,改变无序列表的小黑点,官方提供20多种,能通过CSS的list-style-image属性自行设置。<!--无序列表--><ul><li>大数据男孩</li><li>大数据男孩</li></ul><!--无样式--><ulstyle="list-style-type:none;"><li>大数据男孩</li><li>大数据男孩</li></ul><!--实心正方形--><ulstyle="list-style-type:square;"><li>大数据男孩</li><li>大数据男孩</li></ul><!--阿拉伯数字--><ulstyle="list-style-type:decimal;"><li>大数据男孩</li><li>大数据男孩</li></ul>有序列表有序列表属性属性值描述reversedreversed规定列表顺序为降序。(9,8,7,…)startnumber规定有序列表的起始值。type1、A、a、I、i规定在列表中使用的标记类型。<!--有序列表--><ol><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol><!--起始值--><olstart="10"><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol><!--符号类别--><oltype="A"><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol><!--倒序--><olreversed><li>大数据男孩</li><li>大数据男孩</li><li>大数据男孩</li></ol>特殊列表(术语列表)<dl>标签定义了一个包含术语定义以及描述的列表。<dt>标签用于定义列表中的项目(即术语部分)<dd>标签用于定义列表中项目的描述部分。<dl><dt>计算机</dt><dd>用来计算的仪器......</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置......</dd></dl>

2020-4-23 249 0
编程杂谈

定义<meta>标签用于描述页面内容,关键词,作者,最新修订时间以及其它元信息。<meta>标签的内容不会显示在网页中,但经常被机器(比如网页爬虫)解析。元信息可以被浏览器(指导它如何加载和显示页面)所使用,也可以有利于搜索引擎收录页面(指定关键词)。HTML5通过<meta>标签引入一个新的方法,让网页尺寸实现自适应。注意<meta>标签永远位于<head>标签内部。content属性必须和name或http-equiv属性共存亡。为了让网页尺寸实现自适应,你应该在HTML文档中加入下面代码:<metaname="viewport"content="width=device-width,initial-scale=1.0">部分属性name常于content属性连用name相关值application-name:当前页所属Web应用系统的名称。author:当前页的作者名。description:当前页的内容描述。generator:用来生成HTML的软件名称。keywords:当前页的关键词。viewport:网页尺寸自适应。实例实例一:指定网页编码<metacharset="UTF-8">实例二:为搜索引擎提供关键词<metaname="keywords"content="大数据技术,技术博客,技术分析,大数据开发,爬虫开发,大数据男孩,个人博客,可视化,bigdataboy,爬虫项目">实例三:描述网页内容<metaname="description"content="网络让我接近世界,但也让我远离生活~一个学习大数据的小白博主">实例四:定义网页的作者<metaname="author"content="大数据男孩">实例五:设置网页尺寸自适应<metaname="viewport"content="width=device-width,initial-scale=1.0">实例六:每5秒刷新一下浏览器并跳转到指定页面<metahttp-equiv="refresh"content="5;https://bigdataboy.cn/">

2020-4-23 231 0