语义化标签总结

1> 什么是语义元素？

语义是指对一个词或者句子含义的正确解释。

很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到

标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题

2>为什么要语义化？

代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构

有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息

提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。

便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。

方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

3>HTML5常用的语义元素

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”

4>常用的CSS样式命名

1.页面结构页

   头：header             页面主体：main             页尾：footer

   内容：content/container           容器：containe             导航：nav

   侧栏：sidebar           栏目：column            页面外围控制：wrapper          左右中：left right center

2.导航

   导航：nav         主导航：mainnav          子导航：subnav          顶导航：topnav

   边导航：sidebar         左导航：leftsidebar           右导航：rightsidebar        

   菜单：menu           子菜单：submenu          标题：title         摘要：summary

3.功能 

  标志：logo          广告：banner          登录：login         登录条：loginbar 

  注册：register         搜索：search          功能区：shop          标题：title

id和class使用id不要滥用，谨慎使用适当使用class