2022-10-07T00:00:00Z

zcj

Web前端开发基础系列：体验HTML

原创 Web前端开发技术 8547 浏览

了解HTML的发展历程，认识HTML的语法、文本控制标记、图像标记及超链接标记的用法，并实践使用HTML的语法编写一个HTML页面与程序。

一、什么是HTML

HTML的英文全称是 Hyper Text Markup Language，即中文称为超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly在欧洲核子研究中心CERN(the European Organization for Nuclear Research)于1991年创立的一种标记语言，它是标准通用化标记语言SGML（Standard Generalized Markup Language）的应用。在SGML基础上，提出了超文本标记语言(HTML)的概念。HTML是一种标记描述性语言。HTML是一种用来制作超文本文档的简单标记语言，它定义了一组标记符号(tag)，对内容进行标注，指出内容的输出格式，如字体大小、颜色、背景颜色、表格形式、各部分之间逻辑上的组织等，从而实现了内容格式的标准化。HTML语言有一系列的标记(Tag)组成，这些标记定义了网页元素的显示效果，而不影响实际的网页内容。HTML本身是一个纯文本文件，可以用任何一个文本编辑器来进行编辑，只要最终存储文件时把扩展名存为.html或者.htm就可以了。

简单地说，HTML文件包含了文档数据和显示样式两部分，其中文档数据是显示在Web浏览器中的数据内容，显示样式则规定了这些内容在浏览器中以何种格式、样子呈现给用户。通过统一使用支持HTML的浏览器软件，用户可以在任意异构的网络环境中阅读同一个文件，得到相同的显示结果，并可以对文件进行跳跃式阅读，展现了很强的表现力。

二、HTML发展历程

HTML标记：1991年Tim Berners-Lee编写，包括20个HTML标记。
HTML 2.0：1993年由国际互联网工程任务组（The Internet Engineering Task Force，简称 IETF）推出。
HTML 4.01：1999年由万维网联盟（World Wide Web Consortium，简称W3C）推出。
XHTML 1.0/2.0：2000年由万维网联盟（W3C）推出，是在HTML 4.01的基础上演变而来。
HTML 5：2009年由万维网联盟（W3C）推出，HTML5取代原有的HTML版本。

三、HTML5的特点及支持

1. HTML5的优势

（1）标签丰富，功能强大

通过HTML5可以轻松实现页面中的音频、视频、动画等效果。

（2）支持移动互联网的Web应用需求

HTML5开发应用，可以轻松运行于手机、平板电脑等移动设备。

（3）适应当前Web应用发展潮流

HTML5应用界面友好，功能强大，是今后Web发展的主流方向。

2、HTML5浏览器支持情况

现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，通过对这些主流Web浏览器的发展策略的调查，发现它们都在支持HTML5上采取了措施。

(1)IE浏览器

2010年3月16日，微软于MIX10技术大会上宣布，其推出的IE9浏览器已经支持HTML5。同时还声称，随后将更多地支持HTML5新标准和CSS3新特性。

(2)火狐浏览器

2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版。该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频、在线音频在内的多种应用都已在该版本中实现。

(3)Google浏览器

2010年2月19日，谷歌Gears项目经理伊安·费特通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。因为，Gears应用与HTML5的诸多创新非常相似，并且，Gears面临的需求也在日益下降。

(4)Safari浏览器

2010年6月7日，苹果在开发者大会的会后发布了Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajax历史和WebSocket字幕。

(5)Opera浏览器

2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷研发HTML5相关产品，Web的未来属于HTML5。

综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代已经来临。

四、HTML5的基本知识

HTML5是新的的HTML标准，是对HTML及XHTML的继承和发展。越来越多的网站开发者使用HTML5构建网站。学习HTML5首先需要了解HTML5的语法基础。

4.1 HTML5文档的基本格式

学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML5标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML5文档的基本格式。

HTML5文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记，具体介绍如下：

1.<!DOCTYPE>标记

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

 <!doctype html>

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

请记住，doctype 定义位于 HTML 文件的顶部，并告诉浏览器文档的类型。通过使用 doctype浏览器能够更精确地解释和呈现您的页面。

2.<html></html>标记

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

3.<head></head>标记

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

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

4.<body></body>标记

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

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

5.实现HTML页面设计实践步骤

步骤一：声明HTML 的文档类型

这是文档类型的旧 HTML 4.01 版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>的作用就是用来告诉浏览器，要以标准模式来解析HTML页面，这个声明必须放在HTML文档的第一行。

<!doctype html>

这不仅是 HTML5 的 doctype，它还是每个未来 HTML 版本的doctype。换句话说，它永远不会再改变。不仅如此，它也适用于您的旧浏览器。

步骤二：内容元标记<meta>

之前的HTML 4

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

在 HTML5 中指定 meta 标签，只需提供标签和一个字符编码。

<meta charset="utf-8">

步骤三：指向样式表的链接

之前的HTML 4

<link type="text/css" rel="stylesheet" href="my.css">

CSS 已被宣布为 HTML5 的标准和默认样式，没有 type 属性。

<link rel="stylesheet" href="my.css">

步骤四：引入脚本标记<script>

之前的HTML 4

<script type="text/javascript" src="my.js"></script>

在 HTML5 中，JavaScript 现在是标准和默认的脚本语言，没有 type 属性。

<script src="my.js"></script>

请不要担心。很多关于脚本标记的内容，后续还会讲解。或者，如果您有一些内联代码，可以像这样编写脚本：

<script>
     var me = true;
</script>

步骤五：页面设计

之前的HTML 4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>爱校码</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="my.css">
    <script type="text/javascript" src="my.js"></script>
  </head>
  <body>
    <h1>欢迎访问爱校码</h1>
    <p>
      <img src="my.gif" alt="我的图片">
    </p>
    <p>
          加入我们，从这里开始。
    </p>
  </body>
</html>

将此 HTML 更新为 HTML5：

<!doctype html>                                                <----- 文档类型
<html>
  <head>
    <title>爱校码</title>
    <meta charset=“utf-8">                                     <--------元标记
    <link rel=“stylesheet" href=“my.css">                      <---------链接标记
    <script src=“my.js"></script>                              <---------脚本标记
  </head>
  <body>
    <h1>欢迎访问爱校码</h1>
    <p>
      <img src="my.gif" alt="我的图片">
    </p>
    <p>
        加入我们，从这里开始。
   </p>
  </body>
</html>

4.2 HTML5语法规则

4.2.1 HTML5书写代码时的规定

1.标签不区分大小写

HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。例如：

<p>这里的p标签大小写不一致</P>

在上面的代码中，虽然p标记的开始标记与结束标记大小写并不匹配，但是在HTML5语法中是完全合法的。

2.允许属性值不使用引号

在HTML5语法中，属性值不放在引号中也是正确的。例如：

<input checked=a type=checkbox/>

<input readonly=readonly type=text />

以上代码都是完全符合HTML5规范的，等价于

<input checked="a" type="checkbox"/>

<input readonly="readonly" type="text" />

3.允许部分属性值的属性省略

在HTML5中，部分标志性属性的属性值可以省略。例如：

<input checked="checked" type="checkbox"/>

<input readonly="readonly" type="text" />

可以省略为：、

<input checked type="checkbox"/>

<input readonly type="text" />

从上述代码可以看出，checked="checked"可以省略为checked，而readonly="readonly"可以省略为readonly。

在HTML5中，可以省略属性值的属性如下所示。

checked : 省略属性值后，等价于checked="checked"
readonly : 省略属性值后，等价于readonly="readonly"
defer : 省略属性值后，等价于defer ="defer"
ismap : 省略属性值后，等价于defer ="ismap"
nohref : 省略属性值后，等价于nohref ="nohref "
noshade : 省略属性值后，等价于noshade ="noshade"
nowrap : 省略属性值后，等价于nowrap ="nowrap"
selected : 省略属性值后，等价于selected ="selected"
disabled : 省略属性值后，等价于disabled ="disabled"
multiple : 省略属性值后，等价于multiple ="multiple"
noresize : 省略属性值后，等价于noresize ="noresize"

4.2.2 HTML5单标记和注释标记

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

为了方便学习和理解，通常将HTML标记分为两大类，分别是“双标记”与“单标记”。

1.双标记

双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名>内容</标记名>

该语法中“<标记名>”表示该标记的作用开始，一般称为“开始标记（start tag）”，“</标记名>”表示该标记的作用结束，一般称为“结束标记（end tag）”。和开始标记相比，结束标记只是在前面加了一个关闭符“/”。

2.单标记

单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

  <标记名/>

3.注释标记

在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下：

<!-- 注释语句 -->

例如，下面为<p>标记添加一段注释，示例代码如下：

<p>这是一段普通的段落。</p>    <!--这是一段注释,不会在浏览器中显示。-->

需要说明的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。

4.2.3 HTML5中常见标记的属性

使用HTML制作网页时，如果想让HTML标记提供更多的信息，例如希望标题文本的字体为“微软雅黑”且居中显示，此时仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用HTML标记的属性加以设置。其基本语法格式如下：

<标记名 属性1="属性值1" 属性2="属性值2" …> 内容 </标记名>

在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开，任何标记的属性都有默认值，省略该属性则取默认值。

标记的属性----标记的属性举例说明

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

其中align为属性名，center为属性值，表示标题文本居中对齐，对于标题标记还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示。

书写HTML页面时，经常会在一对标记之间再定义其他的标记，如下面代码，在<p>标记中包含了<strong>标记。在HTML中，把这种标记间的包含关系称为标记的嵌套。

<p>Web前端开发中，
   <strong>JavaScript</strong>
     是重点需要关注的内容
</p>

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

4.2.4 HTML5文档头部相关标记

制作网页时，经常需要设置页面的基本信息，如页面的标题、作者、和其他文档的关系等。为此HTML提供了一系列的标记，这些标记通常都写在标记内，因此被称为头部相关标记。

1.<title></title>标记

<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于标记之内。一个HTML文档只能含有一对<title>标记，<title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：

<title>网页标题名称</title>

2.<meta />标记

<meta />标记用于定义页面的元信息，可重复出现在<head>头部标记中，在HTML中是一个单标记。<meta />标记本身不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。

下面介绍<meta />标记常用的几组设置，具体如下：

<meta name="名称" content="值" />

例如：设置网页关键字：

<meta name="keywords" content="javascripe培训, web前端开发 " />

设置网页描述：

<meta name="description" content="IT培训的基地，爱校码 " />

<meta name="author" content="zcj" />

<meta http-equiv="名称" content="值" />

例如：设置字符集：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

设置页面自动刷新与跳转：

<meta http-equiv="refresh" content="10;url=http://www.ischoolcode.cn.cn" />

3.<link>标记

<link rel="stylesheet" type="text/css" href="style.css" />

4.<style></style>标记

<style>标记用于为HTML文档定义样式信息，位于<head>头部标记中，其基本语法格式如下：

<style 属性=”属性值”>样式内容</style>

在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。在HTML5中可以省略。

4.2.5 文本控制标记

在一个网页中往往占有较大的篇幅，为了让文字能够排版整齐、结构清晰，HTML提供了一些列的文本控制标记，如标题标记<h1>~<h6>、段落标记<p>等。一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。

4.2.5.1 标题和段落标记

1.标题标记

为了使网页更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：

<hn align="对齐方式">标题文本</hn>

该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式。

2.段落标记

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。其基本语法格式如下：

<p align="对齐方式">段落文本</p>

该语法中align属性为<p>标记的可选属性，和标题标记<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。

3.水平线标记

在在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式如下：

<hr 属性="属性值" />

<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。

<hr />标记几个常用的属性如下所示。

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

4.换行标记

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />。

4.2.5.2 文本格式化标记

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示，常用文本格式化标记如下所示。

         标记                                                   显示效果
<b></b>和<strong></strong>                 文字以粗体方式显示（b定义文本粗体，strong定义强调文本）。
<i></i>和<em></em>                         文字以斜体方式显示（i定义斜体字，em定义强调文本）。
<s></s>和<del></del>                       文字以加删除线方式显示（HTML5不建议使用s）。
<u></u>和<ins></ins>                       文字以加下划线方式显示（HTML5不建议使用u）。
<span></span>                              用来组合行内元素的文字以样式格式化的方式修饰它们。

4.2.5.3 特殊字符标记

浏览网页时，显示一些特殊字符，像数学公式、版权信息等。HTML为这些特殊字符提供了专门的替代代码。

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

4.2.6 图像标记

目前网页中使用图像标记<img>、相对路径和绝对路径的使用方法。图像格式主要有GIF、JPG和PNG三种。

1.图像格式:

a.GIF格式

GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。

b.PNG格式

PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。同时需要注意的是IE6是可以支持PNG-8的，但在处理PNG-24的透明时会显示为灰色。通常，图片保存为PNG-8会在同等质量下获得比GIF更小的体积，而半透明的图片只能使用PNG-24。

c.JPG格式

JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。

2.图像标记:

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和它相关的属性。其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，它是img标记的必需属性。

3.其他属性: 参阅 HTML参考手册

（1）图像的替换文本属性alt

由于一些原因图像可能无法正常显示，比如网速太慢，浏览器版本过低等。因此为页面上的图像加上替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的内容。这就需要使用图像的alt属性，接下来通过一个案例来演示alt属性的用法。

注意：

各浏览器对alt属性的解析不同，本书这里使用的是Firefox，如果使用其他的浏览器如IE、谷歌等，显示效果可能存在一定的差异。

多学一招：使用title属性设置提示文字

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

（2）图像的宽度、高度属性width、height

通常情况下，如果不给<img />标记设置宽和高，图片就会按照它的原始尺寸显示，当然也可以手动更改图片的大小。width和height属性用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。

（3）图像的边框属性border

默认情况下图像是没有边框的，通过border属性可以为图像添加边框、设置边框的宽度，但边框颜色的调整仅仅通过HTML属性是不能够实现的。

了解了图像的宽度、高度以及边框属性，接下来使用这些属性对图像进行修饰。

（4）图像的边距属性vspace和 hspace

在网页中，由于排版需要，有时候还需要调整图像的边距。HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

（5）图像的对齐属性align

图文混排是网页中的常见效果，默认情况下图像的底部会相对于文本的第一行文字对齐，如下图所示。但是在制作网页时经常需要实现图像和文字的环绕效果，例如图像居左文字居右等，这就需要使用图像的对齐属性align。

4.绝对路径与相对路径:

绝对路径一般是指带有盘符的路径。例如“D:\zcj\images\logo.gif”，或完整的网络地址，例如“http://www.ischoolcode.cn/images/logo.gif”。

网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在abc文件夹中，也有可能在edf文件夹中。也就是说，很有可能不存在。

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

<img src="images/logo.gif" alt="爱校码" />

相对路径的设置分为以下3种：

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

4.2.7 超链接标记

1. 创建超链接

超链接虽然在网页中占有不可替代的地位，但是在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在上面的语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，其解释如下：

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

注意：

(1) 暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
(2) 不仅可以创建文本超链接，在网页中各种网页元素，如图像、音频、视频等都可以添加超链接。
(3) 链接图像在低版本的IE浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为0即可。

2.锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>锚点链接</title>
</head>
<body>
    第一单元 HTML：
    <ul>
        <li><a href="#one">什么是HTML</a></li>
        <li><a href="#two">HTML发展历程</a></li>
        <li><a href="#three">HTML5基本知识</a></li>
        <li><a href="#four">HTML5实践</a></li>
    </ul>
    <h3 id="one">什么是HTML</h3> 
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即中文称为超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly在欧洲核子研究中心CERN(the European Organization for Nuclear Research)于1991年创立的一种标记语言，它是标准通用化标记语言SGML（Standard Generalized Markup Language）的应用。
    </p>
    <h3 id="two">HTML发展历程</h3>
    <p>
    <ul>
        <li>HTML标记：1991年Tim Berners-Lee编写，包括20个HTML标记。</li>
        <li>HTML 2.0：1993年由国际互联网工程任务组（The Internet Engineering Task Force，简称 IETF）推出。</li>
        <li>HTML 4.01：1999年由万维网联盟（World Wide Web Consortium，简称W3C）推出。</li>
        <li>XHTML 1.0/2.0：2000年由万维网联盟（W3C）推出，是在HTML 4.01的基础上演变而来。</li>
        <li>HTML 5：2009年由万维网联盟（W3C）推出，HTML5取代原有的HTML版本。</li>
    </ul>
    </p>
    <h3 id="three">HTML5基本知识</h3>
    <p>
        HTML5是新的的HTML标准，是对HTML及XHTML的继承和发展。越来越多的网站开发者使用HTML5构建网站。学习HTML5首先需要了解HTML5的语法基础。
    </p>
    <h3 id="four">HTML5实践</h3>
    <p>
        <strong>实现HTML页面设计实践步骤</strong>
        <ul>
          <li>步骤一：声明HTML 的文档类型</li>
          <li>步骤二：内容元标记</li>
          <li>步骤三：指向样式表的链接</li>
          <li>步骤四：引入脚本标记</li>
          <li>步骤五：页面设计</li>
        </ul>
    </p>
</body>
</html>

3.超链接制作案例

（1）制作首页面（main.html）

// main.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页面</title>
</head>
<body>
    <h2 align="center">主页面</h2>
    <hr size="3" color="#cccccc"/>
    <p align="center">
       <a href="p01.html">第一链接页面</a><br/>
       <a href="p02.html">第二链接页面</a>
    </p>
    <hr size="3" color="#cccccc"/>
</body>
</html>

超链接首页面

（2）制作p01页面（p01.html）

// p01.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一链接页面</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <h2 align="center">第一链接页面</h2>
    <hr size="3" color="#cccccc"/>
    <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>HTML</strong>的英文全称是 <strong>Hyper Text Markup Language</strong>，即中文称为超文本标记语言。<b>HTML</b>是由<b>Web</b>的发明者 <span>Tim Berners-Lee</span>和同事 <span>Daniel W. Connolly</span>在欧洲核子研究中心CERN(<em>the European Organization for Nuclear Research</em>)于1991年创立的一种标记语言，它是标准通用化标记语言<ins>SGML（Standard Generalized Markup Language）</ins>的应用。
    </p>
    <p>
        <h3>图片标记img中的alt属性与title属性</h3>
        <div>
            <del>alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。所以alt属性的本意是用于替换图像，而不是为图像提供额外说明的，但是，在ie浏览器中，alt属性会变成文字提示，这本身是一种误导。所以，如果你使用firefox或者chrome，alt属性就会不管用。</del>
        </div>
        <div>
            <del>title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。但由于错误的引导，很多初学者就在img标签内只加了alt属性。</del> 
        </div>
        <strong> &lt;一定要分清title和alt的区别&gt;</strong>
    </p>
    <hr size="3" color="#cccccc"/>
    <p>&copy; 爱校码 版权所有</p>
</body>
</html>

超链接第一链接页面

（3）制作p02页面（p02.html）

 // p02.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>第二链接页面</title>
  </head>
  <body>
    <h2 align="center">第二链接页面</h2>
    <hr size="3" color="#cccccc"/>
    <p>
        <img  src="img/me.jpg" title="你看不见我=_=" />
    </p>
    <hr size="3" color="#cccccc"/>
  </body>
 </html>

超链接第二链接页面

4.3 一点代码

4.3.1 JavaScript 的工作方式

我们的目标是编写运行在加载网页时的浏览器——该代码可能响应用户操作，更新或更改页面，与 Web 服务通信，通常使您的页面感觉更像是一个应用程序而不是一个文档。让我们看看所有这些是如何工作的：

步骤一：编写页面文档

创建HTML标记和JavaScript 代码，存在各自的文件中，即index.html 和 index.js文件。

步骤二：加载文件

浏览器检索并加载你的页面，解析它的内容从上到下底部。当它遇到 JavaScript 时，浏览器解析代码并检查它正确性，然后执行代码。浏览器还构建了一个HTML的内部模型页面，称为 DOM。

DOM结构

步骤三：代码运行

JavaScript 继续执行，使用 DOM 来检查页面、更改页面、从页面接收事件或要求浏览器从 Web 服务器检索其他数据。

4.3.2 可以用 JavaScript 做什么

一旦你有了一个带有元素的页面（或对单独 JavaScript 文件的引用），你就可以开始编码了。 JavaScript 是一门成熟的编程语言，你可以用它做任何事情，你可以用其他语言做任何事情，甚至更多，因为我们是在网页内编程！你可以告诉 JavaScript：

1 做一个声明

var beanCounter = 4;
var reallyCool = true;
var pos = Math.random();

2 做不止一次或两次的事情

while (beanCounter > 0) {
     processBeans();
     beanCounter = beanCounter - 1;
}

3 做决定或做判断

if (isReallyCool) {
   invite = "您被邀请了！";
} else {
    invite = "抱歉，我们已经满员了。";
}

4.3.3 声明一个变量

创建变量的三个步骤

var sco = 10;
 ①      ③ ②

① 第一步是声明你的变量，在这种情况下的 sco，请注意，JavaScript 与某些语言不同，变量不需要类型，它只是创建一个可以容纳很多东西的通用容器。

② 接下来我们需要一个值来放入变量中。可以通过几种方式指定一个值：

var sco = 10;                  //  您的值可以一个数字或一个字符串。
var sco = (3+3) /3;            // 该值可以是表达式的结果。
var sco = Math.random() * 10;  // 或使用 JavaScript 的内部库函数的调用结果。

③ 最后，我们需要做的就是将值分配给变量：sco不再是不确定的（undefined），它现在有了自己的价值。

4.3.4 如何命名变量

您可能想知道如何为变量选择名称？如果您习惯于在 HTML 元素中命名 id，您会发现变量非常相似。创建名称只有几个规则：

规则#1：变量以字母、下划线或美元符号开头。
规则#2：可以使用任意数量的字母、数字、下划线或美元符号。
规则 #3：确保避免使用 JavaScript 的所有保留字。

保留字参考：

abstract        delete          goto              null            throws
as              do              if                package         transient
boolean         double          implements        private         true
break           else            import            protected       try
byte            enum            in                public          typeof
case            export          instanceof        return          use
catch           extends         int               short           var
char            false           interface         static          void
class           final           is                super           volatile
continue        finally         long              switch          while
const           float           namespace         synchronized    with
debugger        for             native            this
default         function        new               throw

4.3.5 表达式

我们已经看到了一些 JavaScript 语句，如下所示：

sco   =   sco - 1;   // JavaScript 语句
 |    |      |
变量 赋值 表达式

常用表达式：

2.123 + 3.2;                    // 数值表达式
2 > 3;                          // 布尔表达式
"hello" + "world";              // 字符串表达式
document.getElementById("no");  // 其他表达式

您已经看到了可以使用的不同类型的表达方式，并在 JavaScript 中使用。

4.3.6 如何以及在何处将 JavaScript 添加到您的页面

要使用 JavaScript，您必须将其添加到网页中。但是在哪里开始以及如何做呢？您已经知道有一个 <script>标记元素，所以让我们看看在那里使用它，它是如何影响 JavaScript 在您的页面中执行的方式。以下是您可以将代码添加到页面的三种不同方式：

1. 将脚本标记<script>内嵌在<head>标记元素中

向页面添加代码的最常见方法是u将 <script> 标记元素放在页面头部。当您在<head>标记元素中添加 JavaScript 时，它会在浏览器解析后立即执行头部，然后解析页面的其余部分。

<head>
    <script>
      代码语句；
      代码语句；
    </script>
    <script src=”my.js”>     // 引用一个单独的 JavaScript 文件来添加您的脚本
    </script>
</head>

将您的代码添加到文档的正文中，

2. 将脚本标记<script>内嵌在<body>标记元素的文档正文中

您可以将代码直接放在 HTML 正文中。同样，将您的 JavaScript 代码包含在 <script>标记元素中（或在 src 属性中引用单独的文件）。浏览器解析<body>标记时，通常是自上而下执行页面正文中的 JavaScript。

<body>
    <script>
      代码语句；
      代码语句；
    </script>
    <script src=”my.js”>     // 引用一个单独的 JavaScript 文件来添加您的脚本
    </script>
</body>

4.3.7 JavaScript 如何与您的页面交互

JavaScript 和 HTML 是两个不同的东西。 HTML 是标记和 JavaScript 是代码。那么如何使得 JavaScript 与页面中的标记进行交互？您使用文档对象模型。

① 当您将页面加载到浏览器中时，浏览器会解析HTML 并创建文档的内部模型，其中包含 HTML 标记的所有元素

DOM结构

② JavaScript 可以与 DOM 交互以访问元素和其中的内容。 JavaScript 也可以使用 DOM 来创建或删除元素。

③ 当 JavaScript 修改 DOM 时，浏览器会动态更新页面，因此您会在页面上看到新内容。

博文最后更新时间： 2022-10-07T17:02:18Z

爱校码

Web前端开发基础系列：体验HTML

一、什么是HTML

二、HTML发展历程

三、HTML5的特点及支持

1. HTML5的优势

2、HTML5浏览器支持情况

四、HTML5的基本知识

4.1 HTML5文档的基本格式

4.2 HTML5语法规则

4.2.1 HTML5书写代码时的规定

4.2.2 HTML5单标记和注释标记

4.2.3 HTML5中常见标记的属性

4.2.4 HTML5文档头部相关标记

4.2.5 文本控制标记

4.2.6 图像标记

4.2.7 超链接标记

4.3 一点代码

4.3.1 JavaScript 的工作方式

4.3.2 可以用 JavaScript 做什么

4.3.3 声明一个变量

4.3.4 如何命名变量

4.3.5 表达式

4.3.6 如何以及在何处将 JavaScript 添加到您的页面

4.3.7 JavaScript 如何与您的页面交互

信息统计