用HTML制作一个简单页面（代码阅读练习）-零基础自学网页制作

面效果展示

页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>
2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>
2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>
2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的“三剑客”，是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body> 
</html>

页面制作技术解析

1.页面内容居中显示方法

2.导航栏悬停顶端方法

3.鼠标滑过导航标题或链接时改变背景色提示

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。

下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head>
标签用于定义文档的头部，它是所有头部元素的容器。

头部元素有<title>、<script>、<style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

2、<head>标签的作用

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>

3、<title>标签

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用。网页制作学习交流群，四九四零六，四九三四。
于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独
一无二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来，

4、标签的用途

我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。

文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使
用 em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

① 更容易被搜索引擎收录。
②.更容易让屏幕阅读器读出网页内容。

更多精彩内容微信公众平台：网页设计自学平台

限时!！免费送Dreamweaver、js等前端教程

什么学习网页制作？

互联网时代的今天，各种各样的网页充斥着我们的生活。只要使用浏览器，打开的每一个页面都可以称之为网页。即使使用头条这样的APP，其内容布局、展示的方法也脱胎于网页页面设计的方法与原则。可以说页面的概念已经遍布我们的信息化世界。

作为芸芸众生中的一员，学习网页制作对我们的事业、生活有怎样的帮助呢？

第一，学习网页制作有助于理解网络信息的传播运行机制，即使通过本课程不能全面了解这些核心机制，也能为大家铺垫下继续深入学习的知识基础。即使自己不必亲自制作网页，在使用第三方工具时，比如微信公众号、微信小程序或者其他自动网页或网站生成工具时也会比没有基础的人更快的掌握这些工具。

第二，学好网页制作是制作网站的基础，如果您因为事业需要或者个人爱好打算制作自己的网站或博客，无论是打算使用php还是Java还是Python去构建您的网站，精通网页制作技术是您的第一块技术基石。

第三，如果您打算学习网络爬虫来分析一些网络数据，了解网页页面构成也是必要基础，至少您要知道一个网页页面中每个标签中对应的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想学习编程，但是缺少相应的基础知识，看不懂复杂的C语言教学，那么从网页制作入手尝试理解编程的语法也是一个很不错的选择。

除此之外，浏览器可以做的事情越来越多，比如webgl的出现，可以让我们通过浏览器构建3d世界，无论是虚拟现实（VR）还是增强现实（AR）都有很多开源免费的解决方案。TensorFlow的JavaScript版本的出现，让我们可以通过结合浏览器学习使用人工智能技术，且非常容易实现。

所以，新的一年里，我打算做网页制作的学习教程，让更多没有基础却对网络技术感兴趣的小伙伴能加入进来。

制作网页需要学习哪些技术？

简单来说学习网页制作需要掌握三门技术。

第一，也是最基础最核心的内容是HTML超文本标记语言。大家不必纠结HTML到底是什么，但是一定要记住它能干什么。HTML通俗来说可以比喻成容器。大家试想，网页里都有哪些内容呢？

一般网页中都会有文字、图片、声音、视频、表格等内容，这些内容就是靠HTML中的标签添加进页面的。

所以说HTML这个工具就是个容器，我们使用HTML标签语言为网页添加所有需要的信息内容。

第二，CSS层叠样式表，这是一个用来装饰页面的工具。如果说HTML是个信息容器，那么如何让这些信息条理清晰的显示出来呢？那就需要CSS来帮忙了。如下图所示，这是一个最简单的页面，只用到了HTML，里面装了一个标题和一个只有六个字的段落。

为了让这个页面看起来美观些，我们为其添加css样式表。添加后如图所示：

我们可以看出来，CSS让标题文字换了颜色，也居中显示了，背景也变成了蓝色。

第三，JavaScript，这个工具相比HTML和CSS来讲是最难学习的，学习JavaScript就是在学习编程了。它虽然只是个脚本语言，但是用到的知识和其他编程语言相差不大。

那JavaScript能干什么呢？

首先，它能为页面中添加很多交互效果。举个例子，我们常见的图片翻页、轮播很多就是基于JavaScript脚本实现的。

其次，JavaScript可以为传统页面扩展出很多新功能，例如结合three.js我们可以很容易的在页面中构建三维空间，或者实现一些3d游戏或其他三维动态演示效果。举个例子（https://renaultespace.littleworkshop.fr/），打开可能略慢。3d展示的汽车广告是不是很酷！

再次，JavaScript可以以网页为基础，实现各种各样的在线小游戏，例如Phaser.js就是目前非常火的一个开源免费网页游戏制作库。phaser官网：http://phaser.io/

JavaScript为网页的功能拓展提供了很多可能性，无论是3d显示还是游戏制作还是未来的人工智能工具，都是由JavaScript都为大家提供了将功能引入到页面的接口，这也是学习难度比较大的原因。不过只要坚持下去一定能学通的！

网站与网页的区别？

网页是指我们看到的单个页面。这些页面分为静态页面和动态页面两种。静态页面指的是不能与服务器进行数据交互的页面，顾名思义动态页面指的是可以与服务器进行数据交互的页面，这一点大家不必纠结。

简单来说，静态页面写好后什么样就是什么样，谁打开都是事先编辑好的内容，而动态页面写好后会随着不同的访问变换不同数据，动态页面更像是一个页面模板，随时套用不同信息。

大部分网站中的页面都是动态页面。

如果使用静态页面做网站会出现什么问题呢？如果您有300篇博客文章，那您就要做300个静态页面来显示，大型资讯网站信息量更加庞大，如果都用静态页面来做，占用的服务器空间也是庞大到不可想象。

网站中的动态页面就解决了这个问题，例如一个简单的网站我们只需一个主页、文章页、搜索页基本上就可以了，这些页面中没有具体内容，我们称之为模板。当您打开后，显示的内容都是在数据库中调出的。这样，一个数据库用来存储压缩过的精简信息，这些信息通过不同页面模板显示在用户面前就成为网站的基本运行模式。

例如在静态页面中显示文字字数的代码是这样

<p>300字</p>

如果使用以php编写的WordPress网站框架来动态显示文章字数就是这样

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>这条语句可以调取数据库中文章字数的记录并显示出来。这也我们通过这一条语句就可以显示不同文章的字数了。

无论是静态页面还是动态页面，他们的核心内容都是一样的，HTML，CSS，JavaScript都是必修知识。只是静态页面在HTML中插入信息，而动态页面插入的是调取数据库信息的语句。

因此，我们这个教程看起来是在做静态页面，但是我们学习的也是制作网站的基础知识。

本教学学完能干什么？

第一，可以写出静态页面。

第二，有能力读懂他人写好的页面代码。

第三，为继续深入学习网站制作或更为炫酷的页面制作打下基础。

第四，掌握编程基础，至少是基于JavaScript的。

我是大鱼，致力于数字艺术技术分享！欢迎大家关注！祝愿大家2020年学有所成！

HTML学习目录

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：快速了解JavaScript文本框操作
下一篇：html5+canvas绘制中国地图，基于echarts.js

您的项目需求

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

整合营销服务商