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:15907browse

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
      1 2