Share 18 basic concepts in HTML

1.HTML:

Hpyer Text Markup Langage

Hpyer Text: Hypertext language (text, pictures, links, audio, video, etc.)

Distinguishing: Ordinary text - Word text (text, table, picture)

Markup: Tag

e6b445cf8aca5961b3f6c18a972203ab< ;/Label>

A label can have multiple attributes, and one attribute can have multiple values. Properties and attributes and values ​​are separated by spaces

Langage: Language

HTML uses various tags to wrap hypertext content, and then writes it in order

2. Document flow sequence:

will The browser window is divided into rows from top to bottom. Arrange elements in each line from left to right

Divide the browser window from top to bottom into rows and rows. Arrange elements in each line from left to right, which is called document flow order

3.HTML structure tag

HTML: general tag, tells the browser that this is an HTML document, and a page can only have one

head: head tag, including the document The relevant information is not displayed in the browser window. A page can only have one

body: body tag, which contains all hypertext content. It is displayed in the browser window. A page can only have one

.

meta: Provides relevant information about the page. A page can have multiple. b2f0d49c16306e60b5f5bbc3a6018943Special closing method

title: Describes the relevant content of the page. There can only be one

on a page! DOCTYPE: Declaration tag, tells the browser the W3C standard symbol used in the document. If there is no end tag, the page will not be written into the HTML.

4. W3C specification:

(1) Tag letters must be lowercase

(2) If there is a start tag, there must be an end tag. There are two ways to close tags.

8bf259f5a6144433b921fb8b7de94970baa3ea5ae7414741617ff7b18b3fb09e

c5732311c9bc8f9578856d5c0fe1f791

(3) The value of the tag must be in double quotes, such as {< ;Tag attribute="value">baa3ea5ae7414741617ff7b18b3fb09e}

(4) All symbols appearing must be English symbols

(5) Tag + content = element

5. Three CSS styles:

CSS (cascading style sheets) cascading style sheets

Function: Used to define the display of HTML content in the browser Style

(1) Inline CSS style:

f8366f7d437b4764385859ae85556fbcThe text here is red1f97422dc08b5137cabd482d578de564531ac245ce3e4fe3d50054a55f265927.

(3) External CSS style (.css is the extension)

External CSS is written in 93f0f5c25f18dab9d176bd4f6de5d30e

Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag to add CSS The style file is connected to the HTML file

<link herf="   .css" rel="stylesheet" type="text/css"/>

CSS style follows an important principle-the proximity principle (but the size of the weight needs to be judged)

6. Class selector

.Class selector name {CSS style code;}

eg:

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

7.ID selector

The ID selector is preceded by the "#" sign, not the "." before the class name

8. The difference between class (.) and ID (#) selectors:

(1) The ID selector can only be used once in the document, and the class selector can be used multiple times

(2) You can use the class selector sublist method to set multiple items for one element at the same time. style. ID selectors don't work.

eg:

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

The function of the above code is to set the text color of the three words "third grade" to red and the font size to 25px

9. The selector

is the greater than symbol ">", which is used to select the first-generation child element of the specified tag element

eg:

.aa > li {border:1px solid red;}

The class is aa Add a 1px solid red border to the li element

10. The descendant selector

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

is filled with red

11. The difference between child selectors and descendant selectors:

(1) Child selector: direct descendants - ">"

(2) Descendant selector: all Descendants - spaces

12. Universal selector (*)

Matches all tag elements of HTML

13. Group selector (,)

h1,span{color:red;}

14. Inheritance (CSS style)

is not only applied to certain A specific HTML tag element and applies to its descendants.

eg:

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

When I was a child, I was as timid as a mouse, and the fonts were all in red, including timid as a mouse. (Inheritance relationship)

15. Particularity:

eg:

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

Note:

p,. first matches the CSS attribute of the p tag. The browser determines which CSS style to use based on the weight

(the weight of the label is 1; the weight of the class selector is 10; the weight of the ID selector The weight is 100)

eg:

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

16. Importance

CSS style sets the highest weight-important

eg:

p { color:red !important;}
p { color:green;}

The font is red

Note:

Style priority:

Browser default style3b04ede745993f65c9d2f4fab71938a1,d5fd7aea971a85678ba271703566ebfd

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

The above is the detailed content of Share 18 basic concepts in HTML. For more information, please follow other related articles on the PHP Chinese website!