还在为看不懂HTML代码而烦恼？

最新推荐文章于 2025-03-18 11:33:58 发布

菜根网络安全杂谈

最新推荐文章于 2025-03-18 11:33:58 发布

阅读量1.5k

点赞数 26

分类专栏：网络安全Web基础文章标签： html 前端网络安全安全

本文链接：https://blog.youkuaiyun.com/zakefine/article/details/143931113

版权

网络安全Web基础专栏收录该内容

26 篇文章

订阅专栏

一、HTML介绍

HTML（HyperText Markup Language）即超文本标记语言，它是一种用于创建网页的标准标记语言。所谓 “标记语言”，是指通过一系列的标签（tag）来描述文档的结构和内容。超文本（HyperText）这一概念意味着文档中可以包含链接，这些链接能够指向其他文档或者同一文档的不同部分，从而形成一个相互关联的网络。例如，一个简单的 HTML 文档可以包含文本、图像、链接等元素，浏览器能够读取这些 HTML 代码，并将其渲染成可视化的网页呈现在用户面前。

HTML 最初是由蒂姆伯纳斯·李（Tim Berners-Lee）在 1990 年左右发明的。当时，他的目的是为了方便科学家们在互联网上共享和交流信息。

HTML 1.0 是第一个正式的 HTML 标准，它的功能相对比较基础，主要用于定义简单的网页结构，像文本段落、标题和简单的列表等。

随着网络的发展，HTML 2.0 推出，它引入了如表单（form）等更复杂的功能，这使得网页能够实现交互，例如用户可以通过表单提交信息。

HTML 4.01 进一步增强了网页的表现力，它对样式表（CSS）和脚本（JavaScript）的支持更加完善，让网页开发者能够更好地控制网页的外观和行为。

HTML5 是目前广泛使用的版本，它整合了 HTML、CSS 和 JavaScript 的多种功能，能够实现丰富的多媒体应用、离线应用等复杂功能。例如，HTML5 支持原生的视频和音频播放，而不需要像以前那样依赖浏览器插件。

二、HTML基本结构

1、<!DOCTYPE html>

这是 HTML5 的文档类型声明，它告诉浏览器这个文档是按照 HTML5 标准编写的。这是 HTML 文档的第一行内容，对于浏览器正确解析文档非常重要。

2、<html>标签

这是 HTML 文档的根标签，所有其他的 HTML 标签都应该包含在这个标签内部。

3、<head>标签

标签内包含的是文档的元数据（metadata），这些元数据主要是为浏览器和搜索引擎等提供关于文档的额外信息，而不会直接在网页的内容区域显示。

<head>
        <!-- 设置网页标题，会显示在浏览器标题栏 -->
        <title>我的示例网页</title>
        
        <!-- 设置网页字符编码为UTF-8，确保字符能正确解析显示 -->
        <meta charset="UTF-8">
        
        <!-- 提供网页的描述信息，用于搜索引擎优化等 -->
        <meta name="description" content="这是一个简单的示例网页，用于展示HTML中<head>标签相关元素的用法。">
        
        <!-- 定义网页的关键词，方便搜索引擎索引，可根据实际情况填写多个关键词，用逗号隔开 -->
        <meta name="keywords" content="HTML, 示例网页, <head>标签">
        
        <!-- 链接外部样式表文件（这里假设styles.css和当前HTML文件在同一目录下，若不在需修改路径），用于美化页面 -->
        <link rel="stylesheet" type="text/css" href="styles.css">
        
        <!-- 引入外部的JavaScript文件（这里假设main.js和当前HTML文件在同一目录下，若不在需修改路径），实现页面交互等功能 -->
        <link rel="script" type="text/javascript" href="main.js">
        
        <!-- 也可以直接在<head>中嵌入简单的JavaScript代码，如下定义了一个函数，不过一般复杂代码建议放外部文件 -->
        <script>
            function showAlert() {
                alert("网页加载完成，欢迎浏览！");
            }
            window.onload = showAlert; // 页面加载完成时调用showAlert函数，弹出提示框
        </script>
    </head>

（1）<title>标签

这是<head>标签中最常用的元素之一。它定义了网页的标题，这个标题会显示在浏览器的标题栏中。

（2）<meta>标签

这样可以确保网页中的各种字符（如中文、特殊符号等）能够正确地被浏览器解析和显示。
另一种用法是提供网页的描述信息，用于搜索引擎优化（SEO）。

（3）<link>标签

（4）<script>标签

通常情况下，<script>标签用于在 HTML 文档中嵌入 JavaScript 代码。不过，为了更好地维护代码结构和性能，很多时候会将 JavaScript 代码放在外部文件中，然后通过<script>标签来引用。但在一些简单的场景下，也可以直接在标签内嵌入 JavaScript 代码。

4、<body>标签

这个标签包含了网页中所有可见的内容，如文本、图像、链接、表格、表单等。例如：这里的<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<img>标签用于插入一张图片，src属性指定了图片的来源路径，alt属性是当图片无法显示时的替代文本。

（1）文本相关标签

<h1> - <h6>标签（标题标签）：

用于定义不同级别的标题，<h1>代表最高级别的标题，也就是最重要、字号最大的标题，<h6>则是级别最低、字号最小的标题。

<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
</body>

<p>标签（段落标签）：

用来定义段落内容，网页中的文本段落一般都用它来包裹。

<body>
    <p>这是第一段文字内容。</p>
    <p>这里是第二段文字。</p>
</body>

<span>标签：

它主要用于对文本中的一小部分进行样式设置或者添加特定的属性等，本身不具备像段落、标题那样明显的语义和默认样式，常配合 CSS 样式来使用。例如：

<body> 
<p>今天的天气 <span style="color: blue;">非常好</span>，适合出去游玩</p> 
</body>

（2）列表相关标签

<ul>（无序列表标签）和<li>（列表项标签）：

<ul>标签用于创建无序列表，其内部包含多个<li>标签，每个<li>标签代表列表中的一项内容，各项之间没有先后顺序关系，默认显示为带有项目符号（通常是小圆点）的列表形式。

<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
</body>

<ol>有序列表标签）和<li>（列表项标签）：

<ol>与<ul>类似，不过它创建的是有序列表，列表中的<li>项会按照顺序依次编号，默认是阿拉伯数字编号，从 1 开始递增。例如：

<body>
    <ol>
        <li>第一步：准备食材</li>
        <li>第二步：烹饪食材</li>
        <li>第三步：装盘享用</li>
    </ol>
</body>

（3）链接相关标签

<a>标签（超链接标签）
这是实现网页之间相互跳转以及链接到其他资源的重要标签，通过设置href属性来指定链接的目标地址。例如：

<body>
    <a href="https://www.baidu.com">点击这里跳转到百度</a>
    <a href="page2.html">跳转到本网站的另一个页面（假设存在page2.html文件）</a>
</body>

（4）图像相关标签

<img>标签（图像标签）：

用于在网页中插入图片，它是一个自闭合标签，通过src属性指定图片的来源路径（可以是相对路径，也可以是绝对路径），alt属性用来设置当图片无法正常显示时的替代文本内容，便于用户了解图片大概的主题信息。例如：

<body>
    <img src="image.jpg" alt="一张美丽的风景图片">
</body>

（5）表格相关标签

表格相关标签：

<table>（表格标签）、<tr>（行标签）、<td>（单元格标签）等

<table>标签用来定义整个表格结构，<tr>标签用于在表格内创建行，而每行中通过<td>标签来划分一个个单元格，用于放置具体的数据、文本等内容。例如：

<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </table>
</body>

三、一个简单HTLM页面示例

1、HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 设置网页标题，会显示在浏览器标题栏 -->
        <title>我的示例网页</title>
        
        <!-- 设置网页字符编码为UTF-8，确保字符能正确解析显示 -->
        <meta charset="UTF-8">
        
        <!-- 提供网页的描述信息，用于搜索引擎优化等 -->
        <meta name="description" content="这是一个简单的示例网页，用于展示HTML中<head>标签相关元素的用法。">
        
        <!-- 定义网页的关键词，方便搜索引擎索引，可根据实际情况填写多个关键词，用逗号隔开 -->
        <meta name="keywords" content="HTML, 示例网页, <head>标签">
        
        <!-- 链接外部样式表文件（这里假设styles.css和当前HTML文件在同一目录下，若不在需修改路径），用于美化页面 -->
        <link rel="stylesheet" type="text/css" href="styles.css">
        
        <!-- 引入外部的JavaScript文件（这里假设main.js和当前HTML文件在同一目录下，若不在需修改路径），实现页面交互等功能 -->
        <link rel="script" type="text/javascript" href="main.js">
        
        <!-- 也可以直接在<head>中嵌入简单的JavaScript代码，如下定义了一个函数，不过一般复杂代码建议放外部文件 -->
        <script>
            function showAlert() {
                alert("网页加载完成，欢迎浏览！");
            }
            window.onload = showAlert; // 页面加载完成时调用showAlert函数，弹出提示框
        </script>
    </head>
<body>
    <body>
        <!-- 标题标签示例 -->
        <h1>欢迎来到我的示例网页</h1>
    
        <!-- 段落标签示例 -->
        <p>这是一个简单的网页，用于展示 HTML 中 <body> 标签里各种元素的用法哦。</p>
        <p>下面你将会看到不同类型的内容展示形式。</p>
    
        <!-- 列表标签示例（无序列表） -->
        <ul>
            <li>水果列表：</li>
            <li>苹果</li>
            <li>香蕉</li>
            <li>橙子</li>
        </ul>
    
        <!-- 列表标签示例（有序列表） -->
        <ol>
            <li>步骤一：准备材料</li>
            <li>步骤二：进行操作</li>
            <li>步骤三：检查结果</li>
        </ol>
    
        <!-- 链接标签示例 -->
        <a href="https://www.baidu.com">点击这里跳转到百度</a>
        <br> <!-- 换行标签，用于适当分隔元素 -->
        <a href="page2.html">跳转到本网站的另一个页面（假设存在page2.html文件）</a>
    
        <!-- 图像标签示例（记得替换成真实可用的图片路径哦） -->
        <img src="C:\Users\Administrator\Desktop\菜根网络安全.png" width="300" height="300" alt="示例图片">
    
        <!-- 表格标签示例 -->
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
            </tr>
        </table>
    
        <!-- span标签示例，用于改变部分文本样式 -->
        <p>今天的天气 <span style="color: blue;">很不错</span>，适合出去走走呢。</p>
    </body>
</body>
</html>