本人学习时候很容易额外扩展，因为很多次见到同一个熟悉但不了解的代码或用法我会很难受，所以我把基本用法都列出来了，看起来会很冗杂（因为不仅不同文章重复，相同文章我也在重复-.-），但结合实例来回对比查阅让我学的很舒服，希望未来的我看见现在这样杂乱无章的学习顺序不会疑惑_。
一、定义
- 样式表：即用于定义文档外观和格式的机制，在网页开发中最常见的是层叠样式表（CSS）
link元素用于链接到样式表和站点图标等外部资源，以下是该元素用于外部CSS文件的基本语法：
<link rel="资源类型" href="资源路径" />
<link rel="stylesheet" href="./style.css" />
二、重要属性及用法
1.rel属性
rel是HTML中标签的核心属性之一，用于定义当前HTML文档与被连接资源之间的语义关系。
如上例中的“stylesheet”是用于链接外部CSS样式表，控制文档的视觉样式的。其他常用的还有：
- “icon”用于链接站点图标显示在浏览器标签页或地址栏中
- “alternate”表示被链接资源是当前文档的“替代版本”（如不同语言、格式的版本）
- “prev/next”表示文档在系列中的上一篇或下一篇，用于内容分页导航
- “canonical”用于指定“规范网址”，解决同一内容多URL的SEO问题（即告诉搜索引擎哪个是权威版本）
- “auther”用于链接到文档作者的个人主页或简介页
- “license”用于链接到文档的版权声明或许可协议页
- “preconnect”提前与目标域名建立连接（减少后续请求的延迟），用于性能优化
- “dns-prefetch”提前解析目标域名的DNS（减少DNS查询时间），用于性能优化
2.href属性
href是Hypertext Reference（超文本引用）的缩写，HTML中的核心属性之一，用于指定链接目标资源的URL，即告诉浏览器或应用程序要访问的资源位置。在link标签中用于链接外部资源（如CSS样式表、站点图标等），以下为基本用法：
- 链接外部CSS样式表
<link rel="stylesheet" href="./style.css" /> - 链接站点图标（favicon）
<link href="favicon.ico" rel="icon" />
href在其他标签中的用法有：
（一）<a>标签
用于创建页面内或页面间的超链接，点击后跳转至目标资源。
基本用法：
<a href="目标URL">链接文本</a>
- 链接到外部网页（绝对路径）
<a href="https://www.example.com">访问示例网站</a> - 链接到内部页面（相对路径，假设当前页面在根目录，about.html也在根目录）
<a href="about.html">关于我们</a> - 链接到页面内锚点（通过id定位）
<a href="#section1">跳转到章节1</a>
<div id="section1">这里是章节1的内容</div> - 链接到邮箱（mailta：协议）
<a href="mailto:info@example.com">发送邮件</a> - 链接到电话（tel：协议，移动端点击可拨号）
<a href="tel:+1234567890">拨打客服电话</a>
（二）<area>标签（图像映射）
用于在图像地图中定义可点击区域，功能类似<a>标签。
基本用法：
代码语法
<map name="mapName"><area href="目标URL" shape="形状" coords="坐标" alt="说明" />
</map>
<img src="image.jpg" usemap="#mapName" />
示例代码
<map name="chinaMap"><area href="beijing.html" shape="rect" coords="100,50,200,150" alt="北京" />
</map>
<img src="china.jpg" usemap="#chinaMap" />
en事实上我尝试了但没有成功，我需要额外的时间来仔细研究怎么定义可点击区域。
（三）标签（基准URL）
用于设置页面中所有相对URL的基准路径，href指定基准URL。 示例：
<base href="https://www.example.com/assets/" />
<!-- 之后页面中所有相对路径都会基于此基准，如下会跳转到 https://www.example.com/assets/style.css -->
<link href="style.css" rel="stylesheet" />
（四）特殊协议
除了常规的网页链接，href还支持特殊协议，以实现特殊功能，以下为示例：
- 下载文件（浏览器会触发下载而非跳转）
点击查看代码
<a href="document.pdf" download>下载PDF文档</a>
- 调用JavaScript（通过javascript：协议执行脚本）
<a href="javascript:alert('Hello!')">点击弹框</a>
三、HTML样板
定义：HTML样板即最基础的结构，包括了每个HTML文档所需的基本结构和基本元素，用以节省时间及保证页面设置正确。示例如下：
HTML样板
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>freeCodeCamp</title><link rel="stylesheet" href="./styles.css" /></head><body></body>
</html>
1.<!DOCTYPE html>
用于解释HTML版本，本例为HTML5文档
2.
html代码
<!DOCTYPE html>
<html lang="en"><!--All other elements go inside here-->
</html>
<html>标签中可指定页面语言。
3.
html基本结构
<!DOCTYPE html>
<html lang="en"><head><!--Important metadata goes here--></head><body><!--Headings, paragraphs, images, etc. go inside here--></body>
</html>
这是html文档的基本结构，包括head和body。
其中head部分内容为对页面渲染、SEO、功能支持至关重要，是不会直接显示在页面中的不可交互内容。常用示例：
<title>定义页面标题
点击查看代码
<head><!-- 标题会显示在浏览器标签页，也是搜索引擎结果的核心标题 --><title>HTML基础教程 - 入门指南</title>
</head>
<meta>设置字符编码（确保中文正常显示）
点击查看代码
<head><!-- 声明页面使用UTF-8编码，避免中文乱码 --><meta charset="UTF-8">
</head>
<meta>设置视口（适配手机等移动设备）
点击查看代码
<head><!-- 让页面在手机上按实际宽度显示，禁止默认缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<link>引入外部CSS样式表
点击查看代码
<head><!-- 关联外部CSS文件，控制页面样式（推荐优先用外部CSS） --><link rel="stylesheet" href="./css/main.css">
</head>
<link>设置网页图标
点击查看代码
<head><!-- 浏览器标签页左侧的小图标（支持.ico/.png等格式） --><link rel="icon" href="./images/logo.ico">
</head>
<base>设置相对URL的基准地址
点击查看代码
<head><!-- 页面中所有相对URL都会基于此地址拼接（如a、img的路径） --><base href="https://www.example.com/blog/">
</head>
<style>内联CSS样式（仅当前页面生效）
点击查看代码
<head><!-- 直接在页面中写CSS，控制元素样式（简单样式可写，复杂样式建议CSS和html文档分开） --><style>/* 让页面文字默认颜色为深灰色 */body { color: #333; }/* 标题加粗 */h1 { font-weight: bold; }</style>
</head>
<script>引入外部JavaScript
点击查看代码
<head><!-- 引入外部JS文件，实现页面交互功能 --><script src="./js/script.js"></script>
</head>