当前位置：首页 > 行业动态 > 正文

html的网页实例

“`html，，，基础网页，欢迎访问这是一个HTML实例，

基本结构

HTML网页由<html>标签包裹，包含<head>（头部）和<body>（主体）两部分，头部定义页面元数据（如标题、样式表）,主体展示可见内容。

html的网页实例 第1张

作用 示例
<html> 根元素，包裹整个网页内容 <html>...</html>
<head> 定义页面元数据（标题、链接等） <head><title>页面标题</title></head>
<body> 展示网页可见内容 <body><h1>欢迎</h1><p>这是一个段落。</p></body>

常用标签示例

标题标签 <h1>~<h6>

定义不同层级的标题，<h1>为最高层级。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

段落与文本

  • 段落：<p>表示段落,自动换行。
  • 换行：<br>强制换行。
  • 文本格式：<b>加粗，<i>斜体。 
    <p>这是段落。</p>
<p>换行示例：<br>第一行<br>第二行</p>
<p>加粗<b>文字</b>，斜体<i>文字</i></p>

列表

  • 无序列表：<ul> + <li>。
  • 有序列表：<ol> + <li>。 
    <ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>

图片与链接

  • 图片：<img>，需指定src路径。
  • 链接：<a>，通过href指向目标。 
    <img src="image.jpg" alt="示例图片" width="200">
<a href="https://example.com">点击访问示例网站</a>

表格示例

功能 示例代码 效果
<table> 定义表格 <table><tr><td>单元格</td></tr></table> 单行单列表格
<tr> 表格行 <tr><td>数据1</td><td>数据2</td></tr> 一行两列数据
<td> 表格单元格（无边框） <td>内容</td> 普通单元格内容
<th> 表头单元格（加粗居中） <th>标题</th> 加粗且居中的表头
border 表格边框 <table border="1"> 显示1像素边框的表格

相关问题与解答

问题1：如何插入图片并设置大小？

解答：使用<img>标签，通过src指定图片路径，alt提供替代文本，width/height设置尺寸（可选）。
示例： 

<img src="logo.png" alt="公司标志" width="100" height="50">

问题2：如何创建跳转到邮件的链接？

解答：在<a>标签的href属性中使用mailto:协议，后接邮箱地址。
示例： 

<a href="mailto:example@domain.com">
HTML示例网页模板
0

相关文章