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

html学网页例子

示例代码含DOCTYPE声明、head与body结构，h1标题及p段落展示

基础网页结构

HTML网页由基础标签构成,以下是最小可行示例：

代码 作用
<!DOCTYPE html> 声明文档类型为HTML5
<html>…</html> 包裹整个网页内容
<head>…</head> 存放元数据（如标题、样式）
<body>…</body> 展示网页可见内容

示例代码：

<!DOCTYPE html>
<html>
<head>我的第一个网页</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
</body>
</html>

通过不同标签实现文本格式化：

效果 示例
<h1>~<h6> 标题（1最大，6最小） <h2>二级标题</h2>
<p> 段落 <p>这是正文段落</p>
<strong> 加粗 <strong>重要内容</strong>
<em> 斜体 <em>强调内容</em>
<br/> 换行 这段文字<br/>换行显示
<hr/> 水平线 <hr/>

完整示例：

<body>
    <h1>网页标题</h1>
    <p>这是第一个段落，包含<strong>加粗文字</strong>和<em>斜体文字</em>。</p>
    <hr/>
    <p>第二个段落使用换行符<br/>实现多行显示。</p>
</body>

插入图片与链接

图片标签

属性 说明
src 图片路径
alt 替代文本
width/height 尺寸（可选）

示例：

<img src="image.jpg" alt="示例图片" width="200"/>

超链接

属性 说明
href 跳转地址
target="_blank" 新标签页打开

示例：

<a href="https://www.example.com" target="_blank">访问示例网站</a>

列表与表格

无序列表

<ul>
    <li>项目一</li>
    <li>项目二</li>
</ul>

有序列表

<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

表格结构

作用
<table> 表格容器
<tr> 表行
<th> 表头单元格
<td> 数据单元格

示例表格：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

表单基础

<form action="/submit" method="post">
    <label>用户名: <input type="text" name="username"/></label><br/>
    <label>密码: <input type="password" name="password"/></label><br/>
    <input type="submit" value="登录"/>
</form>

相关问题与解答

问题1：为什么必须添加<!DOCTYPE html>声明？
解答：该声明告知浏览器使用HTML5标准解析页面，避免进入怪异模式,缺少声明可能导致样式渲染异常。

问题2：图片显示为”X”且没有边框，可能是什么原因？
解答：通常因src路径错误或文件不存在导致，需检查：

  1. 相对路径是否正确（如images/pic.jpg）
  2. 文件是否真实存在于指定位置
  3. 大小写是否匹配（Linux服务器
HTML
0

相关文章