HTML study notes (2)

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> defines the row, <td>......</td> defines the column

The header says:

<tr>
<th>heading</th>
</tr>

If you want to represent a blank line, you can fill it with space placeholders.

2. List

The first: unordered list - <ul>, marked with bold dots

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Or use <ul type="circle">... using a hollow circle.

The second: ordered list - <ol>, marked with numbers

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Or use <ol start="50">... to indicate that numbers start at 50.

The third type: custom list - <dl>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

illustrate:

<dl> means start of list

<dt> represents a list item

<dd> represents the definition of the list item

Note that paragraphs, line breaks, images, links, and other lists can be used inside list items.

3, HTML type

Categorize HTML and define CSS styles for the classes of elements.

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>

<div 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>
</div>

</body>
</html>

<div> is a block level element and is 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

(1) Use <div> for layout

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#are not {
    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>

使用<div id="header">......</div>

(2) New semantic elements provided by HTML5

<header> defines the header of the document or section

<nav> defines a container for navigation links

<section> defines a section in the document

<article> defines a separate self-contained article

<aside> defines content outside of content (sidebar) (? Haven't figured out what this is yet)

<footer> defines the footer of the document or section

<details> define additional details

<summary>Defines the title of the details element

5. Frame

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.

(1) Frame structure tag <frameset>

Each <frameset> defines a series of rows, columns

The value of rows/columns specifies the area of the screen occupied by each row or column

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

(2) Others

Typically, a frame has a visible border that the user can drag to change its size. To avoid this, add noresize="noresize" to the <frame>.

You cannot use the <body> tag together with the <frameset> tag. However, to add a <noframes> tag that contains a piece of text, it must be nested within the <body> tag.

<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>Your browser cannot handle frames! </body>
</noframes>

</frameset>
</html>

The name anchor attribute can be used in <frame> to jump to the specified section.

用法：<iframe src="URL" width="200" height="200" frameborder="0"></iframe>

An iframe can be used as the target of a link, and the target attribute of the link must refer to the name attribute of the iframe.

<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>

Note that since the target of the link matches the name of the iframe, the link will open in the iframe.

HTML study notes (2)

Guess you like