Html5新特性-听视频教程总结
以下是听视频,所总结的一些知识点,以便之后查阅。同时与大家共讨论。
1、做html5方面东西,所需要的技术基础。
2、Html5的一些新特性,如上图所展示。(注:为了代码的浏览与管理,还是建议统一大小写,加引号等操作)
以上不过多进行描述,基本都了解的。
section:页面划分,若需要与后台交互,可加id,样式用class。
补充:nav元素,导航。
figure独立流内容(图像、图表、照片、代码等等)。figure原始的内容应与主内容相关,如果被删除,不应对文档流产生影响。
3、媒体
video
4、表单
email、url、number、range、search、color、
datepickers:date:日-月-年 month:日-月-年week:周-年 time:时间
datetime:UTC时间(选取时间,日-月-年)datetime-local:本地时间(选取时间,日-月-年)
5、新增加的标签
mark:标注,<mark>KFC</mark>此处KFC有背景色,与其他不同
progress:进度条
<progress max="100" value="83"> <span>83</span> </progress>time:时间(T:分隔符;Z:UTC时间; update:发布时间)
<time datetime="2013-10-18T09:00Z" update>
ruby:注释
<ruby>"阚" <rt> </rt> <rp>(</rp> //不支持时展示 XXX解释 <rp>)</rp> </ruby>
rt:与ruby一起使用
wbr:软换行,根据窗口大小,如果窗口小了,会自动进行换行操作。
canvas:画板
command:命令菜单,个浏览器支持不是很好
details:下拉菜单
<details open> <summary>点击下来</summary> <ul> <li>111111</li> <li>2222222</li> <li>33333333</li> </ul> </details>
datalist:输入提示(下拉选择)
<input id="mycars" type="url" list="cars"> <datalist id="cars"> <option value="car1"></option> <option value="car2"></option> <option value="car3"></option> </datalist>keygen:加密
output:对结果计算
source:资源
menu:菜单
6、新增属性
a、页面自适应
<meta name="viewport" content="width=device-width, initial-scale=1">
b、离线应用文件
<html manifest="cache.manifest">
c、禁止浏览器缓存
<span style="font-family: Arial, Helvetica, sans-serif;"> <meta http-equiv="pragma" content="no-cache"> </span>
d、窗口小图标
<link rel="icon" href="../../images/yzlogo.png" type="image/png" sizes="16*16">
e、所有超链接,有target="_blank"的,均会加上前边的http://……
<base href="http://localhost/" target="_blank"
f、下边两个script,defer:等所有都下载后,再执行,推迟执行;async:异步执行
<script defer src="" onload="aleat(a)" ></script> <script async src="" onload=""></script>
g、a标签中media属性设置,针对不同设备更好的进行优化
<a media="handhold" href=""></a> <a media="TV" href=""></a>
h、ol有序列表中倒序排列reversed
<ol start="50" reversed> <li></li> <li></li> <li></li> </ol>
i、menu的使用
<menu type="1、右键显示上下文;2、平时列表;3、工具条" label="menu"> <li><input type="checkBox"></li> <li></li> <li></li> </menu>
j、iframe内嵌框架内容seamless:无边框,无边距;srcdoc:内嵌框架内容; sandbox:内嵌框架安全限制(1、禁止提交表单;2、禁止调用js;3、内嵌不相同源;4、允许……总共4个选项)
<iframe seamless="" srcdoc="<h1>hello</h1>" sandbox href=""></iframe>
k、html5中允许通过data-建属性,方便通过type进行查找
<form data-type="comment"></form>
l、label隐藏
<label hidden=""></label>
m、textarea自动纠错提示(tabindex=1,2,3,……用于标注顺便,按tab键可自动按顺序切换光标)
<textarea tabindex="2" spellcheck="true"></textarea>
n、鼠标点击可自行修改
<table contenteditable="true"> <tr><td>shljljldjldlshlshdljlkdfslldsk</td></tr> <tr><td>shljljldjldlshlshdljlkdfslldsk</td></tr> </table>
o、内部定义css,只对内部的标签起作用
<div> <style type="text/css" scoped> h1{} p{} </style> <h1></h1> <p></p> </div>
7、js控制页面中均可修改
<script> window.document.designMode = "on"; </script
基本总结这么多,当然,其中一些还需要验证。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。