HTML/CSS 常用单词整理

页面布局（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）；

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标签的内容可用作文章的侧栏，html5新增标签。

header标签定义页面的头部（介绍信息），html5新增标签。

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，html5新增标签。

footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，html5新增标签。

article标签规定文章独立的其他内容，比如：标题、内容、评论，html5新增标签。

b、文本标签

h1-h6标签可定义标题

p标签定义段落

b/strong标签加粗

em标签来表示强调的文本，斜体

strong标签表示重要文本

u标签下划线

s标签删除线

br标签表示回车换行

hr标签表示水平线

span标签被用来组合文档中的行内元素。

blockquote标签表示块引用

pre标签可定义预格式化的文本，保持原有格式的一种标签。

sub标签下标，

sup>标签上标

表示一个空格

©表示版权符

<表示<

>表示>

c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

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。