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
原文地址：https://www.cnblogs.com/shink1117/p/8398805.html