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

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

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

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

于大家来说qq应该都不陌生吧，但是怎么导出qq聊天记录你知道吗？qq聊天记录导出后怎么查看估计没有几个人知道。？现在的qq包括电脑版qq和手机版qq，利用qq的漫游功能，当我们想要导出聊天记录的时候，一般会在电脑中打开qq，使用qq消息管理器中“导出消息记录”将qq聊天记录导出到电脑中的指定位置。那么在手机中要如何直接导出聊天记录呢？

手机qq虽然可以导出聊天记录，但是txt格式的聊天记录查看起来并不像qq窗口那样方便，如果在清理删除qq聊天记录后导出备份也起不了任何作用。我们可以使用互盾苹果恢复大师帮助导出qq聊天记录，软件导出聊天记录为HTML格式，查看预览和qq窗口无异，且还能够恢复删除的qq聊天记录，一举数得。下面是具体方法：

1．苹果手机连接电脑需要依赖于iTunes软件，请先在电脑上安装好iTunes，然后把手机用USB数据线连接到电脑上，启动互盾苹果恢复大师。

2．软件将会的第一时间连接手机设备，当软件界面上出现设备已连接提示，请点击“开始从iPhone设备扫描恢复”。

3．互盾苹果恢复大师将会先备份苹果设备，然后在进行扫描，请耐心等待文件备份完成，点击“开始扫描”功能键。

4．静待文件扫描结束，在左侧选择“qq”，软件将会切换到qq界面，请选择要导出qq聊天记录的账号，点击“查看详情”。

5．接着我们可以看见qq账号及下面的qq好友列表，还有右侧对应的qq聊天记录内容，勾选要导出聊天记录的qq好友，点击“导出选中记录”即可将qq聊天记录导出到本地电脑上。

注：经过互盾苹果恢复大师的扫描，我们同时可以在软件界面中看见删除的qq聊天记录，也可以导出苹果手机其他数据类型，如微信聊天记录照片、通讯录、短信等。

说明

最近在项目上有个移动端（uni-app）的需求，就是要在移动端APP上的vue页面中通过web-view组件来调用html页面，并且要实现在html页面中可以点击一个元素来调用vue页面中uni的API（扫码接口），同时也可以在vue页面中也可以调用html页面中的js函数并进行传参。

使用环境

1. HBuilderX版本：2.8.11.20200907

2. V3编译器

html页面调用vue页面中uni的API

引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

注意：这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的，而不是 uni-app 项目中的文件。

监听 web-view 的 message 事件

监听 web-view 组件的 message 事件，然后在事件回调的 event.detail.data 中接收传递过来的消息。

<template>  

    <view>  

        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  

    </view>  

</template>  

<script>  

    export default {  

        methods: {  

            handleMessage(evt) {  

                console.log('接收到的消息：' + JSON.stringify(evt.detail.data));  

            }  

        }  

    }  

</script>

调用的时机

在引入上面的依赖文件后，需要在HTML中监听UniAppJSBridgeReady，事件触发后，

才能安全调用uni的API。

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

<script>

    document.querySelector('.btn-list').addEventListener('click', function(evt) {  

        var target = evt.target;  

        if (target.tagName === 'BUTTON') {  

            var action = target.getAttribute('data-action');  

            if(action === 'navigateTo') {  

				uni.postMessage({  

					data: {  

						action: 'postMessage'  

					}  

				});   

            }  

        }  

    }); 

</script>

上面代码的意思就是在html页面中点击按钮列表中的某个按钮，

触发了uni.postMessage接口，进而调用了vue页面methods中的handleMessage方法，

并将参数data传给了vue页面。

在vue页面中调用html页面的js函数

示例代码：

var currentWebview = this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");

其中的htmljsfuc就是要在html页面中定义的js函数。

完整代码示例：

在线咨询

上一篇：HTML表单3（下拉列表、多行文字输入）-零基础自学网页制作
下一篇：HTML 基本结构

您的项目需求

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

整合营销服务商