初识HTML5

第一部分、HTML5的优势

HTML5的优势主要体现在兼容、合理、易用三个方面。

• 兼容：HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。
• 合理：HTML5中增加和删除的标签都是对现有的网页和用户习惯进行分析、概括而推出的。
• 易用：作为当下流行的标签语言，HTML5严格遵循 “简单至上”的原则。

第二部分、HTML5全新的结构

标签名称	作用
<!DOCTYPE>标签	位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。
< htm >标签	DOCTYPE> 标签之后，也称为根标签，用于告知浏览器其自身是一个 HTML 文档。
< head >标签	定义HTML文档的头部信息，也称为头部标签，紧跟在标签之后，主要用来封装其他位于文档头部的标签。
< body >标签	定义HTML文档所要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于标签内。

第三部分、标签概述

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的< html >、< head >、< body >都是HTML标签。所谓标签就是放在“< >”符号中表示某个功能的编码命令，也称为HTML标签或HTML元素,统一称作HTML标签。

1.标签的分类

• 双标签：双标签是指由开始和结束两个标签符组成的标签。（例如：< h1 > < /h1 >)
• 单标签：单标签是指用一个标签符号即可完整地描述某个功能的标签。(例如：< /br>)

2.标签的关系

（1）嵌套关系

    <ul>
         <li>西安邮电大学</li>
    </ul>

（2）并列关系

    <ul></ul>
    <ol></ol>

3.标签的属性

    <h1 align="center" >标题文本<h1>

align为属性名
center为属性值，表示标题文本居中对齐

4.文本控制标签

（1）标题标签

    <h1>文本</h1>

HTML提供了6个等级的标题，即< h1 >、< h2 >、< h3>、< h4 >、< h5 >和< h6 >，从< h1 >到< h6 >标题的重要性依次递减，字号也依次减小。
格式为< hn >文本< /hn >,可以自动换行。

（2）段落标签

    <p>内容</p>

< p >内容< /p >,会自动换行。

（3）水平线标签

    <hr align='' color='' size='' width=''/>

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center三种值，默认为center，居中对齐显示。
size	设置水平线的粗细	以像素为单位，默认为2像素。
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb(r,g,b)。
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。

（4）换行标签

    <br>	

5.文本样式标签

属性名	含义
face	设置文字的字体，例如微软雅黑、黑体、宋体等
size	设置文字的大小，可以取1到7之间的整数值
color	设置文字的颜色

6.文本格式化标签

标记	显示效果
< b >< /b >和< strong >< /strong >	文字以粗体方式显示（XHTML推荐使用strong）
< i >< /i >和< em >< /em >	文字以斜体方式显示（XHTML推荐使用em）
< s >< /s >和< del >< /del >	文字以加删除线方式显示（XHTML推荐使用del）
< u >< /u >和< ins >< /ins >	文字以加下划线方式显示（XHTML不赞成使用u）

7.文本语义标签

（1）time标签

time标签用于定义时间或日期，可以代表24小时中的某一时间。time标签不会在浏览器中呈现任何特殊效果，但是该元素能够以机器可读的方式对日期和时间进行编码，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。

（2）mark标签

mark标签的主要功能是在文本中高亮显示某些字符，该元素的用法与em标签和strong标签有相似之处，但是使用mark标签在突出显示样式时更随意灵活。

    <p>
            我种下一粒<mark>种子</mark>
    </p>

（3）cite标签

    <p>
        床前明月光 <br>
        <cite>--李白《静夜思》</cite>
    </p>

（4）特殊字符标签

特殊字符	描述	字符的代码
	空格符	&nbsp ;
<	小于号	&lt ;
>	大于号	&gt ;
&	和号	&amp ;
￥	人民币	&yen ;
©	版权	&copy ;
®	注册商标	&reg ;
°	摄氏度	&deg ;
±	正负号	&plusmn ;
×	称号	&times ;
÷	除号	&divide ;
²	平方号	&sup2 ;
³	立方号	&sup3 ;

第四部分、图像标签

1.图像标签< img / >

    <img src="" alt="" title=""><!-- src中可以用URL找到图像的路径，alt是图像不能显示时的替换文本,title中时鼠标悬停时现实的内容。 -->

2.相对路径和绝对路径

实际工作中，通常新建一个文件夹专门用于存放图像文件。这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。

（1）相对路径

相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

（2）绝对路径

绝对路径一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。