用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.图片区域链接

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

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

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

首先在桌面创建一个新文件夹，重命名为网页开发，进入文件夹右键创建一个文本文档，然后重命名为index.html，我们的第一个网页文件就创建好了。注意：有些同学的电脑无法编辑后缀，文件夹头部有个查看，点击进去进入选项，然后再点击查看，下面有个隐藏已知文件类型的扩展名，去掉选择框确定就可以了。

打开notepad++编辑器，把index.html直接拖进去，然后在里面写上如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>网页设计</title>
</head>
<body>
<style type="text/css">
body{
 background: #000;
}
</style>
</body>
</html>

直接点击index.html，浏览器会直接打开并解析，就会显示一个全黑的网页，哈哈哈！！！

那么这些标签都代表什么意思呢？首先html网页头部都会有一个版本声明，这里的<!DOCTYPE html>代表HTML5版本，每个网页都需要写上此声明，这样浏览器就能判断用哪个html版本解析当前的页面，而<html lang="zh-CN">则表示网页内容属于中文简体语法。
<head>标签表示网页头部元素的容器，这里可以放网页的标题、关键词、描述等，也可以包含脚本、样式以及其他meta等其他信息。这里我写了一个标题，它就会在浏览器头部显示出来。<meta charset=utf-8"/>标签则是告诉浏览器我这个网页的编码是utf-8编码，这个很重要哦，否则网页容易出现乱码。
<body>标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这些就构成了html网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。
<style type="text/css">标签表示规定样式表的MIME类型，它告诉浏览器这里面的文本内容text要当css样式表来解析，常用的有两种引用方法（内部和外部引用），外部引用就是用<link>标签引用css文件，后面的文章我会讲解。它以分号(;)开始和结束，每个属性有一个值，属性和值用冒号分开，如：body{background:#000;}表示指定给body标签一个颜色为黑色的背景。

接下来我们就开始编写我们的网页代码，我写一段图文标签，大家把下面一段代码插入到body里面

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="https://tpt360.com/tuimg/yan.png"></p>
</div>
<!--CSS-->
<style type="text/css">
div {
	width: 300px;
	padding: 20px;
	margin: 20px;
	border: 1px solid #eee;
}
h2 {
	font-size: 18px;
	color: #000;
	text-align: center;
}
p {
	line-height: 24px;
	font-size: 14px;
	color: #000;
}
img {
	width: 100%;
}
</style>

效果图如下：

这是我的第一个网页

大家可以先尝试一下解释这些标签的意义，下一篇我会详细为大家讲解，谢谢观看！！！

作网页设计是一门需要创新、技术熟练和对细节的理解的艺术。成功的网页设计旨在创建一个导航方便、功能齐全、信息丰富、吸引人的网站，最终实现吸引访问者、提供信息和刺激用户行动的目标。以下是一个全面的教程，一步一步地指导你进行网页设计。

了解制作网页设计的概念

网页设计是指利用图形、排版、色彩等元素，以美观、易用、有效的方式向用户呈现网页内容和功能的过程。它涉及到用户界面设计、用户体验设计、视觉设计等多个方面。在制作网页设计时，设计师需要考虑网页的整体布局、导航结构、配色、字体选择等因素，以及用户的需求和行为习惯。一个成功的网页设计应该能够吸引用户的注意力，提供清晰的信息传达和良好的用户体验。

在制作网页设计时，设计师需要考虑以下几个方面：

目标用户：了解目标用户的特点和需求，以便根据自己的喜好和习惯进行设计。

页面布局：确定页面的整体结构和元素的位置，使其符合用户的阅读习惯和视觉体验。

导航设计：设计清晰易用的导航菜单，方便用户浏览和导航网页的不同部分。

色彩选择：选择适合主题和目标用户的色彩搭配，提升网页的视觉吸引力和用户体验。

字体选择：选择易读、符合网页风格的字体，使文字内容更加清晰易读。

图片和图标：使用合适的图片和图标来增加网页的视觉效果和吸引力。

响应设计：考虑不同设备和屏幕尺寸的适应性，使网页能够在不同的平台上很好地显示和使用。

准备网页设计所需的工具和资源

即时设计是专门为现代UI/UX设计师设计的。它结合了强大的编辑和排版功能，以及大量的现代功能，如符号（可重用组件）和响应布局，是网页设计的有力工具。

https://ad.js.design/online/ui/?source=tt&plan=btt724

即时设计的强大功能

交互式原型：即时设计不仅是一种图形设计工具，而且还支持原型设计。这使得设计师能够在界面中创建和预览完整的交互式界面过程，大大提高了网页设计的效率。

设计共享与合作：即时设计提供 Cloud 功能，这是一个允许设计师将项目上传到云中并与团队或客户共享的在线平台。他们可以直接在网页上评论、测试原型和下载资源。该功能大大提高了团队之间的合作效率。

易用性和灵活性：对于初学者来说，即时设计的简单直观的用户界面非常友好。所有的工具和菜单都经过精心设计和安排，使用户能够快速理解和使用。更重要的是，即时设计的强大灵活性也体现在它对插件的支持上。有成千上万的插件可供选择，以扩展即时设计的功能，并使网页设计过程更加顺畅。

可以完美应对从简单的图标设计到复杂的应用程序和制作网页设计。

29000＋设计元素，支持导出保存

https://js.design/community?category=explore&source=tt&plan=btt724

网页设计的基本原则

网页设计的界面布局在制作网页设计时非常重要，它决定了网页的整体结构和用户体验。良好的界面布局可以提供清晰的导航和容易浏览的内容，使用户能够轻松地找到他们需要的信息。

在制作网页设计时，有几个关键的网页布局原则需要考虑：

一致性：保持网页布局的一致性可以让用户更容易理解和使用网站。这包括统一的导航栏、相似的页面结构和一致的字体和颜色选择。

对齐：正确的对齐元素可以帮助用户更好地理解网页的结构和信息水平。使用对齐线将元素对齐到网格或页面边缘，使页面看起来更整洁和专业。

重点：通过使用不同的字体、颜色、大小和风格来突出重要的内容和功能。这可以帮助用户更快地找到他们需要的信息。

简洁：避免过多的设计元素和冗余信息，保持界面简洁直观。简单的界面可以提高用户的注意力和理解能力。

响应设计：考虑到不同设备和屏幕尺寸的用户，使用响应设计来适应不同的屏幕尺寸和分辨率。这可以提供更好的用户体验，并确保网页能够在各种设备上正常显示。

色彩搭配：色彩搭配是制作网页设计的一个非常重要的环节，它可以直接影响用户对网页的感知和体验。合理的色彩搭配可以使网页看起来更美观、更舒适，并能传达特定的情感和信息。因此，色彩搭配的重要性不容忽视。

确定网页结构

确定网页的布局是制作网页设计的第一步。网页布局包括确定网页的整体结构和组织模式，以及每个元素在页面中的位置和排列模式。

以下是制作网页设计时的网页布局示例：

头部（Header）：包含网页的标题和导航栏通常位于页面顶部。

内容区（Content）：包含网页的主要内容，可分为文章、图片、视频等多个部分。

侧边栏（Sidebar）：它位于内容区旁边，用于显示与主要内容相关的其他信息，如相关链接、广告等。

脚部（Footer）：页面底部，包括版权信息、联系方式等。

在确定网页布局时，需要考虑用户体验和页面可读性。合理的布局可以帮助用户快速找到所需的信息，提高用户满意度。

优化用户体验

菜单栏是网页设计的重要组成部分，可以帮助用户快速导航到网站的不同页面。为了优化用户体验，设计师应考虑以下几点：

清晰的标签和分类：菜单栏应包含易于理解的标签，以便用户能够快速找到他们想要的内容。标签应简洁明了，并与网站内容相关。同时，菜单栏应按逻辑分类，使用户能够轻松找到自己需要的信息。

易于使用的导航：菜单栏的设计应简单易用。用户应该能够轻松地找到他们想要的页面，并在不同的页面之间快速切换。为了实现这一点，设计师可以使用下拉菜单、分级菜单和其他技术来组织和显示菜单栏。

响应设计：随着移动设备的普及，设计师还应考虑不同屏幕尺寸下菜单栏的性能。菜单栏应能够适应不同的屏幕尺寸，并且在小屏幕上显示时不会占用太多的空间。设计师可以使用折叠菜单或隐藏菜单等技术来实现响应设计。

用户体验地图模板案例分享

https://js.design/community?category=detail&type=resource&id=64f601fb448fb96d0c508d80&source=tt&plan=btt724

测试和调整网页设计

兼容性测试

兼容性测试是网页设计过程中非常重要的一步，确保网页能够在不同的浏览器、操作系统和设备上正常显示和运行。以下是一些兼容性测试的建议和步骤：

选择测试工具：首先，选择适合您制作网页设计项目的兼容性测试工具。有许多免费和付费的工具可供选择，如BrowserStack、CrossBrsesting和Sauce Labs等。这些工具可以模拟不同的浏览器和设备，并提供详细的测试报告。

测试不同的浏览器:确保您的网页在主流浏览器(如Chrome)中、Firefox、Safari和Edge）它可以正常显示和运行。检查网页的布局、字体、颜色和交互元素是否在不同的浏览器中一致。

测试不同的操作系统：制作网页设计也需要考虑不同的操作系统，如Windows、Mac和Linux等。测试您的网页在不同操作系统中的兼容性，以确保它能在每个操作系统中正常运行。

测试不同的设备：现在用户使用各种设备访问网页，包括台式电脑、笔记本电脑、平板电脑和手机。测试您的网页在不同设备上的兼容性，以确保它能够正确地显示和操作各种设备。

解决兼容性问题：在进行兼容性测试时，可能会发现一些兼容性问题，如布局混乱、字体显示错误或交互功能不能正常使用。及时记录和解决这些问题，以确保您的网页能够在各种环境中提供良好的用户体验。

响应式设计测试

响应性设计是指网页可根据不同设备的屏幕大小和分辨率进行自适应性设计。为确保网页能在不同设备上正常显示和使用，需进行响应性设计测试。

下面是制作网页设计时常用的一些响应设计测试方法：

设备测试:使用不同的设备(如手机、平板电脑、笔记本电脑等)进行测试。)，检查不同设备的网页布局和功能是否正常。测试可以通过手动测试或模拟器进行。

屏幕尺寸测试:测试不同屏幕尺寸下网页的显示效果。浏览器的开发者工具可以用来模拟不同的屏幕尺寸，也可以用真实的设备进行测试。

浏览器兼容性测试：测试网页在不同浏览器上的显示效果和功能是否正常。普通浏览器包括Chrome、Firefox、Safari、Edge等。可以使用浏览器开发工具进行测试，也可以使用在线兼容性测试工具。

性能测试：测试网页的加载速度和性能。为了提高性能，工具可以用来测试网页的加载时间，并优化网页的代码和资源。

用户体验测试：测试网页的用户体验是否良好。为了改进网页的设计和功能，你可以邀请用户进行测试，收集他们的反馈和建议。

网页设计的发布与维护

下面是在线准备步骤：

确认网页的内容和功能:上线前仔细检查网页的内容和功能，确保没有错误或缺失。检查网页的文本、图片、链接和交互功能，以确保它们能够正常显示和运行。

测试网页兼容性：不同的浏览器和设备可能会影响网页的显示和功能，因此需要进行兼容性测试。在主流浏览器中测试网页(例如chrome)、Firefox、Safari等。显示效果和功能是否正常，以及不同设备(如手机、平板电脑、电脑等)。

优化网页的加载速度：用户对网页的加载速度非常敏感，因此需要优化网页的加载速度，提高用户体验。利用浏览器缓存，通过压缩图片、合并和压缩CSS和JavaScript文件，减少网页的加载时间。

备份网页和数据库:上线前必须备份网页的文件和数据库，防止数据丢失或网页因意外情况无法访问。文件传输协议可以使用（FTP）将网页文件备份到本地或云存储，并对数据库进行备份。

配置网页的域名和服务器:上线前需要配置网页的域名和服务器。将域名指向网页的服务器IP地址，以确保服务器的配置和环境能够支持网页的正常运行。

设置网页访问权限:根据网页的需要，可以设置一些访问权限来控制用户访问和操作网页。您可以使用用户名和密码进行身份验证，也可以使用访问控制列表（ACL）限制特定用户或IP地址的访问。

监控和分析网页的性能:上线后，需要对网页的性能进行监控和分析，了解用户访问和网页运行情况。您可以使用网页分析工具(如谷歌) Analytics）对网页数据进行收集和分析，优化网页的设计和功能。

准备发布材料：网页设计完成后，需要准备一些发布网页的材料。其中包括HTML文件、CSS样式表、JavaScript脚本和其它媒体文件(如图片、视频等)。

导出网页文件：将设计好的网页导出为HTML文件。确保所有链接和资源文件的路径在导出过程中是正确的。

选用合适的服务器：选用合适的服务器托管您的网页。您可以选择建立自己的服务器，也可以选择使用第三方托管服务。

上传网页文件:将导出的HTML文件和相关资源文件上传到服务器。上传FTP工具或网页编辑器的上传功能。

配置服务器：根据服务器的要求进行相应的配置。它可能包括设置域名、配置数据库、设置文件权限等。

测试网页：在发布网页之前，必须进行测试。确保网页能够正常显示和工作在不同的浏览器和设备上。

域名分析：如果你有自己的域名，你需要在你的服务器上分析域名。这样，用户就可以通过域名访问你的网页。

网页发布：一切准备就绪后，您可以正式发布您的网页。您可以通过访问您的域名或服务器的IP地址来查看您的网页。

总结

要知道，网页设计的成功制作不是一蹴而就的。最好的效果只有通过反复试验和不断优化才能达到。希望以上指南能帮助你打造一个功能强大、吸引人、有用的网页设计。

在线咨询

上一篇：新版Chrome浏览器如何使用网页滚动截图
下一篇：11.HTML框架标签

您的项目需求

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

整合营销服务商