HTML 实例/测验之HTML 基础一口气讲完!(o-ωq)).oO 困
HTML 基础
非常简单的HTML文档
<!DOCTYPE html>
<html><head><title>页面标题(w3cschool.cn)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>
输出:
我的第一个标题
我的第一个段落。
HTML标题
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title>
</head>
<body><h1>这是标题1</h1><h2>这是标题2</h2><h3>这是标题3</h3><h4>这是标题4</h4><h5>这是标题5</h5><h6>这是标题6</h6></body>
</html>
输出:
这是标题1
这是标题2
这是标题3
这是标题4
这是标题5
这是标题6
HTML段落
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title> </head> <body><p>这是一个段落。</p> <p>这是另外一个段落。</p></body> </html>
输出:
这是一个段落。
这是另外一个段落。
HTML链接
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body><a href="https://www.w3cschool.cn">这是一个链接使用了 href 属性</a></body>
</html>
输出:
这是一个链接使用了 href 属性
HTML图片
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body><img src="/statics/images/logonew2.png" width="206" height="36" ></body>
</html>
输出:该图片
以下是一个用 HTML 编写的包含标题、段落、链接和图片的实例:
<!DOCTYPE html>
<html><head><title>HTML 实例</title>
</head><body><h1>美丽的自然风光</h1><p>大自然拥有着令人惊叹的美景,让人陶醉其中。</p><p>你可以通过以下链接了解更多关于自然的信息:<a href="https://www.example.com/nature">自然之美网站</a>.</p><img src="nature.jpg" alt="美丽的自然风景" width="500">
</body></html>
在这个实例中:
<h1>美丽的自然风光</h1>
定义了一个一级标题。<p>大自然拥有着令人惊叹的美景,让人陶醉其中。</p>
和<p>你可以通过以下链接了解更多关于自然的信息:<a href="https://www.example.com/nature">自然之美网站</a>.</p>
是两个段落,其中第二个段落包含一个链接。<img src="nature.jpg" alt="美丽的自然风景" width="500">
插入了一张名为 “nature.jpg” 的图片,并设置了宽度为 500 像素,同时设置了替代文本 “美丽的自然风景”,以便在图片无法加载时显示。
请注意,实际使用时需要将 “nature.jpg” 替换为真实的图片文件名和路径。