黑客基础之html(超文本标记语言)
HTML(超文本标记语言)是一种用于创建网页的标准标记语言。它描述了网页的结构和内容,通过一系列的元素和标签来定义文本、图像、链接、表格、表单等网页元素。HTML不是一种编程语言,而是一种标记语言,它使用标记标签来描述网页的结构和内容。
HTML的基本结构
一个典型的HTML文档包含以下几个基本元素:
-
<!DOCTYPE html>
:文档类型声明,告诉浏览器这个文档使用的是HTML5标准。 -
<html>
:HTML文档的根元素,其他所有元素都包含在这个标签内。 -
<head>
:包含了所有关于网页的元信息,如标题、字符集声明、引入的CSS样式表和JavaScript文件等。 -
<title>
:定义了网页的标题,它显示在浏览器的标题栏或标签页上。 -
<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文档 -->
在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
网页标题
子标题