美文网首页
常见的标签以及这些标签用在什么场景用

常见的标签以及这些标签用在什么场景用

作者: emily_gss | 来源:发表于2017-07-31 17:40 被阅读0次
常用标签

input:
id
type:
text (普通文本)
checkbox (多选框)
password (密码,placeholder提示内容不影响value的值)
radio (单选框,根据name分组)
name (输入框的名称)
value (值状态名称)
file (上传文件用)
hidden (隐藏,可以储存也可以防伪)
button (相当于button属性)
submit (相当于submit属性)
reset (清空已设置属性值)
label :
for和对应的input ID控制同一个输入框的光标
select:(下拉框)
option(不同的选项,标签中添加selected 表示默认值)
value (后台查看状态名)
textarea (大文本框)
button (按钮)
ul
li (无序列表)
ol(有序列表)
meta()
head(头部)
foot (尾部)
body(主体部分)
form (定义供用户输入的表单)
select(定义下拉选项列表)
option(定义下拉列表中的选项)


h5语义化新标签

<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部
<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合
<nav></nav> 导航 (包含链接的的一个列表)
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<time></time>用来表现时间或日期
<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等
应该与页面的主要内容区分开的其他内容 Open 属性默认展开
< summary></summary> details 元素的标题
<dialog></dialog>定义一段对话
<mark></mark> 需要标记的词或句子(高亮显示)
<keygen>给表单添加一个公钥
<output>定义一个计算结果
<progress><progress>定义进度条
<progress max="10" value="7">
<span>76</span>%
</progress>


扩展补充

Forms新的输入型控件

email : 电子邮箱文本框,跟普通的没什么区别
当输入不是邮箱的时候,验证通不过
移动端的键盘会有变化 tel : 电话号码
url : 网页的URL
search : 搜索引擎 chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器
min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月


新的表单特性和函数

placeholder : 输入框提示信息,占位符,对于密码类型的input,体验更好
<input type="password" required placeholder="请输入6-18位字符" />
autocomplete : 是否保存用户输入值 默认为on,关闭提示选择off
<input type="text" name="user" autocomplete="off"/>
autofocus : 指定表单获取输入焦点
<input type="text" name="user" autocomplete="off" autofocus />
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id

image.png
required : 此项必填,不能为空
<input type="password" required placeholder="请输入6-18位字符" />
Pattern : 正则验证 pattern="\d{1,5}“
image.png
Formaction 在submit里定义提交地址
image.png
表单验证

validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false
oText.addEventListener("invalid",fn1,false); 验证反馈
ev.preventDefault()
oText.validity.valueMissing : 输入值为空时
oText.validity.typeMismatch : 控件值与预期类型不匹配
oText.validity.patternMismatch : 输入值不满足pattern正则
oText.validity.tooLong : 超过maxLength最大限制(MOZ ,-WEBKIT 未实现)
oText.validity.rangeUnderflow : 验证的range最小值
oText.validity.rangeOverflow:验证的range最大值
oText.validity.stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
oText.validity.customError 不符合自定义验证
this.setCustomValidity(); 自定义验证
formnovalidate属性 : 关闭验证

相关文章

  • 常见的标签以及这些标签用在什么场景用

    常用标签 input:idtype:text (普通文本)checkbox (多选框)pas...

  • 列出常见的标签,并简单介绍这些标签用在什么场景

    列出常见的标签,并简单介绍这些标签用在什么场景

  • 任务四——课程作业8

    八、列出常见的标签,并简单介绍这些标签用在什么场景? 8.1 标签 该标签的内容不会在浏览器中显示,它...

  • 列出常见的标签,并简单介绍这些标签用在什么场景?

  • 列出常见的标签,并简单介绍这些标签用在什么场景

    用于超链接。 some text 用于一篇文章。 a self-contained article 用于页面的侧边...

  • 《HTML常用标签》

    这篇博客将包含HTML中常见且重要的a标签、table标签以及img标签的用法和作用。 a标签的用法 首先a标签是...

  • 2018-12-04-react小书记录

    这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。 在使用 React.js 的时...

  • React事件监听

    监听函数on没有经过特殊处理的话,这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上...

  • 认识Head标签

    下面这些标签可用在 head 部分: 标签:在 和 标签之间的文字内容是网页的标题信息,它会出现在...</p></li><li id="r10"><h3><a href="/subject/mhuyhqtx.html">滴答清单的场景标签和每日计划</a></h3><p>把标签当场景用 标签功能,是在清单分类后的另一个分类维度。我们可以借助标签功能,来区分任务的执行场景。我设置的场景...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题:<font color="#666">常见的标签以及这些标签用在什么场景用</font></p><p>本文链接:<font color="#666">https://www.haomeiwen.com/subject/fdtrlxtx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你,所以牵挂"/><span>因为爱你,所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者,发表您的原创作品、分享您的心情!</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/gltrlxtx.html">寻美江南(二)樟里之轮子篇</a></li><li><a class="meiwen" href="/subject/mltrlxtx.html">《无题》</a></li><li><a class="meiwen" href="/subject/ultrlxtx.html">《我的前半生》出品方新丽传媒的光荣与梦想</a></li><li><a class="meiwen" href="/subject/yltrlxtx.html">UIPageController实现 问卷、试卷 2</a></li><li><a class="meiwen" href="/subject/sltrlxtx.html">拆书练习1. 好好说话</a></li><li><a class="meiwen" href="/subject/rltrlxtx.html">千与千寻</a></li><li><a class="meiwen" href="/subject/kltrlxtx.html">一个纠结女人的自我修炼</a></li><li><a class="meiwen" href="/subject/xltrlxtx.html">《道德经》学习录之四</a></li><li><a class="meiwen" href="/subject/aktrlxtx.html">扣住心的独白  喬晓明 ·简书</a></li><li><a class="meiwen" href="/subject/oktrlxtx.html">太想念一个人,会伤脾</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/fdtrlxtx.html">常见的标签以及这些标签用在什么场景用</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息:<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网,目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有,与本站立场无关,如不慎侵犯了你的权益,请联系我们告知,我们将做删除处理!</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>