一步HTML5教程学会体系
HTML5是HTML最新的版本,万维网联盟。
HTML5是下一代的HTML标准,HTML5是为了在移动设备上支持多媒体。
新特性:
绘画的canvas元素,用于媒介回放的video和audio元素,对本地离线存储有更好的支持,新的元素,新的表单控件。
article,footer,header,nav,section
calendar,date,time,email,url,search
HTML5语法
HTML5标签名大写,属性的双引号可选,属性值可选,闭合所有空元素可选。
标签名大写,属性的双引号可选,属性值可选,闭合空元素可选。
<!DOCTYPE html>
字符编码:
<meta charset="UTF-8">
<script type="text/javascripts" src="xxx.js"></script>
<script src="xxx.js"></script>
文档元素:
section:这个标签标示通用的文档或者应用程序节
article:这个标签文档内容的一个独立块,比如博客条目或者是报纸上的文章
aside:标签标示与页面其他部分略微相关的内容块
header:标示一个节的头部
footer:标示一个节的脚注
nav:标示用于导航文档的节
dialog:这个标签可以用于标记会话
figure:这个标签可以用于关联标题和某些嵌入内容,比如图表和视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
HTML5 属性
元素可以包含属性给一个元素设置各种属性。
<div class="example">...</div>
accesskey 用户自定义 定义访问元素的快捷键
align right,left,center 水平对齐标签
background url 在元素后面设置一个背景图像
bgcolor 数值 在元素后面设置一个背景颜色
class 用户定义 分类一个元素,便于使用级联样式表
contextmenu 为元素定义上下文菜单
data-xxx 用户定义 自定义属性
draggable 定义用户是否可以拖动元素
height hidden 定义元素是否应该可见
id 用户定义 便于使用级联样式表
item 元素列表 用于组合元素
itemprop 条目列表 用于组合条目
style css样式表 给元素定义内联样式
subject 用户定义id 定义元素关联的条目
tabindex 定义元素的tab键顺序
title 用户定义 元素的弹出标题
valign top,middle, bottom HTML元素内标签的垂直对齐方式
事件
offline 文档进入离线状态时触发
onabort 事件中断时触发
onafterprint 文档被打印后触发
onbeforeonload 文档载入前触发
onbeforeprint script 文档被打印前触发
onblur script 窗口失去焦点时触发
oncanplay script 媒体停止缓冲,可以开始播放时触发
oncanplaythrough script 媒体可以播放到结束时触发,无需停止缓冲
onchange script 元素发生变化时触发
onclick script 鼠标点击触发
oncontextmenu script 上下文菜单被触发时触发
ondblclick script 双击鼠标时触发
ondrag script 元素被拖动时触发
ondragend script 拖拽操作结束时触发
ondragenter script 元素被拖拽到有效放置目标时触发
ondragleave script 元素离开有效放置目标时触发
ondragover script 元素被拖放到有效目标上时触发
ondragstart script 拖拽操作开始时触发
ondrop script 拖动的元素被放置时触发
ondurationchange script 媒体时长改变时触发
onemptied script 媒体资源元素突然清空时触发
onended script 媒体到达终点时触发
onerror 发生错误时触发
onfocus 窗口获得焦点时触发
onformchange 表单变化时触发
onforminput 表单获得用户输入时触发
onhaschange文档变化时触发
oninput 元素获得用户输入时触发
oninvalid 元素失效时触发
onkeydown 键盘按下时触发
onkeypress 键盘按下并释放时触发
onkeyup 按键释放时触发
onload 载入文档时触发
onloadeddata 载入媒体数据时触发
onloadedmetadata 媒体元素的媒体数据载入时触发
onloadstart浏览器开始载入媒体数据时触发
onmessage消息被触发时触发
onmousedown 鼠标按键被按下时触发
onmousemove 鼠标指针移动时触发
onmouseout 鼠标指针移出元素时触发
onmouseover 鼠标指针移入元素时触发
onmouseup 鼠标按键释放时触发
onmousewheel 鼠标滚动转动时触发
onoffline 文档进入离线状态时触发
onoine 文档上线时触发
onpagehide 窗口隐藏时触发
onpageshow 窗口变得可见时触发
onpause 媒体数据暂停时触发
onplay 媒体数据开始播放时触发
onpalying 媒体数据播放时触发
onpopstate 窗口历史信息改变时触发
onredo script 文档执行 redo 操作时触发
onresize script 调整窗口尺寸时触发
onscroll script 元素的滚动条滚动时触发
onseeked script 媒体元素的 seeking 属性不在为真并结束时触发
onseeking script 媒体元素的 seeking 属性为真,seeking 开始时触发
onselect script 元素被选中时触发
onstalled script 获取媒体数据发生错误时触发
onstorage script 载入文档时触发
onsubmit script 表单提交时触发。
onsuspend script 浏览器获取媒体数据,但获取整个媒体文件中止时触发
ontimeupdate script 媒体播放位置改变时触发
onundo script 文档执行 undo 操作时触发
onunload script 用户离开文档时触发
onvolumechange script 媒体音量发生变化,包括设置为“静音”时触发
onwaiting script 媒体停止播放,等待恢复时触发
text
自由形式的文本字段,名义上没有换行符。
password
用于敏感信息的自由形式的文本字段,名义上没有换行符。
checkbox
预定义列表中的一组零个或多个值。
radio
一个枚举值。
submit
一个自由形式的启动表单的按钮。
file
带有 MIME 类型的任意文件以及可选的文件名。
image
一个坐标,相对于特定图片的尺寸,额外的语义是它必须是最后选中的值,同时启动表单提交。
hidden
默认不显示给用户的任意字符串。
select
枚举值,类似 radio 类型。
textarea
自由形式的文本字段,名义上没有换行的限制。
button
自由形式的按钮,可以启动按钮相关的任何事件。
<form action="" method="post">
<p>
<label for="firstname"> first name: </label>
<input type="text" id="firstname"><br />
<label for="lastname"> last name:</label>
<input type="text" id="lastname"><br />
<label for="email"> email: </label>
<input type="text" id="email"><br>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female<br>
<input type="submit" value="send">
<input type="reset">
</p>
</form>
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达叔小生的简书!
这是一个有质量,有态度的博客
[外链图片转存失败(img-ehWXxUwZ-1563890091680)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
一步HTML5教程学会体系的更多相关文章
- 【一起来烧脑】一步React.JS学会体系
[外链图片转存失败(img-cn4fbVDq-1563575047348)(https://upload-images.jianshu.io/upload_images/11158618-8c6f3d ...
- 【特别推荐】Web 开发人员必备的经典 HTML5 教程
对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...
- html5,html5教程
html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...
- 【转帖】39个让你受益的HTML5教程
39个让你受益的HTML5教程 闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...
- HTML5教程之本地存储SessionStorage
SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...
- 【一起来烧脑】一步Sass学会体系
[外链图片转存失败(img-G32u6UQ8-1563572536495)(https://upload-images.jianshu.io/upload_images/11158618-a03a58 ...
- 【转】39个让你受益的HTML5教程
闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...
- 39个让你受益的HTML5教程
1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...
- html5 教程网站
html5 MDN Canvas tutorial Canvas教程 canvas: 阮一峰 在那山的那边海的那边有一群程序猿 使用 HTML5 canvas 绘制精美的图形 HTML5定稿了,为什么 ...
随机推荐
- [高清·非影印] Docker 容器与容器云(第2版)
------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...
- 利用ime-mode设置文本框只能输入正整数
html: <input type="text" id="packageratio"style="ime-mode: disabled;&quo ...
- 导出Excel的2个方法
导出到Excel的两种方法 第一种: 1.首先创建Excle模板,另存为 “xml”文件.使用记事本等编辑软件打开文件的代码.然后另存为视图文件“Export.cshtml”; 2.控制器操作 pub ...
- sql语句将图片插入image类型的字段中
update table set photo=(SELECT * FROM OPENROWSET(BULK N'D:\no.png', SINGLE_BLOB) as Photo) From:h ...
- 【转载】C#中List集合使用Remove方法移除指定的对象
在C#的List集合操作中,有时候需要将特定的对象或者元素移除出List集合序列中,此时可使用到List集合的Remove方法,Remove方法的方法签名为bool Remove(T item),it ...
- Oracle 操作数据库(增删改语句)
对数据库的操作除了查询,还包括插入.更新和删除等数据操作.后3种数据操作使用的 SQL 语言也称为数据操纵语言(DML). 一.插入数据(insert 语句) 插入数据就是将数据记录添加到已经存在的数 ...
- LeetCode算法01 Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- java数据库数据导入excel
data导出入excel中 controller: package com.longfor.hrssc.api.controller; import com.longfor.hrssc.api.mod ...
- 使用Cloudera Manager搭建HDFS完全分布式集群
使用Cloudera Manager搭建HDFS完全分布式集群 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 关于Cloudera Manager的搭建我这里就不再赘述了,可以参考 ...
- jquery属性文档事件等操作
1.jq方法attr removeAttr script标签大部分都是写在body标签上.下面的情况下$符号是拿不到的. 将它放到上面就能拿到$对象了.但是不能获取body里的元素.因为代码执行顺序从 ...