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>
