声明!
学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关,切勿触碰法律底线,否则后果自负!!!!有兴趣的小伙伴可以点击下面连接进入b站主页泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频
HTML简介
HTML是用来描述网页的一种语言
HTML指的是超文本标记语言:HyperTextMarkupLanguage
HTML不是一种编程语言,而是一种标记语言
标记语言是一套标记标签(markup tag)
HTML使用标记标签来描述网页
HTML文档包含了HTML标签以及文本内容
HTML文档也叫做web页面
一、HTML基本结构概述
HTML(超文本标记语言)网页有一个标准的结构,主要由以下几个关键部分组成:文档类型声明、HTML根元素、头部(head)和主体(body)部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架
二、文档类型声明(DOCTYPE)
<!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">,它确保浏览器能够正确解析和显示网页中的各种字符,支持多种语言的字符集。另外,还可用于设置页面描述、关键词等信息,如<metaname="description" content="这是一个充满趣味的网页">用于向搜索引擎描述网页内容<meta name="keywords”content="网页,趣味,示例">可设置关键词帮助搜索引擎索引网页。
<link>:主要用于链接外部资源,最常见的是连接 CSS 样式表。例如:<linkrel="stylesheet" href="styles.css">其中rel="stylesheethre表明这是一个样式表链接,herf属性指定了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>标签来插入图像,如<img src="image.jpg"alt="图像描述src属性指定图像的来源路径,alt属性在图像无法正常显示时提供替代文本,对于可访问性和 SEO 都很重要。
超链接元素:通过<a>标签创建超链接,如<a href="https://www.example.com">点击这里</a>,href属性定义了链接的目标 URL,标签内的文本是用户看到的可点击的链接内容。
表格元素:使用<table>标签创建表格,<tr>表示表格行,<td>表示表格单元格
例如:
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>