【HTML5】初识HTML5+HTML5页面元素及属性1

初识HTML5

1 HTML5概况

HTML5是超文本标记语言Hyper Text Markup Language）的第5代版本，目前还处于推广阶段。
在HTML5平台上，视频、音频 图像,动画及同电脑的交互都被标准化。

1.1HTML5发展历程

2014年10月29日，万维网联盟宣布，经过八年的艰辛努力，HTML5标准规范终于指定完成，并公开发布。

1.2HTML5的优势

从HTML4.0,XHTML到HTML5。从某种意义上讲，这是HTMIL描述性标记语言的一种更加规范的过程 。因此，HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特i性。

1.解决了跨浏览器问题

针对不支持新标签的老式IE浏览器，只需简单地添加 JavaScript代码就可以使用新的元素。

2.新增了多个新特性

HTML语言从1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒仕
显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。

• 新的特殊内容元素，比如header、nay、section、article、footer。
• 新的表单控件，比如calendar、date、ime、email、url、search。
• 用于绘画的canvas元素。
• 用于媒介回放的video和audio元素。
• 对本地离线存储的更好支持。
• 地理位置、拖曳、摄像头等 API。

3.用户优先的原则

HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强HTML5的使用体验，还加强了以下两方面的设计。

1. 安全机制的设计。
2. 表现和内容分离：表现和内容分离是 HTML5设计中的另一个重要内容。实际上，表现和内容的分离早在HTML4.0中就有设计，但是分离的并不彻底。

4.化繁为简的优势

作为当下流行的通用标记语言，HTML5尽可能地简化，严格遵循了“简单至上”的原则。

1. 新的简化的字符集声明。
2. 新的简化的 DOCTYPE。
3. 新的简化的 DOCTYPE。
4. 以浏览器原生能力替代复杂的JavaScript代码。

为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。

2 HTML5基础

2.1HTML5文档基本格式

1. < ! doctype >标记。
2. < html> 标记称为：根标记。
3. < head>标记称为：头部标记。
4. < body>标记称为：主体标记。 主体标记与头部标记并列关系
一个HTML文档只能含有一对< body>标记，且< body> 标记必须在< html>标记内，位于< head>头部标记之后，与< head> 标记是并列关系。

2.2HTML5语法

1. 标签不区分大小写。
2. 允许属性值不适用引号。
3. 允许部分属性值的属性省略。{checled 、readonly、defer、ismap、nohref、noshade、nowrap、selected、disabled、multiple、moresize}。

2.3HTML标记

1.双标记与单标记

1. 双标记 ：< 标记名> 内容
2. 单标记 ：< 标记名 />

2.注释标记

• < ! – 注释标记 – >

3.4标记的属性

• < 标记名 属性1=“属性值1” 属性2=“属性值2” …> 内容
• < h1 align=“center”>标题文本< h1>

其中align为属性名，center为属性值。
表示标题文本居中对齐，对于标题标记还可以置文本左对齐或右对齐，
对应的属性值分别为left 和right。
如果省略align属性，标题文本则按默认值左对齐显示，也就是说< h1>< /h1>等价于< h1 align=“left”>< /h1>。

• 在< p>标记中包含了< strong>之标记。在HTML 中，把这种标记间的包含天系称为标记嵌套。
  < p>传智云课堂是
  < strong>传智播客< /strong>
  在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，
  专注于网页、平面、UI设计以及Web前端的培训。
  < /p>

需要注意的是，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序依次关闭标记 。

2.5HTML5文档头部相关标记

1. 设置页面标题标记< title>

2. 定义页面元信息标记< meta />

   • 设置网页关键字
   • 设置网页描述
   • 设置网页作者
   • 设置字符集
   • 设置页面自动刷新与跳转

3. 引用外部文件标记< link>

4. 内嵌样式标记< style>

3 文本控制标记

3.1标题和段落

1. 标题标记
【使用< h1>< h2>< h3 >< h4>< h5 >< h6>，有< h1>到< h6>重要性递减】
【语法：< hn align=“对齐方式”> 标题文字< / hn>】
对齐方式
【1.left: 设置标题文字左对齐（默认值）】
【2.center：设置标题文字居中对齐】
【3.right：设置标题文字右对齐】

2. 段落标记
【语法：< p align=“对齐方式”>段落文本< /p>】
对齐方式
【1.left: 设置段落文字左对齐（默认值）】
【2.center：设置段落文字居中对齐】
【3.right：设置段落文字右对齐】
3. 水平线标记< hr />
【语法：< hr 属性=“属性值” />】
【< hr />是单标记。在网页中输入一个< hr /> ，就添加一条默认样式的水平线。】
属性值
【align：设置水平线对齐方式（left、right、center 默认为居中对齐）】
【size：设置水平线粗细（以像素为单位 ）】
【color：设置水平线颜色】
【width：设置水平线的宽度】
4. 换行标记< br />

3.2文本格式化标记

【< b>< /b>和< strong>< /strong> 文字以粗体显示】
【< i>< /i>和< em>< /em> 文字以斜体显示】
【< s>< /s>和< del>< /del>文字以加删除线方式显示】
【< u>< /u>和< ins>< /ins>文字以加下划线方式显示】

4 图像标记

4.1常用图像格式

1. GIF格式
2. PNG格式
3. JPG格式

4.2图像标记< img />

【< img src=“图像URL” />】
【（属性：URL路径、alt文本、title文本、width宽度、height高度、border、vspace、hspace、align）】

4.3绝对路径与相对路径

1.绝对路径
绝对路径就是网页上的文件或目录在硬盘上的真正路径，如“D:\HTML5+CSS3\images\logo.gif”，或完整的网络地址，如“http://www.itcast.cn/images/logo.gif”。
网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也可能在bb文件夹中。也就是说，很有可能不存在“D\HTML5+CSS3\images\logo.gif”这一个路径。

2.相对路径
相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以 HTML 网页文件为起点，通过层级关系描述目标图像的位置。总结起来，相对路径的设置分为以下3种。
（1）图像文件和 html文件位于同一文件夹：只需输入图像文件的名称即可，如< img src=“logo.gif” />。
（2）图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之用“/”隔开，如< img src=“images/logo.gif”/>。
（3）图像文件位于html文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级需要使用“…/…/”，以此类推，如。

5 超链接标记

5.1 创造超链接

< a href="跳转目标”target=“目标窗口的弹出方式”>文本或图像< /a>
在上面的语法中，< a>标记用于定义超链接，href和 target为其常用属性，具体解释
下。

（1）href：用于指定链接目标的url地址，当为< a>标记应用 href属性时，它就具有了超
接的功能。
（2）target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默
值，意为在原窗口中打开，_blank为在新窗口中打开。