1. 此篇文章讲解目录：

案例和由此案例重点讲解的知识点介绍

案例代码实现

html标签语义化知识点详解

2. 案例和相关知识点介绍

此案例是页面，效果如下：

此页面的技术实现解析：

使用语义化标签header实现登录头部分，使用section来书写登录部分，让页面更加整洁易懂。

此案例中主要用到了header和section，基于此，我们会系统的将如下知识点全部讲解：

标签语义化

语义化注意事项

3. 此案例的代码实现

第一步：使用语义化标签header和section编写登录页面html

第二步：全局css样式声明

第三步：登录头headercss样式

第四步：登录主体section及用户名密码输入框css样式

第五步：登录按钮css样式

4. 此案例的知识点详解

标签语义化

-标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

-标签语义化意义：

1:网页结构合理

2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）

4:便于团队开发和维护

标签语义化（注意事项）

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

大家好接下来我们会以连载的方式，并且结合京东商城的门户，系统讲解html的专业知识，欢迎大家关注头条号“互联网IT技术”。