泷羽Sec-黑客基础之html（超文本标记语言）

最新推荐文章于 2025-07-28 20:11:04 发布

无趣0521

最新推荐文章于 2025-07-28 20:11:04 发布

阅读量862

点赞数 19

CC 4.0 BY-SA版权

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/ciscoj/article/details/143961183

声明！
学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页[B站泷羽sec](https://space.bilibili.com/350329294)

一、html简介

什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言:HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML 文档也叫做web 页面

二、HTML 基本结构概述

HTML(超文本标记语言)网页有一个标准的结构，主要由以下几个关键部分组成:文档类型声明、HTML 根元素、头部(head)和主体(body)部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。

三、文档类型声明(D0CTYPE)

<!DOCTYPE html>:这是 HTML5 的文档类型声明。它必须位于 HTML 文件的第一行，作用是告知浏览器文档所遵循的 HTML 版本，以便浏览器能够正确地渲染页面。对于HTML5来说，这个声明简洁明了，统一了 HTML 文档类型的标准，取代了以往复杂的 DTD 来说，(文档类型定义)声明。

四、HTML 根元素(<html>)

<html>:作为 HTML 文档的根标签，所有其他的 HTML 元素都被包含在它里面。它有开始标签<html>和结束标签</html>。这个标签界定了整个 HTML 文档的范围，浏览器会识
别其中的内容为有效的 HTML 代码。

五、头部部分(<head>)

<head>: 此部分包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。

<title>: 用于定义网页的标题，标题内容会显示在浏览器的标题栏或标签页上。
例如:<title>精彩网页世界</title>。这是用户识别网页的重要标识，同时也对搜索引擎优化(SE0)有一定影响。

<meta>: 用于提供多种类型的元数据。常见的有字符编码设置，如<metacharset="UTF - 8">，它确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集。另外，还可用于设置页面描述、关键词等信息，如<meta name="description”content="这是一个充满趣味的网页">用于向搜索引擎描述网页内容，<meta name="keywords”content="网页,趣味,示例">可设置关键词帮助搜索引擎索引网页。

<link>: 主要用于链接外部资源，最常见的是连接 CSS 样式表。倒如:<link rel="stylesheet" href="styles.css">，其中rel="stylesheet" 表明这是一个样式表链接，href属性指定了CSS 文件的路径。通过这种方式，可以实现网页内容与样式的分离，方便网页设计和维护。

<script>: 可用于在HTML文档中嵌入 JavaScript 代码或引用外部的 JavaScript 文件。如果是嵌入代码。可以这样写:<script>alert('欢迎来到我的网页')</script>。若引用外部文件，则是<script src="script.js"></script>，这里src属性指定了JavaScript文件路径。脚本可以为网页添加交互功能。

六、主体部分(<body>)

<body>: 包含了所有在网页中可见的内容，如文本、图像、超链接、表格、表单等各种网页元素

文本元素: 可以使用段落标签<p>来组织文本，如<p>这是一段普通的文本内容。</p>。标题标签<h1>-<h6>可用于创建不同级别的标题，<h1>表示最高级别的标题，重要性依次递减，例如<h1>主标题</h1><h2>副标题</h2>。

图像元素: 使用<img>标签来插入图像，如<imgsrc="image.jpg”alt="图像描述，src属性指定图像的来源路径，alt属性在图像无法正常显示时提供替代文本，对于可访问性和 SE0 都很重要。

超链接元素: 通过<a>标签创建超链接，如<a href="https://www.example.com"点击这里</a>，href属性定义了链接的目标 URL,标签内的文本是用户看到的可点击的链接内容

表格元素:使用<table>标签创建表格，<tr>表示表格行，<td>表示表格单元格。
例如:

<table>
    <tr>
       <td>单元格1</td>
       <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
     </tr>
</table>

表单元素: 用于收集用户输入信息，例如<form>标签包含表单内容，<input>标签用干创建各种输入框，如<input type="text" placeholder="请输入用户名">用于创建一个文本输入框，type属性指定输入类型，placeholder属性显示提示文本。
以下是一个完整的简单 HTML 网页示例:

<!DOCTYPE html>
<htm>
<head>
         <title>示例双页</title>
<meta charset="UTF-8">
</head>
<body>
         <h1>欢迎来到示例网页</h1>
         <p>这是网页的主要内容部分，这里可以展示各种信息。</p>
         <img src="example.jpg" alt="示例图片">
         <a href="https://www.baidu.com">访问示例网站</a>
</body>
</html>

这个示例涵盖了基本的 HTML 网页结构元素，你可以在此基础上根据实际需求扩展和完善网页的功能和设计。