什么是HTML
一种超文本标记语言: HyperText Markup Language
常见误区：HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签
HTML文档的别名web 页面
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
入门
新建一个HTML文件（这里采用的软件是HBuilderX）
<!DOCTYPE html> // 声明文档类型为HTML5
<html> // HTML文档的根元素<head> // 文档的头部，包含元数据<meta charset="utf-8"> // 设置文档的字符编码为UTF-8，支持多语言字符<title></title> // 文档的标题，此处为空，应在<title>和</title>之间添加标题文本</head><body> // 文档的主体，包含实际显示的内容<h1>我的第一个标题</h1> // 一级标题，通常用于页面或章节的主要标题<p>我的第一个段落。</p> // 段落，用于包含文本内容</body>
</html>保存并运行，运行效果：
组成
头部：（即head里的部分：<head> 内容 </head>）
可用于添加网页的相关信息，如网页名，CSS样式等 （CSS先做了解）
身体：（即body里的部分：<body> 内容 </body>）
标题：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>我是标题 1</h1><h2>我是标题 2</h2><h3>我是标题 3</h3><h4>我是标题 4</h4></body>
</html>运行结果：
HTML 标题（Heading）是通过<h1> - <h4> 标签来定义的。并且大小逐渐减小。
段落：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>我是一个段落。</p><p>我是一个段落。</p><p>我是一个段落。</p></body>
</html>运行结果：
HTML 段落是通过标签 <p> 来定义的。
链接：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><a href="https://blog.csdn.net/MeyrlNotFound?type=blog"> 引号内是引用的网址</a></body>
</html>运行结果：
点击即可跳转到该网址。
HTML 链接是通过标签 <a> 来定义的。
图像：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="我是图片.jpg" width="480" height="480" /></body>
</html>HTML 图像是通过标签 <img> 来定义的。
注意： 图像的名称和尺寸以属性的形式提供。
图像后缀.jpg要打上，而且运行时图像要与html文件在一个文件夹中。
表格：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>
<table border="1"><tr><th>Header a</th><th>Header b</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table></body>
</html>运行结果：
表格由 <table> 标签来定义。每个表格有多行（由 <tr> 标签定义），每行被分割多个单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性，表格将不显示边框。
-
使用
<table>标签来定义表格的开始。 -
使用
<tr>标签来定义表格中的行。 -
使用
<th>标签来定义表头单元格。 -
使用
<td>标签来定义表格中的标准单元格。 -
使用
<caption>标签来为表格添加标题。 -
使用
<colgroup>和<col>标签来为表格中的一组列定义属性。 -
使用
<thead>、<tbody>和<tfoot>来分别定义表头、主体和脚注部分。
下面是一个更详细的HTML表格示例：
<table><caption>学生成绩表</caption><colgroup><col style="background-color: #ffdddd;"><col style="background-color: #ddffdd;"><col style="background-color: #ddddff;"></colgroup><thead><tr><th>姓名</th><th>数学</th><th>语文</th></tr></thead><tbody><tr><td>张三</td><td>95</td><td>88</td></tr><tr><td>李四</td><td>85</td><td>98</td></tr></tbody><tfoot><tr><td>平均分</td><td>90</td><td>92</td></tr></tfoot>
</table>
其他：
段落和換行
- ＜p>：定义一个段落。
- <br>： 插入一个简单的换行符。
<p>这是一个段落。</p>sp>这是另一个段落。＜br>这是同一段落中的新一行。≤/p>文本格式化标签
- <b> 或 <strong>： 加粗文本（ <strong> 在语义上表示重要性）。
- <i> 或 <em>：斜体文本（<em>在语义上表示强调）。
- <u>：下划线文本(不推荐用于表示强调，因为与链接的下划线可能混淆）。
- <s> 或 <del>： 刪除袋文本（<del> 在语义上表示被刪除的文本）。
- <small>： 小号文本。
- <mark>：高亮文本（通常力黄色背景）。
<p>这是<b>加粗</b>文本。</p>
<p>这是<em>强调</em>文本。</p>
<p>这是<u>下划线</u>文本。</p>
<p>这是<s>删除线</s>文本。</p>
<p>这是<small>小号</small>文本。</p>
<p>这是<mark>高亮</mark>文本。</p>文本对齐
使用CSS 样式来控制对齐，而不是HTML标签。可以在<p>、<div>等标签内使用
style 属性来没置 text-align。
<p style="text-align:left;">左对齐文本。</p>
<p style="text-align:center;">居中文本。</p>
<p style="text-align:right;">右对齐文本。</p>引用和预格式化文本：
<blockquote>：定义长引用。
<q>：定义短引用。
<pre>：预格式化文本，保留空格和换行。
<blockquote>这是一个长引用的例子。它通常用于表示从其他来源引用的较大段落。
</blockquote><p>这是<q>一个短引用</q>的例子。</p><pre>这是预格式化文本。它会保留所有的空格和换行。
</pre>上标与下标：
<sup> ： 上标文本（常用于表示幂或脚注）。
<sub>：下标文本(常用于表示化学式中的下标）。
<p>这是上标文本：X<sup>2</sup></p>
<p>这是下标文本：H<sub>2</sub>O</p>插入特殊字符：
HTML 提供了ー些安体来表示特殊字符，例如 表示空格， ＆lt;表示小于号
< ，> 表示大于号 > 等。
<p>这是一个包含特殊字符的段落：<div>Hello, World!</div></p>尾部：
以</html>作结，与开头的<html>形成对应。