-
HTML基础
- 概念
- 超文本标记语言 hyper text markup language
- 发展
- 语法
- <标记 属性=“属性值”/>
- <标记 属性=“属性值”></标记>
- 标签
- 常规标记:a,label,form,fieldset,legend,h1,h2,h4,h5,h6,h3,tr,td,table,thead,tbody,tfoot,th,caption,textarea,select,option,div,span,p,em,i,b,strong,ul>li,u,del,s,sup,sub,ol>li,dl>dt+dd,button,head,body,title,style.
- 空标记:img,br,hr,input,meta,link
- 转义字符: ><©
- 默认代有边框的标记:fieldset,input,textarea,select,hr,button,a>img(IE浏览器里)。
- 默认代有外边距和内填充的元素:
- 命名规则
- 小写英文字母开头,名字中间不能有汉字,特殊字符。可以接_ - 数字。
- 站点的创建
- 作用:用来归纳网站上的所有资源。
- Img,js,css,html,font
- 概念
- Web标准
- 结构(HTML W3C)
- 表现(CSS W3C)
- 行为(domECMASCRIPT)ecma
- HTML属性
- Id,class
- Table:width,height,border,bgcolor,bordercolor,cellspacing,cellpadding
- Tr,td,th:align,valign
- Td,th:rowspan,colspan
- Form:name,action,method(post/get).
- 表单元素:value,name,placeholder,maxlength,min,max,checked,disabled,enabled,selected,type
- Img:src,title,alt,width,height,
- A:href,title,target
- Alt和title区别
- Get和post
- Css基础
- 概念
- 层叠样式表 cascading style sheets
- 语法
- 选择器{属性:属性值;}
- 样式表
- 内联样式表
-
- <标签 style=”属性:属性值;”/>
-
- 内部样式表
-
- <style type=”text/css”/></style>
-
- 外部样式表
-
- <link rel=”stylesheet” type=”text/css” href=””/>
- <style type=”text/css”>
-
- 内联样式表
- 概念
@import url();
</style>
- 两种外部样式表的区别:
- 本质不一样,link是HTML提供的,import是css提供的。
- 加载顺序不一样
- 兼容性不一样,import只能兼容IE5.5以上的
- 通过DOM控制样式时,只能通过LINK的方式。
- 选择器
- 类型选择器:元素{属性:属性值;}
- 通配符:*{属性:属性值;}
- ID选择器:#ID名{属性:属性值;}
- 类选择器:.class名{属性:属性值;}
- 后代选择器 选择器1 选择器2{属性:属性值;}
- 子代选择器 选择器1>选择器2{属性:属性值;}
- 相邻兄弟选择器 选择器1+选择器2{属性:属性值;}
- 通用兄弟选择器 选择器1~选择器2{属性:属性值;}
- 伪类选择器
- :link :visited :hover :active
- 群组选择器 选择符1,选择器2{属性:属性值;}
- 权重
- 内联权重:1000
- ID:0100
- 类,伪类0010
- 类型,伪元素 0001
- 包含 权重之和
- 子代选择器 0000
- 继承 0000
- 属性选择:0010
- 本质不一样,link是HTML提供的,import是css提供的。
-
css属性
- 文本属性
- Font-size,font-family,color,font-weight(bold,bolder,normal,100-900),font-style(italic,oblique,normal),text-decoration(none,underline,overline,line-through,blink),text-indent,text-transform(none,capitalize,uppercase,lowercase),letter-spacing,word-spacing,line-height,font,font-variant(normal,small-caps),text-align(left,right,center,justify),vertical-align(top,middle,bottom,baseline,text-top,text-bottom,super,sub)
- 背景属性
- Background-color,background-image,background-repeat(no-repeat,repeat,repeat-x,repeat-y),background-position,background-attachment(scroll,fixed)
- 边框属性
- Border-color,border-style(solid,double,dashed,dotted,none),border-width
- 列表属性
- List-style-type,list-style-image,list-style-position
- 浮动的属性
- Float:left/right/none
- 清除浮动
- Clear:left,right,none,both
-
盒模型
- 概念:是页面布局的基础,规定网页元素如何显示,及元素间的相互关系 。
- 组成: margin+border+padding+content
- Css继承:父元素的规则会适用于子元素。
- Font-size,font-family,color,letter-spacing,word-spacing,text-decoration,line-height,font-weight,font-style,text-transform,font-varant,white-space,
- text-indent,text-align,
- Border-collapse
- List-style-type,list-style-image,list-style-position,list-style
- Css层叠
- 同一个元素可以同时被多个样式表或选择器选中,为他们定义了css规则,规则有冲突时,权重高的优先执行,一样权重,后写的起作用,没有冲突都可以起胜任。
- 溢出
- Overflow:visible,hidden,scroll,auto,inherit
- Overlow-x,overflow-y
- 单行文本溢出显示省略号
- Width,white-space:nowrap,overflow:hidden,text-overflow:ellipsis;
-
元素类型
- 块级元素
- 独占一行
- 能直接写宽高
- 作为容器来用
- 行内元素
- 一行内可显示多个
- 不能直接定义大小
- 能定义盒模型里的属性,但margin,padding,border上下不起作用
- 块级元素
- 类型转换 18
- Display:none,block,inline,inline-block,list-item,table-cell,table,table-row,table-header-group,table-row-group,table-caption,flex,inline-flex
- Vertical-align(baseline)
- 一行内的内联元素的垂直对齐方式