Home > Article > Web Front-end > HTML study notes 2
HTML study notes 2
- 不言Original
- 2018-04-19 14:32:031461browse
The content of this article is about HTML learning notes 2. It has a certain reference value. Now I share it with you. Friends in need can refer to it
1 , tablef5d188ed2c074f8b944552db028f98a1
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
a34de1251f0d9fe1e645927f19a896e8......fd273fcf5bcad3dfdad3c41bd81ad3e5define rows, b6c5a531a458a2e790c1fd6421739d1c......b90dd5946f0946207856a8a37f441edfdefine columns
Header represents:
<tr> <th>heading</th> </tr>
If you want to represent a blank line, you can fill it with space placeholder.
2. List
<ul> <li>Coffee</li> <li>Milk</li> </ul>
##Second type: Ordered list——c34106e0b4e09414b63b2ea253ff83d6, use numbers to mark
<ol> <li>Coffee</li> <li>Milk</li> </ol>
Or use 1f440b6628a2ecdeba8d7a6562e2d7a9... to indicate that the number starts from 50.
##Third type: Custom list——5c69336ffbc20d23018e48b396cdd57a
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Explanation:
67bc4f89d416b0b8236eaa5f43dee742Indicates the definition of list items
## Note that paragraphs, line breaks, pictures, links, other lists, etc. can be used inside list items.
3. HTML class
Classifies HTML and can An element's class defines the CSS style.
Set the same style for the same class.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<p class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</p>
</body>
</html>
#< ;p> is a block-level element used to set the same class.
45a2772a6b6107b401db3c9b82c049c2 is an inline element.
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
4. HTML website layout
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
Use4786dff7ee6470928194244baf979f1e......94b3e26ee717c64999d7867364b1b4a3
1aa9e5d373740b65a0cc8f0a02150c53Defines the header of a document or section
c5ec1e3233d6edde2512f4a1c56cfeedDefining content other than content (sidebar) (? Not done yet Be clear about what this is)
c37f8231a37e88427e62669260f0074dDefine the footer of a document or section
By using frames, more than one page can be displayed in the same browser window. Each HTML document becomes a frame, and each frame is independent of other frames.
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
(2) Others
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset> </html>04a0d55efbbfd646a993fbc01f262c57You can use the name anchor attribute to jump to the specified section.
##d5ba1642137c3f32f4f4493ae923989cUsed to display web pages within web pages
Usage:108b34cd515b899952f8b14f04a78142065276f04003e4622c4fe6b64f465b88
iframe可用作链接的目标（target），该链接的target属性必须引用iframe的name属性。
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
注意，由于链接的目标匹配iframe的名称，所以链接会在iframe中打开。
相关推荐：
The above is the detailed content of HTML study notes 2. For more information, please follow other related articles on the PHP Chinese website!