HTML：网页的骨架 — 入门详解教程

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    
    <!-- 样式表嵌入方式 -->
    <!-- 1. 内部样式表 -->
    <style>
        h1 {
            color: blue;
        }
    </style>
    
    <!-- 3. 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 style="text-decoration: underline;">主标题</h1> <!-- 2. 内联样式 -->
    <p>这是一个段落。</p>

    <!-- 脚本嵌入方式 -->
    <!-- 1. 内联脚本 -->
    <button onclick="alert('按钮被点击！')">点击我</button>

    <!-- 2. 内部脚本 -->
    <script>
        document.querySelector('p').textContent = "这个段落被JavaScript修改了！";
    </script>

    <!-- 3. 外部脚本 -->
    <script src="app.js"></script>
</body>
</html>

脚本嵌入方式说明：

<!DOCTYPE html>：声明文档类型，告知浏览器使用HTML5标准解析页面。
<html>：HTML文档的根元素。
<head>：包含文档的元数据，如字符编码、标题、样式表链接等。
<meta charset="UTF-8">：设置文档的字符编码为UTF-8，支持多语言字符。
<title>：定义网页的标题，显示在浏览器的标签页上。
<body>：网页的主体，包含可见的内容，如文本、图片、链接等。
内联脚本

直接在HTML事件属性中编写JavaScript代码（如onclick）
内部脚本

在<script>标签中直接编写JavaScript代码，通常放在<body>底部
外部脚本

使用<script src="...">引入外部JS文件
外部样式表

使用<link>标签引入外部CSS文件

样式表嵌入方式说明：

内部样式表
<style>标签写在<head>中，用于包含CSS代码
内联样式

直接在HTML标签中使用style属性添加样式

常用HTML标签

HTML提供了多种标签，用于定义不同类型的内容。以下是一些常用的HTML标签：

标题标签

复制代码

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

<h1>到<h6>用于定义标题，<h1>为最高级别，依次递减。标题标签有助于结构化内容，并对SEO友好。

段落标签

复制代码

<p>这是一个段落。</p>

<p>用于定义段落，浏览器会在段落前后添加空行。

超链接标签

复制代码

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

<a>用于创建超链接，href属性指定链接的目标地址。

图像标签

复制代码

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

<img>用于在网页中嵌入图像，src属性指定图像路径，alt属性提供图像的替代文本。

列表标签

无序列表

复制代码

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

有序列表

复制代码

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

<ul>和<ol>用于创建无序和有序列表，<li>定义列表项。

表格标签

复制代码

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

<table>创建表格，<tr>定义行，<th>定义表头单元格，<td>定义普通单元格。

表单标签

复制代码

<form action="/submit" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form>

<form>用于创建表单，action属性指定提交地址，method属性指定提交方式。<input>用于接收用户输入。

HTML属性

HTML标签可以包含属性，用于提供额外的信息。属性通常以键值对的形式出现，如：

复制代码

<a href="https://www.example.com" target="_blank">打开新窗口</a>

常见属性包括：

id：元素的唯一标识符。
class：元素的类名，可用于CSS样式或JavaScript操作。