Home >Web Front-end >HTML Tutorial >HTML CSS_html/css_WEB-ITnose

HTML CSS_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:091128browse

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. 8e99a69fbe029cd4e2b854e244eab143Bold tags128dba7a3a77be0113eb0bea6ea0a5d0

2. 907fae80ddef53131f3292ee4f81644bItalic tagsd1c6776b927dc33c5d9114750b586338

3. 45a2772a6b6107b401db3c9b82c049c2Individual style54bdf357c58b8a65c66d7c19c8e4d114

4. 1244aa79a84dea840d8e55c52dc97869Quotation marks9c3e8ae475e7f023c5ba43842c1b434e

5. b8a712a75cab9a5aded02f74998372b4Long Text quote1aee16100a65d522474e4de7ff568f4a

6. 208700f394e4cf40a7aa505373e0130bAddress informationf6b6163991889e046b98f3ad8b2fe548

7. e3d145aa672e9228aae518d1f5745e33Single line of codecb7f63c61d15e98d31310b21f464ee76

8. c8a78f805003de06d9e23f4624751958: The function is to use search engines to understand the table

11. f5d188ed2c074f8b944552db028f98a163bd76834ec05ac1f4c0ebbeaafb0994Table title text37eb775bb5a9e6f3d094e96a76117fe867b85b83ffe496ab11418987da338f47

 15. Text label: bd810cee1d5b7db514739f55873c39bc

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 221f08282418e2996498697df914ce4e 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 f87a5964fcebb93d98ebca11ba9d357b code is in front of the 080b747a20f9163200dd0a7d304ba388...531ac245ce3e4fe3d50054a55f265927 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:

 , 5c69336ffbc20d23018e48b396cdd57a, f5d188ed2c074f8b944552db028f98a1, 208700f394e4cf40a7aa505373e0130b, b8a712a75cab9a5aded02f74998372b4 , ff9c23ada1bcecdd1a0fb5d5a0f18437

Commonly used inline elements are:

  3499910bf9dac5ae3c52d5ede7383485, < ;span>, 0c6dc11e160d3b678d68754cc175188a, 5a8028ccc7a7e27417bff9f05adf5932, 907fae80ddef53131f3292ee4f81644b, 8e99a69fbe029cd4e2b854e244eab143, 2e1cf0710519d5598b1f0f14c36ba674, 1244aa79a84dea840d8e55c52dc97869, b7f90f73cad438258bf67e62f79b2113, f3a85e1241a187c5ac462d886e9a968b, ffbe95d20f3893062224282accb13e8f

Commonly used inline block elements are:

 a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd

9. In HTML dc6dce4a544fdca2df29d5ac0ea9906b, e388a4556c0f65e1904146cc1a846bee, < ;h1>, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185 and 25edfb22a4f469ecb59f1190150159c6 are block-level elements. Setting display:block on an inline element displays the element as a block-level element.

10. In HTML, 45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b, 8e99a69fbe029cd4e2b854e244eab143 and 907fae80ddef53131f3292ee4f81644b 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), a1f02c36ba31691bcfe87b2722de723b and d5fd7aea971a85678ba271703566ebfd 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.

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