HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
什么是HTML?
- HTML 代表超文本标记语言
- HTML 是创建网页的标准标记语言
- HTML 描述网页的结构
- HTML 由一系列元素组成
- HTML 元素告诉浏览器如何显示内容
- HTML 元素标记内容片段，如 "这是一个标题", "this is a paragraph", "this is a link"等。
使用任何一款编辑器，甚至新建一个文本文档都可以，将文档后缀名命名为html即可得到一个网页文件。
第一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<h1>标题</h1>
<p>段落</p>
<a href="https://blog.csdn.net/qq_42683732?type=blog">这是一个链接</a>
</body>
</html>
每个尖括号里的内容称为标签，有像<h1>标题</h1>这样要用<h1>将内容包裹起来的双标签，也有<meta charset="utf-8">这样单独的单标签
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 定义网页标题，会显示在浏览器的标签页上。
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
- <a>标签定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性，它指示链接的目的地。
接下来学习一下HTML里常用的几个标签
文本内容
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
HTML 段落是通过标签 <p> 来定义的。
<strong>、<del> 和 <em> 标签可以用于强调文本。
<strong>定义重要的文本。加粗文本
<del>标签定义文档中已删除的文本。
<em>标签是一个短语标签，用来呈现为被强调的文本。标签内的内容通常以斜体显示。
<i>定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。
<u> 为文本加下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<h4>这是一个四级标题</h4>
<h5>这是一个五级标题</h5>
<h6>这是一个六级标题</h6>
<p>这是一个段落</p>
<p><strong>加粗文本</strong><b>这个也是加粗</b></p>
<p><i>斜体</i><u>下划线</u></p>
<p><del>这是一个被删除的文本</del></p>
<p><em>被强调的文本</em></p>
</body>
</html>
这里只列举了其中几个标签，不能涵盖全部。
提示一句，使用css也可以到到同样的效果。
列表与表格
列表分无序列表、有序列表和自定义列表。使用 <ul> 和 <li> 标签创建无序列表，使用 <ol> 和 <li> 标签创建有序列表。使用 <dl> 和 <dt> 标签创建自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定义1</dt>
<dd>哈哈哈哈</dd>
<dt>这是自定义的</dt>
<dd>哇哇哇哇</dd>
</dl>
</body>
</html>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
表格：使用 <table>、<tr>、<td>、<th> 等标签创建表格，<table> 是表格标签的根元素，然后是 <tr> 表格的行标签，在 <tr> 内部是 <td> 与 <th>
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。每行里面的内容
- th：th 是 table header的缩写，表示表格的表头单元格。也就是列标题
使用边框属性来显示一个带有边框的表格，如果不要边框这可以将border="1"删去。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
</head>
<body>
<table border="1">
<tr>
<th>列标题A</th>
<th>列标题B</th>
<th>列标题C</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
</body>
</html>
图像、链接和注释
<img src="图片路径" alt="图片描述">
<a href="https://blog.csdn.net/qq_42683732?type=blog">这是一个链接</a>
<!-- 注释内容 -->
图像
图像还可以设置宽（width）高（height）属性。
图片路径一般用相对路径，因为网页一般上传置服务器，服务器路径与本地路径一般不同
绝对路径和相对路径
绝对路径是指从根目录开始
C:\Users\eh\AppData\Local\Programs\Microsoft VS Code
这样是从c盘开始的
相对路径是从当前目录开始的如.\img\index.png
不同操作系统使用的斜杠不同Linux系统是/，window系统是\
../表示上一级目录
alt="图片描述",当图片不显示时显示图片描述，这里插一句，盲人无法查看图片，但盲人可以通过无障碍软件将图片的信息读出来，所以应当合理书写alt属性，不要与内容不符也不要过于冗长。
链接
href 属性规定链接指向的页面的 URL。
href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。
如果 href 属性不存在，则 <a> 标签将不是超链接。
提示：您可以使用 href="#top" 或 href="#" 链接到当前页面的顶部！
链接还可以放到图片里，这样可以点击图片链接。
注释
这没什么好说的
属性
在 HTML 中，每个元素都可以有一个或多个属性，用于描述元素的特征和行为。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
上文的src、href、border等都是属性。
这里介绍几个常用的属性
<p class="note">这是一个带有 note 类属性的 p 标签</p>
<h1 id="myHeader">My Header</h1>
<div style="color: red; font-size: 20px;">这是一段红色的文字</div>
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
class 属性：class 属性是用于向元素添加一个或多个类名，以便通过 CSS 样式表定义样式。此外，类名还可以用来实现 JavaScript 的交互效果。用空格分隔类名。
id 属性：id 属性是用于将元素标识为唯一的标识符。它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素。
style 属性：style 属性是用于将CSS样式规则直接应用于元素。它可以用于控制元素的颜色、字体、大小和布局等。一个或多个由分号分隔的 CSS 属性和值。style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。
title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本
属性名称不区分大小写，属性值对大小写敏感。
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
