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

发布于:2025-04-16 ⋅ 阅读:(28) ⋅ 点赞:(0)

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

HTML(HyperText Markup Language,超文本标记语言)是构建网页的基础语言,负责定义网页的结构和内容。无论是简单的个人博客,还是复杂的企业网站,HTML都是不可或缺的组成部分。


目录

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

HTML简介

HTML文档结构

脚本嵌入方式说明:

样式表嵌入方式说明:

常用HTML标签

标题标签

段落标签

超链接标签

图像标签

列表标签

表格标签

表单标签

HTML属性


HTML简介

HTML是一种标记语言,用于创建网页和Web应用。它通过使用标签(Tag)来描述网页的结构和内容。HTML文件是以.html.htm为扩展名的纯文本文件,可以被浏览器解析并呈现为可视化的网页。


HTML文档结构

一个标准的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操作。


网站公告

今日签到

点亮在社区的每一天
去签到