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 网页基本组成

网页基本组成