<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实例</title>
</head>
<body>
<h1>第一个HTML网页</h1>
<hr/>
<a href="http://www.baidu.com" title="百度网址">百度</a>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/ad61b4dee6d94e0d37e8c0c8ba57403a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e940214aac4b94c2355d46a95cb752e3.png)
head头部的主要设置
VScode 快捷编写html
“!”+空格快捷键
ul>li3
ol>li3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul >
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul type="circle">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/d7e1cc9e94b0f9cc115a90cfce0caab6.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网页标题 -->
<title>Document</title>
</head>
<body>
<!--h1:文本标签的标题标签 -->
<h1>HTML图片标签</h1>
<!--图像标签-->>
<img src="11.jpg" alt="图片加载失败" width="300"/>
<!--网页的图片->在新标签中打开图片->复制链接-->
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="示例" width="300"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接示例</title>
</head>
<body>
<h1>HTML超链接示例</h1>
<!--锚点链接使用-->
<a href="#图片1">跳转到图片1处</a> <br/>
<!--普通超链接-->
<a href="http://www.baidu.com" title="百度链接">百度1</a> <br/>
<a href="http://www.baidu.com" target="_blank">百度2</a> <br/>
<a href="./Demo_picture.html" target="_blank">图片标签示例</a> <br/>
<!--锚点链接-->
<!--定义锚点-->
<a id="图片1"></a>
<h4>图片1</h4>
<img src="11.jpg" width="100%"/> <br/>
</body>
</html>