HTML入门详解+语法详解

来源：互联网发布：截面数据举例编辑：程序博客网时间：2024/05/19 12:18

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

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

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

(3)修改HTML5文档标题，将代码<title>与<title>标记中的“无标题文档”，修改为“第一个网页”。然后，在<body></body>标记之间添加一段文本“这是我的第一个HTML5页面哦”。

<!doctype html><html><head><meta charset="utf-8"><title>第一个网页</title></head><body>       这是王小二的第一个HTML5页面哦！</body></html>

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

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

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

自带源代码分析：

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

1、<!DOCTYPE>标记

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

<!doctype html>

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

2、<html>标记

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

3、<head>标记

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。

一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

4、<body>标记

<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。

一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

举例：

<!doctype html><html><head><meta charset="utf-8"><title>计算机与信息技术学院</title></head><body>       <h2>计算机与信息技术学院欢迎你！</h2>       <p>更新时间：2017年03月05日  来源：信阳</p>       <hr />       <p>计算机与信息技术学院有四个专业，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。</p></body></html>

进一步：

<!doctype html><html><head><meta charset="utf-8"><title>计算机与信息技术学院</title></head><body>       <h2 align = "center">计算机与信息技术学院欢迎你！</h2>       <p align = "center">更新时间：2017年03月05日  来源：信阳</p>       <hr size = "2"  color = "#CCCCCC"/>       <p>计算机与信息技术学院有<strong>四个专业</strong>，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。</p></body></html>

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

如图对比：

5、页面标题标记<title>

<!doctype html><html><head><meta charset="utf-8"><title>标题：计算机与信息技术学院</title></head><body><p>标题标记title用于显示网页标题名称，HTML将显示在浏览器的标题栏里。</p></body></html>

6、<style>标记的用法

<!DOCTYPE html><html><head><meta charset="utf-8"><title>style标记的使用</title><style type="text/css">h2{color:red;}p{color:blue;}</style></head><body><h2>设置h2标题为红色字体</h2><p>设置p段落为蓝色字体</p></body></html>

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

7、标题标记的使用

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>标题标记的使用</title> </head> <body> <h1>1级标题</h1><h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </body> </html>

使用<h1>到<h6>标记设置6种不同级别的标题

8、示段落标记<p>的用法和其对齐方式

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>段落标记的用法和对齐方式</title> </head> <body> <p>相传《大学》是孔子的学生曾子所作。《大学》一书，文辞简约，内涵深刻，主要概括总结了先秦儒家道德修养理论</p> <p align="left">孔子</p> <p align="center">孟子</p> <p align="right">老子</p> </body> </html>

第一个<p>标记为段落标记的默认对齐方式，第二、三、四个<p>标记分别使用align="left"、align="center"和align="right"设置了段落左对齐、居中对齐和右对齐。

通过使用<p>标记，每个段落都会独占一行，并且段落之间拉开了一定的间隔距离。

9、使用水平线分割段落文本来演示<hr />标记的用法和属性

<!doctype html><html><head><meta charset="utf-8"><title>水平线标记的用法和属性</title></head><body><p>相传《大学》是孔子的学生曾子所作。《大学》一书，文辞简约，内涵深刻，主要概括总结了先秦儒家道德修养理论</p><hr /><p align="left">孔子</p><hr color="red" align="left" size="5" width="600"/><p align="center">孟子</p><hr color="#0066FF" align="right" size="2" width="50%"/><p align="right">老子</p></body></html>

第一个<hr/>标记为水平线的默认样式，第二、三个<hr />标记分别设置了不同的颜色、对齐方式、粗细和宽度值。

注意：

在实际工作中，不赞成使用<hr/>的所有外观属性，可通过CSS样式进行设置。

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

<!doctype html><html><head><meta charset="utf-8"><title>使用br标记换行</title></head><body><p>使用HTML制作网页时通过br标记<br />可以实现换行效果</p><p>如果像在word中一样敲回车换行就不起作用了</p></body></html>

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

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

注意：

<br/>标记虽然可以实现换行的效果，但并不能取代结构标记<h>、<p>等。

11、各种标记的效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>文本格式化标记的使用</title> </head> <body> <p>我是正常显示的文本</p> <p><b>我是使用b标记定义的加粗文本</b></p> <p><strong>我是使用strong标记定义的强调文本</strong></p> <p><i>我是使用i标记定义的倾斜文本</i></p> <p><em>我是使用em标记定义的强调文本</em></p> <p><del>我是使用del标记定义的删除线文本</del></p> <p><ins>我是使用del标记定义的下划线文本</ins></p> </body> </html>

12、alt属性的用法

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>图像标记img的alt属性</title> </head><body><img src="photo.jpg" alt="故今日之责任，不在他人，而全在少年。少年智则国智，少年富则国富，少年强则国强，少年独立则国独立，少年自由则国自由，少年进步则国进步，少年胜于欧洲，则国胜于欧洲，少年雄于地球，则国雄于地球。红日初升，其道大光；河出伏流，一泻汪洋。潜龙腾渊，鳞爪飞扬；乳虎啸谷，百兽震惶；鹰隼试翼，风尘吸张。奇花初胎，矞矞皇皇；干将妇硎，有作其芒。天戴其苍，地履其黄，纵有千古，横有八荒，前途似海，来日方长。美哉我少年中国，与天不老；壮哉我中国少年，与国无疆。"/></body></html>

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

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

注意：

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

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

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>图像标记img的title属性</title> </head> <body> <img src="photo.jpg" alt="动漫图像,男生头像,动漫,少年,加油,万岁" title="头像photo.jog"/> </body> </html>

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

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

<!doctype html><html><head><meta charset="utf-8"><title>图像的宽高和边框属性</title></head><body><img src="photo.jpg" alt="动漫图像,男生头像,动漫,少年,加油,万岁" border="2" /><img src="photo.jpg" alt="动漫图像,男生头像,动漫,少年,加油,万岁" width="120" /><img src="photo.jpg" alt="动漫图像,男生头像,动漫,少年,加油,万岁" width="120" height="100" /></body></html>

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

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

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

<!doctype html>

 <html> <head> <meta charset="utf-8"> <title>图像的边距和对齐属性</title> </head> <body> <img src="photo.jpg" alt="动漫图像,男生头像,动漫,少年,加油,万岁" border="1" hspace="50" vspace="20" align="left" /> 故今日之责任，不在他人，而全在少年。少年智则国智，少年富则国富，少年强则国强，少年独立则国独立，少年自由则国自由，少年进步则国进步，少年胜于欧洲，则国胜于欧洲，少年雄于地球，则国雄于地球。 </body> </html>

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

注意：

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

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

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

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>创建超链接</title> </head> <body> <a href="http://my.csdn.net//" target="_self">动漫少年！</a> target="_self"原窗口打开<br /> <a href="http://www.baidu.com/" target="_blank">百度</a> target="_blank"新窗口打开 </body> </html>

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

注意：

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

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

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

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

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>锚点链接</title> </head> <body> 课程介绍: <ul> <li><a href="#one">计算机与信息技术学院</a></li>     <li><a href="#two">软件工程</a></li>     <li><a href="#three">物联网工程</a></li>     <li><a href="#four">信息管理与信息系统</a></li>     <li><a href="#five">计算机与科学技术</a></li> </ul> <h3 id="one">计算机与信息技术学院</h3> <p>计算机与信息技术学院有四个专业，包括软件工程，计算机与科学技术，物联网工程，信息管理与信息系统。</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h3 id="two">软件工程</h3> <p>软件工程 (Software Engineering，简称为SE)是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。</p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h3 id="three">物联网工程</h3> <p>物联网(Internet of Things)这个词，国内外普遍公认的是 MITAuto-ID 中心Ashton 教授1999年在研究RFID时最早提出来的。在2005年国际电信联盟（ITU）发布的同名报告中，物联网的定义和范围已经发生了变化，覆盖范围有了较大的拓展，不再只是指基于RFID技术的物联网。物联网是基于互联网，传统电信网等信息承载体，让所有能够被独立寻址的普通物理对象实现互联互通的网络。</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h3 id="four">信息管理与信息系统</h3>    <p>信息管理与信息系统专业是由管理信息系统专业、经济信息管理专业以及信息学专业发展合并而形成的。这门专业的教育是在20世纪60年代后期到70年代中期产生的管理信息系统理论与实践的基础上发展而来的。</p> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h3 id="five">计算机与科学技术</h3> <p>本专业培养具有良好的科学素养，系统地、较好地掌握计算机科学与技术包括计算机硬件、软件与应用的基本理论、基本知识和基本技能与方法，能在科研部门、教育单位、企业、事业、技术和行政管理部门等单位从事计算机教学、科学研究和应用的计算机科学与技术学科的高级专门科学技术人才。</p> </body> </html>

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

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

18、制作一个HTML5百科页面

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

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

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

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

1、首页面效果分析

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

2、page01页面效果分析

page01页面中既有文字又有图片。文字由标题和段落文本组成，并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用<h2>标记设置标题，<p>标记设置段落，<strong>标记加粗文本。另外，使用水平线标记<hr />将标题与内容隔开，并设置水平线的粗细及颜色。

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

3、page02页面效果分析

page02页面中主要包括标题和图片两部分，可以使用<h2>标记设置标题，<img />标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过<a>标记设置超链接。

首界面

<!doctype html><html><head><meta charset="utf-8"><title>69小石头学HTML</title></head><body><p align="center"><a href="page01.html" target="_self">    <img src="D:/images/html5.jpg" alt="69小石头学HTML"></a></p></body></html>

page01

<!doctype html><html><head><meta charset="utf-8"><title>HTML5百科</title></head><body><h2 align="center">HTML5百科</h2><img src="D:/images/a.jpg" alt="69小石头学HTML5" align = “left” hspace="30"/><hr size="3" color="#CCCCCC"><p>●  <strong>HTML5</strong>是<strong>HTML</strong>即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是<strong>HTML4.01</strong>。</p><p>●  <strong >HTML5</strong>草案的前身名为<strong>Web Applications 1.0</strong>。</p><p>●  <em>2004</em>年被<strong>WHATWG</strong>提出。</p><p>●  <em>2007</em>年被<strong>W3C</strong>接纳，并成立了新的<strong>HTML</strong>工作团队。</p><p>●  <em>2008年1月22日</em>，第一份正式草案公布。</p><hr size="3" color="#CCCCCC" ><a href="page02.html"><img src="D:/images/down.png" alt="下一页" vspace="20"></a><a href="page1.html"><img src="D:/images/return.png" alt="返回" vspace="20" align="right"></a></body></html>

page02

<!doctype html><html><head><meta charset="utf-8"><title>HTML5百科</title></head><body><h2 align="center">HTML5百科</h2><img src="D:/images/b.jpg" alt="69小石头学HTML5" align="left" hspace="30"/><hr size="3" color="#CCCCCC" ><img src="D:/images/pic01.jpg"><img src="D:/images/pic02.jpg"><hr size="3" color="#CCCCCC" ><a href="page01.html"><img src="D:/images/up.png" alt="上一页" vspace="20"></a><a href="page1.html"><img src="D:/images/return.png" alt="返回" vspace="20" align="right"></a></body></html>

素材文件：

一共8张图片

0 0