学习前端基础知识html+css

HTML基础
1. 概念
  1. 超文本标记语言 hyper text markup language
2. 发展
3. 语法
  1. <标记属性=“属性值”/>
  2. <标记属性=“属性值”></标记>
4. 标签
  1. 常规标记：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.
  2. 空标记：img,br,hr,input,meta,link
  3. 转义字符: ><©
  4. 默认代有边框的标记：fieldset,input,textarea,select,hr,button,a>img(IE浏览器里)。
  5. 默认代有外边距和内填充的元素：
5. 命名规则
  1. 小写英文字母开头，名字中间不能有汉字，特殊字符。可以接_ - 数字。
6. 站点的创建
  1. 作用：用来归纳网站上的所有资源。
  2. Img,js,css,html,font
Web标准
1. 结构（HTML W3C）
2. 表现(CSS W3C)
3. 行为(domECMASCRIPT)ecma
HTML属性
1. Id,class
2. Table:width,height,border,bgcolor,bordercolor,cellspacing,cellpadding
3. Tr,td,th:align,valign
4. Td,th:rowspan,colspan
5. Form:name,action,method(post/get).
6. 表单元素：value,name,placeholder,maxlength,min,max,checked,disabled,enabled,selected,type
7. Img:src,title,alt,width,height,
8. A:href,title,target
  1. Alt和title区别
  2. Get和post
Css基础
1. 概念
  1. 层叠样式表 cascading style sheets
2. 语法
  1. 选择器{属性：属性值；}
3. 样式表
  1. 内联样式表
    1. 1. <标签 style=”属性：属性值；”/>
  2. 内部样式表
    1. 1. <style type=”text/css”/></style>
  3. 外部样式表
    1. 1. <link rel=”stylesheet” type=”text/css” href=””/>
      2. <style type=”text/css”>

@import url();

</style>

两种外部样式表的区别：
1. 本质不一样，link是HTML提供的，import是css提供的。
  1. 加载顺序不一样
  2. 兼容性不一样，import只能兼容IE5.5以上的
  3. 通过DOM控制样式时，只能通过LINK的方式。
2. 选择器
  1. 类型选择器：元素{属性：属性值；}
  2. 通配符：*{属性：属性值；}
  3. ID选择器：#ID名{属性：属性值；}
  4. 类选择器：.class名{属性：属性值；}
  5. 后代选择器选择器1 选择器2{属性：属性值；}
  6. 子代选择器选择器1>选择器2{属性：属性值；}
  7. 相邻兄弟选择器选择器1+选择器2{属性：属性值；}
  8. 通用兄弟选择器选择器1~选择器2{属性：属性值；}
  9. 伪类选择器
    1. ：link :visited :hover :active
  10. 群组选择器选择符1，选择器2{属性：属性值；}
3. 权重
  1. 内联权重：1000
  2. ID：0100
  3. 类，伪类0010
  4. 类型，伪元素 0001
  5. 包含权重之和
  6. 子代选择器 0000
  7. 继承 0000
  8. 属性选择：0010

css属性
文本属性
1. 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)
背景属性
1. Background-color,background-image,background-repeat(no-repeat,repeat,repeat-x,repeat-y),background-position,background-attachment(scroll,fixed)
边框属性
1. Border-color,border-style(solid,double,dashed,dotted,none),border-width
列表属性
1. List-style-type,list-style-image,list-style-position
浮动的属性
1. Float:left/right/none
清除浮动
1. Clear:left,right,none,both
盒模型
1. 概念：是页面布局的基础，规定网页元素如何显示，及元素间的相互关系。
2. 组成: margin+border+padding+content
Css继承:父元素的规则会适用于子元素。
1. Font-size,font-family,color,letter-spacing,word-spacing,text-decoration,line-height,font-weight,font-style,text-transform,font-varant,white-space,
2. text-indent,text-align,
3. Border-collapse
4. List-style-type,list-style-image,list-style-position,list-style
Css层叠
1. 同一个元素可以同时被多个样式表或选择器选中，为他们定义了css规则，规则有冲突时，权重高的优先执行，一样权重，后写的起作用，没有冲突都可以起胜任。
溢出
1. Overflow：visible,hidden,scroll,auto,inherit
2. Overlow-x,overflow-y
单行文本溢出显示省略号
1. Width,white-space:nowrap,overflow:hidden,text-overflow:ellipsis;

元素类型
1. 块级元素
  1. 独占一行
  2. 能直接写宽高
  3. 作为容器来用
2. 行内元素
  1. 一行内可显示多个
  2. 不能直接定义大小
  3. 能定义盒模型里的属性，但margin,padding,border上下不起作用
类型转换 18
1. 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）
1. 一行内的内联元素的垂直对齐方式

l元芳怎么看

发布了36 篇原创文章 · 获赞 18 · 访问量 851

私信关注

学习前端基础知识html+css

HTML基础

css属性

盒模型

元素类型

猜你喜欢