JavaScript开发工具WebStorm使用教程：WebStorm项目

论在WebStorm 中做什么，都是在项目的上下文中执行的。WebStorm 中的项目是一个文件夹，其中包含您编辑的源代码、您使用的库和工具（例如，在node_modules子文件夹中）以及各种应用程序配置文件（例如，package.json或.eslintrc）。

WebStorm已更新至V2022.1，欢迎下载WebStorm最新版本试用：

点击获WebStorm官方正式版

在 WebStorm 中打开一个文件夹后，.idea子文件夹将添加到其中 WebStorm 存储其内部配置设置，例如项目代码样式或版本控制系统。

.idea目录中的所有设置文件都应置于版本控制之下，除了workspace.xml，它存储您的本地首选项。workspace.xml文件应被VCS标记为忽略。

WebStorm 不支持直接编辑远程主机上的文件。因此，要在 WebStorm 中使用远程源，需要下载它们，打开存储它们的文件夹，并将它们安排在 WebStorm 项目中，如从现有本地源创建项目中所述。要使本地和远程源保持同步，请使用“部署选项”对话框中的“将更改的文件自动上载到默认服务器”列表配置自动上载。

在项目之间切换

如果您同时打开了多个项目，您可以使用以下选项在它们之间切换：

切换到下一个项目窗口：（Ctrl+Alt+]窗口|下一个项目窗口）
切换到上一个项目窗口：（Ctrl+Alt+[窗口|上一个项目窗口）
或者，打开窗口菜单并选择要切换到的项目。

重命名项目

右键单击项目的根文件夹并选择Refactor | 从上下文菜单重命名Shift+F6或按。
在打开的对话框中，选择重命名策略。
如果项目名称与其根文件夹的名称相同，请选择Rename directory。
如果项目名称与其根文件夹的名称不同，请选择Rename project。
或者，选择文件 | 从主菜单重命名项目并在打开的对话框中输入项目的新名称。
如果您的应用程序部署到远程服务器并且项目根文件夹映射到服务器根目录，也请选择此选项。
当然，您可以重命名根文件夹并相应地更新服务器配置中的映射。

将项目移动到另一个位置

在Project工具窗口Alt+1中，右键单击项目的根目录并选择Refactor | 移动目录( F6)。
在打开的对话框中，为项目指定一个新位置，然后单击Refactor。

更改项目的默认位置

在 WebStorm 中，您可以为项目指定默认父文件夹。当您打开项目时，WebStorm 将从该文件夹开始。每次创建新项目时也会建议使用此默认位置。

打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到外观和行为 | 系统设置。
在默认目录字段中，指定要存储项目的文件夹的路径。
下次创建项目时，WebStorm 会建议指定目录作为新项目的父目录。

通过 VCS 共享项目设置

根据您的选择处理配置文件。修改项目设置并创建新的配置文件后，IDE 会在屏幕底部显示一条通知，提示您选择如何处理此项目中的配置文件：

查看文件：查看已创建配置文件的列表并选择要置于版本控制之下的配置文件。之后，选定的文件将被安排添加到 VCS。
Always Add：静默计划在.idea目录中创建的所有配置文件以添加到 VCS（仅适用于当前项目）。
不要再问：永远不要安排配置文件添加到 VCS；在您手动将它们添加到 VCS 之前，它们将具有未版本化状态（仅适用于当前项目）。

如果您在未选择任何选项的情况下关闭通知，则在创建新配置文件后它将再次出现。即使您重新启动 IDE，新文件也将进入该列表，直到您选择其中一个选项。

不可共享的配置文件列表

前端开发工具WebStorm 识别配置文件并将它们自动添加到忽略文件列表中。但是，如果您手动共享项目，我们建议您避免将这些文件和文件夹置于版本控制之下：

.idea/workspace.xml
.idea/usage.statistics.xml
.idea/字典文件夹
.idea/架子文件夹

将全局设置复制到项目级别

全局 (IDE) 设置与项目分开存储。这就是为什么这些设置不会通过版本控制与项目一起共享。

但是，可以将某些设置复制到项目级别。例如，您可以创建检查配置文件的副本，从代码完成和自动导入中排除的类和包的列表。如果这样做，IDE 会在.idea目录中创建相应的配置文件，您可以通过 VCS 与项目一起共享这些配置文件。

以上就是有关WebStorm项目的介绍，更多关于WebStorm价格信息可进入慧都官网查看。

WebStorm是一个针对JavaScript和相关技术的集成开发环境。像其他JetBrains IDE一样，它使你的开发体验更加愉快，使日常工作自动化，并帮助你轻松处理复杂的任务。

过前两天的洗礼，应该对网页制作有了一个初步的认识吧，其实就是标签，而且大多数都是重复的标签，所以啊，纵观来看，并不是很难，这些所谓的标签，不要大家去刻意地来记，因为孰能生巧吗，你练得多了，自然也就会了，跟以前学的《卖油翁》一样，代码这件事，不仅仅是前端，任何一门语言，都是要经过多敲多练，才能了然于胸。

这个系列的课程，不同网上的其他教程，大家可以去搜搜，基本上网上的课程要么冗余太多，要么过于简单，基本上没有一个系统的流程，也就说，对于零基础的朋友而言，没有一个针对性，可靠性的学习流程，为了照顾多数的零基础朋友，基本上，每一天的课程，我都会亲自去实现里面的案例，代码和效果，都会一步步来呈现，所以啊，大家只要跟上步伐，学有所成不在话下，每篇的文章，我都会同步多个平台，首发微信公众号（一个北漂程序员），还望给个关注。

今天的课程目录如下：

1、IDE(WebStorm)下载和安装

2、WebStorm工具简单教程

3、Html中的注释

1、IDE(WebStorm)下载和安装

昨天的课程中已经说到，我们要鸟枪换炮，说干就干，其实市场上有很多用于前端开发的工具，基本上只要能够写代码的，都能进行web开发，为什么要选择WebStorm这款工具作为我们课程的讲述？主要原因是目前相对使用率还是挺高的，毕竟是针对web开发所研发的工具，当然了，大家可以选择自己喜欢的，比如Vscode了，Hbuilder了，等等，用着顺手就行，不一定非得要用某个。

WebStorm可能对于大家而言，正版的会收费，这个大家放心好了，网上一大堆破解文章，还有免费的注册码使用，根本不用花费一分钱，这里呢，我也专门写了一个网页，免费获取注册码的，地址是：https://www.vipandroid.cn/ming/page/registerCode.html，大家可以直接获取。

WebStorm的相关介绍，来自百科的解读，这里我截了一个图，我们一起来看下：

WebStorm下载：

第一步，打开官网

https://www.jetbrains.com/webstorm/

官网截图如下，点击DownLoad按钮：

第二步，选择自己对应的电脑系统进行下载，一定要看仔细哦，然后点击DownLoad按钮。

第三步，静静地等待下载就好，我的电脑是Windows，最新下载是367MB，会在浏览器左下角进行下载展示。

WebStorm安装：

下载好之后，大家尽量把把它单放到一个文件夹里，当然了尽量不要放到C盘下。下载后，我把把它放到在D盘下，如下图。

下面我就开始双击“WebStorm-2021.2.exe”这个文件，会出现下面这个画面，点击Next。

点击之后会出现下面的图，这里我们选择安装路径，尽量我们不要选择默认的，因为默认会安装到C盘下，C盘为系统盘，尽量不要安装软件，这里我选择了上图中我创建的config文件夹：

更改完安装路径后，直接点击下一步：

这里的关联我们可以不用打钩，直接进行Next。

进入到这个画面，我们点击Install，进行安装。

下面就是安装的进度，稍等片刻后，就会安装成功。

安装成功后画面：

我们可以打钩Run WebStorm，也可以直接点击Finish进行退出，这里我选择直接退出。

回到我们安装的目录，这里我是安装到了config下，如图：

我们点击WebStorm 2021.2这个文件夹：

再点击bin文件夹，下图我红色箭头指的，就是WebStorm工具，可以直接双击启动。

当然了，为了方便开发，大家可以右键点击它，选择发送到桌面快捷方式，这样你的桌面就会出现WebStorm的启动图标了，我们以后就可以直接双击打开了。

第一次打开，可能会出现下面的画面，我们直接选择ok即可：

接着我们就会进入到下面的画面：

出现这个画面呢，是让咱们进行登录，或者输入注册码，毕竟这个软件是收费的，第一次安装，我建议大家，选择先试用，这个软件给第一次试用的用户时间为30天，其实还蛮好的。

如果试用时间到了，大家可以操作如下图，选择注册码输入，上边已经给大家出了一个免费的获取地址，大家打开后获取到注册码，复制到这里就ok了：

好，我们先选择试用，点击后出现下面的画面，直接点击跳过：

点击后，我们就进入到了选择页面

我们选择创建新的项目，进入下面的页面，选择项目存放的路径后，直接点击Create：这里有一个需要注意的地方，在以后的开发中，大家的目录尽量用英文字母，这里我为了方便授课，写了个中文，虽然说不影响，但是还是希望大家注意一下。

创建好之后，我们就进入了主页面，至此我们这个软件的下载和安装，整个流程就完了。

2、WebStorm工具简单教程

下载安装好之后，以后呢，我们就可以在这个软件里进行开发了，从此就告别记事本了，来，先来个“hello,world”。

为了方便管理，日后的所有案例我都会在“零基础10天学会网页制作”这个项目进行开发，准备以各个目录来区分，

点击“零基础10天学会网页制作”，新建一个目录为“第三天”，输入“第三天”后，回车进行创建。

建好后如下图：

我们第三天的所有的案例都写到第三天这个文件夹里，先整个"hello,world":

第一步，新建网页，右键点击第三天，创建一个HTML：

第二步，选择HTML5，起名字为“hello”,点击回车按钮。

最终效果如下：

看到这里，是不是我们已经知道了使用工具的好处了，直接后缀“html”，不用我们再去更改，更重要的是模板都给我们写好了，看看右边的代码，简直方便的不能再方便，还有一个更加为之神奇的，就是代码的联想提示和直接补全。

看，在下面，我就输入了一个

这里，我们用h1写个“hello,world”，可以直接在右上角，选择合适的浏览器进行打开浏览：

浏览如下图：

上面就是我们从创建页面到写代码，到浏览的整个过程。下面再说一下WebStorm几个小功能。

第一个，改背景颜色

大家看到，目前我的WebStorm是黑色背景，如果你不喜欢，可以按照下面步骤去改。

点击左上角File,再点击Settings：

进入到设置页面后，按照如下图操作，在第2步中，选择自己喜欢的背景：

第二个，改文字大小

如果大家感觉编辑区的代码文字过小，可以通过以下，来更改文字大小。

还是通过点击左上角File,再点击Settings后，按照下图，在第三步进行设置字体大小。

如果大家是第一次接触这个开发工具，可以多熟悉熟悉，多点点，放心，点不坏。

3、Html中的注释

在实际的开发中，由于我们写的代码可能太多，为了便于以后知道当初写的是什么意思，以及别人接手后能够很清晰地知道，很多场合下，我们都会进行代码注释。

注释呢，不是代码，是用来给自己和别人看的，是某一块代码的解释和说明，不具有程序的效果，我们可以看下面的例子：

针对上边的“hello,world”，我们加个注释：

看下运行效果：

是吧，即便我们添加了注释，运行的效果也不会发生改变，因为注释是不参与程序的，在网页源代码中我们可以看到：

这就是注释的作用，Html中的注释语法为，左右两个尖括号，开头以!--，结尾是--。如下面：

<!-- -->

在开发工具中，我们可以使用快捷键，直接添加注释，快捷键是，Ctrl+/，就会自动出来注释，有一点需要注意，注释呢，可以无限的，并不是只能写一个，也就说，你想写几个就写几个。

好了，第三天的内容就给大家讲述到这里了，大家可以把前两天所讲述的内容，用开发工具写上一遍，熟悉熟悉这个工具。

.1 HTML简介

1.1.1 HTML：Hyper Text Markup Language（超文本标记语言）

在学习使用HTML之前，大家经常会问，什么是HTML？HTML是用来描述页面的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。 HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

1.1.2 发展史

1.1.3 HTML5的优势

HTML5自正式推出以来，就以一种惊人的速度被迅速推广着，各主流浏览器对于HTML5表现出来的热烈欢迎、积极支持。

1、世界知名浏览器厂商对HTML5的支持

通过对Internet、Explorer、Google、Firefox、Safari、Opera等主要的web浏览器发展策略调查，发现它们都在支持HTML5上采取了措施

- 微软：2010年3月16日，微软与拉斯维加斯市举行的MIX10技术大会上宣布已推出InternetExplorer(IE)9浏览器开发者预览版。

- Google：2010年2月19日，GoogleGears项目经理伊安~费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目支持、重点开发HTML5项目

- 苹果：2010年6月7日，苹果开发者大会的会后发布了Safari5。这款浏览器支持10个以上HTML5的新技术，包括全屏播放、HTML5地理位置、HTML5的形式验证等功能

- Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体采访，他认为HTML5和CSS3将是全球互联网发展的未来趋势

- Mozilla：2010年7月，Mozilla基金会发布了Firefox4浏览器的第一个测试版，从官方文档看，它对HTML5是完全级别的支持

2、市场的需求

现在的市场已经迫不及待地要求有一个统一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间不统一，仅修改web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML5的目标就是将web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图像，动画及同计算器的交互都被标准化。

3、跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备，插件等核心代码就可以不需要重复编写，极大地减少了开发人员的工作量。

1.1.4 W3C标准

发明HTML的初衷是实现信息资料的网络传播和共享，希望HTML文档具有平台无关性，即同一个HTML文件，在不同的浏览器上看到同样的页面内容和效果。但是遗憾的是，随着浏览器市场的激烈竞争，各大浏览器厂商为了吸引用户，都在早期HTML版本的基础上扩展各类标签，各浏览器之间互不兼容，导致HTML编码规则混乱，违背了HTML发明的初衷，因此需要一个组织来指定和维护统一的国际化web开发标准，确保多个浏览器都兼容，HTML内容结构都是语义化的。

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要有三部分组成，即结构、表现、行为。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

1.1.5 网页编辑工具

1、开发工具：

记事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
你可以从以上软件的官网中下载对应的软件，按步骤安装即可。
接下来我们将为大家演示如何使用 WebStorm来创建 HTML 文件。

2、使用WebStorm编辑HTML文档如下：

打开WebStorm编辑器后，选择File->New->HTML File命令，打开“HTML File”对话框;
在“Name”文本框中输入HTML的文件名为“my_firstPage”在“Kind”下拉列表框中选择HTML5 file选项后OK按钮即可创建一个HTML5页面的模板;
在body元素和title元素中添加网页内容;
网页内容添加完成后，鼠标移动到编辑器的右上方，会出现几个常见的浏览器图标，单击Chrome浏览器附表即可打开页面;
在Chrome浏览器中可以显示出结果。

2.1 HTML基础

2.1.1 HTML5的基本结构

<html>
    <head>
             <title>我的第一个网页</title>
    </head>
    <body>
             我的第一个网页
    </body>
</html>

标签都是成对出现的。有一个开头标记就应该有一个对应的结束标记记，“<>”开始，以“</>”结束，要求成对出现，标签之间有缩进，提现层次感，方便阅读。

HTML5的基本结构分为两部分。整个HTML包括头部｛head｝和主体｛body｝两部分，头部包括网页标题｛title｝等基本信息，主体包括页面的内容信息，如图片、文字等。

2.1.2 网页的基本信息

1、DOCTYPE 声明在这个HTML5文件最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构。检查是否符合相关WEB标准，同时告诉浏览器使用那中规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

HTML5:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

2、<title>标签 使用<title>标签描述页面的标签，类似一个文档的标题，为一个简介的主题，并能使读者有兴趣。

<title>搜狐-中国最大的门户网站</title>

3、<meta>标签 使用<meta>标签描述网页的摘要信息，包括文档内容类型、字符编码信息，搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。

meta标签可分为两大部分：http-equiv和name变量。

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

1.文档内容类型，字符编码信息书写如下：

HTML5:

<meta charset="UTF-8">

HTML4:

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

属性：charset表示字符集编码，常用的编码有以下几种。

1.gb2312：简体中文，一般用于包含中文和英文的页面；

2.ISO-885901：纯英文，一般用于只包含英文的页面；

3.big5：繁体，用于带有繁体字的页面；

4.UTF-8：国际性通用的编码，同样适用于中文和英文的页面。和gb2312编码相比，国际通用性更好。

2.搜索关键字和内容描述信息书写如下：

<meta name="keywords" content="云图智联">
<meta name="description"content="云图智联是国内的IT教育集团，致力于为中国培养优秀的IT技术人才">

网站示例：

<!--京东-->
 <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

<!--淘宝-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘宝网 - 淘！我喜欢</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

2.1.3 HTML5的基本标签

1、标题标签

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

标题标签表示一段文字和标题或主题，并且支持多层的内容结构。例如，一级标题采用h1，二级标题采用h2，其他级别标题以此类推。HTML共提供了六级标题h1~h6，并赋予了标题一定的外观，所有标题字体加粗，h1字号最大，h6字号最小。

2、段落标签、换行标签和水平线标签

<p>段落标签</p>
<br/><!--换行标签-->
<hr><!--水平线标签-->

3、字体样式标签

<!--加粗-->
<strong></strong>
<b></b>
<!--倾斜-->
<em></em>
<i></i>
<!--字体缩小-->
<small></small>
<!--删除线-->
<s></s>
<!--下划线-->
<u></u>

4、图像标签

（1）常见的图像格式

1.JPG格式

JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用此格式最适合用于排和或连续取色调图像的高级格式，这事因为JPG文件可以包含数百万种颜色。随着JPG格式文件品格式质的提高，文件的大小和下载时间也会随着增加。通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡。

2.GIF格式

GIF格式图像是网页中使用最广泛，最普通的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，使得GIF格式在网页的背景和一些多层特效的显示上用得非常多；还支持动画，这是它最突出的一个特点，因此GIF格式图像在网页中应用非常广泛。

3.BMP格式

BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像格式与其他Microsoft Windows程序兼容。它不支持文件压缩，也不是用于Web页。

4.PNG格式

PNG格式是20世纪90年代中期开始开发的图像文件储存格式，它兼有GIF和JPG格式的优势，同时具备GIF格式不具备的特性。

（2）图像标签

<img src="path" alt="text" title="text"  width="x"  height="y" />

src属性表示图片路径，alt属性指定图像的代替文本，表示图像无法显示时（如图片路径错误或网速太慢等）替代先是文本，这样，即使当图像无法显示时，用户还可以看到网页丢失的信息内容。

title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息，方便用户使用。

width和height两个属性分别表示图片的宽度和高度，如果不设置，那么图片默认显示原始大小。

5、超链接标签

（1）超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网站或文件路径，对应a标签的href属性；二是链接文本或图像，点击该文本或图像，将跳转到href属性指定的链接地址。

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接地址的路径;

target：指定链接在哪个窗口打开，常用的取值有_self（自身窗口）、_blank（新建窗口）。超链接即可以是文本超链接，也可以使图片超链接

（2）常用的超链接

1>页面间链接

从一个页面链接到另一个页面

2>锚链接

锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

1.从A页面的甲位置跳转到本页中的乙位置

示例：

    <a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.从A页面的甲位置跳转到B页面中的乙位置

示例：

<!--A页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B页面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>锚链接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性链接

<!--下载图片-->
<a href="img/qq.jpg">点击下载图片</a>

<!--发送邮件-->
<a href="mailto:Webmaster@ytzl.cn">联系我们</a>

<!--引用脚本语言-->
<a href="javascript：alert('哈哈哈哈')"></a>

6、注释和特殊符号

<!--注释符号-->

当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护。同时，有时为了调试，需要暂时注释掉一些不必要的HTML代码。特殊符号一般以"&"符号开头，";"结尾。

3.1 练习

3.1.1 制作《悟空》歌词

需求：

1、标题使用标题标签，文字使用p标签标题与正文之间的分隔线使用水平线标签；歌词词结束后使用换行标签换行

2、人名加粗显示，时间斜体显示

3、制作页面版权部分

<html>
    <head>
             <title>我的第一个网页</title>
    </head>
    <body>
             我的第一个网页
    </body>
</html>

3.1.2 制作图书简介页面

使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔。

<h1>HTML5+CSS3从入门到精通（标准版）</h1>
<h2>作者：未来科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="图书" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript从入门到精通（标准版）</em></p>
<p><em>  以基础知识、示例、实战案例相结合的方式详尽讲述了HTML  CSS  JavaScript及目前*的前端技术html5移动开发 html5实战 html5 canvas html5 app html5入门 html5 动画  html5揭秘 html 游戏 html5权威指南 的基本知识都有涉及。</em></p>
<p><strong>全书分两大部分，共12章</strong></p>
<p>介绍了HTML5入门和CSS3实战入门内容：使用HTML标签标识网页内容，使用CSS设计网页基本样式，如使用并美化文本、图像、超链接、列表、表单和表格等</p>
<p>第二部分为CSS3布局部分，主要讲解使用CSS3设计完整网页的方法和技巧，以及CSS3中的各种新技术应用；</p>
<p>© 2015-2025 云图智联</p>

3.1.3 锚链接的应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>

免费学习视频欢迎关注云图智联：https://e.yuntuzhilian.com/

在线咨询

上一篇：HTML教程（看完这篇就够了）
下一篇：HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商