HTML是 Hyper Text Markup Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

2. Html编译器介绍

(1) 、Notepad++

Notepad++是一款非常经典的编辑器，它的功能比Windows 中的 Notepad强大得多，不仅有语法高亮度显示，也有语法折叠功能、代码自动补全等，你还可以根据自己的喜好设置用户界面，使用扩展功能。

(2) 、Sublime Text2

Sublime Text是具有漂亮的用户界面、强大功能和优良性能的一款代码编辑器，你可以在Windows、OS X和Linux等主流操作系统上运行使用，而且现在一直可以免费使用。

(3) 、Adobe Dreamweaver

DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

(4) 、Hbuilder

支持HTML5的Web开发IDE。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。

(5) 、EditPlus

EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，另外它也是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML 标记，同时支持C、C++、Perl、Java。

(6) 、CoffeeCup HTML Editor

它是一种体积小，易于使用的应用程序，可以帮助编辑和预览HTML文件。它有着许多的版本，可以按钮操作Javascript脚本，进行字体设计、帧设计、颜色向导、抓取等。它是HTML编辑器中非常好的一款。

(7) WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

3. Html基本结构

1）、<HTML>标签

<html>标签的作用相当于设计者在告诉浏览器，整个网页是从<html>这里开始的，然后到</html>结束。

对于<html>这个标签，我们经常看到这样一句代码：

html xmlns="http://www.w3.org/1999/xhtml

其实上面这句代码声明了该网页使用的是W3C组织的 XHTML标准。

2）、<head>标签

head标签是页面的“头部”，只能定义一些特殊的内容。

3）、<body>标签

body标签是页面的“身体”，一般网页绝大多数的标签代码都是在这里编写。

在此说明一下：

①对于HTML的基本结构，你至少要默写出来，这些都要记忆。

②记忆标签小技巧：根据标签字母意思就很容易记忆了，比如<head>表示“页头”，<body>表示“页身”。

三、静态页面以及动态页面

1. 静态页面

静态网页也称为普通网页，是相对网页而言的。静态网页不是指网页中的元素都是静止不动的，而是指网页文件中没有程序代码，只有HTML（超文本标记语言）标记，一般后缀为.htm、.html、.shtml或.xml等。在静态网页中，可以包括GIF动画，鼠标经过Flash按钮时，按钮可能会发生变化。

静态网页一经制成，内容就不会再变化，不管何人何时访问，显示的内容都是一样的。

如果要修改网页的内容，就必须修改其源代码，然后重新上传到服务器上。

对于静态网页，用户可以直接双击打开，看到的效果与访问服务器是相同的，即服务器参加与否对页面的内容是不会有影响的。这是因为在用户访问该网页之前，网页的内容就已经确定，无论用户何时、以怎样的方式访问，网页的内容都不会再改变。

静态网页的工作流程可以分为以下4个步骤。

1) 编写一个静态文件，并在Web服务器上发布；

2) 用户在浏览器的地址栏中输入该静态网页的URL（统一资源定位符）并按回车键，浏览器发送请求到Web服务器；

3) Web服务器找到此静态文件的位置，并将它转换为HTML流传送到用户的浏览器；

4) 浏览器收到HTML流，显示此网页的内容；

静态网页的内容不会发生任何变化。其工作原理图，如下所示。

2. 动态页面

动态网页是指在网页文件中除了HTML标记以外，还包括一些实现特定功能的程序代码，这些程序代码使得浏览器与服务器之间可以进行交互，即服务器端可以根据客户端的不同请求动态产生网页内容。动态网页的后缀名通常根据所用的程序设计语言的不同而不同，一般为.asp、.aspx、cgi、.php、.perl、.jsp等。动态网页可以根据不同的时间、不同的浏览者显示不同的信息。常见的留言板、论坛、聊天室都是用动态网页实现的。

动态网页相对复杂，不能直接双击打开。动态网页的工作流程分为以下4个步骤。

1) 编写动态网页文件，其中包括程序代码，并在Web服务器上发布；

2) 用户在浏览器的地址栏中输入该动态网页的URL并按回车键（Enter），浏览器发送访问请求到Web服务器；

3) Web服务器找到此动态网页的位置，并根据其中的程序代码动态建立HTML流传送到用户浏览器；

4) 浏览器接收到HTML流，显示此网页的内容；

从整个工作流可以看出，用户浏览动态网页时，需要在服务器上动态执行该网页文件，将含有程序代码的动态网页转化为标准的静态网页，最后把静态网页发送给用户。其工作原理图，如下所示。

3. 静态页面和动态页面的区别

静态网页

(1) 静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；

(2) 网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；

(3) 静态网页的内容相对稳定，因此容易被搜索引擎检索；

(4) 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；

(5) 静态网页的交互性较差，在功能方面有较大的限制。

动态网页

1) 动态网页以数据库技术为基础，可以大大降低网站维护的工作量；

2) 采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等；

3) 动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；

4) 动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求

四、Html标题、段落、换行与字符实体

1. Html标题

a. 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

b. <h1> 定义最大的标题。<h6> 定义最小的标题。

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

2. Html段落

段落是通过 <p> 标签定义的。

<p> 这是段落 </p>
<p> 这是段落 </p>
<p> 这是段落 </p>
<p> 段落是由P标签定义的 </p>

3. Html字符实体

a. 在 HTML 中，某些字符是预留的。

b. 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

c. 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

<!--这是字符实体-->
<p>商标:&copy; 空格:&nbsp; 小于号:&lt; 大于号:&gt; 商标注册:&reg; 商标:&trade;</p>

五、Html图像、绝对路径和相对路径

1. Html图像

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

源码如下：

<img src='url'/>

URL 指存储图像的位置。

如果名为 "boat.gif"的图像位于 [www.yltedu.com的目录中,那么其URL为http://www.yltedu.com/images/boat.gif。](http://www.yltedu.com的目录中,那么其Url为http:/www.yltedu.com/images/boat.gif。)
img元素文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<!--图像标签-->
<img src="img/logo.png"  alt="logo"/>

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

<img src="图像源文件路径" alt="图片无法显示时的提示文字" title="鼠标经过图片时的提示文字"/>

2. 绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句：

<body background="E:\book\网页布局\代码\第2章\bg.jpg"></body>

使用绝对路径的缺点：

事实上，在网页编程时，很少会使用绝对路径，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘，有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录，因此在浏览网页时是不会显示图片的。

3. 相对路径

为了避免以上这种隋况发生，通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“s1.htm” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.htm”来说，是在同一个目录的，那么要在“s1.htm”文件里使用以下代码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

相对路径使用的特殊符号：

以下为建立路径所使用的几个特殊符号，及其所代表的意义。

"./"：代表目前所在的目录。

"../"：代表上一层目录。

以"/"开头：代表根目录。

六、Html超链接以及其属性介绍

1. Html超链接

超链接的英文名是hyperlink，它能够让浏览者在各个独立的页面之间方便地跳转。每个网站都是由众多的网页组成，网页之间通常都是通过链接方式相互关联的。超链接的范围很广，可以将文档中的任何文字及任意位置的图片设置为超链接。超链接有外部链接、内部链接、电子邮件链接、锚点链接、空连接、脚本链接等。

a标签是非常常见而简单的标签。在HTML中，使用a标签来表示一个超链接。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>超链接a标签</title>
    </head>
    <body>
        <a href="http://www.yltedu.com">英莱特科技</a>
    </body>
</html>

2. 超链接元素的属性

超链接属性中，我们只需要掌握target属性就可以了。超链接属性中，我们只需要掌握target属性就可以了。

在创建网页中，默认情况下超链接在原来的浏览器窗口打开，但是我们可以使用target属性来控制目标窗口的打开方式。

一般情况下，target只用到“self”和“blank”这两个属性值，其他两个我们不需要深究，因为几乎用不到。

<a href="http://www.yltedu.com" target="_blank">陕西科技</a>

3. 锚点链接

锚点链接是内部链接的一种，它链接对象是当前页面的某一个部分。

有些网页由于内容比较多，导致页面过长，访问者需要不停地拖动浏览器上的滚动条来查看文档中的内容。为了方便用户查看文档中的内容，在文档中需要建立锚点链接。

所谓的锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。

<p id="Top">这是顶部</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#Top">返回顶部</a>

七、Html列表和表格

1. Html列表

列表是网页中一种常用的数据排列方式，我们在网页中到处都可以看到列表的身影，如图显示

HTML中，列表共有3种：①有序列表；②无序列表；③定义列表。

图1有序列表

图2无序列表

图3自定义列表

(1) 有序列表的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束，中间的列表项是<li>标签内容。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

有序列表的type属性

type属性实现的效果可以用CSS的list-style-type实现，作为初学者我们可以先用一下type属性，到时候学了CSS入门教程之后，我们直接摒弃type属性，而全部改用CSS控制样式。

<!--有序列表-->
<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Ajax</li>
    <li>SEO</li>
    <li>ASP.net</li>
</ol>

(2) 无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的项目符号是●，不过可以通过无序列表type属性来改变无序列表的列表项符号。

无序列表type属性

无序列表跟有序列表一样，都有一个type属性，用于控制列表项符号。我们可以改变type属性值来调整列表项符号。

<!--无序列表-->
<ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Ajax</li>
    <li>SEO</li>
    <li>ASP.net</li>
</ul>

(3) 定义列表在实际开发用得不多，不过还是有一定的讲解价值。

定义列表由两部分组成：定义条件和定义描述。

<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言,控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表,控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言,控制网页的行为</dd>
</dl>

<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。

2. Html表格

(1) 表格的概述

在制作网页时，使用表格可以更清晰地排列数据。在过去的web1.0时代，表格更多地用在网页布局定位上。但是在web2.0时代，表格定位已经被摒弃了，现在使用的是“DIV+CSS”模式。

(2) 表格基本结构

表格基本标签有：table标签（表格）、tr标签（行）、td标签（单元格）。<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效。

<!--表格标签-->
<table border="1" >
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

表格一般都有一个标题，表格标题使用<caption>标签。表格的标题一般位于整个表格的第1行，一个表格只能含有一个表格标题。

<!--表格举例-->
<table border=”1”>
    <caption>英莱特项目部实习生成绩统计</caption>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
</table>

(3) 表格语义化

上面几节课我们学习了如下标签：table标签（表格）、tr标签（行）、td标签（标准单元格）、caption标签（标题）、th标签（表头单元格）。

为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。有了这三个标签，表格HTML代码语义更加良好，结构更加清晰。

英莱特实习生月考成绩统计

<!--月考成绩统计-->
<table border="1" cellspacing="0" cellpadding="1" width="800px" height="300px" >
    <tr align="left"  >
        <th>姓名</th>
        <th>成绩</th>
        <th>岗位</th>
        <th>时间</th>
    </tr>
    <tr height="44px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="#eee">
        <td>张无忌</td>
        <td>80</td>
        <td>python工程师</td>
        <td>2018-10-31</td>
    </tr>
    <tr>
        <td>张三丰</td>
        <td>86</td>
        <td>.net工程师</td>
        <td>2018-10-31</td>
    </tr>
    <tr bgcolor="#eee">
        <td>金毛狮王</td>
        <td>99</td>
        <td>python工程师</td>
        <td>2018-10-31</td>
    </tr>
    <tr >
        <td>灭绝师太</td>
        <td>89</td>
        <td>Java工程师</td>
        <td>2018-10-31</td>
    </tr>
    <tr bgcolor="#eee">
        <td>平均:</td>
        <td>90</td>
        <td>及格率:</td>
        <td>90%</td>
    </tr>
</table>

(4) 表格合并

在设计表格时，有时需要将两个或更多的相邻单元格组合成一个单元格，经常使用word的人都会操作过。在HTML中，这就需要用到“表格合并行”和“表格和并列”。

table常用标签

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性：

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

实例代码:

<!--表格合并:课表的练习-->
<table border="1" cellspacing="" cellpadding="1" width="800px" height="400px" align="center" bordercolor="blue">
    <tr align="center">
        <td>项目</td>
        <td colspan="5">上课</td>
        <!--<td></td>-->
        <!--<td></td>-->
        <!--<td></td>-->
        <!--<td></td>-->
        <td colspan="2">休息</td>
        <!--<td></td>-->
    </tr>
    <tr align="center">
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
    </tr>
    <tr align="center">
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td rowspan="4">休息</td>
    </tr>
    <tr align="center">
        <!--<td></td>-->
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
        <!--<td></td>-->
    </tr>
    <tr align="center">
        <!--<td></td>-->
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>计算机英语</td>
        <td>英语</td>
        <td>计算机</td>
        <!--<td></td>-->
    </tr>
    <tr align="center">
        <!--<td></td>-->
        <td>政治</td>
        <td>英语</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>计算机</td>
        <!--<td></td>-->
    </tr>
    <tr align="center">
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>计算机</td>
        <td>英语</td>
        <td rowspan="2">休息</td>
    </tr>
    <tr align="center">
        <!--<td></td>-->
        <td>数学</td>
        <td>数学</td>
        <td>地理</td>
        <td>历史</td>
        <td>化学</td>
        <td>计算机</td>
        <!--<td></td>-->
    </tr>
</table>