1. 前言
HTML（HyperText Markup Language，超文本标记语言）是构建网页和 web 应用程序的标准标记语言。它定义了网页的结构和内容，允许开发者创建有组织、语义化的文档。
HTML 使用一系列的元素（elements）和标签（tags）来标记不同类型的内容，比如文本、图像、链接、表单、视频等。每个 HTML 标签都有特定的用途，可以用来定义页面的不同部分，如标题、段落、列表、链接、图片等。
2. 文档结构
<!DOCTYPE html>用于告知浏览器当前文档的HTML版本，有助于页面渲染
<html>
...
</html>上述的<html>标签象征HTML标记文档的开始，可以省略，但为了保持文档的完整性最好加上。
<head>是HTML文档中用于包含有关网页的元数据，在<body>标签之前，通常对于网站中内部进行渲染与处理，通常包含以下内容：
<title>: 定义网页的标题，显示在浏览器标签页上。<meta>: 提供文档的元数据，比如字符集、作者、描述等。<link>: 连接外部资源，比如 CSS 文件。<style>: 内部 CSS 样式。<script>: 内部 JavaScript 代码或链接到外部 JavaScript 文件。
<head>
...
</head>2.1 title
tltle是自定义网页栏目显示
<title> 这是我的第一个网站 </title>效果如下图所示：
2.2 meta标签
meta一般针对于网页页面的元信息，在我的理解就是处理网页内部内容的一个框架，例如网页本身编码形式，网页中索引等。
针对于meta，可以将其比作其他编程语言中的类型，后续所跟charset，name等是他的不同功能呈现方式，选择相应功能后，根据content进行相关参数设定。
<meta charset='UTF-8'> #设置浏览器显示形式<meta name='keywords' content='关键字,keywords' /> #这个网页的关键字，关于什么<meta name='description' content='网页的介绍' /> #针对于搜索引擎网页的摘要介绍<meta http-equiv='refresh' content='5,url' /> #设置间隔5s，跳转至url;
<!-- 如果没有设置url，则默认刷新 -->3. 文本与图像
HTML中编写主题内容就像写一篇文章，要有标题，正文，美化的图片等等
网页所显示的内容都放在网页的主题标记内，是HTML文件的重点所在
主体标记以body进行声明，以此开始以此结束。
<body>
...
</body>3.1 标题
HTML文档中包含有各种级别的标题，由<h1>至<h6>由重要性进行排序
h实际上就是headline的简称，方便大家记忆
<html>
<head>
</head>
<body>
<h1>这里是第一级标题</h1>
<h2>这里是第二级标题</h2>
<h3>这里是第三级标题</h3>
<h4>这里是第四级标题</h4>
<h5>这里是第五级标题</h5>
<h6>这里是第六级标题</h6>
</body>
</html>3.2 文字列表（目录）
文字列表可以有序编排一些信息资源，例如目录等，使得网站内容更加结构化和条理化，方便浏览者更加方便跨界获取信息
3.2.1 无序列表
无序列表使用<ul></ul>标签进行声明，其中对于每一个列表使用<li></li>
<body>
<h1>游戏设计</h1>
<ul>
<li>项目需求</li>
<li>内容收集</li>
<ul> <!-- 列表中也可以嵌套列表 -->
<li>背景调查</li>
</ul>
</ul>
</body>3.2.2 有序列表
有序列表顾名思义列表中的标签都是有次序的，标记为<ol></ol>，每一个列表使用<li></li>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>如下图所示，有序列表将文本自动编码
3.3 文本段落
使用标签<p></p>进行声明，paragraph的简称，声明后后序文本为成为一个段落，声明结束后自动换行。
注意在HTML中打若干个空格，实际上只会显示一个空格
<p>一起学习哈哈哈哈哈啊哈哈</p>
<p>学个勾巴</p>3.4 文本样式与排版
3.4.1 重要文本
文本样式标签跟在段落标签之后
<p><b>粗体文字</b></p>
<p><em>强调文字</em></p>
<p><strong>超级强调文字</strong></p>3.4.2 倾斜文字
<p><I>斜体字</i></p>3.4.3 上下标显示
<!-- 上标显示 -->
<p>c=a<sup>2</sup></p>
<!-- 下标显示 -->
<p>c=a<sub>2</sup></p>
3.4.4 换行标记
换行标记是一个单标签<br/>
<body>
我是<br/>一个<br/>大傻子
<body>3.5 图片
网页中使用的图像可以是GIF，JPEG，MBP，PNG等格式的图像文件
URL(Uniform Resource Locator)，翻译为“统一资源定位器”，网络中的计算机是通过IP地址进行区分，若需要访问某个资源，首先需要定位该计算机，然后获取相应文件。
http://www.baidu.com/pages/computer.html
http:表示协议
//.../:主机名
绝对路径：完整的去描述文件位置的路径就是绝对路径
相对路径：以当前位置作为参考点，相对于目标的位置，例如与html文件同级的情况下，相对路径是image/tp.jpg （image文件夹中的tp图片）；
".."表示上一级目录，"../.."表示上级的上级目录
插入图片的标签为单标记<img>，相关属性下图所示
| 属性 | 值 | 描述 |
| alt | text | 图像的文本描述 |
| src | URL | 要显示的图像的URL |
| width | "pixcel" | 设置图像宽度 |
| height | "pixels" | 设置图像宽度 |
<body>
<img src='images/picture.jpg' alt='草莓沙拉' width="200">
</body>
4. 超链接
4.1 网页跳转
超链接的文本与图形可以连接到其他页面
超链接标记为<a></a>
在<a>后需要一个载体去接受超链接，可以使用文本也可以使用图片
<a href='www.baidu.com'>百度一下</a> #使用文本进行超链接
<a href='www.baidu.com'><img src='image.jpg'></a> #使用图片进行超链接在默认状态下，跳转页面会覆盖掉原界面，可以设置新窗口显示超链接页面
<a href='http://www.baidu.com' target='_blank'> new window </a>4.2 邮箱跳转
使用“mailto”关键字进行声明，点击后用户即可跳转至发送邮箱页面
<a href="mailto":xxxxx@xx.com>邮箱发送</a>5. 标签总结
| 标签 | 效果 |
| <head></head> | 渲染 |
| <body></body> | 主体 |
| <title></title> | 网页标题 |
| <h1></h1> | 标题 |
| <p></p> | 段落 |
| <img src='ULR' alt=''> | 图片 |
| <a href='URL'></a> | 超链接 |
| <ol></ol> <li></li> | 有序列表 |
| <ul></ul> <li></li> | 无序列表 |
杂七杂八的实验汇总：
<!-- # HB -->
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset='utf-8' />
<title> 这是我的第一个网站 </title>
</head>
<body>
<h1> How can i say </h1>
<ul>
<li>项目需求</li>
<li>内容手机</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<p><i>This is a paragraph of text. It will be displayed with a space before and after it.</i></p>
<p>OKOKOKOKOKOKOK</p>
<h2> OK </h2>
<p>H<sub>2 </p>
<img src='WechatIMG396.jpeg' alt='haha'>
<p> <a href='http://www.baidu.com'>公司简介</a> </p>
<p> <a href='https://shibboleth.nyu.edu/idp/profile/SAML2/Redirect/SSO?execution=e5s1)'><img src='WechatIMG396.jpeg'></a> </p>
<p> <a href='mailto:1173083865@qq.com'>站长信箱</a> </p>
<p> <a href='http://www.baidu.com' target='_blank'> new window </a> </p>
</body>
</html>
<!--meta 设置元属性，例如set的作用-->
<!--“keywords”“description”相当于功能定义，设置元属性的具体内容-->
<!--content表示所包含的内容-->
<!--h1,h2代表标签，重要性程度高低进行排列,字体由大至小进行打印-->
<!--p代表段落-->
<!--相关文本格式化字符查表得到--> 
6. 参考资料
《精通HTML5+CSS3+JavaScript网页设计》
![[ABC368G] Add and Multiply Queries](https://i-blog.csdnimg.cn/direct/7d55369d4c604bcbbf938076eb2785a5.png)
