HTML5入门

么是HTML5

官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准,用于取代html4与xhtml1 的新一代标准版本,所以叫html5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等 Web 应用的功能。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合

HTML 5发展时间表

由上面图可知：现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发。

目前支持HTML5的浏览器

不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准。（现在处在一个推广阶段），但是大部分是一样的。

HTML5的特点

更简单

标签语义化

语法更宽松

多设备跨平台

自适应网页设计

从头说起——文档的声明

Xhtml1.0的页面架构

Html5的页面架构

HTML5标签的语义化

在以前的html中，盒子用div或span。

在html5中，标签的最大变化是标签都有了语义，以前的div和span都没有语义，仅仅表示一个盒子。

<header> 头标签

<nav> 导航标签

<aside> 侧边栏标签

<article> 文章标签

<footer> 页脚

<section> 章节，页眉，栏目

HTML5新增的表单三个属性

1、required：必填属性

2、placeholder：默认显示内容

3、autofocus：自动获取焦点

Html5中新增input标记的type属性

属性	描述
email	邮件
date	日期
url	网址格式
number	数字
range	范围
color	颜色

完整代码

<form>

邮件：<input type="email" name="email"><br>

日期：<input type="date" name="mydate"><br>

网址：<input type="url"><br>

手机号：<input type="number"><br>

亮度：<input type="range" min="0" max="255"><br>

颜色：<input type="color"><br>

地址：

</optgroup>

</optgroup>

</select><br>

搜索车型：<input type="text" list="car">

</datalist>

</form>

Range调背景色

代码如下：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

//当页面准备完毕的时候

$(document).ready(function(e) {

$('input').change(function(e) {

var red=$('#red').val(); //得到红色的值

var green=$('#green').val(); //得到绿色的值

var blue=$('#blue').val(); //得到蓝色的值

var value=$(this).val(); //当前修改的值

$(this).next().html(value); //将值付给当前修改元素后面的span

$('body').css('background-color','rgb('+red+','+green+','+blue+')');

});

</script>

</head>

<body>

红色：<input type="range" id="red" min="0" max="255" value="255"><span>255</span><br>

绿色：<input type="range" id="green" min="0" max="255" value="255"><span>255</span><br>

蓝色：<input type="range" id="blue" min="0" max="255" value="255"><span>255</span>

</body>

</html>

音频播放

第一种写法

如果声音的格式html5不支持，就显示标记之间的提示信息

第二种写法：

视频播放

使用video标记来插入视频 autoplay表示自动播放，controls表示显示控制面板。

360音乐导航

完整代码如下:

#nav{

list-style-type:none; /*去掉无序列表前面的点*/

margin:50px auto 0px; /*上边界50px,左右居中，下边界为0*/

width:960px; /*整个导航的宽度*/

height:38px;

color:#333;

font-size:14px;

padding:0px; /*填充清0*/

overflow:hidden; /*超出尺寸的部分不显示*/

}

#nav li{

width:105px;

height:36px;

float:left; /*所有的li从左到右排列*/

text-align:center; /*文字居中对齐*/

line-height:38px; /*设置行高，目的是让文字垂直居中*/

border-top:#C9CBCE solid 1px;

border-left:#C9CBCE solid 1px;

border-bottom:#C9CBCE solid 1px;

cursor:pointer; /*光标移动到li上变成手形*/

}

#nav li:last-child{ /*#nav下的最后一个li*/

border-right:#C9CBCE solid 1px;

}

#nav .liclick{

border-top:#54B82A solid 2px;

border-bottom:none;

}

#nav span{

width:100%;

height:38px;

display:block; /*只有块显示标记才能设置宽度和高度*/

position:relative; /*相对定位，目的为了span可以移动*/

z-index:-1; /*设置span上下层的顺序，让它在文字的下面*/

}

</style>

$(document).ready(function(e) {

//点击li

$('#nav li').click(function(e) {

$('.liclick').removeClass('liclick');

$(this).addClass('liclick');

});

//每个li下面添加一个底色

var color=['#B9D329','#C0EBF7','#B9D329','#69BCF3','#79D9F3','#FA5F94','#ACD180','#FAB4CC','#FFAE5B'];

$('#nav li').append('<span>');

$('#nav span').each(function(index, element) {

$(this).css('background-color',color[index]);

});

//移动到li上的时候颜色色块升起

$('#nav li').hover(function(){

$(this).children('span').animate({'top':-38},200);

//获得当前li的索引编号

var index=$(this).index();

$('audio').get(index).play(); //播放第index个音乐

},function(){

$(this).children('span').animate({'top':0},200);

});

</script>

</head>

<body>

</ul>

</body>

相关例题：http://pan.baidu.com/s/1hsDGA8k 密码：55ic

TML基础

HTML历史

早在1969年，美国就建立了世界上第一个电脑网络—阿帕网。但由于当时的电脑网络只是为了数据运算而建，与人们的日常生活相距甚远，故而网络的发展非常缓慢，直到1985年，连接在阿帕网上的电脑主机也只有1961台。

相对于电脑网络来说，网站的出现要晚得多。1989年，欧洲粒子物理实验室研究员Tim Berners-Lee，发明了一种用于网上交换文本的格式，即基于标记的语言HTML，并创建了网上软件平台World Wide Web（万维网）。HTML最吸引人的地方，在于其超文本链接技术，通过超链接，可以非常方便地跳转到其他任何一个网页上。万维网实现了媒体思想家特德·纳尔逊于1965年提出的超文本设想。万维网的出现，带动了网站的裂变式发展，到2006年11月，全球互联网网站总数就已经超过了一亿大关。

1990年11月，第一个Web服务器nxoc01.cern.ch开始运行，Tim Berners-Lee在自己编写的图形化Web浏览器“World Wide Web”上，看到了最早的Web页面。

而世界上第一个网站（当时的网址是http://nxoc01.cern.ch/hypertext/www/theproject.html）早在1992年就关闭了，然而幸运的是这一界面却被保留了下来，只要单击下面这个链接：Multiple Choices

HTML基础

HTML是目前在网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文档是由HTML标签组成的描述性文本，HTML标签可以标识文字、图形、动画、声音、表格、链接等。

HTML语言作用

HTML作为一种网页内容标识语言，易学易懂，熟悉使用该语言可以制作功能强大、美观大方的网页。HTML语言的主要作用说明如下：

　使用HTMl语言标识文本。例如，定义标题文本、段落文本、列表文本、预定义文本等。

　使用HTML语言建立超链接，通过超链接可以访问互联网上的所有信息，当使用鼠标单击超链接时，会自动跳转到链接页面。

　使用HTML语言创建列表，把信息有序地组织在一起，以方便浏览。

　使用HTMl语言在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。

　使用HTML语言可以制作表格，以方便显示大量数据。

　使用HTML语言制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。

　HTML文档基本结构

HTML文档一般都应包含两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。一个完整的HTML文档基本结构如下：每个标签都是成对组成，第一个标签（如<html>）表示标识的开始位置，而第二个标签（如</html>）表示标识的结束位置。<html>标签包含<head>和<body>标签，而<head>和<body>标签是并列排列。

HTML基础

编写HTML文档时，必须遵循HTML语法规范。HTML文档实际上就是一个文本文件，它由标签和信息混合组成，当然这些标签和信息必须遵循一定的组合规则，否则浏览器是无法解析的。

HTML语言的规范条文不多，相信读者也很容易理解。从逻辑上分析，这些标签包含的内容就表示一类对象，也可以称为网页元素。从形式上分析，这些网页元素通过标签进行分隔，然后表达一定的语义。很多时候，我们把网页标签和网页元素混为一团，而实际上，网页文档就是由元素和标签组成的容器。

　所有标签都包含在“<”和“>”起止标识符中，构个标签。例如，<style>、<head>、<body>和<div>等。

　在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的是元素主体。例如，<body>和</body>中间包含的就是网页内容主体。

　起始标签包含元素的名称，以及可选属性，也就是说元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。例如：

<tag>元素主体</ta

　元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。属性与元素名称之间也是通过空格进行分隔。例如：

HTML常用标签

HTML定义的标签很多，下面对常用标签进行说明，随着读者学习不断深入，相信会完全掌握HTML所有标签的用法和使用技巧。

1．文档结构标签

文档结构标签主要用来标识文档的基本结构，主要标签说明如下。

　<html>...</html>：标识HTML文档的起始和终止。

　<head>...</head>：标识HTML文档的头部区域。

　<body>...</body>：标识HTML文档的主体区域。

文本格式标签

文本格式标签主要用来标识文本区块，并附带一定的显示格式，主要标签说明如下。

　<title>...</title>：标识网页标题。

　<hi>...</hi>：标识标题文本，其中i表示1、2、3、4、5、6，分别表示一级、二级、三级等标题。

　<p>...</p>：标识段落文本。

　<pre>...</pre>：标识预定义文本。

　<blockquote>...</blockquote>：标识引用文本。字符格式标签

字符格式标签主要用来标识部分文本字符的语义，很多字符标签可以呈现一定的显示效果。例如，加粗显示、斜体显示或者下划线显示等。

在HTML文档中，列表结构可以分为两种类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。

XHTML文档基本结构

完整的XHTML文档结构如下：

XHTML代码不排斥HTML规则，在结构上也基本相似，但如果仔细比较，它有两点不同。

定义文档类型

在XHTML文档第一行新增了<!DOCTYPE>元素。

声明命名空间

在XHTML文档根元素中必须使用xmlns属性声明文档的命名空间。xmlns是XHTML NameSpace的缩写，中文翻译为命名空间（也有人翻译为名字空间、名称空间）。命名空间是收集元素类型和属性名字的一个详细DTD，它允许通过一个URL地址指向来识别命名空间。

XHTML是HTML向XML过渡的标识语言，它需要符合XML规则，因此也需要定义名字空间。又因为XHTML 1.0还不允许用户自定义元素，因此它的命名空间都相同，就是“Er是根据XML语法简化而来的，因此它遵循XML文档规范。同时XHTML又大量继承HTML语言语法规范，因此与HTML语言非常相似，不过它对代码的要求更加严谨。遵循这些要求，对于培养良好的XHTML代码书写习惯是非常重要的。

　XHTML文档类型

XHTML 1.0支持3种DTD（型定义）声明：过渡型（Transitional）、严格型（Strict）和框架型（Frameset）。

1．过渡型

这种文档类型对于标签和属性的语法要求不是很严格，允许在页面中使用HTML 4.01的标签（符合XHTML语法标准）。过渡型DTD语句如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2．严格型

这类文档类型对于文档内的代码要求比较严格，不允许使用任何表现层的标签和属性。严格型DTD语句如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在严格型文档类型中，以下元素将不被支持。

　center：居中（属于表现层）。

　font：字体样式，如大小、颜色和样式（属于表现层）。

　strike：删除线（属于表现层）。

　s：删除线（属于表现层）。

　u：文本下划线（属于表现层）。

　iframe：嵌入式框架窗口（专用于框架文档类型或过渡型文档）。

　isindex：提示用户输入单行文本（与input元素语义重复）。

　dir：定义目录列表（与dl元素语义重复）。

　menu：定义菜单列表（与ul元素语义重复）。

　basefont：定义文档默认字体属性（属于表现层）。

　applet：定义插件（与object元素语义重复）。

在严格型文档类型中，以下属性将不被支持。

　align（支持table包含的相关元素：tr、td、th、col、colgroup、thead、tbody、tfoot）。

　language。

　background。

　bgcolor。

　border（table元素支持）。

　height（img和object元素支持）。

　hspace。

　name（在HTML 4.01 Strict中支持，在XHTML 1.0 Strict中的form和img元素不支持）。

　noshade。

　nowrap。

　target。

　text、link、vlink和alink。

　vspace。

　width（img、object、table、col和colgroup元素支持）。

框架型

这是一种专门针对框架页面所使用的DTD，

实际上，DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件，后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如，对于XHTML 1.0过渡型DTD的URL为http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd，在Dreamweaver中打开XHTML 1.0过渡型DTD文档，代码显示如图2.4所示。

XHTML 1.0过渡型DTD文档

一个DTD文档包含元素的定义规则，元素间关系的定义规则，元素可使用的属性、实体或符号规则。这些规则用于标签Web文档的内容。此外还包括了一些其他规则，它们规定了哪些标签能出现在其他标签中。文档类型不同，它们对应的DTD也不相同。

　DOCTYPE结构图

DOCTYPE声明中各个部分说明如下。

　顶级元素：指定DTD中声明的顶级元素类型，这与声明的SGML文档类型相对应。HTML文档默认顶级元素为html。

　可用性：指定正式公开标识符（FPI）是可公开访问的对象（PUBLIC）还是系统资源（SYSTEM）。默认为PUBLIC，SYSTEM系统资源包括本地文件或URL。

　组织：指定在!DOCTYPE声明引用的DTD（文档类型定义）的创建和维护的团体或组织的名称。HTML语言规范的创建和维护组织为W3C。

　类型：指定公开文本的类，即所引用的对象类型。HTML默认为DTD。

　标签：指定公开文本的描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。HTML默认为HTML，XHTML默认为XHTML，后面跟随的是语言版本号。

　定义：指定文档类型定义，包含Frameset（框架集文档）、Strict（严格型文档）和Transitional（过渡型文档）。Strict（严格型文档）禁止使用W3C规范中指定将逐步淘汰的元素和属性，而Transitional（过渡型文档）可以包含除frameset元素以外的全部内容。

　语言：指定公开文本的语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为ISO 639语言代码（两个字母要大写），默认为EN（英语）。

名字空间

在XHTML文档中，读者还需要注意另一个容易忽略的问题：给<html>标签定义名字空间。

HTML元信息

在HTML文档结构的头部区域，存储着文档的各种基本信，这些信息主要被浏览器所采用，不会显示在网页正文中。另外，搜索引擎也会检索这些信息，因此重视并设置这些头部信息将有助于提高网页的访问率。

在线咨询

上一篇：HTML最新面试题（笔试面试题）
下一篇：收藏！58个设计师最佳配色工具网站

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5入门

TML基础

您的项目需求