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