简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  html css knowledge compilation_html/css_WEB-ITnose

html css knowledge compilation_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:15911browse

1.学网页最好的方法：学习别人的网页。

2.文档结构  

(超文本标记语言)   

            

    

3.                  字体标记,大小为7，颜色为红色

4.    加粗

加强语气   

斜体 加强语气                           

上标   

下标   


   换行   

水平线、占屏幕的80%宽,大小，实体型   

下划线   

删除线   

段落   

标题

5.meta标记

(1)放在head标记里面

(2) 设置网页关键字

(3) 设置描述

(4) 设置作者

(5) 设置字符集 ，content-type表示中文，

(6) 设置页面定时跳转

6.

7.不懂看w3cschool帮助手册

8.

9.某些html标记有一些默认值

10.用适合的html标记去描述我们的网页

11.80%与80px的区别

12.记住制作网页的过程

13.

整段缩进2个字符 ，定义一个块引用，及转载的地址

14.

 预格式化
  
15.   空格   
  
  © 版权号   
  
  ®  商标号    
  
&  &    
  
<   <    
  
>   >    
  
" "
  
16.无序列表 
     
  •  type的值:disc,circle,square   
      
    有序列表 
       
    1.  type的值:A a 1   
        
      自定义列表 
       
       
        
      17.gif(图形交换格式)：256种颜色，支撑透明色，动画  
        
        jpeg(联合图像专家组):1670种颜色   
        
      png(网络可移植格式):1670种颜色，支撑透明色
        
      18.文本
        
      19.绝对路径    相对路径  src="01.png"  src="pic/01.png"  src="../01.png"
        
      20.html的作用------控制页面显示
        
      21.表格    
       
       表题        
       ;/th> 
       
                                                                   ="" target="_blankIn addition,_self itself,_parent superior,_top">
      23.
      24. 
       Anchor link 
       Jump to the anchor point of the xx.html page #name
      25.
       
       
                                                                                                                           
       Male 
      Female                                           🎜> 
       
      女< /lable> 
       
       
       >  
       
       
       
                                                                           ;select name="" size="2" multiple="multiple"> 
       
       
       
       
        
       
        
       
          
       
       
       
       
       
        
        /form>
       
      26.Web standard composition: structural xhtml, performance css (cascading style sheet), behavioral javascript Benefits: separation of performance and content
       
      27.
       
       
       
       29. If you want to use a special font, you can consider using a picture to represent it; try to use universal ones when designing Font 
       
      30. Length unit: em px
      

      31. Web page method (1) Embedded: 
       
      (2) Embedded: 
       
      (3) External link type: 
       
      (4) Import type: 
       
      32. 1. Tag selector: h1 > 
      2. Class selector: . 
       
      3.id selector: # 
       
      4. Wildcard: * 
       
      5. Inclusion selector: body p ( Commonly used) 
       
      6. Selector grouping: p,div,body 
       
      7. Tag-specific selector: p#class 
       
      8. Combination selector: h1. p1,#conternt h1,h2
       
      33.css style features 1. Inheritance: child elements will inherit some styles of parent elements 
       
      2. Cascading: some styles of child elements will override The style of the parent element 
       
      3. The later style will override the previous style 
       
      34. Priority of css style 1. Embed--Embed--External link--Import 2. !important Elevate privileges 
       
      35. Text 1.text-indent:2em 
       
      2.text-align:left center right 
       
      3.white-space (blank space in the object Processing): normal pre nowrap 
       
      4.vertical-align (vertical alignment of elements): sup sub top text-bottom 
       
      5.color: #FFFFFF, red 
       
      6.font-size:12px 
       
      7.font-family:Arial,'宋体' 
       
      8.line-height:1.5em 
       
      9.font-weight :bold,normal (normal) 
       
      10.font-style:normal italic (italic) 
       
      11.text-decoration:none underline overline line-through (strikethrough) 
       
      12.letter-spacing (character spacing): normal length 
       
      13.word-spacing (word spacing): normal length 
       
      36. Pseudo-class 1. :link Not visited 
       
      2. :visited has been visited 
       
      3. :hover the mouse moves to the link 
       
      4. :active the mouse clicks the link a.a1:link{} 
       
      37. Naming method 1. Camel case: navMenuRedButton 
       
       2. Pascal: NavMenuRedButton 
       
       3. Hungary: red_navMenuButton 
       
       38. Box model content content 
       
      padding inner padding (don’t add this attribute to the outer layer easily, because it will change the width of the outer layer) 
       
      border border 
       
      margin outer padding (don’t add this attribute to the outer layer easily, because Will change the width of the outer layer) Formula: =content (padding*2) (border*2) (margin*2)
       
      39. margin:20px: means top, right, bottom, left 
       
      margin :20px 20px: means top, bottom, right and left 
       
      margin:20px 20px 20px: means top, right, left, bottom 
       
      margin:20px 20px 20px 20px 
       
      margin:0 auto; means The box is centered 
       
      40. border:1px solid red: means that the top, right, bottom and left border pixels are 1, solid line, red 
       
      41. Return the default inner and outer margins of the elements we use Zero 
       
      42.padding:10px: Indicates top, right, bottom and left 
       
      43. List list-style:none outside none;: Indicates that the list style is none 
       
      44. Element Classification 1. Block elements: div, p, body, h1~h6 can be used as containers and occupy one line alone 
       
       2. Inline elements: a, span 
       
       3. Can be passed: inside Inline element: {display:block;} Turn the inline into a block, so setting the height and width of the inline element will work 
       
      45. Background background: color image tile mode fixed position 
       
      background-color:gold; background-image:url(); background-repeat:no-repeat; background-position:center center horizontally and vertically centered background-attachment:fixed fixed image (scroll scrolling) IE6 only has html and The two elements of body support this function 
       
      46.css Elf Idea 1: Prepare two images of the same size but with different content, one normal and one enabled through pseudo-classes 
       
       Idea 2: Prepare a composite picture and position it through background-position:. 
       
      47. Layout 1. Default file flow 
       
      2. Float: float:left; Floating principle: separated from the file flow, the position originally occupied is filled by the following objects. If you want multiple buffers in the same column, just make the floating directions consistent 
      

      3. Absolute positioning: position:absolute Principle: Separate from the file stream. If the relative object is not specified, it is the body. Use position:relative to specify on the object. Relative positioning: position:relative top="" left=" " Principle: Not separated from the file stream, the relative object is itself 
       
      4. Clear floats: clear:both; Eliminate the impact of floats on subclasses Eliminate the impact of floats on parent classes 1. Add a Empty subclass, the class name is .class{clear:both}; 2.overflow:hidden The subclass cannot have positioning layout 3..clearFix:after{ clear:both; display:block; visibility:hidden; height:o; line- height:0; centent:""; } .clearFix{zoom:1;} 48. Overflow overflov:visible (does not cut or add scroll bars) hidden (does not display content that exceeds the object size) scroll (displays scroll bars) auto (cut or scroll bar) 
       
      Statement：
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      Previous article：Pure css to implement Magicline Navigation (underline animated navigation menu)_html/css_WEB-ITnoseNext article：Pure css to implement Magicline Navigation (underline animated navigation menu)_html/css_WEB-ITnose
      Related articles
      See more
        
 
         1   2