详细介绍：【HTML】 第一章：HTML 基础

1.1 HTML 文件结构

每个网页至少包含下面结构：

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我的第一个网页</title>
        </head>
        <body>
        <h1>欢迎学习 HTML</h1>
        <p>这是一个段落。</p>
        </body>
      </html>

说明：

  • <!DOCTYPE html>：告诉浏览器这是 HTML5。
  • <html>：网页根标签。
  • <head>：头部信息（标题、编码、样式、脚本）。
  • <body>：网页主体内容。

1.2 常用标签

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落和换行

<p>这是一个段落。</p>
<br> <!-- 换行 -->

文本样式

<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<i>斜体</i>
<mark>高亮</mark>

列表

<!-- 无序列表 -->
  <ul>
  <li>苹果</li>
  <li>香蕉</li>
  </ul>
  <!-- 有序列表 -->
    <ol>
    <li>第一步</li>
    <li>第二步</li>
    </ol>

链接

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

图片

<img src="logo.png" alt="LOGO" width="100">

容器

<div>块级容器</div>
<span>内联容器</span>

1.3 表单控件（常用输入）

<input type="text" placeholder="请输入名字">
    <input type="number" min="0" max="100" value="50">
      <input type="range" min="0" max="100" value="50">
        <input type="checkbox" checked>
          <input type="radio" name="gender" value="male"> 男
            <input type="radio" name="gender" value="female"> 女
          <textarea rows="4" cols="30">多行文本</textarea>
            <select>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            </select>
          <button>提交</button>

1.4 属性（Attributes）

  • id：唯一标识，JS 获取元素用
  • class：分类，CSS 样式共享
  • style：内联样式
  • name：表单控件名称
  • value：控件初始值
  • placeholder：输入提示

示例：

<input type="text" id="username" class="input-box" placeholder="请输入用户名">

1.5 小练习

  1. 写一个网页，显示一个标题和一个段落。
  2. 添加一个图片和一个超链接。
  3. 创建一个输入框和一个按钮。

✅ 这一章重点：

  • HTML 文件结构必须完整
  • 常用标签的功能和语义
  • 表单控件和常用属性
posted @ 2025-09-23 17:53  yxysuanfa  阅读(12)  评论(0)    收藏  举报