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

html小网页

创建HTML小网页需编写基础结构：、、含，，用记事本等保存为.html，浏览器

HTML 基础结构

HTML 文件由 <!DOCTYPE html> 声明开头，定义文档类型为 HTML5，核心结构包括 <html> 根标签，内部分为 <head>（头部）和 <body>（主体）。

html小网页 第1张

作用
<!DOCTYPE html> 声明文档类型为 HTML5
<html> 根标签，包裹整个文档
<head> 包含元数据（如标题、字符集、样式表等）
<body> 网页主体内容（文本、图片、链接等）

常用 HTML 标签

标题标签 <h1>~<h6>

  • 定义页面标题层级,<h1> 为最高级别标题，<h6> 为最低。
  • 示例： 
    <h1>主标题</h1>
<h2>副标题</h2>

段落与文本标签

  • <p>：定义段落。
  • <strong> / <em>：加粗 / 斜体文本。
  • <br>：换行。
  • 示例： 
    <p>这是一个段落，<strong>加粗文字</strong> 和 <em>斜体文字</em>。</p>

列表标签

  • 无序列表：<ul> + <li>
    <ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>
  • 有序列表：<ol> + <li>
    <ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

图片标签 <img>

  • 语法：<img src="路径" alt="描述" />
  • 示例： 
    <img src="image.jpg" alt="示例图片" />

表格与表单元素

表格标签 <table>

作用
<table> 定义表格
<tr> 表格行
<td> 表格单元格（数据）
<th> 表格头单元格（加粗）
  • 示例： 
    <table border="1">
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>20</td></tr>
</table>

表单标签 <form>

  • 输入框：<input type="text" />
  • 按钮：<button> 或 <input type="submit" />
  • 下拉菜单：<select><option>选项</option></select>
  • 示例： 
    <form action="submit.php" method="post">
  用户名: <input type="text" name="username" /><br>
  <input type="submit" value="提交" />
</form>

样式与链接

  1. 内联样式：直接在标签中定义 CSS，如 <p style="color:red;">红色文字</p>。
  2. 超链接：<a href="https://example.com">链接文字</a>。
  3. 外部样式表：通过 <link rel="stylesheet" href="style.css"/> 引入外部 CSS 文件。

相关问题与解答

问题1：HTML 的基本结构是什么？

解答：
HTML 文件必须包含 <!DOCTYPE html> 声明，以及 <html> 根标签。<head> 部分用于定义元数据（如标题、字符集、样式表），<body> 部分包含网页的可见内容（如文本、图片、链接等）。

问题2：如何创建指向其他网页的超链接？

解答：
使用 <a> 标签，通过 href 属性指定链接地址。 

<a href="https://www.baidu.com">百度一下</a>

点击“百度一下”时，浏览器会跳转到 `https://www.

小
0

相关文章