新手也能学编程，教你做一个简单的html页面

家好，我是有闻爱学，一名标准的程序员。我主要从事的是javaweb开发，有些朋友可能不了解什么是javaweb。简单地说就是浏览器访问的网站，javaweb大部分都可以做。

做了这么多年的开发，真心觉得这一行真的不错，除非遇到某些996的公司。

那么接下来我就为有兴趣进入这一行的或者想用这一行做个兼职的朋友们做一个简单的入门指导。我们今天的目标是做一个简单的html页面。高手请忽略。

第一步:

准备一台电脑（win7/10最好），在桌面新建一个文本文件如下图（文件展示扩展名请自行百度）：

第二步：

打开此文件输入如下内容，如图：

第三步:

关闭编辑器，将此文件的扩展名改为.html,保存如下图：

第四：

双击index.html打开，出现如下效果就代表你的第一个html页面制作成功啦！

是不是很简单，但这只是最简单的一个静态页面，我们平时访问的网站要比这复杂的多。

以后我将继续为大家讲解更深层次的知识。

网页开发过程中，我们有时会遇到HTML页面白屏的问题，即打开网页时页面显示空白，没有任何内容。这不仅令用户困惑，也使开发者头疼不已。本文将分享一些常见的HTML页面白屏问题解决方法，帮助你快速解决这个问题，让你的网页焕然一新！

第一步：检查HTML代码

首先，我们需要检查HTML代码是否正确。常见的错误包括标签未闭合、标签嵌套错误等。这些错误可能会导致页面无法正常显示。因此，仔细检查HTML代码，确保没有语法错误是解决白屏问题的第一步。

第二步：检查CSS文件

HTML页面的样式通常由CSS文件控制。如果CSS文件中存在错误或者无法正常加载，可能会导致页面白屏。我们可以通过以下步骤检查CSS文件是否存在问题：

1、检查CSS文件路径是否正确：确保CSS文件的路径正确，并且文件存在于指定的位置。可以通过浏览器开发者工具查看网络面板，检查CSS文件是否被成功加载。

2、检查CSS文件语法错误：使用CSS验证工具，如W3C CSS验证服务，检查CSS文件是否存在语法错误。如果存在错误，及时修复。

3、检查CSS选择器和样式规则：检查CSS文件中的选择器和样式规则是否正确。可能存在选择器与HTML元素不匹配或样式规则冲突的情况。可以通过逐个注释掉样式规则，逐步排查问题。

第三步：检查JavaScript代码

JavaScript代码也可能导致页面白屏。以下是检查JavaScript代码的步骤：

1、检查JS文件路径是否正确：与CSS文件类似，确保JS文件的路径正确，并且文件存在于指定的位置。通过浏览器开发者工具查看控制台面板，检查是否有JS文件加载错误的提示信息。

2、检查JS代码语法错误：使用JS语法检查工具，检查JS代码是否存在语法错误。如果有错误，及时修复。

3、检查JS代码逻辑错误：检查JS代码中的逻辑是否正确。可能存在变量未定义、函数未调用或者逻辑错误等问题。可以通过调试工具，如浏览器开发者工具中的调试器，逐步排查问题。

第四步：排查网络请求问题

如果前面的步骤都没有发现问题，那么可能是网络请求出现了问题。以下是一些排查网络请求问题的方法：

1、检查网络连接：确保你的设备已连接到互联网，并且网络连接稳定。

2、检查资源加载状态：通过浏览器开发者工具的网络面板，检查页面中的资源加载状态。可能存在资源加载失败或者超时的情况，导致页面白屏。

3、检查服务器配置：如果你使用了服务器端脚本语言，如PHP，检查服务器配置是否正确。可能存在服务器配置问题导致页面无法正确渲染。

第五步：优化页面性能

如果以上方法都没有解决问题，那么可能是页面性能问题导致白屏。以下是一些优化页面性能的方法：

1、压缩和合并文件：将CSS和JS文件进行压缩和合并，减少文件的大小和数量，提高页面加载速度。

2、使用缓存：利用浏览器缓存机制，将静态资源进行缓存，减少服务器的请求次数，提高页面加载速度。

3、异步加载资源：使用异步加载技术，如异步加载JS文件或使用延迟加载，减少页面加载时间。

4、减少HTTP请求：减少页面中的HTTP请求次数等。

结语：

通过以上五个步骤，我们可以逐步排查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页面

面效果展示

页面完整代码

页面制作技术解析

目录

您的项目需求