HTML+CSS规范

编程规范 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 标签四要素,(行内元素,用text-aglin居中,不是margin:0 auto.)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZwupMse-1619715962829)(C:\Users\tuyue\AppData\Local\Temp\1612969513887.png)]
为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
img标签四要素 width height
四要素的width和height只需要写数字 图片的原始宽度和高度 不需要添加单位, 爬虫需要的是原始图片数据
alt不仅是图片替代文本而且起到让搜索引擎蜘蛛了解图片的内容,便于百度图片的收录以及优化。 alt还可以在图片无法加载的时候 显示图片描述文字 让用户了解这个图是做什么的
title不属于四要素 四要素有 src、width、height、alt

正确示范 : <img src='xxx/xxx.png' width='125'<