<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Baidu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Test 01 <img src="img/icon.png" ></h1>
<hr >
<h1>Test 02 <img src="img/icon.png" ></h1>
<hr >
<ul>
<li>Listening
<br>
<a href="https://www.hjenglish.com/new/p611902/">英语听力训练</a>
</li>
<li>Writing
<br>
<a href="https://www.hjenglish.com/new/p611902/">英语写作训练</a>
</li>
<li>Reading
<br>
<a href="https://www.hjenglish.com/new/p611902/">英语阅读训练</a>
</li>
</ul>
<ol>
<li>Listening
<br>
<a href="https://www.hjenglish.com/new/p611902/">英语听力训练</a>
</li>
<li>Writing
<br>
<a href="https://www.hjenglish.com/new/p611902/">英语写作训练</a>
</li>
<li>Reading
<br>
<a href="https://www.hjenglish.com/new/p611902/">英语阅读训练</a>
</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="img/1.png" width="20%">
<img src="img/2.png" width="20%">
<img src="img/3.png" width="150px">
<img src="img/4.png" width="150px">
<img src="img/1.png" width="150px">
<img src="img/1.png" width="100px">
</body>
</html>
1. Picture tips
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<center>hello</center>
<img src="../img/4.png" title="图片加载出来的提示" alt="图片加载不出来的提示">
</body>
</html>
- Three styles of unordered lists
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="circle">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ul>
<ul type="disc">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ul>
<ul type="square">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ul>
</body>
</html>
3. Three styles of ordered lists
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol type="1">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ol>
<ol type="a">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ol>
<ol type="A">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ol>
<ol type="i">
<li>how are you?</li>
<li>I'm fine. You?</li>
<li>I'm fine too.</li>
</ol>
</body>
</html>
4. Set the background image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;margin: 0;
}
body{
background-image: url(../img/bangchen.gif);
background-repeat: no-repeat;<!--设置图片背景不重复平铺，默认情况下是重复平铺的-->
background-position: right bottom;<!--将图片位置调整到右下角-->
}
</style>
</head>
<body>
</body>
</html>