页面布局（layout）
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 背景；
background: -webkit-gradient(top red orange yellow green lightblue blue purple) 颜色渐变；
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 光标；
cursor:pointer; 鼠标移上变为小手；
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中最常用的HTML标签
a、布局标签
div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。
aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。
header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。
footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。
article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。
b、文本标签
h1-h6标签可定义标题
p标签定义段落
b/strong标签加粗
em标签来表示强调的文本，斜体
strong标签表示重要文本
u标签下划线
s标签删除线
br标签表示回车换行
hr标签表示水平线
span标签被用来组合文档中的行内元素。
blockquote标签表示块引用
pre标签可定义预格式化的文本，保持原有格式的一种标签。
sub标签下标，
sup>标签上标
表示一个空格
©表示版权符
<表示<
>表示>
c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。
<a href="指向的链接地址或者网址#ID名" target="_blank|_self|_top|_parent">百度</a>
1、 消除inline-block元素间的换行间隙问题：
{font-size:0;}
兼容IE6/7浏览器的方法：letter-spacing属性。
2、让两个inline-block的div顶部对齐：两个元素都要加上vertical-align:top;
3、vertical-align的百分数值是相对于此标签继承的line-height值决定的。例如：
.test{vertical-align:-10%;}
假设这里的.test的标签继承的行高是20px，则这里的vertical-align:-10%所代表的实际值是：-10% * 20 = 2(像素)。
4、修改placeholder颜色：
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {/* Firefox 18- */ color: red;
}
::-moz-placeholder{/* Firefox 19+ */ color: red;
}
:-ms-input-placeholder {
color: red;
}
5、文字多行省略写法：
{
display: -webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
-webkit-box-pack: center;
}
6、input去掉原本样式用图片代替时候，需要注意IOS里面会有黑色的背景，否则可能有黑边，设置background-color:white。
网友评论