专栏首页达达前端一步HTML5教程学会体系

一步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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端-JavaScript基础教程下

    javascript的使用要用<script>元素,外部的文件使用src指向相应的文件,<script>会按照他们在页面的先后依次被解析,defer属性可以让当...

    达达前端
  • Web前端JQuery面试题(一)

    匹配包含给定文本的元素 匹配所有不包含子元素或者文本的空元素 匹配含有选择器所匹配的元素的元素 匹配含有子元素或者文本的元素

    达达前端
  • (7)打鸡儿教你Vue.js

    达达前端
  • 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,...

    张果
  • 数据结构初探

    数组是可以再内存中连续存储多个元素的结构,在内存中的分配也是连续的,数组中的元素通过数组下标进行访问,数组下标从0开始

    猿_人类
  • 分享经济:一个互联网消费理念如何上升为中国国家战略

    腾讯研究院总监 张孝荣   在10月底举行的中共十八届五中全会会议公报里,空前的提到六个字:发展分享经济。   在9月上旬,国务院总理李克强出席夏季达沃斯开...

    腾讯研究院
  • axios+vue 实现api调用并展示

    kirin
  • JS基础入门篇( 一 )

    2.JS写在script ( 一般写在body结束标签之前 ) 因为JS的执行顺序,需要将元素加载完成,才能获取到元素,故一般写在body结束标签之前。

    前端博客 : alili.tech
  • JavaScript实现超时调用的功能

    <script type="text/javascript"> function showMsg(){ alert("1秒之后会有新的提示"); ...

    小小鱼儿小小林
  • WordPress评论框配置activate-power-mode打字效果——超动感打字特效

    神无月

扫码关注云+社区

领取腾讯云代金券