HTML notes - lists, tables, media elements, iframe inline framework

This blog is based on the video of station B up@ meeting crazy God and the documents on W3school's official website. There will be some screenshots of the video, the concept of the official website, and my personal notes
Note: the screenshots in the blog post and the pictures found on the network are not watermarked with csdn. Only my own pictures will be watermarked. This blog is just for learning and communication
Here are the video links
https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
W3school official website link
https://www.w3school.com.cn/html/html_jianjie.asp

list


Unordered list example

Ordered list example

Unordered list

An unordered list is a list of items marked with bold dots (typically small black circles)
The unordered list begins with the < UL > tag. Each list item starts with < li >
Paragraphs, line breaks, pictures, links, and other lists can be used inside list items.

<!--Unordered list
    The contents of the ordered list are preceded by numbers,The contents of the unordered list are preceded by small black dots
-->
<ul>
    <li>java</li>
    <li>hive</li>
    <li>flume</li>
    <li>hadoop</li>
</ul>

The browser display result is

Ordered list

An ordered list is a list of items that are marked with numbers.
There is a sequence table starting with the < ol > tag. Each list item begins with the < li > label.
Paragraphs, line breaks, pictures, links, and other lists can be used inside list items.

<!--Ordered list
    ol yes orderlist Abbreviation of
-->
<ol>
    <li>java</li>
    <li>hive</li>
    <li>flume</li>
    <li>hadoop</li>
</ol>

The browser display result is

Custom list

The custom list starts with the < DL > tag. Each custom list item starts with < DT >. The definition of each custom list item starts with < DD >.

<!--Custom list
    dl:label
    dt:List name
    dd:List content
-->
<dl>
    <dt>Learning content</dt>
    <dd>java</dd>
    <dd>hive</dd>
    <dd>fluem</dd>
    <dd>hbase</dd>

    <dt>City name</dt>
    <dd>Hefei</dd>
    <dd>Nanjing</dd>
    <dd>Xi'an</dd>
    <dd>Hangzhou</dd>
</dl>

form

<!--
    form table
    that 's ok tr
    column td
    One table There are three in it tr,The description table has three rows
    One tr There are four in it td,There are four columns in a row
-->

<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

Border the list
<table border="lpx">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

Cross column
<table border="lpx">
    <tr>
        <!--colspan Cross column,The function is to make a grid of a table occupy several columns-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>


The contents of the first row and the first column 1-1 account for four columns of the first row

enjambment
<table border="lpx">
    <tr>
        <!--colspan Cross column,The function is to make a grid of a table occupy several columns-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!--rowspan enjambment,Let one grid occupy two rows-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>


The contents 2-1 of the first column of the second row occupy two rows of the same column alone

Media element

video
<!--Media elements here refer to audio and video-->
<!--video video
    src Write relative path inside
    controls The function of is to make the video play on the page,If not controls,Then the page is blank
    autoplay Automatic video playback,However, some browsers are for security reasons,Ask the user to interact before playing the video
    So you can autoplay Add attribute after muted To make the video play immediately
-->
<video src="../resources/video/Exercise 1.mp4" controls autoplay muted></video>

audio frequency
<!--audio audio frequency
    src:Resource path
    controls : Control bar
    autoplay:Auto play
-->
<audio src="../resources/audio/applause.wav" controls></audio>

Page structure analysis

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page structure analysis</title>
</head>
<body>

<header>
    <h2>Web page header</h2>
</header>

<section>
    <h2>Web page subject</h2>
</section>

<footer>
    <h2>Web foot</h2>
</footer>

</body>
</html>

iframe inline framework

iframe inline framework, nesting one web page inside another

For example, the embedded code of station B when sharing video is the inline framework iframe
< iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">


Try running it in idea

Open the previously written web page through the iframe inline framework
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline framework iframe</title>
</head>
<body>

<iframe src="1.My first page.html" frameborder="0" width="1000px" height="800px"></iframe>

</body>
</html>

Open the website in the iframe embedded in the web page through hyperlinks
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline framework iframe</title>
</head>
<body>

<iframe src="" name="sign" frameborder="0" width="600px" height="400px"></iframe>

<!--href Indicates which page to open,
    target Indicates where the page is to be opened
    there target It says iframe Tag names for introverted frames,So hyperlinks a The website in the tag will be displayed in iframe Open in
-->
<a href="https://Www.bilibilili. COM / "target =" tag "> Click to jump</a>

</body>
</html>


Tags: Front-end html

Posted on Sun, 24 Oct 2021 04:14:03 -0400 by Irksome