HTML study notes 2
Apr 19, 2018 pm 02:32 PMThe 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 , table<table>
<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>
<tr>......</tr>define rows, <td>......</td>define 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——<ol>, use numbers to mark
<ol> <li>Coffee</li> <li>Milk</li> </ol>
Or use <ol start="50">... to indicate that the number starts from 50.
##Third type: Custom list——<dl>
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Explanation:
<dd>Indicates 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.
<span> 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>Use<p id="header">......</p>
<header>Defines the header of a document or section
<article> ;Define independent self-contained articles
##<aside>Defining content other than content (sidebar) (? Not done yet Be clear about what this is)
<footer>Define 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>
##<iframe>Used to display web pages within web pages
Usage:<iframe src ="URL" width="200" height="200" frameborder="0"></iframe>
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!
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
How do you parse and process HTML/XML in PHP?
