HTML基础教程

一言准备中...

HTML教程第二课：基础结构与常用标签

HTML文档基本结构详解

每个标准的HTML文档都遵循以下基本结构框架：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <!-- 这里是网页的可见内容区域 -->
</body>
</html>

关键组成部分说明：

<!DOCTYPE html>：文档类型声明，确保浏览器以标准模式渲染
<html>：文档根元素，建议添加lang属性指定语言
<head>：包含元数据，如字符集声明、视口设置等
<title>：定义浏览器标签页显示的标题
<body>：所有可见内容的容器

常用HTML标签分类详解

文本内容标签

<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个文本段落，用于展示主要内容。</p>
<strong>重要文本（语义化加粗）</strong>
<b>纯视觉加粗</b>
<em>强调文本（语义化斜体）</em>
<i>纯视觉斜体</i>
<br> <!-- 强制换行，没有闭合标签 -->
<hr> <!-- 创建水平分割线 -->

超链接与媒体标签

<!-- 超链接 -->
<a href="https://example.com" target="_blank">在新窗口打开示例网站</a>

<!-- 图片 -->
<img src="" alt="公司Logo" width="200" height="100">

<!-- 多媒体 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

列表结构标签

有序列表（带编号）

<ol type="1" start="1">
    <li>第一步操作</li>
    <li>第二步操作</li>
    <li>第三步操作</li>
</ol>

无序列表（项目符号）

<ul style="list-style-type: square;">
    <li>首页</li>
    <li>产品介绍</li>
    <li>联系我们</li>
</ul>

定义列表

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

表格结构详解

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>90</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>85</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">平均分</td>
            <td>87.5</td>
        </tr>
    </tfoot>
</table>

表单元素详解

<form action="/submit" method="post">
    <fieldset>
        <legend>用户注册</legend>

        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">

        <label for="password">密码：</label>
        <input type="password" id="password" name="password" minlength="6">

        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>

        <label>兴趣：</label>
        <input type="checkbox" id="sports" name="interest" value="sports">
        <label for="sports">运动</label>
        <input type="checkbox" id="music" name="interest" value="music">
        <label for="music">音乐</label>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </fieldset>
</form>

特殊内容处理

HTML注释

<!-- 
    多行注释示例
    这部分内容不会显示在页面中
-->

特殊字符实体

空格：&nbsp;
小于号：&lt;
大于号：&gt;
引号：&quot;
版权符号：&copy;
注册商标：&reg;

预格式化文本

<pre>
    保留空格
    和换行
    的文本
</pre>

代码展示

<code>
    function hello() {
        console.log("Hello World!");
    }
</code>

HTML教程第二课：基础结构与常用标签

HTML文档基本结构详解

常用HTML标签分类详解

文本内容标签

超链接与媒体标签

列表结构标签

表格结构详解

表单元素详解

特殊内容处理

请登录后发表评论