更多前端资料,《前端Tool》小程序。
第一章:HTML5新增语法,元素,属性,事件
1.html5语法:
1.1 html是不区分大小写,也不区分大双引号。
1.2 对于具有boolean值得属性,如disabled和readonly等,当值写属性不写值,将属性值设置为属性名或设置为空字符串时,表示为true,如<input disabled /> ,<input disabled='' />,<input disabled="disabled" />。当不写该属性时,表示未faske,如<input />。
1.3 html5简化的模板:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>标题</title>
2. html5元素:参考w3school 在线教程。
2.1 语义化结构元素:只有语义,没有实际功能。
元素名称 | 解释 |
header | 页面的标题 |
footer | 页面的页脚 |
section | 页面的内容区块 |
article | 页面的文章文字内容部分 |
aside | 页面左右板块 |
nav | 页面导航板块 |
main | 页面主题内容板块,与header,footer构成完整页面 |
2.2 功能元素:具有实际功能的元素标签。
元素名称 | 说明 |
hgroup | 相当于div |
video | 视频 |
audio | 音频 |
embed | 用于插入多媒体,格式包括midi,wav,aiff,au,mp3 |
mark | 黄色高亮背景,相当于带黄色背景的span标签。如<mark>你好</mark> ,显示为 |
dialog | 对话框或窗口,<dialog open>对话黄</dialog>显示为 |
datalist | 下拉列表 |
canvas | 绘图 |
progress | 进度条 <progress value="0.7"></progress> value 范围0~1,,<progress ></progress> 不写value表示蓝色部分来回摆动动态的进度条。 |
meter | 刻度尺,用于标识一个值所处范围,不可接受(红色),可以接受(黄色),非常优秀(绿色); |
2.3 表单元素:即input的type类型:email;url;number;tel;search;range;color;date;month;week.....
3. HTML5属性:
3.1 表单属性:
1).placeholder:占位符 <input type="text"placeholder="请输入用户名" />
2).autofocus:自动获取焦点 type="text"<input autofocus>;
3).multiple:允许输入框中出现多个输入(用逗号分隔); <input type="email" multiple />
4).form:用于把输入域放在FORM外部;
<form id="f4"></form>
<input type="" form="f4" />
5).required:必填项,内容不能为空 <input required>;
6).maxlength:字符中最大长度;
7).minlength:字符串最小长度;
8).max:输入框允许输入的数字最大值;
9).min:输入框允许输入的数字最小值;
10).pattern:指定必需符合正则表达式;
11).autocomplete="on/off":表示开启或关闭,用户输入后自动保存下次在输入时呈现历史输入记录。
3.2 其他属性:
1).script的async属性:定义脚本是否异步执行。
4. HTML全局属性:即可以用户任意的html元素标签的属性。
全局属性 | 说明 |
contentEditable | 该标签下所有文本内容是否可在线编辑,所有浏览器都支持。 |
contextmenu | 鼠标右键时,列表显示菜单。目前只有firefox支持。 |
data-* | 自定义属性名/值,所有浏览器都支持 。<div data-index="1"></div> |
hidden | 除了IE外,都支持,标签是否隐藏 < div hidden></div> |
5. HTML5事件:
5.1 window事件: 即应用到body标签上的事件。
事件名称 | 说明 |
onafterprint | body文档被打印之后触发 |
onbeforerprint | body文档被打印之前触发 |
onbeforeunload | body文档被卸载之前触发 |
onoffline | 文档离线运行时触发 |
ononkue | 文档上线运行时触发 |
onpagehide | 窗口隐藏时触发 |
onpageshow | 窗口显示时触发 |
onresize | 窗口大小改变时触发 |
onstorage | web storage区域更新后触发 |
onundo | 文档运行undo时触发 |
onerror | 文档运行错误时触发 |
onhaschange | 文档改变时触发 |
onmessage | 在消息被触发时触发 |
onpopstate | 窗口历史记录改变时触发 |