01html基礎案例實踐04
阿新 • • 發佈：2018-02-01
ava 用戶 工具 utf-8 什麽是 blog 招聘 而且 dom
day04
案例實踐
html有五個部分構成：
logo
導航欄
banner圖
內容（文章內容，鏈接區）
頁腳
案例代碼（index4.html）：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html案例</title> 6 </head> 7 <body> 8 <!-- 頭部部分 --> 9 <div>10 <!-- logo --> 11 <div> 12 <img src="img/logo.jpg" alt="logo"> 13 </div> 14 <!-- 導航 --> 15 <div> 16 <ul> 17 <li><a herf="#">HTML5</a></li> 18 <li><a herf="#">JS</a></li> 19 <li><a herf="#">CSS</a></li> 20 <li><a herf="#">IOS</a></li> 21 <li><a herf="#">Android</a></li> 22 <li><a herf="#">Photoshop</a></li> 23 </ul> 24 </div> 25 <!-- banner圖 --> 26 <div> 27 <img src="img\banner.jpg" alt="banner圖"> 28 </div> 29 </div> 30 <!-- 主體部分 --> 31 <div> 32 <!-- 文章內容 --> 33 <div> 34 <h1>如何成長為一名優秀“web前端開發工程師”</h1> 35 <h6>2天前 308瀏覽 1評論</h6> 36 <p> 37 前端工程師，也叫Web前端開發工程師。一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。現在說的重點不在於講解技術，而是更側重於對技巧的講解。技術非黑即白，只有對和錯，而技巧則見仁見智。以前會Photoshop和Dreamweaver就可以制作網頁，現在只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁制作都更接近傳統的網站後臺開發，所以現在不再叫網頁制作，而是叫Web前端開發。Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近兩年來備受青睞。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。 38 </p> 39 <p>Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！</p> 40 <ol> 41 <li>HTML 甚至不是一門語言，他僅僅是簡單的標記語言！</li> 42 <li>CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。</li> 43 <li>Javascript 的基礎部分相對來說不難，入手還算快。</li> 44 </ol> 45 <p>如何才能做得更好呢？</p> 46 <ol> 47 <li>必須掌握基本的Web前端開發技術，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。</li> 48 <li>學會運用各種工具進行輔助開發。</li> 49 <li>除了要掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性等等。</li> 50 </ol> 51 <p>可見，看似簡單的網頁制作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對於老手來說，也時常不知道下一步該學什麽。 代碼質量是前端開發中應該重點考慮的問題之一。例如，實現一個網站界面可能會有無數種方案，但有些方案的維護成本會比較高，有些方案會存在性能問題，而有些方案則更易於維護，而且性能也比較好。這裏的關鍵影響因素就是代碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的，對代碼質量的要求也不同，但它們之間又有著千絲萬縷的聯系。</p> 52 <h6>作者: Jush 時間:2016-8-29</h6> 53 </div> 54 <!-- 鏈接區 --> 55 <div> 56 <dl> 57 <dt>HTML標記語言</dt> 58 <dd> 59 <img src="img\HTML1.jpg" alt="HTML1"> 60 </dd> 61 <dd>超文本標記語言或超文本鏈接標示語言HTML是一種制作萬維網頁面的標準語言</dd> 62 </dl> 63 <dl> 64 <dt>CSS層疊樣式表</dt> 65 <dd><img src="img/css3.jpg" alt="css3"></dd> 66 <dd>CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言 67 </dd> 68 </dl> 69 <dl> 70 <dt>什麽是javascript</dt> 71 <dd><img src="img/js.jpg" alt="js"></dd> 72 <dd>JavaScript一種腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型</dd> 73 </dl> 74 </div> 75 </div> 76 <!-- 頁腳部分 --> 77 <div> 78 <p>慕課網只學有用的</p> 79 </div> 80 </body> 81 </html>
圖示：
01html基礎案例實踐04