以下内容仅作为个人学习总结，只作为参考。想要更为仔细的学习，建议学习MDN文档
https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web
HTML（超文本标记语言，全称：HyperText Markup Language）是一种用于创建网页的标准标记语言。
HTML使用标签（tag）来描述页面上的元素，例如标题、段落、图片等。标签通常以尖括号（< >）包围，并且可以包含属性来提供元素的额外信息。例如，`<h1>`标签定义一个一级标题，`<p>`标签定义一个段落。
HTML文档由多个标签组成，每个标签可以包含其他标签或文本内容。整个文档通常以`<html>`标签开始，并以`<html>`标签结束。
HTML常见结构，如例1所示：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>这是站点名称</title>
</head>
<body>
<h1>一级标题</h1>
<p>这是我的页面</p>
</body>
</html>
1.元素
1.1.元素的组成
HTML由元素构成，而元素则主要分为三个部分，如例2所示：
<p> 内容</P>- 开始标签：包含元素的名称（示例2中为P），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
- 内容：元素的内容。
- 结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果（注意有些元素没有结束标签）。
1.2.元素的分类
接下来介绍元素的分类以及一些个人认为比较常见的元素。
- 主根元素
| <html> | 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其它元素必须是此元素的后代。 |
- 文档元数据
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如搜索引擎，浏览器 等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
| <base> | 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。 |
| <head> | 包含文档相关的配置信息（元数据），包括文档的标题，脚本，样式表等。 |
| <link> | 指定当前文档与外部资源的关系。该元素最常用于链接 CSS，此外也可以被用来创建站点图标（比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标）。 |
| <meta> | 表示那些不能由其它 HTML 元相关（meta-related）元素表示的元数据信息。 |
| <style> | 包含文档或者文档部分内容的样式信息，它们会被应用于包含此元素的文档。 |
| <title> | 定义文档的标题，显示的浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略 |
- 分区根元素
| <body> | 表示文档的内容。文档中只能有一个该元素。 |
- 内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。注意，这些元素都要包含在<body>元素内。
| <header> | 表示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其它元素，比如 Logo、搜索框、作者名称和其它元素。 |
| <h1,h2,h3,h4,h5,h6> | 表示六个不同的级别的章节标题，<h1> 级别最高，而 <h6> 级别最低。 |
| <nav> | 表示页面的一部分，其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。 |
| <main> | 呈现了文档正文的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 |
| <aside> | 表示文档的一部分，其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框（call-out box）的形式出现。 |
| <article> | 表示文档、页面、应用或网站中的独立结构，旨在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其它独立的内容项目。 |
| <section> | 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。 |
| <footer> | 表示最近的一个父分段内容或元素的页脚。<footer> 通常包含该章节作者、版权数据或者与文档相关的链接等信息。 |
- 文本内容
使用 HTML 文本内容元素来组织在开标签 <body>和闭标签 <body> 里的块或章节的内容。
| <li> | 表示列表里的条目。它必须包含在一个父元素里：有序列表（<ol>）、无序列表(<ul>）或者菜单(<menu>）。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。 |
| <menu> | <ul>的语意替换，但被浏览器视为与 <ul>没有区别。它表示一个无序列表（使用 <li>表示）。 |
| <ul> | 表示一系列无序的列表项目，通常渲染为项目符号列表。 |
| <ol> | 表示有序列表，通常渲染为一个带编号的列表。 |
| <p> | 表示文本的一个段落。该元素通常表现为通过空行和/或首行缩进与相邻块分隔的文本块。但 HTML 段落可以与任何相关内容（例如，图像或表单字段）构成结构分组。 |
| <figure> | 表示一段独立的内容，可能包含 <figcaption> 元素定义的标题。该插图、标题和其中的内容通常作为一个独立的引用单元。 |
| <figcaption> | 描述其父元素 <figure> 里其它内容的标题或图例。 |
- 内联文本语义
使用 HTML 内联文本语义定义单词、内容、或任意文字的语义、结构或样式。
| <a> | 可以通过它的<href>属性创建通向其它网页、文件、电子邮件地址、同一页面内的位置或任何其它 URL 的超链接。 |
| <abbr> | 用于代表缩写。 |
| <br> | 在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。 |
| <em> | 标记出需要用户着重阅读的内容，<em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。 |
| <span> | 短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用class或者id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span>与 div 元素很相似，但 <div> 是一个块级元素而 <span>则是行级元素。 |
| <strong> | 表示其内容十分重要、严肃或紧迫。浏览器通常用粗体显示。 |
- 图像和多媒体
| <area> | 在图片上定义一个可点击区域。图像映射（image map）允许图像上的几何区域与超链接关联。 |
| <img> | 将一张图像嵌入文档。 |
| <map> | 与<area>元素一起使用，以定义一个图像映射（可点击链接区域）。 |
- 内嵌内容
除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。
| <iframe> | 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中。 |
| <object> | 表示引入一个外部资源，这个资源可能是一张图片、嵌入的浏览上下文，亦或是一个插件所使用的资源。 |
- 脚本
为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。有一些特定的元素用于支持此功能。
| <canvas> | 用来通过canvas scripting API 或 WebGL API 绘制图形及图形动画的容器元素 |
| <script> | 用于嵌入可执行脚本或数据。这通常用作嵌入或者引用 JavaScript 代码。<script>元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。 |
- 表格内容
这里的元素用于创建和处理表格数据。（注意不要用表格元素来进行网页布局，这会给以后的网页维护和更新带来很多麻烦）
| <th> | 定义表格内的表头单元格。这部分特征是由scope 和headers 属性准确定义的。 |
| <tr> | 定义表格中的行。同一行可同时出现<td>（数据单元格）和<th>（列头单元格）元素 |
| <td> | 定义了一个包含数据的表格单元格。它是表格模型（table model）的一部分。 |
| <table> | 表示表格数据——即通过二维（由行和列组成）数据表表示的信息。 |
- 交互元素
HTML 提供了一系列有助于创建交互式用户界面对象的元素。
| <details> | 创建一个挂件，仅在被切换成“展开”状态时，它才会显示内含的信息。必须使用<summary>元素为该部件提供概要或者标签。 |
| <dialog> | 表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。 |
| <summary> | 用作 details 元素内容的摘要、标题或图例。点击<summary> 元素会翻转父元素 <details> 的展开和关闭状态。 |
1.3.元素属性
HTML的全局属性是可以应用于所有HTML元素的属性。这些属性包括以下几个：
-
class：指定元素的一个或多个类名，用于样式化元素。
-
id：为元素指定一个唯一的标识符。
-
style：用于指定元素的样式。
-
title：为元素提供一个额外的信息，当鼠标悬停在元素上时显示。
-
accesskey：为元素定义一个键盘快捷键。
-
contenteditable：指定元素是否可编辑。
-
contextmenu：指定元素关联的上下文菜单。
-
dir：指定元素的文本方向。
-
draggable：指定元素是否可拖动。
-
dropzone：指定在元素上释放拖放数据时如何处理数据。
HTML元素具有自己特定的属性，这些属性只适用于特定的元素。例如，<a>元素具有href属性用于指定链接的URL，<img>元素具有src属性用于指定图像的URL等。
2.文本处理
网页处理文本内容，主要使用文本内容和内联文本语义元素，如例3所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CiTongFlux-Test</title>
<style>
h1{text-align: center; }
ul,ol,p{font-size: larger;}
</style>
</head>
<body>
<h1>我的世界介绍</h1>
<p><em><strong> 《我的世界》</strong></em>的游戏世界是由方块构成的无边界的虚拟地图，玩家可以在这个世界中创造和探索。</p>
<p>玩家可以自由地建造和拆除方块，制作工具、武器和装备，与怪物战斗，种植和收获农作物，养殖动物，探索各种不同类型的生物群落等等。</p>
<p>玩家还可以与其他玩家合作或竞争，构建自己的世界。</p>
<h2>玩家开荒必备物资</h2>
<ul>
<li>火把</li>
<li>木头</li>
<li>圆石</li>
<li>......</li>
</ul>
<h2>玩家发展路线</h2>
<ol>
<li>做你想做的</li>
<li>Do angthing you want</li>
</ol>
</body>
</html>效果如图1所示：
图1.文本处理展示
在文本内容中，还有许多有意思的元素，例如<dl>,<small>，这里不做过多介绍。
3.多媒体嵌入
在往你的网页嵌入内容之前，需要区分绝对链接和相对链接。
相对链接：指向与你链接的文件相关的位置，随着你网站文件位置的改变而改变。
绝对链接：指向由其在 Web 上的绝对位置定义的位置，包括协议和域名。不会随着你的网站的改变而改变。
3.1.图片
嵌入图片主要使用元素<img>，如例4所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CiTongFlux</title>
<style> img{ width: 30%;height: 30%;}</style>
</head>
<body>
<p>CiTongFlux</p>
<img src="images/My_Image.png" alt="我的图片" width="30%" height="30%">
</body>
</html>得到的效果如图2所示 ：
图2.嵌入图片展示
逐步解释例4代码，src属性包含一个URL，该URL指向了图片位置。这里使用的是相对链接images/My_Image.png指示在images文件夹里的png文件。同样的，可以使用绝对链接作为src的值。
alt指的是图片的备用文本。当你的网络加载缓慢或者src的URL路径不正确时，图片内容就会更改为备用文本，如图3所示：
width和height指的是图片的宽度和高度，这里将图片的大小设置为网页内容的30%。当然，你也可以通过<style>元素在<head>里面定义图片的格式。
3.2.视频，音频
在理解图片的嵌入之后，视频和音频的简单嵌入也是类似的。
视频通过<vedio>元素进行嵌入，如例5所示：
<video src="My_Vedio.mp4" controls>controls属性指的是能够让用户控制视频的播放，包括最基本的启动，停止和调整音量。
音频通过<audio>元素进行嵌入。<audio>和<vedio>大部分情况下是类似的，但也有一些不同。<audio>因为没有视觉部件，所以它不支持width,height,poster等属性。
另外，在嵌入视频时，你可以使用<iframe>元素。但我并不推荐，因为它更为复杂，可能会带来更多的麻烦。
4.网站的架构
这里主要介绍如何使用内容分区种类下的元素进行网页架构，如例7所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CiTongFlux</title>
</head>
<body>
<header>
<h1>CiTongFlux</h1>
</header>
<nav>
<ul>
<li><a href="#"> 第一页</a></li>
<li><a href="#"> 第二页</a></li>
<li><a href="#"> 第三页</a></li>
<li><a href="#"> 第四页</a></li>
</ul>
</nav>
<main>
<article>
<p><em><strong>《我的世界》</strong></em>的游戏世界是由方块构成的无边界的虚拟地图，玩家可以在这个世界中创造和探索。</p>
<p>玩家可以自由地建造和拆除方块，制作工具、武器和装备，与怪物战斗，种植和收获农作物，养殖动物，探索各种不同类型的生物群落等等。</p>
<p>玩家还可以与其他玩家合作或竞争，构建自己的世界。</p>
</article>
<aside>
<h2>展示图片</h2>
<article>
<img src="images/My_Image.png" alt="我的图片" width="10%" height="10%">
</article>
</aside>
</main>
<footer> <p>本文内容均由CiTongFlux编辑</p></footer>
</body>
</html>
扫一扫
729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
