htmledit_views">
声明!
学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关,切勿触碰法律底线,否则后果自负!!!!有兴趣的小伙伴可以点击下面连接进入b站主页[B站泷羽sec](https://space.bilibili.com/350329294)
一、HTML 简介
HTML 即超文本标记语言(HyperText Markup Language),它属于标记语言而非编程语言,通过一套标记标签来描述网页,HTML 文档包含这些标签与文本内容,也被称作 web 页面。
二、HTML 基本结构
- 文档类型声明(DOCTYPE):<!DOCTYPE html>是 HTML5 的文档类型声明,位于 HTML 文件首行,告知浏览器文档遵循的 HTML 版本,便于其正确渲染页面,HTML5 用此简洁声明取代了以往复杂的 DTD 声明。
- HTML 根元素(<html>):作为 HTML 文档根标签,<html>包含了所有其他 HTML 元素,有开始和结束标签界定整个文档范围,浏览器据此识别其中的有效 HTML 代码。
- 头部部分(<head>):
- 包含内容及作用:包含网页的元数据,虽不直接在网页可见区域显示,但对浏览器渲染和网页展示特性影响重大,例如涉及浏览器如何解析显示字符、影响搜索引擎优化等。
- 常用标签:
- <title>:用于定义网页标题,显示在浏览器标题栏或标签页上,是用户识别网页的重要标识且利于 SEO。
- <meta>:提供多种元数据,常见的如通过<meta charset="UTF-8">设置字符编码确保正确解析显示多语言字符集,还可设置页面描述、关键词等帮助搜索引擎索引网页。
- <link>:主要用于链接外部资源,最常见链接 CSS 样式表,如<link rel="stylesheet" href="styles.css">,实现网页内容与样式分离方便设计维护。
- <script>:可嵌入 JavaScript 代码(如<script>alert('欢迎来到我的网页'); </script>)或引用外部 JavaScript 文件(<script src="script.js"></script>),为网页添加交互功能。
- 主体部分(<body>):包含网页中所有可见内容,例如:
- 文本元素:用<p>标签组织文本,<h1> - <h6>创建不同级别标题,级别越高重要性越强。
- 图像元素:通过<img>标签插入图像,src属性指定图像路径,alt属性在图像无法正常显示时提供替代文本,对可访问性和 SEO 重要。
- 超链接元素:使用<a>标签创建超链接,href属性定义目标 URL,标签内文本为可点击内容。
- 表格元素:用<table>创建表格,<tr>表示行,<td>表示单元格。
- 表单元素:<form>包含表单内容,<input>用于创建输入框,可通过type属性指定输入类型、placeholder属性显示提示文本等收集用户输入信息。
- HTML 的发展历程
- HTML 最初是由蒂姆・伯纳斯 - 李(Tim Berners - Lee)在 1990 年左右开发的,目的是为了在互联网上共享和链接文档。早期的 HTML 版本比较简单,功能有限。
- 随着互联网的发展,HTML 经历了多个版本的更新,如 HTML 2.0、HTML 3.2、HTML 4.01 等。这些版本不断增加新的标签和功能,例如表格、表单、框架等。
- HTML5 是目前广泛使用的版本,它带来了许多重要的改进和新功能,如更好的语义化标签(<article>、<section>、<nav>等)、本地存储(localStorage和sessionStorage)、音频和视频嵌入(<audio>和<video>)等,使得网页开发更加灵活和高效。
- 与其他技术的结合
- CSS(层叠样式表):HTML 负责网页的结构和内容,而 CSS 负责网页的样式设计。通过在 HTML 文档中引用 CSS 文件或者使用内联样式,可以控制网页元素的颜色、字体、大小、布局等各种外观属性。例如,在 HTML 文档的<head>部分添加以下代码可以引用外部 CSS 文件:
- JavaScript:JavaScript 是一种脚本语言,可以用于为网页添加交互性。例如,可以通过 JavaScript 实现表单验证、菜单展开和折叠、动画效果等功能。在 HTML 文档中可以通过<script>标签来包含 JavaScript 代码,例如