任务描述
1.通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力
2.学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变
实现界面
这算第一次做比较完整的页面了。因为设计稿没有标注，所以一边测量尺寸和距离，一边加css属性，还是挺麻烦的，而且有点枯燥。但是，这些都是后续知识必备的基础。
总结：
1.标签语义化
为什么标签要做到语义化？
（1）有意义的标记标签可以方便的添加css属性，而不必要添加其他标识符（id or class）,减少了代码量（简洁）。
（2）除了人之外，程序和其他设备也可以理解语义标签。比如：搜索引擎可以识别出标题（因为它被包围在h1标签中）并予以重视。很多网页也是利用标签语义化，来让搜索引擎更容易理解网页内容，从而提高网站排名。
如何使用语义标签？
利用h5新增结构标签去代替div，避免满屏div的窘境。
<section></section>
用来对网页内容进行分块，一个section元素通常由内容以及标题组成
section标签的运用
<nav></nav>
可以作为页面导航的链接组（只需将主要的基本的链接放进来）——全局导航
nav标签的运用
<header></header>用来放置整个页面或者一个页面区块的引导（导航）元素，例如页首
<main></main>表示网页的主要内容（每个网页所特有的，不包括全局导航）
<footer></footer>用来放置整个页面或者一个页面区块的脚注（如作者，版权信息，相关阅读链接等）
其它此次任务中未能运用的语义标签
article 代表页面中可以独自被外部引用的内容，可以是一篇博客或文章，帖子，评论，插件等
aside 当前页面的附属信息部分（侧边栏，广告，导航条）
address 用来在文档中呈现联系信息，包括作者，地址，维护者，电话号码，邮箱等。
2.细节处理
如何消除标签换行后产生的间隙？
换行间隙
如图，文本输入框和提交按钮之间因为标签换行产生了间隙。
解决方法：
消除间隙
截图
在父级元素中加入font-size:0; 子级元素中加入font-size:xxpx 即可消除间隙，当然另外一种方法是直接把俩个标签写成一行，但是这样会显得代码凌乱。
网友评论