HTML CSS_html/css_WEB-ITnose

Everyone who does website development knows that Html is the basis of web development, and CSS is the layout technique we often use to design web page aesthetics. This article will record the basic knowledge about the two and lay the foundation for you. Only when we are secure can we go further. Neither jsp nor php can exist without html.

1. HTML tags:

1. Bold tags

2. Italic tags

3. Individual style

4. Quotation marks

5.

Long Text quote

6.

Address information

7. Single line of code

8.

: The function is to use search engines to understand the table

11.

Table title text

> ;

12. Target="_blank" of a tag: Open in a new page

13. Title of a tag="Mouse slide over to display text"

14 ,

　15. Text label:

16. stry: style tag

17. Email tag:

18. , the drop-down list can also perform multiple selection operations. Set the multiple="multiple" attribute in the tag to achieve the multiple selection function. Under the Windows operating system, press the Ctrl key and click at the same time when performing multiple selections. (Command click under Mac), multiple options can be selected.

　

　19. The label tag does not present any special effects to the user. Its function is to improve usability for mouse users. This control will be triggered if you click on the text inside the label. That is to say, when the user clicks to select the label, the browser will automatically turn the focus to the form control related to the label (it will automatically select the form control related to the label).

This is a summary of the common tags in HTML. These tags are commonly used but not easy to remember. This article is for your convenience. Let’s review the basic knowledge of CSS together.

2. CSS:

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" />  <label for="email">输入你的邮箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>

1. CSS styles: inline, embedded, external

2. CSS selectors are divided into: A. Label selection Selector: body{}B, class selector: .setGreen{}C, ID selector: #setGreen{}D, universal selector: *{}

3. Text layout:

Font-family: "宋体";

Font-weight:bold; bold

;Underline

　　　　text-indent: 2em; Indent 2 bytes

　　　　 Line-height: 1.5em; Line spacing is 1.5 bytes

　　　 Letter-spacing: 1.5em; word spacing, letter spacing

4. Priority of the three methods: inline > embedded > external, but embedded > external has a prerequisite: embedded css style The position must be behind the external type. For example, in the right code editor, the code is in front of the code (actually This is also written during development). Interested friends can try it, reverse their order, and see if their priorities change. In fact, in summary, it is the proximity principle (the closer to the element being set, the higher the priority).

5. Pseudo-class selector: What is more interesting is the pseudo-class selector. Why is it called a pseudo-class selector? It allows setting styles for tags that do not exist in html (a certain state of the tag). For example, we Set the font color (a:hover{color:red;}) for the mouse-over state of a label element in HTML.

6. Grouping selector: When you want to set the same style for multiple label elements in HTML, you can use the grouping selector (,). The following code is h1, span in the code editor on the right The label also sets the font color to red: h1,span{color:red;} which is equivalent to the following two lines of code: h1{color:red;}span{color:red;}

7. Weight Rules: The weight of the label is 1, the weight of the class selector is 10, and the weight of the ID selector is up to 100. For example, the following code:

　p{color:red;} /*The weight is 1*/
　p span{color:green;} /*The weight is 1 1=2*/
　.warning{color:white; } /*The weight value is 10*/
　p span.warning{color:purple;} /*The weight value is 1 1 10=12*/
　　#footer .note p{color:yellow;} /* The weight is 100 10 1 = 111*/
Note: There is another special weight - inheritance also has a weight but it is very low. Some documents suggest that it is only 0.1, so it can be understood that inheritance has the lowest weight.

8. Element classification: Before explaining CSS layout, we need to know some knowledge in advance. In CSS, label elements in html are generally divided into three different types: block elements and inline elements. (also called inline elements) and inline block elements.

Commonly used block elements are:

　,

, ,

,

,

Commonly used inline elements are:

　 , < ;span>,
, , , , , , , ,

Commonly used inline block elements are:

　,

9. In HTML

,

, < ;h1>,

,

and
• are block-level elements. Setting display:block on an inline element displays the element as a block-level element.

  10. In HTML, , , , , , and are typical content Linked elements (inline elements) (inline) elements. Of course, block elements can also be set as inline elements through the code display:inline.

  11. Inline-block elements have the characteristics of both inline elements and block elements. The code display:inline-block sets the element to an inline block element. (New in css2.1), and tags are such inline block tags.

  Okay, I have shared with you a summary of the basic knowledge of HTML and CSS. I hope it will be of some help to your learning.