Web Front-end -- Html/Css, Web -- Html/Css
To sum up what we learned today, although I have learned it before, I still feel that there is something to learn.
Web Front-End-Html:
HyperText Markup Language)
1. Overall skeleton
<!DOCTYPE html>
In this way, the entire skeleton will be available. We need to modify
Tags in Html appear in pairs, and there are also self-ending tags, as shown in figure<br />,
Tag: when it comes to the self-ending tag, we need to mention the html specification here. In fact, the self-ending tab can be written like this.<br>,
Even in many editors, Automatic completion is such a tag. In fact, this non-strict specification was defined as early as Html4.0, and later xml emerged. This language has a strict syntax and the Self-ending label must be written like this.< />
Html also wants to change to this syntax, but it is difficult to hide it. There are already many web pages that use Html4.0 again, so we can see that there is such a thing as xhtml, it is actually a transition from Html to xml.
Note:
Common labels:
Title tags: h1 ~ H6
Section label:<p>
Line feed label:<br />
Unordered list:<ul><li></li></ul>
Image:
Inline framework:<iframe src="" name=""></iframe>
Hyperlink:<a href=""></a>
Table tags:
<table border="1px"> <thead> </thead> <tbody> <tr> <td></td> </tr> </tbody> <tfoot> </tfoot><table>
Form Tag:
<form action=""> <input type="text" name="username" /> <input type="password" name="pwd" /> <input type="raido" name="sex" value="men"/> <input type="raido" name="sex" value="women"/> <input type="checkbox" name="sport" value="football"> <input type="checkbox" name="sport" value="basketball"> <input type="submit" value="submit"> <select name="city"> <option value="beijing"></option> <option value="shanghai"></option> </select></form>
Web Front-End-Css: Cascading Style Sheet)
If Html is the skeleton of a human body, Css is used to plump the skeleton.
Position of the Css code:
1. style attributes in the tag
2. In the style label
3. Introduce an external style sheet *
Syntax:
Selector {
Attribute: value;
Attribute: value;
}
Four selectors:
1. Element selector: p, div
2. id selector: # id
3. class selector:. class
4. Combined selector: # id,. class
Box Model:
Margin: margin
Border: border
Padding: padding
Width: height
Height: width
Note: The width and height include the border and the padding.
The outer margin, border, and internal margin can be set in four directions.
Flaot floating
Color: rgb three-color combination # hexadecimal number