学习前端基础知识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. 转义字符:&nbsp;&gt;&lt;&copy;
     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. 两种外部样式表的区别：
   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. 一行内的内联元素的垂直对齐方式