html css knowledge compilation_html/css_WEB-ITnose-HTML Tutorial-php.cn

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

2.文档结构

(超文本标记语言)

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

4. 加粗

加强语气

斜体加强语气

上标

下标

换行

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

下划线

删除线

段落

标题

5.meta标记

(1)放在head标记里面

(2) 设置网页关键字

(3) 设置描述

(4) 设置作者

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

(6) 设置页面定时跳转

7.不懂看w3cschool帮助手册

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

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

11.80%与80px的区别

12.记住制作网页的过程

13.

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

14.

预格式化

15. 空格

® 商标号

& &

< <

> >

" "

16.无序列表

type的值:disc,circle,square

有序列表

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)

Related labels：

html+css知识整理

source：php.cn

Previous article：Pure css to implement Magicline Navigation (underline animated navigation menu)_html/css_WEB-ITnose Next article：3. Common Html tags_html/css_WEB-ITnose

Statement of this Website

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