当前位置: 首页 > Web前端 > HTML5

html5

时间:2023-04-05 18:26:14 HTML5

**html5新增标签**doctype并不是html的标签,它只是说明是html第几个版本为什么HTML5不引用DTD?DTD(文档类型定义):DTD规定了标记语言的规则,这样浏览器才可以正确的呈现内容HTML5不基于SGML所以不需要引用DTD新增加的标签:1.结构标签块状元素-有意义的div-<article>标记定义一篇文章-<header>标记定义一个页面或一个区域的头部-<nav>标记定义导航链接-<section>标记定义一个区域-<aside>标记定义页面内容部分的侧边栏比如淘宝的左边的分类就是aside右边的扩展出来的文章就是article-<hgroup>标记定义文件中一个区块的相关信息-<figure>标记定义一组多媒体内容以及它们的标题-<figcaption>标记定义figure元素的标签-<footer>标记定义一个页面或者一个区域的底部-<diglog>标记定义一个对话框(会话框)类似微信header/section/aside/article/footer不要嵌套在里面header/section/footer级别是最高的,才可以写aside/article/figuare/hgroup/nav,然后 div figcaption2.多媒体标签<video>标记定义一个视频video可以加宽度和高度,改变视频的大小,但是audio只是音频,不存在高度和宽度<audio>标记定义音频内容<body><audio src=“../Source/passion.mp3” autoplay=“autoplay”></audio></body>loop=“-1”controls=“controls”(就会有一个控制器去播放,暂停)可以在audio中间加一段文字,如果audio跑不出来就可以显示那个<source>标记定义媒体资源<audio autoplay=“autoplay”> <source src=“../Source/passion.mp3” type=“audio/mpeg”></audio><canvas>标记定义图片<embed>标记定义外部的可交互的内容或者插件比如flash<embed src=“../Source/HappyBirthday.swf” width=“1024” height=“768”></embed>类似于flash这种带有插件的,可以使用它多媒体的标签的发展意味着支持不使用插件的情况下即可操作媒体文件,极大地提高了用户体验3.状态标签:<meter>状态标签(实时状态显示:气压,气温)<meter value=“220” min=“20” max=“380” low=“200” high=“240” optimum=“220”></meter><progress>状态标签(任务过程:安装,加载)<progress value=“30” max=“100” >如果只有max的话会出现一个加载条的情况4.列表标签:<datalist>为input标记定义一个下拉表,配合option<body><input placeholder=“请选择您喜欢的手机品牌“ list=“phoneList” /><datalist id=“phoneList”> <option value=“IPhone”>iPhone</option> <option value=“Samsung”>Samsung</option> <option value=“HuaWei”>Huawei</option> <option value=“HTC”>hTC</option> <option value=“Meizu”>Meizu</option></datalist></body><details> <summary>内容</summary> <p>lalalal</p></details>有一个属性是open=“open”5.注释标签:<ruby>标记定义注释或者音标<body><p>我们来<ruby>奋<rt>fen</rt></ruby>一个话题</p>读音放在字的上面<rt><body><p>我们来<ruby>奋<rp>(</rp><rt>fen</rt><rp>)</rp></ruby>一个话题</p>如果ruby不出现的或者不兼容rp不可以放在rt里面<rp>6.其他标签:<mark><body><p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>,需要很新鲜的那种。</p>相当于highlight<output><oninput>:事件可以实时监听文本框的输入变化<body><form oninput=“totalPrice.value=parseInt(price.value)*parseInt(number.value)”></form> <input type=“text” id=“price” value=“5000”> <input type=“number” id=“number” value=“1”>= <output name=“totalPrice” for=“price number”></output></body>7.删除的标签:-纯表现的元素Basefont,big,center,font,s,strike,tt,u-对可用性产生负面影响的元素frame,frameset,noframesiframe-产生混淆的元素acronym,applet,isindex,dir8.重定义标签:<b>代表内联文本,通常是粗体,没有传递表示重要的意思<i>代表内联文本,通常是斜体,没有传递重要的意思<dd>可以同details和figure一同使用,定义包含文本,dialog也可以用<dt>可以用details和figure一同使用,汇总细节,dialog也可以用<hr>不仅仅表达水平线,还表达主题结束,显示效果相同比如百度贴吧,论坛这种,一个主体完成之后一条横线,或者小说<menu>重新定义用户界面的菜单,配合command或者menuitem使用big标签已经被删除<small>表示小字体,例如打印注释或者法律条款<strong>表示重要性而不是强调符号属性变化:1.Input:<input type= “email” name= “email” ><input type= “url” name= “url” >只针对iphone手机<input type= “tel” name= “tel” > <input type=“number” name=“number” >2.Date Pickers Input类型:Date<input type=“date” name =“date” >Month<input type=“month” name=“month”>Weekiphone6以上,week是不兼容的TimeDatetimeDatetime-local3.其他InputRange Input<input type=“range” name=“range” min=“1” max=“10”>如果没有输入的话默认100Search Input<input type=“search” name=“search” >有值的时候后面多了一个叉叉color input<input type=“color” name =“color” >默认黑色的颜色选择框可以做些在线文本编辑器调整字体4.表单属性1.autocompleteform或者input域都应该拥有自动完成功能<form autocomplete= “on”></form>autocomplete适用于<form>标签,以及以下类型的<input>标签:text,search,url,telephone,email,password,datapickers,range,color<form action=“lesson2_1 autocomplete.html” autocomplete=“on/off”></form><input type=“text” name=“text”><input type=“submit”>2 .autofocus属性<input type=“text” name=“text”><input type=“email” name=“email” autofocus=“autofocus”/><input type=“submit”>适用于所有的规定在页面加载时,域自动地获得焦点3.multiple属性规定域中可以选择多个值multiple适用于以下类型的<input>标签:email和file<input type =“file” multiple= “multiple”/>4.placeholder属性提供一种暗示,描述输入区域所期待的值<input type=“search” placeholder= “Search Content”/>适用于:text,search,url,telephone,email,password5.required表单验证用js来判断规定必须在提交之前填写输入域(不能为空)<input type=“text” required=“required” />适用于:text,search,url,telephone,email,password,date picker,number,checkbox,radio,file5.其他属性:script:defer:加载完脚本后并不执行,而是等整个页面加载完之后再执行<script defer src=“URL” ></script>async:加载完脚本后立即执行,不用等整个页面加载完,属于异步执行<script async src=“URL” ></script>olstart:可以改变从几开始reversed:<ol start=“” reversed=“reversed” >倒叙htmlmanifest= “cache.manifest”(定义页面离线应用文件)<html manifest= “cache.manifest” >相当于不受断网的影响stylescoped;内嵌css<style scoped></style>可以写在任意位置不建议使用