Web前端基础（二）：HTML5与网页入门

网页入门

1. 网站布局

    DIV用于布局，Table用于显示数据，这是现在最基本的设计原则。

1.1 Table 布局

      缺点：1. Table主要呈现数据和处理数据，如果用于布局，使SEO优化（搜索引擎优化）较差；

              2. 不利于网站维护；

              3. 标签嵌套层级较多，代码冗余量较大。

      优点：1. 容易上手；

              2. table在不同浏览器中都得到了很好的兼容；

              3. 可以形成复杂的变化，简单快速。     

1.2 DIV+CSS 布局

      优点：1. 有利于SEO优化，提高搜索引擎对网页的搜索效率；

              2. 有利于网站维护和改版；

              3. 符合W3C标准，代码结构清晰，结构、样式和行为分离；

              4. 用只含结构化内容的 HTML代替嵌套的标签，嵌套层级较少，代码量少，加快页面的加载速度。

      缺点：1. 不容易上手，操作比较复杂；

              2. 兼容性较差；

1.3 区别

      DIV+CSS：布局简洁明了，使用方便，相对于表格来说更容易搜索的到，不易出现错误或者不可控，样式繁多，易控易修改。

      Table：表格布局不建议使用，布局不容易调整和规划，容易失控，大部分都不能使用太多样式，也许你会因为边框而烦恼。

2. HTML5是什么

      狭义：1) HTML4.0的升级版本    2) HTML5+CSS3+ 新增JS API接口    3) W3C制定的关于HTML技术约定的新规范。

      广义：1) HTML5的代名词    2) 行业的技术标准    3) 当前新技术的代名词。

从HTML5技术的角度来说，我们将 HTML5技术分为五大类，分别是：

      1) 新增标签以及属性；

      2) CSS3 的新特性；

      3) Canvas 绘图；

      4) JavaScript 的新增API；例如—>input获取手机相册，手机定位获取经纬度，摇一摇查看是会否晃动

      5) 移动端。

3. 网站组成

3.1 网站的基本组成

      HTML + CSS + JavaScript(JS)

      结构  + 样式 + 行为（动作）

3.2 网站开发职位

    前端开发工程师——HTML+CSS+JS+切图

    网页开发工程师——同上

    HTML5开发工程师——HTML+CSS+JS+切图，会更多接触到H5的新增特性和功能

    页面重构师——主要是HTML+CSS，少量的JS。 

    JS开发工程师——主要书写JS，稍微接触HTML和CSS。

4. 前端开发命名规则

    网站首页的命名为：index.html；

4.1 文件目录结构规范

    uxd（根目录）—>index.html（首页）、css（存放css文件）、js（存放js脚本）、images（存放图片）、cn（其它子页面）

4.2 命名规则：(详见前端开发规范)

     例如：广告——banner

4.3 文档类型

    html4.0中文档类型声明3种：严格型、过渡型、框架型;

    HTML5的文档类型声明1种：html。

4.4 meta——元信息

http-equiv  content

charset声明，要放在title上面，以免title出现乱码;

4.5 网页基本组成

网页基本组成