整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今天我們一起來了解下HTML，
首先HTmL包含三層結構，分別是結構層，表現層，行為層。
結構層：html => 網頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。
表現層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。
行為層：JavaScript => 具體怎么操作，比如說點擊按鈕讓圖片放大縮小等等。
===============================
在了解了html的三層結構之后，我們來學習如何寫html。html不是編程語言，它是一套標簽。最簡單的html文本是下圖1這個樣子。我們可以在電腦桌面上新建一個記事本文件，然后把后綴名改一下（.txt=>.html），把這段標簽代碼粘貼到html文件里，這樣一個空白的網頁就做成了。如果需要在網頁上添加內容，我們只需要在第10行的位置添加各種各樣的標簽即可。比如我在圖二添加了一個按鈕標簽和一段文字標簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應的內容。是不是很簡單。我們日常瀏覽的網頁都是這樣一個標簽一個標簽畫上去的。
我給大家總結了一張圖，基本上覆蓋了工作中常用的知識點。同時分享幾個小技巧。
1.最簡單的網頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個VSCode軟件（類似于記事本，是現在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動生成了，學編程不要死記硬背。
2.控件的標簽不需要記憶，直接百度html XXX標簽，例如：百度搜“html按鈕標簽”，他就會告訴我們是<button>，用的時間長了自然就記住了。是不是省力。
3.標簽的屬性很重要，可以不去記他的寫法，因為寫可以百度，重要的是你需要記住標簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因為工作中，有的時候會遇到這樣一種情況，明明設置一個屬性可以完成的功能，我們不知道，花費了大力氣用css和js去實現，結果還存在著特定場合的bug，讓人很無奈。
4.對于html還有兩個標簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學完了，有興趣，學習一下。
5.給大家推薦一個小白學習html的網站，w3cschool，圖里不明白的可以去上邊學學練練。
6.如果覺得一個人學習前端有難度，我建了一個小白前端學習交流群，可以私聊我，大家在群里多多交流，我會經常給大家答疑，組織大家練習，一起做小項目。有方向，少走彎路。
<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>文內鏈接</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序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
HTML中的圖片區域鏈接方法詳解——零基礎自學網頁制作
HTML圖片區域鏈接注意事項與Gimp基本用法——零基礎自學網頁制作
用HTML制作一個簡單頁面(詳解)——零基礎自學網頁制作（完結篇）
HTML簡介
HTML是用來描述網頁的一種語言，它是一種超文本標記語言，由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。
發展史
HTML：Hyper Text Markup Language超文本標記語言
超文本標記語言—在1993年6月互聯網工程工作小組工作案發布（并非標準）
HTML2.0—1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布過時。
HTML3.2—1996年1月14日，W3C推薦標準
HTML4.0—1997年12月18日，W3C推薦標準
HTML4.01（微小改進）—1999年12月24日，W3C推薦標準，2000年5月15日發布基本嚴格的HTML4.01語法，是國標標準化組織和國際電工委員會的標準
XHTML1.0—發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布
XHTML1.1—2001年5月31日發布
XHTML2.0是W3C的工作草案，由于改動過大，學習這個新技術的成本過高而最終胎死腹中，因此，現在最常用的還是XHTML1.0標準。
目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，
2008年1月22日公布HTML5第一份正式草案，
2012年12月17日HTML5規范正式定稿，
2013年5月6日，HTML5.1正式草案公布。
HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。目前企業開發中也在增大使用HTML5的力度
HTML的優勢
h1~h6
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題標簽</title> </head> <body> <h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3> <h4>這是四級標題</h4> <h5>這是五級標題</h5> <h6>這是六級標題</h6> <h7>這是七級標題</h7>效果怎么顯示不出來呢？？？ <h1>這是一級標題</h1> </body> </html> |
瀏覽器預覽效果
p標簽為段落標簽，br標簽為換行標簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和換行標簽</title> </head> <body> <h1>北京歡迎你</h1> <p>北京歡迎你，<br>為你開天辟地</p> <p>北京歡迎你，<br/>有有勇氣就會有奇跡</p> </body> </html> |
瀏覽器預覽效果圖
hr標簽為水平線標簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平線標簽</title> </head> <body> <h1>漂洋過海來看你</h1> <hr> <p>為你我用了半年的積蓄，<br>漂洋過海來看你</p> <hr/> </body> </html> |
瀏覽器預覽效果圖
em為斜體標簽，strong為字體加粗標簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字體樣式標簽</title> </head> <body> <h1>漂洋過海來看你</h1> <hr> <p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br> <em><strong>漂洋過海</strong></em>來看你 </p> <hr/> </body> </html> |
瀏覽器預覽效果圖
注釋使用：<!--被注釋的內容-->
大于號：> great than的縮寫
小于號：< less than的縮寫
雙引號：""
版權符號：©
空格：
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注釋和特殊符號</title> </head> <body> <pre> 注釋使用：<!--被注釋的內容--> 大于號：> great than的縮寫 小于號：< less than的縮寫 雙引號："" 版權符號：© 空格： </pre> <!-- 我是被注釋的內容，我只留給你們看，不會在頁面上顯示 --> 5<10>6 <br> "我是被雙引號引起來的內容"<br> ©自由職業開發者公司<br> 我是 測試 空 格的 </body> </html> |
瀏覽器預覽效果圖
以上就是HTML的簡單入門，后續帶大家更深入的了解HTML
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
