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出现乱码;