notes

html与css总结

html部分

常用基础标签

带有语义的标签

• em，强调
• strong ，比em强调级别更高
• abbr，定义缩写，与title属性相互搭配使用
• address，定义地址元素
• blockquote，定义块引用，通常情况下会产生缩进
• cite，通常情况下，某段话引子某本书，可以使用cite进行说明
• ins，定义被插入文本
• del，定义被删除文本

带有一定样式的标签

• b，定义粗体文本
• i，定义斜体文本
• big，定义大号文本
• small ，定义小号字体文本
• sup，上标文本
• sub，下标文本
• bdo，定义文本显示方向，属性：dir，值，ltr，rtl

输出类标签

• pre，代码中样式原样输出
• code，定义计算机代码文本
• kbd，定义键盘文本
• var，定义变量

功能类标签

• a标签-定义超链接实现页面跳转,定义锚点实现书签功能.
• ul,li标签-无序标签
• ol,li标签-有序标签
• iframe标签-页面嵌套
• dl,dt,dd-项目列表描述
• img标签-图片标签，其中有alt属性(图像替代文本),width和height属性(宽和高)，ismap属性(定义图像映射的一张图像)。链接跳转的图像,将图片嵌套在a标签中。
• table标签-表格，其中包括caption标签(标题),th标签(页眉),tr标签(行),td标签(单元格),thead标签(表格头部),tbody标签(表格主干),tfoot标签(表格尾部)。
• base标签-页面所有链接的基础链接，位于head标签中。

form标签

input标签

• type属性及其相关值:button，file,hidden,text,password,radio,checkbox,image,reset,submit.
• alt属性，定义当按钮为图片时，图片的替代文字。
• src属性，定义当按钮为图片是，图片的链接地址。
• checked属性，定义默认选项。
• disabled属性，禁用当前输入域。
• readonly属性，对当前输入域只读。
• maxlength属性，定义输入域字符的最大长度。
• name属性，定义当前输入域的名字。
• value属性，定义当前输入域的默认值。

textarea标签

• cols属性，规定可见列数。
• rows属性，规定可见行数。
• disabled属性，禁用当前文本输入区。
• name属性，当前文本的名字。
• readonly属性，对当前文本只读。

button标签

• disabled属性，禁用这个按钮。
• name属性，按钮名字。
• type属性，按钮类型(button,reset,submit)。
• value属性，按钮的显示文本内容的默认值。

select标签

相关属性

• disabled属性，禁用该菜单
• multipe属性，规定可同时选中多项
• name属性，下拉列表的名字
• size属性，菜单中可见项目的数目

optgroup标签-定义下拉列表选项分组

• label属性，定义选项组的标记，必要属性。
• disabled属性，禁用。

option标签-定义下拉列表中的选项

• label属性，定义当使用 时所使用的标注。
• selected属性，规定选项（在首次显示在列表中时）表现为选中状态。
• value属性，向服务器输送的值。

fieldset标签

• 定义分组标题。

css部分

css选择器(下面标签用div代替)

基础选择器

• html标签选择器-div{}
• id选择器-#id{}
• class选择器-.class{}

综合选择器

• 后代选择器-div div
• 交集选择器-div.class
• 并集选择器-div，class
• 直系子元素选择器-div>div
• 序列选择器-ul li:first-child{},ul li:last-child{}
• 相邻兄弟选择器-div+div
• 普通兄弟选择器-div~div

继承与层叠

继承

父元素的某些css属性会被子元素无条件的继承过去。关于文字的css属性都可以进行继承：color text- line- font-等。

层叠

层叠解决的是css冲突的问题，主要通过比较权重来解决层叠问题，!important 能够把”单独属性”的权重变为无限大，应当尽量少用，因为这样会使规则没有约束力。

块级元素和行内元素的区别

• 块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
• 一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效(注意：块级元素即使设置了宽度，仍然是独占一行的)
• 块级元素可以设置margin 和 padding.行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

块级元素与行内元素的整理

块级元素

• address-地址
• blockquote - 块引用
• center - 举中对齐块
• dir - 目录列表
• div
• dl - 定义列表
• fieldset - form控制组
• form - 交互表单
• h1 h2 h3 h4 h5 h6-各级标题的标签
• hr - 水平分隔线
• menu - 菜单列表
• p - 段落
• pre - 格式化文本
• table - 表格
• ul - 非排序列表

行内元素

• a - 锚点
• abbr - 缩写
• acronym - 首字
• b - 粗体
• bdo
• big - 大字体
• br - 换行
• cite - 引用
• code - 计算机代码
• em - 强调
• font - 字体设定
• i - 斜体
• img - 图片
• input - 输入框
• kbd - 定义键盘文本
• label - 表格标签
• q - 短引用
• s - 中划线
• select - 项目选择
• small - 小字体文本
• span - 常用内联容器，定义文本内区块
• strong - 粗体强调
• sub - 下标
• sup - 上标
• textarea - 多行文本输入框
• var - 定义变量