HTML 5小白入门
最近整理的一些关于html 5的一些内容,不是很详细,但是也可以用来看看,记一记笔记能更好的理解html中的一些标签以及它所使用的一些属性,可以更好的去使用
新增特性
1.结构标签
header:头标签
footer:脚注
nav:导航链
section:内容
main:主内容
2.功能标签
menu:菜单标签
time:时间或日期标签
video:音频标签
audio:视频标签
embed:用来插入各种媒体
canvas:图形,用于做画布
output:表示不同类型的输出
source:为媒介元素定义媒介资源
datalist:可以制作输入值的下拉列表
meter:度量给定范围内的数据
3.表单元素
3.1通过type属性
input中新增属性:
url:表示路径文本框属性
tel:电话文本框属性
search:查询文本框属性
emil:电子邮件文本框属性
date:日期文本框属性
datetime:时间文本框属性
color:颜色文本框属性
week:周几文本框属性
month:月份文本框属性
number:数字文本框属性
range:范围文本框属性
3.2表单属性
1.input 新增了:autofocus(让元素自动获得焦点),placeholder(输入提示信息属性),
form(声明input属于哪个表单),required(提交文本框时检查元素一定要有输入内容), multiple(允许一次上传多个文件),disabled(定义无效),[stpe(规定输入字段的合法数字间隔),min(最小),max(最大),pattern(规定用于验证输入字段的模式)]于range属性混合使用,novalidate(无条件提交),autocomplete(自动完成)
2.select新增了:autofocus,form
3.textarea新增了:autofocus,form,placeholder,required,
4.button新增了:autofocus,form,novalidate
5.output新增了:form
6.fieldse新增了t:form,disabled
7.list元素与datalist混合使用,datalist与autocmplete属性配合使用。
注:input与button新增的属性中formaction,formenctype,formmethod,formnovalite,formtarget可以重载form元素的action,enctype,method,novalidate,target
链接属性
a元素:media(规定了目标url是什么类型的媒介/设备进行优化的只能在href属性存在时使用)
area元素:hreflang(规定目标 URL 的语言),rel(当前页面与其他页面的关系)
其他属性
ol:reversed(指定列表倒序显示)
meta:charset(指定了编码)
menu:type(可以让菜单出现上下文,工具条,列表菜单),label(为菜单定义一个可见标注)
style:scoped(定义样式作用范围)、
script:async(是否异步执行)
全局属性
contentEditable:可编辑元素内容(属性值为true) false:不可编辑
contentmenu:用于定义上下文菜单(点击右键时出现)
如:
<div contentmenu='my'>上下文菜单
<menu id="my" type="context">
<menuitem label="1"></menuitem>
<menuitem label="2"></menuitem>
</menu>
</div>
data-*:(好处:可以通过脚本JavaScript使用其存储的自定义数据,不必进行Ajax 调用或服务器端数据库查询,从而创建出更好的用户体验)
1.可用于自定义用户数据
2.用于存储页面或web应用的私有自定义数据
3.赋予所有HTML元素嵌入自定义data的能力
data-*:包括两部分
属性名:不能包含任何大写字母,data-*后必须有一个字符(如data-type)
属性值:可以是任意字符
<ul>
<li data-type='a'>1</li>
<li data-type='b'>2</li>
<li data-type='c'>3</li>
</ul>
var list=document.getElementsByTagNmae('li');
for(var i=0;i<=list.length;i++){
console.log(list[i].dataset.type);
}
注:data-type中的值顺序打印在控制台中
hidden:设置元素的可见状态
spellcheck:定义是否对元素进行拼写和语法检查主要是对
input中的文本,
<textarea>中的文本,
可编辑元素中的文本
translate: 定义是否翻译该元素内容
后续HTML 5(二)中是关于CSS 3的一些笔记内容