整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今天我們一起來了解下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.如果覺得一個人學習前端有難度，我建了一個小白前端學習交流群，可以私聊我，大家在群里多多交流，我會經常給大家答疑，組織大家練習，一起做小項目。有方向，少走彎路。
前話
Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網站模板，div加css布局，網頁資源分開存儲以便管理，網頁結構清晰簡單，希望本篇能夠助力各位萌新
主題
《周末の食記》
美食能撫平一切的憂傷
簡介
文件結構包含了css、fonts、images、js和html，運用html5技術，包括nav標簽、header標簽和footer標簽等，采用bootstrap進行布局
圖摘
目錄
編碼
<div class="ftco-46-row d-flex flex-column flex-lg-row">
<div class="ftco-46-text ftco-46-arrow-right">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">揚州炒飯</h3>
<p class="mb-5">一碗不一樣的炒飯，讓你難以拒絕.</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
<div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
<div class="ftco-46-text ftco-46-arrow-up">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">藍莓酸奶冰激凌</h3>
<p class="mb-5">觸動您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺享受，精選一級的夏威夷果仁，入口絲滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>結語
如果人的一生總的能量是固定的話，那就節省開支，延長時間，喜怒哀樂不溢于言表，不困于心智，保持樂觀心態
在前面：java作為一門世界級編程語言金字塔頂尖的語言。需要大量的練習、練習、練習來鞏固自己所獲得的知識。冰凍三尺非一日之寒，希望大家在學習java的日子里一定一定要堅持不懈，嚴格要求。多練，多問，多百度。祝大家早日成為一名優秀的軟件工程師！
文章摘要：此篇文章會帶領大家創建一個html最簡單的頁面，以及在頁面中增加一些簡單的內容。
我先給大家放2張我以前教學的時候，開課前給學生畫的圖：
這2張圖應該已經比較清晰明了的告訴你，學習java前端需要具備的一些主觀和客觀方面的東西，我就不多做解釋了，以后我的文章中，會以代碼圖片及展現效果居多，盡量減少文字的占比。讓大家對所學的知識有一個更直觀的感受。
言歸正傳，想要編寫html代碼，首先需要一個后綴為.html的文件，這個文件怎么創建呢？最簡單的方式，建一個txt，然后把后綴改為.html，用編輯器打開，就可以編寫代碼了。
當然，txt界面太丑，筆者這里選用sublime,該編輯器也可以直接加載一個html模板，選擇菜單→新建文件(模板)→html,當然，前提要先設置好這個模板，具體設置方法這里就不做詳細介紹了，百度上一大堆。新建完成后，產生一個代碼如下的頁面：
然后在<body></body>標簽體之間打入一行代碼
用瀏覽器打開該文件，顯示如下圖，說明這個html文件已經創建成功了，能夠正常的編寫代碼。
零基礎的同學一定對剛才的代碼比較疑惑，雖然照著寫能實現功能，但是這些代碼各自又都是什么意義呢？ 我用注釋的方式上圖來告訴大家：
首先，html 的標簽分為自閉和標簽和閉合標簽
自閉和標簽：就是沒有結束標簽，比如上圖的<meta>標簽，該標簽是沒有結束標簽相呼應的。
閉合標簽：有開始和結束標簽，比如上圖的<html><body><h1>標簽，他們都有一個</html></body></h1>相呼應
在上圖中，我用過了比較多的 < !-- -- >標簽，這是html里的注釋標簽，在編寫代碼的過程中，勤加注釋是一個非常非常好的習慣，不僅方便了他人也方便了以后自己代碼的維護。所以說，不加注釋的代碼都是在耍流氓。
我們80%的頁面標簽代碼都會寫在<body></body>標簽里面,什么是標簽，至少包含< > 和標簽元素，比如<div><a><p><input>等，標簽還有標簽屬性和屬性值，標簽屬性和屬性值在第一個標簽內容中，如果是多個標簽則以空格符號分割 ，如圖：
Div 是整個html中最常用的一個標簽元素，<div></div>類似于一個盒子，里面可以承載各種各樣的元素標簽，大家看到的所有的網站都是靠著div一個個的盒子規劃開來，最后拼接在一起的，形成了一個完整的頁面。
那么如何去建立一個div呢？首先，我們在html的<body></body>標簽中加入一個<div></div>標簽 ，但是單純的加入標簽并不會在頁面中產生肉眼可見的東西，因為我們還要定義這個div的寬，高，背景色，邊框等等，詳見如下代碼：
這樣的一行代碼，最后展現出來的效果是：
我們來一點點的剖析這一行代碼：
Style:style 是元素標簽里的一個標簽屬性，他的作用是可以定義該標簽的樣式。里面的樣式格式是xxx:xxx; 每一組樣式都是這樣的定義，冒號用來隔開樣式屬性和樣式屬性值，最后以分號結尾.
width:定義該元素的寬
height:定義該元素的高
background:定義該元素的背景顏色(也可使用red,yellow等顏色定義)
border:定義該元素的邊框
4px 代表邊框粗細，
solid 代表邊框樣式, 邊框樣式又分為solid(實框)、dotted(虛框)
red代表邊框顏色,邊框顏色也可用#ccc,#112233這種形式表現
Div里可以放入文字、圖片、標簽元素等各式各樣的東西。下面我演示一下如何放入照片：
首先，放入照片要使用到<img>標簽，這是一個自閉和標簽，所有沒有結束標簽。
Src代表圖片的路徑，width,height 代表圖片的寬度和高度 ,alt是圖片的描述
這個路徑可以是相對路徑，也可以是絕對路徑。
相對路徑：就是相對于這個網頁的路徑，比如圖片和網頁在同一個文件夾下，那么src處就直接填圖片的文件名字就可以，若建了一個文件夾images，圖片放在該文件夾中，同時這個文件夾和網頁在同一個位置，那么src所填的就是images/圖片名字.jpg
絕對路徑：即從頭開始寫路徑，如src = “C:/xxx/xxx/xxx/xxx.jpg”
假設我現在的圖片位置和網頁位置同處一處
最后的效果：
我這里改大了DIV的寬度和高度，若圖片所設的寬高大于DIV的寬度高度，那么將會發生溢出的情況，同學們可以自己去試一下，這種溢出的情況也有對應的標簽可以做調整，這個我們后面再講。
這邊特別提醒一點，如果div沒有設定寬度width,則默認為等同瀏覽器寬度的寬度，若div沒有設定高度，則該div根據div中內容進行高度的伸縮，div中的內容有多高，div就有多高，如圖，我把width和height全部去掉：
上圖width和height全部去掉，所以，width默認跟瀏覽器寬度等寬，高度為圖片的高度。
文字的話就比較簡單了，代碼貼上：
最后結果：
第二句文字才是div創建出來的文字，我解釋一下style里面的樣式：
Font-size:文字大小，px為單位(像素)
Font-family:文字樣式，分為很多，這個可以去word文檔里找找
Font-weight：文字加粗，bold是一種默認加粗的大小。
End.
來源：公眾號“java編程”
運行人員：中國統計網小編（微信號：itongjilove）
微博ID：中國統計網
中國統計網，是國內最早的大數據學習網站，公眾號：中國統計網
http://www.itongji.cn
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
