黑客基础之html(超文本标记语言)

devtools/2024/11/28 9:47:57/
htmledit_views">

黑客基础之html(超文本标记语言)

HTML(超文本标记语言)是一种用于创建网页的标准标记语言。它描述了网页的结构和内容,通过一系列的元素和标签来定义文本、图像、链接、表格、表单等网页元素。HTML不是一种编程语言,而是一种标记语言,它使用标记标签来描述网页的结构和内容。

HTML的基本结构

一个典型的HTML文档包含以下几个基本元素:

  1. <!DOCTYPE html>:文档类型声明,告诉浏览器这个文档使用的是HTML5标准。

  2. <html>:HTML文档的根元素,其他所有元素都包含在这个标签内。

  3. <head>:包含了所有关于网页的元信息,如标题、字符集声明、引入的CSS样式表和JavaScript文件等。

  4. <title>:定义了网页的标题,它显示在浏览器的标题栏或标签页上。

  5. <body>:包含了网页的所有内容,如文本、图片、链接、表格、列表等。

<!DOCTYPE html>
<html>
<head><meta charset="UTF - 8"><title>一个简单的网页</title>
</head>
<body><h1>欢迎来到我的网页</h1><p>这是网页的主要内容部分。</p>
</body>
</html>
<!DOCTYPE html> <!-- 声明文档类型和HTML版本(HTML5) -->
<html lang="en"> <!-- 根元素,指定页面的主要语言为英语 -->
<head> <!-- 包含文档的元数据,如字符集定义、页面标题、样式表链接等 --><meta charset="UTF-8"> <!-- 指定字符编码为UTF-8,支持多语言 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度以优化移动端显示 --><title>这是一个标题</title> <!-- 页面在浏览器标签中的标题 -->
</head>
<body> <!-- 页面内容部分 --><!-- 可见的网页内容:文本、图片、链接、列表等 --><div style="background-color: violet;"><p>这是一段文字</p><p>这也是一段文字</p></div><img src="https://example.com/image.png" alt="示例图片"><a href="https://www.example.com" target="_blank">访问网站</a><p>这<span style="color: aqua;">是</span>一段带<span style="background-color: burlywood;">颜色</span>的文字</p><ol><li>第一项</li><li>第二项</li></ol><ul><li>无序列表项1</li><li>无序列表项2</li></ul><table border="2"><thead><tr><td>表头1</td><td>表头2</td></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody></table>
</body>
</html> <!-- 结束HTML文档 -->
​

image-20241127203715353

在HTML中,<head>标签内的标签主要用于定义文档的元数据和引用外部资源。以下是一些常见的<head>内标签:

1. <title>标签

定义文档的标题,显示在浏览器的标题栏或标签页上,也是搜索引擎结果的主要标题。

2. <meta>标签

用于定义HTML文档的元数据,包括字符编码、网页描述、关键词等。例如:

<meta charset="UTF-8">
<meta name="description" content="这是一个描述网页内容的元数据">
<meta name="keywords" content="HTML, CSS, JavaScript">

3. <link>标签

用于定义与文档相关的外部资源,常见的包括样式表和图标。例如:

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

4. <script>标签

用于引入JavaScript代码,可以放置在<head>标签内或页面底部的<body>标签前。例如:

<script src="script.js"></script>

5. <style>标签

用于定义内部的CSS样式,将样式规则直接写在HTML文档中。可以在<head>标签内使用<style>标签,将CSS样式应用于整个页面或特定的元素。

6. <base>标签

给页面上所有相对URL提供一个基础。一份文档中只能有一个<base>标签。

7. <noscript>标签

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则在此中定义脚本未被执行时的替代内容。

这些标签在<head>内的内容对于页面的显示、搜索引擎优化和性能都非常重要,它们提供了页面的结构和行为的关键信息。

<form>标签:用于创建用户交互表单。

<form action="/submit" method="post"><label for="username">用户名:</label><input type="text" id="username" name="username"><input type="submit" value="提交">
</form>
   <table>标签:用于创建表格,包含表头<th>、表格行<tr>、表格单元格<td>。
 <table><tr><td>单元格1</td><td>单元格2</td></tr>
</table>

<img>在网页中嵌入图像。

<img src="image.jpg" alt="示例图像">

<a>用于创建超链接。

<a href="https://www.example.com">访问示例

</p>

<p>这是一个段落。</p>

h1

网页标题

子标题


http://www.ppmy.cn/devtools/137634.html

相关文章

深入理解HTML基本结构:构建现代网页的基石

深入理解HTML基本结构&#xff1a;构建现代网页的基石 在数字时代&#xff0c;HTML&#xff08;超文本标记语言&#xff09;是构建和设计网页的基础。了解HTML的基本结构对于任何希望掌握网页开发的人来说至关重要。本文将详细介绍HTML文件的基本骨架&#xff0c;包括其核心标…

C++——map相关的oj题

前言&#xff1a;菜鸟写博客给自己看&#xff0c;我是菜鸟。 1&#xff1a;随机链表的复制 1.1题目要求&#xff1a; 1.2解题思路&#xff1a; 可以分两步来实现代码&#xff1a; ①先将示例1链表中的val值以及next的指向关系深拷贝到另一个新的链表当中 ②再处理新链表中&am…

ensp静态路由实验

一、实验目的 1、熟练掌握交换机的基本配置命令 2、熟练掌握静态路由的使用方法 3. 熟练掌握交换机端口模式 二、实验内容 需求&#xff1a; 根据要求利用现有实验设备组建小型局域网 实验设备&#xff1a; 交换机S37002台&#xff1b;PC机2台&#xff1b;路由器2台。 …

27加餐篇:gRPC框架的优势与不足之处

gRPC作为一个现代的、开源的远程过程调用(RPC)框架,在多个方面都展现了其优雅之处,同时也存在一些不足之处。这篇文章我们就相对全面的分析一下gRPC框架那些优雅的地方和不足的地方。 优雅的地方 gRPC作为一个RPC框架,在编码、传输协议已经支持多语言方面都比较高效,下…

常用贴片元件封装尺寸

不论你在什么时候开始&#xff0c;重要的是开始之后就不要停止。 一天过完&#xff0c;不会再来。 每一次发奋努力的背后&#xff0c;必有加倍的赏赐。【SMD贴片元件的封装尺寸】 公制&#xff1a;3216——2012——1608——1005——0603——0402 英制&#xff1a;1206——0805—…

Python从0到100(七十三):Python OpenCV-OpenCV实现手势虚拟拖拽

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

【Python】Uvicorn服务器

【Python】Uvicorn服务器 1.Uvicorn介绍2. Uvicorn 的特点3. Uvicorn 和 FastAPI4. 安装 Uvicorn5. 高级功能6. 性能优化7. 安全与监控8. 部署与维护9. 结论 python官方api地址 1.Uvicorn介绍 Uvicorn 既不是一个传统的“框架”&#xff0c;也不是一个普通的“包”&#xff0…

数据结构 (14)数组的定义与运算

前言 数组是一种数据结构&#xff0c;用于存储一系列相同类型的数据元素。这些元素在内存中连续存放&#xff0c;并且可以通过索引&#xff08;通常是整数&#xff09;来访问。数组是编程中非常基础且重要的数据结构之一&#xff0c;广泛应用于各种算法和程序中。 数组的定义 …