Head First html css xhtml Notes, CSS XHTML
I recently watched the front-end and saw this entry-level book.
Title and style in
<Q> </q> the inline element is in <p>
<Blockquote> block elements
<Br> Empty Element
<Ol> </ol> ordered (there are 1, 2, 3 ...)
<Li> item list, embedded in ol or ul
<Ul> </ul> unordered
A list is a group of projects. The <li> element is used to determine each project. <ol>
Therefore, <ol> and <li> must be used together.
Use <a> to jump to the specified area of The Link Page
A.html:
<Html>
<Body>
<H1> hihi <H2> <a id = "chai"> Chai Tea </a> </Body>
</Html>
B .html:
<Html>
<Body>
<A href = "a.html # chai"> See Chai Tea </a>
</Body>
</Html>
Open B and click the link to jump to the Chai Tea area on page.
Open a new window and add the target object as _ blank
<Html>
<Body>
<A target = "_ blank" href = "index.html # chai"> See Chai Tea </a>
</Body>
</Html>
Img is an inline Element
If the image is not displayed, alt text is used to replace the image.
Standard, prompting the browser that the page meets the Protocol
<! DOCTYPE html PUBLIC ""...>
Go to w3c to check whether your webpage meets the standards
<Meta http-equiv = "Content-Type" content = "text/html; charset = ISO-8859-1">
Head is the only place where title, meta, and style elements are placed.
Only the inner and text can be run in the block element.
Block elements are embedded in the internal Element Library.
Xhtml is xml
All empty xhtml elements end with/>
Css
In the head, use link to add a css file.
<Link type = "text/css" rel = "stylesheet" href = "my.css"/>
Type
Rel is a link, that is, a style table.
P {
Color: red;
}
P. greentea {
Color: green;
}
<P class = "greentea">...
Use images as background
Background-image: url (images/background.gif)
P. specials {} select the section of specials class
. Specials {} select all elements of specials class
# Footer {} Any element whose id is footer
P # footer {} select the <p> element whose id is footer.
You can use a two-dimensional table with multiple links.
You can also use the style sheets for different devices, such as printers. Add media = "print" in link"
Div for logical partitioning
Select descendant
Div h2 {}
# Elixirs h2 {}
<Span> used to create a group of inline characters and elements to set <p>
Because div cannot be used, it will cause line feed.
You can also set styles for links.
A. link {color: green}
A. visited {}
A. hover {}
A. focus {}
A. active {}
This is a pseudo class.
Stream, the block is from top to bottom, and the inline is from left to right
Table, from top to bottom, from left to right
<Table summary = "table's data"> Abstract
<Tr> first column
<Th> </th> Header
<Th> </th>
<Th> </th>
</Tr>
<Tr> second column
<Td> </td> Row 2
<Td> </td>
<Td> </td>
</Tr>
<Tr> third column
<Td> </td> Row 3
<Td> </td>
<Td> </td>
</Tr>
</Talbe>
Li table style settings
Li can also customize styles
Form
<Form action = "url" method = "POST">
<Input type = "submit">
</Form>
<Frame> <frameset>
Media element <object>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
