整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML入門練習(xí)案例

          1)熟練使用p標(biāo)簽加粗樣式標(biāo)簽給文本分段
          (2)熟練使用換行標(biāo)簽h標(biāo)簽加粗給標(biāo)簽寫標(biāo)題
          (3)使用圖像標(biāo)簽加圖像
          (4)使用錨點(diǎn)鏈接可以點(diǎn)擊鏈接快速定位到頁面中的某個(gè)位置。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Document</title>
          </head>
          <body>
              <!-- h1標(biāo)簽的使用 -->
          <h1 id="top">貓貓種類</h1>
           <!--換行標(biāo)簽<br/>的使用  -->
          貓貓分為<br/>
          <!-- 錨點(diǎn)鏈接的<a herf="#"></a>使用 -->
          <a href="#miao">妙貓貓,</a><br/>
          <a href="#cry">流淚貓貓,</a><br/>
          <a href="#ben">本拉豆貓貓,</a><br/>
          <a href="#wei">委屈貓貓</a><br/>
          <h4 id="miao"><h3>妙貓貓</h3></h4>
          <p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
              秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
          <h4 id="cry"><h3>流淚貓貓</h3></h4>
          沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒<p>人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓</p>
          <img src="images/流淚貓貓.gif"width="300"/>
          <h4 id="ben"><h3>本拉豆貓貓</h3></h4>
          <p>哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!哦吼吼吼,我是最屌的!
             </p>
             <!-- 圖像標(biāo)簽<img src="圖像地址"/>的使用 -->
             <img src="images/本拉豆貓.jpg"width="300"/>
          <h4 id="wei"><h3>委屈貓貓</h3></h4>
          <p>我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?我只是一只小貓咪,我為什么要承擔(dān)這么多?</p>
          <a href="#top">返回頂部</a><br>
          <a href="images/菠蘿頭簡介.html"target="_blank">引申貓貓:菠蘿頭的簡介和照片</a>
          </body>
          </html>
          ![本拉豆貓圖片插入圖 ](https://img-blog.csdnimg.cn/20201014210646633.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDY3NDc5,size_16,color_FFFFFF,t_70#pic_center)
          
          ![流淚貓貓](https://img-blog.csdnimg.cn/2020101421073586.gif#pic_center)
          
          
          
          
          1234567891011121314151617181920212223242526272829303132333435363738394041

          原文鏈接:https://blog.csdn.net/qq_45067479/article/details/109083277?utm_medium=distribute.pc_category.none-task-blog-hot-2.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-2.nonecase&request_id=

          作者:thorn豆豆


          面效果展示


          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


          頁面完整代碼

          <!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">總體評價(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)行首次升空飛行測試,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)場引起轟動(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日,《中國日報(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ī)場上空。<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" >總體評價(jià)</a></h2>
          殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī),這讓中國空軍在面對日本、韓國與印度等國家的空軍時(shí)占有顯著優(yōu)勢。外媒將殲-20與其他國家戰(zhàn)機(jī)進(jìn)行了對比。俄羅斯蘇霍伊蘇-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)勢戰(zhàn)機(jī)。<br>
          中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn),成為有效塑造態(tài)勢、管控危機(jī)、遏制戰(zhàn)爭、打贏戰(zhàn)爭的重要力量。殲-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)勢感知、信息對抗、協(xié)同作戰(zhàn)等多方面取得了突破,這是中國航空工業(yè)從跟跑到并跑,再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系,是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國重器的研制,我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì),是指通過型號研制,錘煉一支愛黨愛國的研制隊(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í)對培養(yǎng)代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。

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

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

          目錄

          HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML中的圖片區(qū)域鏈接方法詳解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          HTML圖片區(qū)域鏈接注意事項(xiàng)與Gimp基本用法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

          用HTML制作一個(gè)簡單頁面(詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作(完結(jié)篇)

          1

          在一個(gè)結(jié)構(gòu)良好的web網(wǎng)頁里,多個(gè)h1標(biāo)簽會(huì)不利于SEO嗎?

          點(diǎn)擊空白處查看答案

          不影響


          02

          Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分?它們有何意義?

          點(diǎn)擊空白處查看答案

          (1)聲明位于文檔中的最前面,處于標(biāo)簽之前。告知瀏覽器的解析器,用什么文檔類型規(guī)范來解析這個(gè)文檔。

          (2)嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

          (3)在混雜模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。


          03

          行內(nèi)元素有哪些?塊級元素有哪些?

          點(diǎn)擊空白處查看答案

          (1)CSS規(guī)范規(guī)定,每個(gè)元素都有display屬性,確定該元素的類型,每個(gè)元素都有默認(rèn)的display值,比如div默認(rèn)display屬性值為“block”,成為“塊級”元素;span默認(rèn)display屬性值為“inline”,是“行內(nèi)”元素。

          (2)行內(nèi)元素有:a b span img input select strong(強(qiáng)調(diào)的語氣)。

          (3) 塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4…p。


          04

          link 和@import 的區(qū)別是?

          點(diǎn)擊空白處查看答案

          (1)link屬于XHTML標(biāo)簽,而@import是CSS提供的;

          (2)頁面被加載的時(shí),link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁面被加載完再加載;

          (3)import只在IE5以上才能識別,而link是XHTML標(biāo)簽,無兼容問題;

          (4)link方式的樣式的權(quán)重高于@import的權(quán)重。


          05

          當(dāng)下列的HTML代碼加載時(shí)會(huì)觸發(fā)新的HTTP請求嗎?

          <div style="display: none;">

          <img src="mypic.jpg" alt="My photo">

          </div>

          點(diǎn)擊空白處查看答案

          會(huì)


          06

          對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識?

          點(diǎn)擊空白處查看答案

          標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件,容易維護(hù)、改版方便,不需要變動(dòng)頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。



          07

          iframe有哪些缺點(diǎn)?

          點(diǎn)擊空白處查看答案

          iframe會(huì)阻塞主頁面的Onload事件;

          iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會(huì)影響頁面的并行加載。使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe,最好是通過javascript動(dòng)態(tài)給iframe添加src屬性值,這樣可以可以繞開以上兩個(gè)問題。



          08

          XHTML和HTML有什么區(qū)別?

          點(diǎn)擊空白處查看答案

          HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,XHTML是一個(gè)基于XML的置標(biāo)語言。

          最主要的不同:
          XHTML 元素必須被正確地嵌套;
          XHTML 元素必須被關(guān)閉,標(biāo)簽名必須用小寫字母;
          XHTML 文檔必須擁有根元素。



          09

          寫出幾種IE6 BUG的解決方法。

          點(diǎn)擊空白處查看答案

          1.雙邊距BUG float引起的 使用display;
          2.3像素問題 使用float引起的 使用dislpay:inline -3px;
          3.超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active;
          4.Ie z-index問題給父級添加position:relative;
          5.Png 透明 使用js代碼改;
          6.Min-height 最小高度 !Important 解決;
          7.select 在ie6下遮蓋 使用iframe嵌套;
          8.為什么沒有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的,使用over:hidden,zoom:0.08 line-height:1px);
          9.ie 6 不支持!important;


          10

          img標(biāo)簽上title與alt屬性的區(qū)別是什么?

          點(diǎn)擊空白處查看答案

          Alt 當(dāng)圖片不顯示是用文字代表;
          Title 為該屬性提供信息。


          11

          你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?

          點(diǎn)擊空白處查看答案

          文件合并
          文件最小化/文件壓縮
          使用CDN托管
          緩存的使用


          12

          簡述一下src與href的區(qū)別。

          點(diǎn)擊空白處查看答案

          href 是指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素(錨點(diǎn))或當(dāng)前文檔(鏈接)之間的鏈接,用于超鏈接。

          src是指向外部資源的位置,指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置;在請求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi),例如js腳本,img圖片和frame等元素。當(dāng)瀏覽器解析到該元素時(shí),會(huì)暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。



          13

          什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)?

          點(diǎn)擊空白處查看答案

          漸進(jìn)增強(qiáng)progressive enhancement:

          針對低版本瀏覽器進(jìn)行構(gòu)建頁面,保證最基本的功能,然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

          優(yōu)雅降級graceful degradation:

          一開始就構(gòu)建完整的功能,然后再針對低版本瀏覽器進(jìn)行兼容。


          區(qū)別:

          a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始,并試圖減少用戶體驗(yàn)的供給;

          b. 漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的,能夠起作用的版本開始,并不斷擴(kuò)充,以適應(yīng)未來環(huán)境的需要;

          c. 降級(功能衰減)意味著往回看;而漸進(jìn)增強(qiáng)則意味著朝前看,同時(shí)保證其根基處于安全地帶。



          14

          瀏覽器的內(nèi)核分別是什么?

          點(diǎn)擊空白處查看答案

          IE: trident內(nèi)核

          Firefox:gecko內(nèi)核

          Safari:webkit內(nèi)核

          Opera:以前是presto內(nèi)核,Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

          Chrome:Blink(基于webkit,Google與Opera Software共同開發(fā))



          15

          一次完整的HTTP事務(wù)是怎樣的一個(gè)過程(瀏覽器渲染頁面的過程)?

          點(diǎn)擊空白處查看答案

          基本流程:

          a.用戶輸入U(xiǎn)RL地址;

          b.瀏覽器解析URL,解析出主機(jī)名;

          c.瀏覽器將主機(jī)名轉(zhuǎn)換成服務(wù)器IP地址(瀏覽器先查找本地DNS緩存列表,如果沒有就向?yàn)g覽器默認(rèn)的DNS服務(wù)器發(fā)送查詢請求,同時(shí)緩存);

          d.瀏覽器將端口號從URL中解析出來;

          b.瀏覽器建立一條與目標(biāo)web服務(wù)器的TCP連接,發(fā)起TCP的3次握手;

          e.瀏覽器向服務(wù)器發(fā)送一條HTTP請求報(bào)文;

          f.服務(wù)器端響應(yīng)http請求,瀏覽器得到html代碼;

          g.瀏覽器解析html代碼,并請求html代碼中的資源;

          h.瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶;



          未完待續(xù)......


          主站蜘蛛池模板: 无码精品一区二区三区在线| 亚洲av无码天堂一区二区三区| 亚洲av无码一区二区三区天堂| 国产日韩一区二区三区| 国产成人久久一区二区三区| 消息称老熟妇乱视频一区二区| 免费在线观看一区| 国产福利一区二区三区在线视频| 国精品无码A区一区二区| 日韩一区二区在线免费观看| 国产精品夜色一区二区三区| 曰韩精品无码一区二区三区| 国产一区二区三区在线观看影院 | 中文字幕精品一区二区日本| 国产亚洲自拍一区| 一区国严二区亚洲三区| 无码中文字幕乱码一区| 色国产精品一区在线观看| 在线视频一区二区三区三区不卡 | 精品一区二区三区免费视频| 国产成人免费一区二区三区| 无码人妻精品一区二区三区9厂| 亚洲乱码一区av春药高潮| 久久一区二区精品综合| 国产精品丝袜一区二区三区| 中文字幕在线观看一区| 久久国产午夜精品一区二区三区| 又紧又大又爽精品一区二区| 国产成人免费一区二区三区| 成人精品一区久久久久| 日韩视频一区二区在线观看| 久热国产精品视频一区二区三区 | 熟妇人妻一区二区三区四区| 亚洲成人一区二区| 国产精品无码一区二区在线观一| 国产三级一区二区三区| 一区二区三区四区电影视频在线观看| 狠狠综合久久av一区二区| 国产精品一区二区资源| 视频一区二区在线观看| 国产精品一区三区|