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.
8.
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
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>
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:
,