# HTML/CSS

# HTML

# 语义化

请了解前端语义化的概念和意义，在实际开发中，尽可能做到使用合适的标签做该做的事，使代码语义化，以便于浏览器SEO和团队合作。

# 结构、表现、行为分离

尽量在文档和模板中只包含结构内容HTML，而将所有的表现移入样式表中，将所有的行为移入脚本中。

• 不使用行内样式
• 不使用内嵌样式
• 样式问题应该使用CSS解决，而不要为了某种特定样式使用特定标签，这将违犯语义化的原则。

总之，HTML应该永远只关注页面结构与展示内容信息，不应该在HTML中做除此之外的其它事情。样式表现应该交给CSS，并且最好放在单独的文件中，通过外链的形式 引入到HTML，而有关页面操作、交互的JS代码也应该放在单独的js文件中，通过页面引入的方式使用。而不是为了方便在HTML结构中内嵌CSS和JS代码，这样利于团队合作 与后期维护，同时也使得代码简洁整齐。

# 标签（tag）

标签使用kebab-case写法，即全部由小写字母组成，多个字母以中划线“-”分割；

# 属性（atribute）

• 属性名使用kebab-case写法，属性值使用双引号，双引号内部禁止使用无用的空格；
• 自定义属性名要语义化，必须使用kebab-case写法；
• 属性名和属性值中间的“=”两边禁止使用空格。

<!-- errro -->
<ElCard></ElCard>

<!-- correct -->
<el-card></el-card>


<!-- errro -->
<img dataImg = 'src'>图片</img>

<!-- correct -->
<img data-img="src">图片</img>

# alt属性不能为空

<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。 假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

• 网速太慢；
• src 属性中的错误；
• 浏览器禁用图像；
• 用户使用的是屏幕阅读器。

从SEO角度考虑，浏览器的爬虫爬不到图片的内容，所以我们要有文字告诉爬虫图片的内容

# CSS

# 空格使用

CSS选择器和大括号之间必须空一个空格。

# CSS预处理器

css预处理器一律使用scss。

# 文件目录

src目录下的styles目录用来存放项目的css文件，具体划分如下：

styles/
|- base.scss            ------ 样式reset，解决浏览器兼容问题
|- common.scss          ------ 全局公用样式类文件
|- iconfont.css         ------ 字体文件
|- variable.scss        ------ 全局scss变量文件
|- mixin.scss           ------ 全局scss mixin文件