This is the note I recorded on the first day I learned HTML, it is not very comprehensive, and it can be taken slowly for novices
html: the root tag of the document
head: Head, at the label.
title: Adapt to search engines
link: link css, import css style
style: define css style
script: define js, you can also import js
body: body
Basic tags:
h1 - h6: The title tag, the font becomes larger, thicker, blacker, with a blank line up and down Write: <h1></h1>
p: empty line <p></p>
br: line feed, equivalent to carriage return <br>
Text formatting tags: b bold <b></b>
code <code></code>
i italic <i></i>
kbd keyboard input <kbd></kbd>
<pre> </pre>
small becomes smaller <small></small>
strong bold <strong></strong>
abbr abbreviations <abbr></abbr>
Hyperlink: Normal link: <a href=" "></a> Where the href is going: URL or full address of HTTP address
The default way to go to a page in the current directory
../:Back to previous
target: target. How to open the destination address
_blank:opens in new window
_self:
_parent._top: open in parent container
title: title, the prompt text that appears when the mouse hovers over the label
Image link: src: image path
height, width: try to give only one value
Anchor machine link: tips
align: alignment
marquee: barrage loop: loop
area/whitespace:div:block. Cube, can have width and height <div></div>
span: row. There is no width and height. Size depends on content < > < / >
Unordered list:
<ul>
<li></li>
</ul>
Ordered list:
<ol>
<li></li>
</ol>
Custom list:
<dl>
<dt>Item 1</dt>
<dd>Description</dd>
</dl>
table: a set of labels
table:
<table> border: underline
<tr>
<td></td>
</tr>
</table>
<hr>Horizontal divider</hr>
frame: iframe
Escape characters:
Form element: submit data
form: <form></form>
Mutually exclusive: name
The content of all text boxes is his value attribute
method:
get: submitted data
post: The submitted data is not displayed in the address bar, encapsulates a request body, and there is no length limit
audio audio
video video
Divided into two categories:
1. Line-level elements: cannot wrap themselves
2. Block-level elements: you can wrap your own lines
Highlights:
1. Hyperlinks
2. Forms
3. Forms
4. Browser Development Tools
On the first day of learning HTML, it was a little stressful, but the effect was obvious. Initially completed the page creation, and seeing the finished work had an inexplicable sense of accomplishment (although it was ugly)
The first page uses the centering of the table, the mouse hovers, and the page jumps
The second page is the navigation bar on the left, the anchor point on the right jumps (there is no screenshot, it is a bit long) and the scroll bar is deleted (hee hee)
The third page is the song selection (this page is relatively simple), touch the author on the right to display the mouse hover effect, click to jump to the song playback page
The fourth page is the registration page for newcomers
Initial page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.zx td:hover {
color: blueviolet;
background-color: #81ecec;
}
.zx td {
border-radius: 10px;
}
.xc td {
border-radius: 10px;
}
.cv td {
border-radius: 10px;
}
</style>
</head>
<body>
<table width="100%" height="100"px align="center">
<tr class="zx" align="center" bgcolor="#74b9ff">
<td width="25%"><a href="index.html">front page</a></td>
<td width="25%"> <a href=tangshi.html>List of Poems</a></td>
<td width="25%"><a href=gequ.html>song list</a></td>
<td width="25%"><a href=zhuce.html>join us</a></td>
</tr>
</table>
<table align="center" width="100%" height="600px">
<tr class="xc" align="center" height="80%">
<td width="50%" background="../homework/img/tangshi.jpg">
<strong>quiet night thinking</strong><br>
<p>Li Bai</p>
Bright moonlight in front of the bed<br>
Suspected ground frost<br>
Looking up at the moon<br>
Looking down on hometown<br>
</td>
<td width="50%" background="../homework/img/RC.jpg">
<strong>chrysanthemum table</strong><br>
The chrysanthemum is full of wounds, your smile has turned yellow<br>
The flowers are heartbroken, and my mind lies quietly<br>
The north wind is chaotic, Ye Weiyang, your shadow keeps cutting<br>
leave me alone on the lake in pairs<br>
</td>
</tr>
<tr class="cv" align="right" height="20%" bgcolor="#fd79a8">
<td><strong><a href=tangshi.html>see more>>></a></strong></td>
<td><strong><a href=gequ.html>see more>>></a></strong></td>
</tr>
</table>
</body>
</html>Tang poetry page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>side navigation bar</title>
<style>
body{
margin: 0;
background: url("img/tangshi.jpg") ;
background-size: cover;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
.wrap{
width: 60px;
height: 225px;
border: 0.5px solid;
position: fixed;
}
.head{
font-weight: bold;
width: 100px;
height: 50px;
background-color: white;
line-height: 40px;/* line height = height vertical center */
font-size: 20px;
color: #000000;
text-align: center;
border-radius: 10px;
}
.list:hover{
color: tomato;
background-color: silver;
}
ul li{
width: 100px;
height: 110px;
line-height: 60px;
}
.list{
box-sizing: border-box;
padding: 3px;
margin-top: 0.5px;
margin-bottom: 0.5px;
background-color: white;
text-align: center;
font-size: 18px;
color: #9A9C9E;
position: relative;
border-radius: 10px;
}
.qw {
font-size: 50px;
}
</style>
</head>
<body >
<div class="wrap">
<ul>
<li class="head">Tang Dynasty Poems</li>
<li class="list"><a href="#m1"style="text-decoration: none;">Jing Ye Si</a></li>
<li class="list"><a href="#m2"style="text-decoration: none;">September 9th Remembering Shandong Brothers</a></li>
<li class="list"><a href="#m3"style="text-decoration: none;">Early Hair White Emperor City</a></li>
<li class="list"><a href="#m4"style="text-decoration: none;">Jiangnan meets Li Guinian</a></li>
<li class="list"><a href="../homework/index.html">Back to Home>>></a></li>
</ul>
</div>
<div class="qw" align="center" >
<h2 id="m1">quiet night thinking</h2>
The bright moonlight in front of the bed,<br>
Suspected to be frost on the ground.<br>
Look up at the bright moon,<br>
Looking down on my hometown.<br>
<div style="height: 800px;"></div>
</div>
<div class="qw" align="center" >
<h2 id="m2">Remembrance of Shandong Brothers on September 9</h2>
A stranger in a foreign land alone,<br>Every festive season thinks about relatives.<br>
Brothers from afar know the heights,<br>There is one less dogwood everywhere.<br>
<div style="height: 800px;"></div>
</div>
<div class="qw" align="center">
<h2 id="m3">Early Hair White Emperor City</h2>
In the midst of the colorful clouds of the White Emperor,<br>A thousand miles of Gangneung will be returned in one day.<br>
The apes on both sides of the strait can't stop crying,<br>The light boat has passed ten thousand mountains.<br>
<div style="height: 800px;"></div>
</div>
<div class="qw" align="center">
<h2 id="m4">In the south of the Yangtze River, the year of Li Gui</h2>
In the house of King Qi, I found common people,<br>Cui Jiutang heard it several times before.<br>
It is the beautiful scenery of Jiangnan,<br>When the flowers fall, I meet you again.<br>
<div style="height: 800px;"></div>
</div>
</body>
</html>
Song page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: url("img/333.jpg") ;
background-size: cover;
overflow: hidden;
}
a {
text-decoration: none;
}
td :hover {
color: blueviolet;
background-color: #81ecec;
border-radius: 20px;
}
</style>
</head>
<body >
<table align="center" weith="100%" height="400px">
<tr >
<td ><font size="12px">i miss</font></td>
<td><a href="../homework/audio/JJ Lin - i miss (Live).mp3"><font size="12px">JJ Lin</font></a></td>
</tr>
<tr>
<td><font size="12px">chrysanthemum residue</font></td>
<td><a href="../homework/audio/JJ Lin - i miss (Live).mp3"><font size="12px">Jay Chou</font></a></td>
</tr>
<tr>
<td><font size="12px">chrysanthemum injury</font></td>
<td><a href="../homework/audio/JJ Lin - i miss (Live).mp3"><font size="12px">JJ Lin</font></a></td>
</tr>
<tr>
<td><font size="12px">chrysanthemum tea</font></td>
<td><a href="../homework/audio/JJ Lin - i miss (Live).mp3"><font size="12px">Jay Chou</font></a></td>
</tr>
</table>
<table width="800px" height="400px" align="center">
<tr align="right">
<td><strong><a href="../homework/index.html">Back to Home>>></a></strong></td>
</tr>
</table>
</body>
</html>Registration page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: url("img/zhuce2.jpg") ;
background-size: cover;
overflow: hidden;
}
</style>
</head>
<body >
<table width="100px" height="200px" align="center">
<tr>
<td>
<strong >join us</strong></td>
</tr>
</table>
<form action="">
<table width="350px" height="40px" align="center" >
<tr>
<td>username:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>gender:</td>
<td><input type="radio" name="genter">male
<input type="radio" name="genter">Female</td>
</tr>
<tr>
<td>Mail:</td>
<td><input type="email"></td>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="date"></td>
</tr>
<tr>
<td>
<button>submit</button>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<table width="800px" height="400px" align="center">
<tr align="right">
<td><strong><a href="../homework/index.html">Back to Home>>></a></strong></td>
</tr>
</table>
</form>
</body>
</html>