HTML5 移动开发 (HTML5标签和属性)
第一阶
1.如何使用HTML5中的新标签及属性
2.HTML5中的其它变化
3.HTML5的移动支持
4.使用HTML5开发移动WEB引用的理由
第二阶
HTML5为HTML规范加入了一些新的特性,其中最容易理解的就是新的标签。它们过去从未成为HTML的一部分,但现在却是HTML元素了。
大部分新标签被称为“分节”元素,它们为HTML文档布局分段提供语义。
部分如下:
<article> 文档或站点的一个独立部分
<aside> 页面或者主题之外的内容
<figcaption> figure元素的标题
<figure> 独立于文本流之外的一段刘内容(如图形,图标等)
<footer> 文档或章节的页脚
<header> 文档或章节的页眉
<hgroup> 标题组
<nav> 导航部分
<section> 无法被以上类型定义的普通章节
<div id="main">
<div id="header">头部</div>
<div id="nav">导航</div>
<div id="contents">文本区</div>
<div id="footer">底部</div>
</div>
<!--以上是没有用H5标签的例子,现在我们看看用了H5新标签后的写法-->
<section id="main">
<header>头部</header>
<nav>导航</nav>
<section id="contents">文本区</section>
<footer>底部</footer>
</section>
<!--其它语义标签
<details> 新增信息
<mark> 被突出或标记的内容
<meter> 计量器
<output> 脚本或表单结果
<progress> 进度指示
<summary> details元素的概要或说明
<time> 日期或时间
<wbr> 可选的换行符(软转换)
-->
<!--新的多媒体标签
HTML5讨论的是多媒体标签。可以通过以下标签为HTML增添多媒体元素。
<audio> 内嵌音频文件
<canvas> 内嵌动态图形
<embed> 增添其它不包含特定HTML5元素的技术
<source> 内嵌音频及视频的源文件
<track> 内嵌音频及视频的辅助多媒体轨道
<video> 内嵌视频文件
-->
<!--****<canvas>标签用于在HTML页面中绘制矢量图像。可以通过它来为页面增添自定义字体、创建简单活复杂的游戏、让矢量图形动起来。并通过HTML来控制一切,而且并不需要插或额外的XML文件。如下:
-->
<canvas id="simple-square" width="800" height="800px"></canvas>
<script type="text/javascript">
function drawSqurare () {
var canvas = document.getElementById( 'simple-square' );
if ( canvas.getContext ) {
var context = canvas.getContext( '2d' );
context.fillStyle = "rgb(13, 118, 208)";
context.fillRect (2, 2, 798, 798);
} else {
alert( "麻烦你去升级一下你的浏览器!别让我再看到你!" );
}
}
</script>
<!-- 那么HTML5 在表单上用了很大的篇幅,具体讲到的时候在详细分享 或先行去了解下 -->
<!--那么多打几个字,介绍下更好的国际化支持
以下5个HTML5新标签进一步为非英语文档提供支持
<bdi> 标签用来改变HTML中文本文字的方向。例如要在英文文档中插入一个希伯来文,就可以将它用bdi标签嵌套起来
<meat charset> 标签用来定义WEB页面使用的字符集编码
<rp> 若使用中文,日文等双字节语言书写HTML时,通常有附注文字字符,它们是字符旁边的小注释,通常用来标记读音
<rt> <ruby>标签知名附注文字字符的范围,可包括代表附注文本的<rt>和代表附注文本两侧括号的<rp>.
<ruby> 如:<ruby><rp><rt>ruby text</rt></rp></ruby>
-->
<!--HTMl4标签和属性的变化 一些HTML4中不包含语义部分的标签在H5中被赋予了语义含义
<b> 粗体文本
<i> 斜体文本
<hr> 文本中的主题性分段
<s> 不再准确或无关的内容(删除线)
<small> 法律文档等附属细则(小号字体)
有些标签含义有所改变
<address> 成为分节内容的一部分
<cite> 可以表示引用作品的标题,但不能用来标记人名
<menu> 标签用于创建工具栏及右键菜单
......太多了就不一一列出了,日后用到的时候在分享
-->
HTML5 移动开发 (HTML5标签和属性)的更多相关文章
- html5 中常用的标签和属性
标签: <blockquote> 标签定义摘自另一个源的块引用. <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来, ...
- HTML5 添加新的标签 input属性
<!-- 新增 有语意标签 --> <nav></nav> <!-- 导航标签 --> <seclion></seclion> ...
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- HTML5新增的标签和属性归纳
收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...
- HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...
- HTML5探索一(那些新增的标签和属性)
tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...
- 认识HTML5中的新标签与新属性
前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...
随机推荐
- Python初学者随笔Week1
Python从入门到放弃 本文主要是描述的是作为初学者对python学习的过程与经历分享,包括一些历程的分享与重要的时间节点记录,对于python学习的笔记与心得. 如果你也是初学者,我们可以一起学习 ...
- 华为云Istio服务网格,让应用治理智能化、可视化
- Windows 7上安装配置TensorFlow-GPU运算环境
Windows 7上安装配置TensorFlow-GPU运算环境 1. 概述 在深度学习实践中,对于简单的模型和相对较小的数据集,我们可以使用CPU完成建模过程.例如在MNIST数据集上进行手写数字识 ...
- 通过监控Nginx日志来实时屏蔽高频恶意访问的IP
目前在我的VPS上主要通过两种方式来限制ip的访问次数. 通过Nginx的limit_req配置来限制同一ip在一分钟内的访问次数 通过Nginx deny封禁一天内超过指定次数的ip(需要一个监控脚 ...
- Vue.js 相关知识(动画)
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
- CSAPP lab2 二进制拆弹 binary bombs phase_2
给出对应于7个阶段的7篇博客 phase_1 https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2 https://www.cnblogs. ...
- 《Linux内核分析与实现》 第四周 读书笔记
第五章 系统调用 20135307 张嘉琪 5.1 与内核通信 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 它为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳 ...
- 专业实训题目需求分析(3D推箱子)
业务需求: 游戏提供主菜单让玩家进行游戏设置.帮助说明,推箱子的小人可以前后左右转动,箱子可以被上下左右的推动,要有关卡设置,障碍物设置,游戏提供背景音乐的功能,要实现3D效果. 面向的用户类型 ...
- HTTP 协议(2)
一.URL HTTP 是一个基于 TCP 的应用层协议,其中 HTTP1.1 版本中支持持续的连接机制(Keep-alive),绝大多数的 WEB 开发都是基于 HTTP 的应用. HTTP 的 UR ...
- Oracle DROPtable以及Truncate table 的简单测试
1. 一个用户库 有一个业务表比较大 大小是 49g 表的行数为:121546147 一亿两千万行 制作一个虚拟机的快照测试一下 drop table 和 truncate table的性能差距 2. ...