html简介
HTML（HyperTextMarkupLanguage超文本标记语言，一种标记语言，不是一种编程语言）是用来描述网页的一种语言，使用标记标签来描述网页
标记语言是一套标记标签（markup tag）
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>）
包含了文档的元数据，比如文档的标题和字符集声明。
<title> 定义了浏览器标签上的标题。
<link> 标签是一种非常有用的元素，它允许你将外部资源链接到你的HTML文档中。这些资源通常包括样式表（CSS）、图标、RSS源、预连接到其他网页等。<link> 标签位于 <head> 部分中。
<link> 标签最常见的用法，用于将样式表链接到HTML文档中。
<link rel="stylesheet" href="styles.css"><link> 标签的属性包括：
rel：定义了当前文档与被链接文档之间的关系。href：指定了被链接文档的URL。type：指定了被链接文档的MIME类型。media：指定了被链接文档将应用的媒体类型。crossorigin：指定了是否应该使用CORS（跨源资源共享）来请求资源。integrity：用于验证被链接资源的完整性。
<script> 标签用于定义客户端的脚本，比如JavaScript。这些脚本可以在浏览器中运行，允许网页与用户交互，控制网页的行为，以及改变网页的内容。
<script> 标签可以包含多个属性：
src：指定外部脚本文件的URL。async：指示脚本应该异步加载，即在页面继续解析的同时下载脚本。defer：指示脚本应该延迟执行，直到文档解析完成。type：指定脚本的MIME类型，默认为text/javascript。charset：指定脚本字符集。crossorigin：指定是否应该使用CORS来请求脚本。integrity：用于验证外部脚本的完整性。
五、主体部分（<body>）
<body> 标签包含了可见的页面内容，比如文本、图片、链接、表格、列表等。浏览器窗口中显示的所有内容几乎都包含在 <body> 标签内。
文本元素
<p>这是一个段落。</p>
表单元素
<input type="text" name="username" placeholder="Enter username">
图像元素
<img src="image.jpg" alt="描述">
超链接元素
<a href="https://www.example.com">访问</a>
表格元素<table>标签创建表格，<tr>表示表格行，<td>表示表格单元格
完整html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>首页</h2>
<p>这是一段介绍性的文字，可以包含一些关于网站的信息。</p>
</section>
<section id="about">
<h2>关于我们</h2>
<p>这里是关于我们的信息。我们致力于提供高质量的服务。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<form action="submit_form.php" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">消息:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="发送">
</form>
</section>
</main>
<aside>
<h3>侧边栏信息</h3>
<p>这里是一些额外的信息或者广告。</p>
</aside>
<footer>
<p>版权所有 © 2024</p>
</footer>
</body>
</html>