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

< ;/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. Special 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.

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

(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:

The text here is red

(2) Embedded CSS style

Embedded CSS style must be written between .

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

External CSS is written in

Use the 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 style< Web page creator style< The style set by the user

17. Element classification

Tag elements in HTML are generally divided into three different types:

(1 )Block-level elements:——used to build the framework

每个块级元素都从新的一行开始，并且其后的元素另起一行。（独占一行）

元素的高度，宽度，行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

eg:

<p>   <p>   <h1>...<h6>   <ol>   <ul>   <dl>   <table>   <address>   <blockquote>   <form>

（2）内联元素：——修饰细节

自左向右排列，直到排不下自动换行。宽高无效，随内容而定。

eg:

<a>   <span>   <br>   <i>   <em>   <strong>   <label>   <q>   <var>   <cite>   <code>

（3）内联块级元素——,

和其他元素都在一行上

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

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!