《 HTML5 》— HTML入门详解+语法详解

使用Dreamweaver CS6来创建一个HTML5页面。具体步骤如下：

(1)打开Dreamweaver CS6，选择菜单栏中的“文件”→“新建”命令，弹出“新建文档”对话框，如图1-2所示。在“页面类型”列表中选择“HTML”选项，并在右下角的“文档类型”下拉菜单中选择“HTML5”。

(2)点击“创建”按钮，将会新建一个HTML5默认文档。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码。

 (3)修改HTML5文档标题，将代码 这是王小二的第一个HTML5页面哦！

(4)在菜单栏中选择【文件】→【保存】选项，其快捷键为Ctrl+S。接着，在弹出来的“另存为”对话框中选择文件的保存地址并输入文件名即可保存文件

 

(5)在谷歌浏览器中运行example01.html

此时，浏览器窗口中将显示一段文本，第一个简单的HTML5页面创建完成。

自带源代码分析：

 

自带的源代码构成了HTML5文档的基本格式，其中主要包括文档类型声明、根标记、头部标记、主体标记，具体介绍如下：

1、标记

标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或XHTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：

只有在开头处使用声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。

2、标记

标记位于标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，标记标志着HTML文档的开始，标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。

3、标记

标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记，例如

计算机与信息技术学院欢迎你！

更新时间：2017年03月05日 来源：信阳

---

计算机与信息技术学院有四个专业，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。

 

进一步：

 

       
计算机与信息技术学院欢迎你！
       
更新时间：2017年03月05日  来源：信阳
       

       
计算机与信息技术学院有四个专业，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。

将标题标记

的align属性设置为center，使标题文本居中对齐，代码中同样使用align属性使段落文本居中对齐。另外，代码使用水平线标记的size和color属性设置水平线为特定的粗细和颜色。

 

如图对比：

5、页面标题标记

标题标记title用于显示网页标题名称，HTML将显示在浏览器的标题栏里。

 

 

 

6、

设置h2标题为红色字体

设置p段落为蓝色字体

使用style标记定义内嵌式的CSS样式，控制网页中文本的颜色。

 

 

 

7、标题标记的使用

 

 
 
 
 
 
 
 
 
1级标题
2级标题
 
3级标题
 
4级标题
 
5级标题
 
6级标题
 
 

使用

到

标记设置6种不同级别的标题

 

 

 

 

8、示段落标记

的用法和其对齐方式

 

 
 
 
 
 
 
 
 
相传《大学》是孔子的学生曾子所作。《大学》一书，文辞简约，内涵深刻，主要概括总结了先秦儒家道德修养理论
 
孔子
 
孟子
 
老子
 
 

 

 

第一个

标记为段落标记的默认对齐方式，第二、三、四个

标记分别使用align="left"、align="center"和align="right"设置了段落左对齐、居中对齐和右对齐。

通过使用

标记，每个段落都会独占一行，并且段落之间拉开了一定的间隔距离。

 

9、使用水平线分割段落文本来演示

---

标记的用法和属性

 

 

相传《大学》是孔子的学生曾子所作。《大学》一书，文辞简约，内涵深刻，主要概括总结了先秦儒家道德修养理论

孔子

孟子

老子

  

 

 

 

第一个

---

标记为水平线的默认样式，第二、三个

---

标记分别设置了不同的颜色、对齐方式、粗细和宽度值。

注意：

在实际工作中，不赞成使用

---

的所有外观属性，可通过CSS样式进行设置。

 

10、在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记
，这时如果还像在word中直接敲回车键换行就不起作用

 

 

使用HTML制作网页时通过br标记
可以实现换行效果
如果像在word中一样
敲回车换行就不起作用了

 

 

 

分别使用换行标记
和回车键两种方式进行换行。

使用回车键换行的段落在浏览器实际显示效果中并没有换行，只是多出了一个字符的空白，而使用换行标记
的段落却实现了强制换行的效果。

注意：

标记虽然可以实现换行的效果，但并不能取代结构标记、

等。

 

11、各种标记的效果

 

 

 
 
 
 
 
 
 
我是正常显示的文本
 
我是使用b标记定义的加粗文本
 
我是使用strong标记定义的强调文本
 
我是使用i标记定义的倾斜文本
 
我是使用em标记定义的强调文本
 
我是使用del标记定义的删除线文本
 
我是使用del标记定义的下划线文本
 
 

 

 

 

12、alt属性的用法

 

在当前HTML网页文件所在的文件夹中放入文件名为photo,jpgf的图像，并且通过src属性插入图像，通过alt属性指定图像不能显示时的替代文本。

 

 

 

在过去网速比较慢的时候，alt属性主要用于使看不到图像的用户了解图像内容。随着互联网的发展，现在显示不了图像的情况已经很少见了，alt属性又有了新的作用。Google和百度等搜索引擎在收录页面时，会通过alt属性的内容来分析网页的内容。因此，如果在制作网页时，能够为图像都设置清晰明确的替换文本，就可以帮助搜索引擎更好地理解网页内容，从而更有利于搜索引擎的优化。

注意：

各浏览器对alt属性的解析不同，由于Firefox对alt属性支持情况良好，所以这里使用的是Firefox。如果使用其他的浏览器如IE、谷歌等，显示效果可能存在一定的差异。 

13、图像标记有一个和alt属性十分类似的属性title，title属性用于设置鼠标悬停时图像的提示文字。

 

其实，title属性除了用于图像标记外，还常常和超链接标记以及表单元素一起使用，以提供输入格式和链接目标的信息。

 

 

 

14、图像的宽度、高度以及边框属性

 

第一个图像显示为原尺寸大小，并添加了边框效果，第二个img标记由于仅设置了宽度按原图像等比例显示，第三个img标记则由于设置了不等比例的宽度和高度导致图片变形

 

 

使用了三个标记，对第一个标记设置2像素的边框，对第二个标记仅设置宽度，对第三个标记设置不等比例的宽度和高度。

15、实现网页中常见的图像居左文字居右的效果

 

 
 
 
 
 
 
 
 故今日之责任，不在他人，而全在少年。少年智则国智，少年富则国富，少年强则国强，少年独立则国独立，少年自由则国自由，少年进步则国进步，少年胜于欧洲，则国胜于欧洲，少年雄于地球，则国雄于地球。
 
 

 

 

 

使用hspace和vspace属性为图像设置了水平边距和垂直边距。为了使水平边距和垂直边距的显示效果更加明显，同时给图像添加了1像素的边框，并且使用align="left"使图像左对齐。

 

注意：

1、HTML不赞成图像标记使用border、vspace、hspace及align属性，可用CSS样式替代。

2、网页制作中，装饰性的图像都不要直接插入标记，而是通过CSS设置背景图像来实现。

16、创建一个带有超链接功能的简单页面

 

 
 
 
 
 
 
 
 动漫少年！ target="_self"原窗口打开

 百度 target="_blank"新窗口打开
 
 

 

 

 

创建了两个超链接，通过href属性将它们的链接目标分别指定为“传智播客官网”和“百度”。同时，通过target属性定义第一个链接页面在原窗口打开，第二个链接页面在新窗口打开。被超链接标记环绕的文本“传智播客”和“百度”颜色特殊且带有下划线效果，这是因为超链接标记本身有默认的显示样式。当鼠标移上链接文本时，光标变为“”的形状，同时，页面的左下方会显示链接页面的地址。当点击链接文本“传智播客”和“百度”时，分别会在原窗口和新窗口中打开链接页面

 

注意：

1、暂时没有确定链接目标时，通常将标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

2、不仅可以创建文本超链接，在网页中各种网页元素，如图像、音频、视频等都可以添加超链接。

3、链接图像在低版本的IE浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为0即可。

17、通过一个具体的案例来演示页面中创建锚点链接的方法

 

 
 
 
 
 
 
 
 课程介绍:
 

 
计算机与信息技术学院
 	    
软件工程
     
物联网工程
 	    
信息管理与信息系统
     
计算机与科学技术
 	
 	
计算机与信息技术学院
 	
计算机与信息技术学院有四个专业，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。
	














 	
软件工程
 	
软件工程 (Software Engineering，简称为SE)是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。
 	














 	
物联网工程
 	
物联网(Internet of Things)这个词，国内外普遍公认的是 MITAuto-ID 中心Ashton 教授1999年在研究RFID时最早提出来的。在2005年国际电信联盟（ITU）发布的同名报告中，物联网的定义和范围已经发生了变化，覆盖范围有了较大的拓展，不再只是指基于RFID技术的物联网。物联网是基于互联网，传统电信网等信息承载体，让所有能够被独立寻址的普通物理对象实现互联互通的网络。
	














 	
信息管理与信息系统
    	
信息管理与信息系统专业是由管理信息系统专业、经济信息管理专业以及信息学专业发展合并而形成的。这门专业的教育是在20世纪60年代后期到70年代中期产生的管理信息系统理论与实践的基础上发展而来的。
 	














 	
计算机与科学技术
 	
本专业培养具有良好的科学素养，系统地、较好地掌握计算机科学与技术包括计算机硬件、软件与应用的基本理论、基本知识和基本技能与方法，能在科研部门、教育单位、企业、事业、技术和行政管理部门等单位从事计算机教学、科学研究和应用的计算机科学与技术学科的高级专门科学技术人才。
 	
 	

 

 

 

首先使用“链接文本”创建链接文本，其中href="#id名"用于指定链接目标的id名称，如第10~14行代码所示。然后，使用相应的id名标标注跳转目标的位置。

 

 

 

即为一个较长的网页页面，当鼠标点击“课程介绍”下的链接时，页面会自动定位到相应的内容介绍部分。

18、制作一个HTML5百科页面

当单击页面区域时，跳转至“HTML5百科——page01.html”页面，效果如下图

 

点击上图页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳转至“HTML5百科——page02.html”页面。

 

点击上图所示页面中的“返回”按钮时，返回至首页面；点击 “上一页”按钮时，跳转至“HTML5百科——page01.html”页面。

为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。下面，将分别针对首页面、page01页面及page02页面进行分析。

1、首页面效果分析

页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用标记嵌套标记布局，使用标记插入图像，并通过标记设置超链接。

2、page01页面效果分析

page01页面中既有文字又有图片。文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用

标记设置标题，

标记设置段落，标记加粗文本。另外，使用水平线标记

---

将标题与内容隔开，并设置水平线的粗细及颜色。

此外，需要使用标记插入图像，通过标记设置超链接，并且对标记应用align属性和hspace属性控制图像的对齐方式和水平距离。

3、page02页面效果分析

page02页面中主要包括标题和图片两部分，可以使用

标记设置标题，标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过标记设置超链接。

首界面

 

page01

 

 

HTML5百科


●  HTML5是HTML即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是HTML4.01。
●  HTML5草案的前身名为Web Applications 1.0。
●  2004年被WHATWG提出。
●  2007年被W3C接纳，并成立了新的HTML工作团队。
●  2008年1月22日，第一份正式草案公布。

page02

 

 

HTML5百科

素材文件：

 

一共8张图片