了解HTML5

   HTML5是HTML的最新版本,HTML又称为超文本语言。如今几乎所有的智能手机和平板电脑都能支持HTML5。HTML5的主要目的是用来开发更优秀、更高效的Web应用,它是在开放Web标准下开发的API和规范的。对于iOS和Android设备,都能很好的支持HTML5,因为它们运行的浏览器Safari、Chrome都基于WebKit,WebKit对HTML5有相当出色的支持。

Web应用

   Web应用是指与桌面应用相似的web应用(Word、IE、Web浏览器),简而言之,Web应用就是不直接在计算机上打开,而是通过Web浏览器来运行。使用HTML5为iOS和Android设计Web页面的好处是在未来的设备上可以继续使用。

HTML5中的新标签

<article>-文档或站点的一个独立部分

<aside>-页面或站点主题之外的内容

<figcaption>-figure元素的标题

<figure>-独立于文本流之外的一段流内容(图形、图表)

<footer>-文档或章节的页脚

<header>-文档或标题的页眉

<hgroup>-标题组

<nav>-导航

<section>-章节部分

以下是一小段代码:

在许多Web设计中,<div id  = "header">,在HTML5中将写成<header>,还有一些其他不同变化。

HTML5新的多媒体标签

<audio>-内嵌音频文件

<canvas>-内嵌动态图形

<embed>-增添其他不包含特定H5元素的技术

<source>-内嵌音频及视频的源文件

<track>-内嵌音频及视频的辅助多媒体轨道

<video>-内嵌视频文件

HTML5 的新属性

onabort-操作终止时触发

onbeforeonload、onbeforeonunload、onunload-在某一元素记载或卸载之前或同时触发

oncontextmenu-打开菜单时触发

ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-发生拖拽时触发

onerror及onmessage-错误或弹出信息时触发

onscroll-用户滚动浏览器滚动条时触发

onresize-调整元素大小时触发

HTML5拥有与视频、音频、Web应用程序、编辑页面内容、拖拽以及展示浏览器历史等功能相关的API,另外H5开放Web还提供于地理定位、Web存储及离线Web应用程序的API,这些都非常适合在移动设备上使用。

用CSS3设计移动页面样式

  CSS(层叠样式表),是移动Web开发中的一个重要组成部分,CSS用于定义HTML文档的外观,Web页面显示或特定移动设备来定制HTML样式。创建CSS样式表,CSS由附加了样式属性的一个或者多个选择器组成。例如在更改段落的文本颜色时,可以写为:

p {

color:red;

}

p为选择器,样式属性为color:red。如果要加入第二个选择器,需要逗号隔开

p, .redText }

       color: red

}

样式表附加到Web页面的方法:

1、内联在标签中

2、内嵌于HTML开头

3、放在一个独立文档作为样式表

内联:

将单一段落的文本颜色定位为红色

<p style = "color : red;">

内联的缺点是只能定义所在标签的样式,如果要讲所有段落都定义为红色时,需要就爱那个样式属性添加在每个段落。

内嵌:

内嵌样式表位于文档的<head>标签中,使用<style>标签,下面是讲所有段落文本设置为红色

  效果如下:

内嵌样式与内联样式一样,只能影响所处页面的样式。如果我们需要将同一样式作用于其他Web页面,需要将它们分别粘贴到每个页面,这个时候独立的样式表的好处就体现出来了。

外联样式表

创建外联样式表的步骤:

1.打开一个新文档

2.编写样式表,但是要去掉<style>标签

3.  讲该文件保存为扩展名为.css的样式表文件,例如 :style.css 

  下面的代码是将段落定义为红色并包含其他样式的样式表

ps:完成样式表,要记得讲它附加到Web页面中,在文档开头加一个指向样式表的<link>标签。代码如下:

<link href = "styles.css" rel="stylesheet">

ps:外联样式表可以提高网站加载速度,如果将所有样式放在同一个文档中的外联样式表

学习无止境,督促自己不断前进吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,866评论 1 11
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,511评论 32 459
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 参与众筹项目的人通常有较强的风险识别能力,对他们来说,项目的核心要点几句话就听明白了,他自然也知道自己能得到什么;...
    龚佩祯阅读 165评论 0 0