编程规范 HTML + CSS
命名规范
HTML + CSS 命名规范
1. 命名需要是具备语义性的单词,不能用 数字 拼音 数字,符号开头
正确示范 : wrap description title content
错误示范 : aaaa a1 $we 4tdds
2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 PS: 更推荐使用 - 这样更清晰.
正确示范 : header-nav content-left slide-bar
错误示范 : headernav slideBar ContentLeft
3. 命名需要进行适当的缩写, 单词连接层级不要超过4层
正确示范 : head-tit-ico
错误示范 : header-title-left-logo-icon
4. 不容许通过1、2、3等序号进行命名
正确示范: content-product
错误示范: content1
content2
另:
1. 避免class与ID重名
2. id用于识别模块或一级结构区域 且必须唯一 不要改动线上项目ID名称
常用命名
头 | header | 内容 | content | 尾 | footer | 导航 | nav |
---|---|---|---|---|---|---|---|
子导航 | subnav | 子导航 | column | 主体 | main | 新闻 | news |
版权 | copyright | 文章列表 | list | 加入 | joinus | 合作伙伴 | partner |
标志 | logo | 侧栏 | sidebar | 横幅 | banner | 状态 | status |
菜单 | menu | 子菜单 | submenu | 滚劢 | scroll | 搜索 | search |
标签页 | tab | 提示信息 | msg | 小技巧 | tips | 标题 | title |
指南 | guild | 服务 | service | 热点 | hot | 下载 | download |
注册 | regsiter | 登录条 | loginbar | 按钮 | btn | 投票 | vote |
注释 | note | 友情链接 | friend-link | 外套 | wrap | 面包屑 | bread-crumb |
当前的 | current | 购物车 | shop | 图标 | icon | 文本 | txt |
容器 | container | wrap |
img 标签四要素
为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性,就可以在页面加载时为图像预留空间。如果没有这些属性,浏览器就无法了解图像的尺寸,也就无法为图像保留合适的空间,因此当图像加载时,页面的布局就会发生变化。
img标签四要素 width height
四要素的width和height只需要写数字 图片的原始宽度和高度 不需要添加单位, 爬虫需要的是原始图片数据
alt不仅是图片替代文本而且起到让搜索引擎蜘蛛了解图片的内容,便于百度图片的收录以及优化。 alt还可以在图片无法加载的时候 显示图片描述文字 让用户了解这个图是做什么的
title不属于四要素 四要素有 src、width、height、alt
正确示范 : <img src='xxx/xxx.png'