编码规范、垂直居中、伪类和伪元素

1、平时常用写代码遵守的编码规范

  • HTML规范
    HTML标签语义化,减少无意义的标签
    标签名小写,正确闭合标签
    使用HTML5的doctype来启用标准模式,<!DOCTYPE html>
    在html标签上设置正确的lang属性,一般是<html lang="zh-CN">
    属性值必须用双引号包围
    在meta里声明字符编码为utf-8
    遵守样式分离原则,写HTML时不要想CSS的写法
    使用外链的CSS和JavaScripe,属性type可以省略
    尽量用alt标签去描述图片
    习惯性书写注释,方便日后维护
    IE 支持通过特定的 <meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。如<meta http-equiv="X-UA-Compatible" content="IE=Edge">
    HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。
    class
    id,name
    data-*
    src,,for, type, href
    title,alt
    aria-*,role

  • CSS规范
    tab缩进用两个空格代替
    css的:后加个空格,{前加个空格
    每条声明后都加分号;
    换行,而不要放在同一行
    颜色用小写,能缩写就缩写,如#fff
    小数不用写前缀,0.5s可写成.5s,0不用加单位
    尽量缩写,如margin:5px 10px 5px 10px;可写成margin:5px 10px;
    缩写属性,如font: 16px/1.5 palatino, georgia, serif;
    声明顺序遵循以下
    结构性属性
    display、position、overflow、float、margin、padding
    表现性属性
    width、height、background、border、font
    class命名的语义化

2、垂直居中有几种实现方式,给出代码范例

写了篇文章总结了一下:CSS水平居中与垂直居中的总结

3、实现如下效果,每种效果都只使用一个html 标签来实现

image.png

预览链接:http://js.jirengu.com/fuliy/2/edit

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 说一说你平时写代码遵守的编码规范 文件/资源命名文件名应遵循同一命名约定。以可读性而言,减号(-)是用来分隔文件名...
    _Dot912阅读 424评论 0 0
  • 1.代码编码规范 统一使用小写; 注意书写时的换行缩进; 缩进使用两个空格; 类选择器,id选择器使用“”包裹; ...
    曾祥辉阅读 627评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459