HTML与CSS 开发常用语义化命名
一、布局❤️
header 头部/页眉;
index 首页/索引;
logo 标志;
nav/sub_nav 导航/子导航;
banner 横幅广告;
main/content 主体/内容;
container/con 容器;
wrapper/wrap 包裹(类似于container);
menu 菜单;
sub_menu/second_menu 子菜单/二级菜单;
list 列表;
section 分区/分块(类似于div);
article 文章;
aside 侧边栏/广告;
footer 页脚/底部;
title/sub_title 标题/副标题;
news 新闻;
hot 热点;
pro 产品(product);
company 公司;
msg/info 信息(message)/消息;
ads 广告(advertisements);
icon 小图标;
img 图片(image);
copyright 版权;
contact_us 联系我们;
friend_link 友情链接;
tel 联系电话(telephone);
address 地址;
二、CSS样式(style)❤️
CSS 层叠样式表 (Cascading Style Sheets) ;
background 背景;
position 位置/定位;
relative/absolute/fixed 相对定位/绝对定位/固定定位;
float 浮动;
clear 清除;
vertical-align: middle/top/bottom; 垂直居中/上/下;
line-height 行高;
margin 外边距;
padding 内边距;
border 边框;
solid/dashed/dotted 实线/线虚线/点虚线;
border-radius 圆角;
shadow 阴影;
display 展示;
hidden 隐藏;
block/inline-block 块元素/行内块;
overflow 溢出;
cursor 光标;
animation 动画;
css sprites 雪碧图/图片精灵;
column 分列;
flex 弹性(布局);
三、表单(form)与表格(table)❤️
form 表单;
action 行为;
method 方式/方法;
input 输入框;
label 标签;
password 密码;
radio 单选框;
checkbox 复选框;
btn 按钮(button);
submit/reset 提交/重置;
textarea 文本域;
select/option 选择框/选择项;
placeholder 占位符(起提示作用);
search 搜索;
icon 小图标;
autofocus 自动聚焦;
disabled 禁用;
checked 选中(单选框/复选框);
selected 默认选择项(下拉选择框);
required 必填项;
readonly 只读;
table 表格;
thead/tbody/tfoot 表格标题/主体/底部;
colspan 跨列;
rowspan 跨行;
cellspacing 单元格间距(类似于margin);
cellpadding 单元格边距(类似于padding);
border-collapse: collapse; 边框合并(用于table上);
HTML与CSS 开发常用语义化命名的更多相关文章
- 你应该了解的CSS语义化命名方式及常用命名规则
CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...
- CSS语义化命名
CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...
- css中标签,类名,id名的命名 语义化命名
作为前端开发人,经常头疼于雷鸣,标签,id名的命名,不知道应该基于什么原则. 原则: 2 当命名的时候,问自己,这个元素是要来做什么?(根据使用目的).ad-banner 4 避免依靠位置和视觉效果命 ...
- CSS代码命名惯例语义化的方法
CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- (2) html 语义化
HTML语义化标签 1 什么是语义化标签? 通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据 p 判断内容是段落.input 标签是输入框等. 2 为什么要标签语义化? 1.搜素引擎友好 ...
- web语义化理解
含义: Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 为什么要web语义化?如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发 ...
- 智能选择器和语义化的CSS
本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...
- 标签语义化之常用HTML标签
一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
随机推荐
- G - 旅行的意义(概率DP) (DAG图的概率与期望)
为什么有人永远渴望旅行,或许就因为,巧合和温暖会在下一秒蜂拥而至吧. 一直想去旅游的天天决定在即将到来的五一假期中安排一场环游世界的旅行.为此,他已经提前查阅了很多资料,并准备画一张旅游路线图.天天先 ...
- scala编程(六)——函数式对象
Rational 的式样书 分数:rational number 是一种可以表达为比率 d n 的数字,这里的 n 和 d 是数字,其中 d 不能为零.n 被称作是分子:numerator,d 被称作 ...
- 好久不见,Java设计模式
引子 设计模式是很多程序员总结出来的最佳实践.曾经在刚开始写项目的时候学习过设计模式,在开发过程中,也主动或者被动的使用过.现在写代码虽说不会特意明确在用哪种设计模式,但潜移默化的写出来公认的最佳实践 ...
- Flask的Jinja2模版过滤器
Jinja2模版过滤器 过滤器是通过管道符号(|)进行使用的,例如:{{ name|length }},将返回name的长度.过滤器相当于是一个函数,把当前的变量传入到过滤器中,然后过滤器根据自己的功 ...
- Qt char * 与 const char * 的转换
char *ch1="hello11"; const char *ch2="hello22"; ch2 = ch1;//不报错,但有警告 ch1 = (char ...
- Android开发之《实现类似Toast可以自动消失的提示栏Tip》
import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.cont ...
- 良知VS野心,苹果为何要翻新手机?
前不久,苹果在大中华区推出了iPhone和iPad换机服务,消息一经发出便引发了果粉们的狂欢,那些丢弃在抽屉里的iPhone4S们看上去终于有着落了,也更坚定了"我是果粉,我骄傲" ...
- 吴裕雄--天生自然KITTEN编程:滂沱大雨
- iOS多线程开发之GCD(基础篇)
总纲: GCD基本概念 GCD如何实现 GCD如何使用 队列和任务组合 一.GCD基本概念 GCD 全称Grand Central Dispatch(大中枢队列调度),是一套低层API,提供了⼀种新的 ...
- (为容器分配独立IP方法二)通过虚拟IP实现docker宿主机增加对外IP接口
虚拟IP.何为虚拟IP,就是一个未分配给真实主机的IP,也就是说对外提供数据库服务器的主机除了有一个真实IP外还有一个虚IP,使用这两个IP中的任意一个都可以连接到这台主机,所有项目中数据库链接一项配 ...