用HTML制作一個(gè)簡單頁面（代碼閱讀練習(xí)）-零基礎(chǔ)自學(xué)網(wǎng)頁制作

面效果展示

頁面完整代碼

<!DOCTYPE HTML>
<html>
<head> 
<title>文內(nèi)鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使頁面居中顯示，并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導(dǎo)航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動(dòng)態(tài)</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評(píng)價(jià)</a>
</div><!--使導(dǎo)航菜單懸停在頂端（結(jié)尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動(dòng)條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進(jìn)程</a></h2>
殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測(cè)試，13時(shí)08分成功著陸，歷時(shí)18分鐘。<br>
整個(gè)首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。
2016年10月28日，首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國航展”后，還陸續(xù)發(fā)布了“殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)”“空軍殲-20戰(zhàn)機(jī)首次開展海上方向?qū)崙?zhàn)化訓(xùn)練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日，第十一屆珠海航展，殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開飛行，不僅在現(xiàn)場(chǎng)引起轟動(dòng)，也立刻被西方媒體大量報(bào)道。殲-20是中國現(xiàn)代空中力量的代表作，也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列，它是中國國防能力高速發(fā)展的一個(gè)象征。<br>
2018年11月11日，第十二屆中國航展在珠海迎來“高光時(shí)刻”：殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉，震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>
2019年10月13日，慶祝人民空軍成立70周年航空開放活動(dòng)新聞發(fā)布上，空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”
<h2><a id="chapter3" >服役動(dòng)態(tài)</a></h2>
2017年3月9日，中央電視臺(tái)報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>
2017年3月13日，《中國日?qǐng)?bào)》發(fā)布消息稱，中國自主研制的殲-20近期將裝配國產(chǎn)發(fā)動(dòng)機(jī)。<br>
2017年7月30日，殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來，3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<br>
2017年9月28日，在中國國防部行記者會(huì)上，國防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>
2017年11月10日上午，中國空軍發(fā)言人申進(jìn)科大校表示，殲-20 列裝部隊(duì)后，已經(jīng)開展編隊(duì)訓(xùn)練。<br>
2018年2月9日，中國空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息，殲-20開始列裝空軍作戰(zhàn)部隊(duì)。<br>
2018年10月30日，中國空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場(chǎng)上空。<br>
2019年10月1日，殲-20現(xiàn)身慶祝中華人民共和國成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱；該三款殲擊機(jī)被譽(yù)為中國空軍殲擊機(jī)家族的“三劍客”，是未來聯(lián)合作戰(zhàn)的骨干力量
<h2><a id="chapter4" >總體評(píng)價(jià)</a></h2>
殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)，這讓中國空軍在面對(duì)日本、韓國與印度等國家的空軍時(shí)占有顯著優(yōu)勢(shì)。外媒將殲-20與其他國家戰(zhàn)機(jī)進(jìn)行了對(duì)比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲，尚未正式交付入役；美國F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問題，大面積停飛，出口受阻；韓國KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況，后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此，中國殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢(shì)戰(zhàn)機(jī)。<br>
中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn)，成為有效塑造態(tài)勢(shì)、管控危機(jī)、遏制戰(zhàn)爭(zhēng)、打贏戰(zhàn)爭(zhēng)的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)，將進(jìn)一步提升空軍綜合作戰(zhàn)能力，有助于空軍更好的肩負(fù)起維護(hù)國家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰(zhàn)斗機(jī)，它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī)，是按照性能、技術(shù)和進(jìn)度要求，研制開發(fā)我國自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展，指通過自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢(shì)感知、信息對(duì)抗、協(xié)同作戰(zhàn)等多方面取得了突破，這是中國航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系，是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國重器的研制，我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì)，是指通過型號(hào)研制，錘煉一支愛黨愛國的研制隊(duì)伍，這些擁有報(bào)國情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來，我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(fā)展征程上不斷前行。
</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氣動(dòng)外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致！-->
</map>
</div><!--小div(結(jié)尾)-->
</div><!--小div套大div隱藏滾動(dòng)條（結(jié)尾）-->
</div><!--使頁面居中顯示，并展視窗50%寬度（結(jié)尾）-->
</body> 
</html>

頁面制作技術(shù)解析

1.頁面內(nèi)容居中顯示方法

2.導(dǎo)航欄懸停頂端方法

3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示

3.隱藏滾動(dòng)條方法

4.圖片區(qū)域鏈接

大家結(jié)合代碼和技術(shù)解析，先自行分析一下每段代碼的作用，以及它們之間的前后關(guān)系。這一步練習(xí)對(duì)培養(yǎng)代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會(huì)逐步演示“頁面制作技術(shù)解析”中的五個(gè)步驟以及一些注意事項(xiàng)。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚師兄，一起精研技藝。

于大家來說qq應(yīng)該都不陌生吧，但是怎么導(dǎo)出qq聊天記錄你知道嗎？qq聊天記錄導(dǎo)出后怎么查看估計(jì)沒有幾個(gè)人知道。？現(xiàn)在的qq包括電腦版qq和手機(jī)版qq，利用qq的漫游功能，當(dāng)我們想要導(dǎo)出聊天記錄的時(shí)候，一般會(huì)在電腦中打開qq，使用qq消息管理器中“導(dǎo)出消息記錄”將qq聊天記錄導(dǎo)出到電腦中的指定位置。那么在手機(jī)中要如何直接導(dǎo)出聊天記錄呢？

手機(jī)qq雖然可以導(dǎo)出聊天記錄，但是txt格式的聊天記錄查看起來并不像qq窗口那樣方便，如果在清理刪除qq聊天記錄后導(dǎo)出備份也起不了任何作用。我們可以使用互盾蘋果恢復(fù)大師幫助導(dǎo)出qq聊天記錄，軟件導(dǎo)出聊天記錄為HTML格式，查看預(yù)覽和qq窗口無異，且還能夠恢復(fù)刪除的qq聊天記錄，一舉數(shù)得。下面是具體方法：

1．蘋果手機(jī)連接電腦需要依賴于iTunes軟件，請(qǐng)先在電腦上安裝好iTunes，然后把手機(jī)用USB數(shù)據(jù)線連接到電腦上，啟動(dòng)互盾蘋果恢復(fù)大師。

2．軟件將會(huì)的第一時(shí)間連接手機(jī)設(shè)備，當(dāng)軟件界面上出現(xiàn)設(shè)備已連接提示，請(qǐng)點(diǎn)擊“開始從iPhone設(shè)備掃描恢復(fù)”。

3．互盾蘋果恢復(fù)大師將會(huì)先備份蘋果設(shè)備，然后在進(jìn)行掃描，請(qǐng)耐心等待文件備份完成，點(diǎn)擊“開始掃描”功能鍵。

4．靜待文件掃描結(jié)束，在左側(cè)選擇“qq”，軟件將會(huì)切換到qq界面，請(qǐng)選擇要導(dǎo)出qq聊天記錄的賬號(hào)，點(diǎn)擊“查看詳情”。

5．接著我們可以看見qq賬號(hào)及下面的qq好友列表，還有右側(cè)對(duì)應(yīng)的qq聊天記錄內(nèi)容，勾選要導(dǎo)出聊天記錄的qq好友，點(diǎn)擊“導(dǎo)出選中記錄”即可將qq聊天記錄導(dǎo)出到本地電腦上。

注：經(jīng)過互盾蘋果恢復(fù)大師的掃描，我們同時(shí)可以在軟件界面中看見刪除的qq聊天記錄，也可以導(dǎo)出蘋果手機(jī)其他數(shù)據(jù)類型，如微信聊天記錄照片、通訊錄、短信等。

說明

最近在項(xiàng)目上有個(gè)移動(dòng)端（uni-app）的需求，就是要在移動(dòng)端APP上的vue頁面中通過web-view組件來調(diào)用html頁面，并且要實(shí)現(xiàn)在html頁面中可以點(diǎn)擊一個(gè)元素來調(diào)用vue頁面中uni的API（掃碼接口），同時(shí)也可以在vue頁面中也可以調(diào)用html頁面中的js函數(shù)并進(jìn)行傳參。

使用環(huán)境

1. HBuilderX版本：2.8.11.20200907

2. V3編譯器

html頁面調(diào)用vue頁面中uni的API

引用依賴的文件

在 web-view 加載的 HTML 中調(diào)用 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 加載的那個(gè) HTML 文件中引用的，而不是 uni-app 項(xiàng)目中的文件。

監(jiān)聽 web-view 的 message 事件

監(jiān)聽 web-view 組件的 message 事件，然后在事件回調(diào)的 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>

調(diào)用的時(shí)機(jī)

在引入上面的依賴文件后，需要在HTML中監(jiān)聽UniAppJSBridgeReady，事件觸發(fā)后，

才能安全調(diào)用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頁面中點(diǎn)擊按鈕列表中的某個(gè)按鈕，

觸發(fā)了uni.postMessage接口，進(jìn)而調(diào)用了vue頁面methods中的handleMessage方法，

并將參數(shù)data傳給了vue頁面。

在vue頁面中調(diào)用html頁面的js函數(shù)

示例代碼：

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

其中的htmljsfuc就是要在html頁面中定義的js函數(shù)。

完整代碼示例：

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎(chǔ)自學(xué)網(wǎng)頁制作
下一篇：HTML 基本結(jié)構(gòu)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商