分享一些html代码实例

一枝梧桐 知识技能 22

以下是一些简单的 HTML 代码实例:


<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>My First HTML Page</title></head>
<body>
     <h1>Hello, World!</h1>
     <p>This is a simple HTML page.</p>
</body>
</html>

这个例子展示了一个最基本的 HTML 页面结构,包含了文档类型声明、<html>标签、<head>部分(其中设置了字符编码和页面标题)以及<body>部分的一个标题和一个段落。


实例二:添加图片和链接

<!DOCTYPE html><html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Image and Link Example</title>
   </head>
   <body>
   <h1>Beautiful Picture</h1>
   <img src="https://example.com/beautiful.jpg" alt="A beautiful scenery">
   <p>Visit our <a href="https://www.yzwt.cn">website</a> for more.</p>
   </body>
   
   </html>

这里展示了如何在页面中插入一张图片和一个链接。图片通过<img>标签插入,设置了src属性指定图片的 URL 和alt属性提供替代文本。链接通过<a>标签创建,设置href属性指定链接的目标地址。这里用的是百度logo。


实例三:创建一个简单的列表

<!DOCTYPE html><html lang="en">
<head>
   <meta charset="UTF-8">
   <title>List Example</title>
   </head>
   <body>
   <h1>Favorite Fruits</h1>
   <ul>
       <li>Apple</li>
       <li>Banana</li>
       <li>Orange</li>
   </ul>
   </body>
   </html>

这个例子创建了一个无序列表,使用<ul>标签表示无序列表,<li>标签表示列表项,列出了一些最喜欢的水果。


实例四:表格展示数据

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>Table Example</title>
    </head>
    <body>    
    <h1>Student Scores</h1>    
    <table>        
    <tr>            
    <th>Student Name</th>            
    <th>Math Score</th>            
    <th>English Score</th>        
    </tr>        
    <tr>            
    <td>Tom</td>            
    <td>85</td>            
    <td>90</td>        
    </tr>        
    <tr>            
    <td>Lily</td>            
    <td>92</td>            
    <td>88</td>        
    </tr>    
    </table>
    </body>
    </html>

这里创建了一个表格来展示学生的成绩。<table>标签表示表格,<tr>表示表格行,<th>表示表头单元格,<td>表示普通数据单元格。

标签: HTML HTML语法 HTML教程 HTML代码 HTML标签大全 html实例