html 产品页面,IFE-html&css-task总结（2）-实现常见的技术产品官网的页面架构及样式布局...

任务描述

1.通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力

2.学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变

实现界面

这算第一次做比较完整的页面了。因为设计稿没有标注，所以一边测量尺寸和距离，一边加css属性，还是挺麻烦的，而且有点枯燥。但是，这些都是后续知识必备的基础。

总结：

1.标签语义化

为什么标签要做到语义化？

(1)有意义的标记标签可以方便的添加css属性，而不必要添加其他标识符(id or class),减少了代码量(简洁)。

(2)除了人之外，程序和其他设备也可以理解语义标签。比如：搜索引擎可以识别出标题(因为它被包围在h1标签中)并予以重视。很多网页也是利用标签语义化，来让搜索引擎更容易理解网页内容，从而提高网站排名。

如何使用语义标签？

利用h5新增结构标签去代替div，避免满屏div的窘境。

用来对网页内容进行分块，一个section元素通常由内容以及标题组成

section标签的运用

可以作为页面导航的链接组(只需将主要的基本的链接放进来)——全局导航

nav标签的运用

用来放置整个页面或者一个页面区块的引导(导航)元素，例如页首

表示网页的主要内容(每个网页所特有的，不包括全局导航)

用来放置整个页面或者一个页面区块的脚注(如作者，版权信息，相关阅读链接等)

其它此次任务中未能运用的语义标签

article 代表页面中可以独自被外部引用的内容，可以是一篇博客或文章，帖子，评论，插件等

aside 当前页面的附属信息部分(侧边栏，广告，导航条)

address 用来在文档中呈现联系信息，包括作者，地址，维护者，电话号码，邮箱等。

2.细节处理

如何消除标签换行后产生的间隙？

换行间隙

如图，文本输入框和提交按钮之间因为标签换行产生了间隙。

解决方法：

消除间隙

截图

在父级元素中加入font-size:0; 子级元素中加入font-size:xxpx 即可消除间隙，当然另外一种方法是直接把俩个标签写成一行，但是这样会显得代码凌乱。