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 - 定义变量

你可能感兴趣的:(html)