HTML 基础- 4个实例
HTML 基础- 4个实例 不要担心本章中您还没有学过的例子， 您将在下面的章节中学到它们
- 标题
- 段落
- 链接
- 图像
HTML 标题（Heading）是通过<h1> – <h6> 标签来定义的
- 1-6级标题 实例
<h1>这是1级标题</h1>
<h2>这是2级标题</h2>
<h3>这是3级标题</h3>
<h4>这是4级标题</h4>
<h5>这是5级标题</h5>
<h6>这是3级标题</h6>HTML 段落是通过标签 <p> 来定义的。
- 实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>HTML 链接是通过标签 <a> 来定义的；提示:在 href 属性中指定链接的地址
- 实例
- 温馨
提示:在 href 属性中指定链接的地址
<a href="https://liboven.cn">这是一个链接</a>HTML 图像是通过标签 <img> 来定义的.
- 实例
- 注意： 图像的名称和尺寸是以属性的形式提供的
<img decoding="async" src="/images/logo.png" width="258" height="39" />1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：
<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html 文件跟 *.jpg 图片在相同目录下：
<img src="*.jpg" width="300" height="120"/>
3、*.html 文件跟 *.jpg 图片在不同目录下：
a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：
<img src="image/*.jpg/"width="300" height="120"/>
b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：
<img src="../image/*.jpg/"width="300" height="120"/>
4、如果图片来源于网络，那么写绝对路径：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
MacOS 是没有硬盘分区的，所以引用文件直接：
<img src="file:///Users/usrn/location" width="x" height="y"/>
假设文件目录有空格，直接将空格换成：
%20
如下:
<img src="file:///Users/usrn/Desktop/location/space%20space/Images/IMG.png" width="x" height="y"/>
- ./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的
- ../：代表文件所在的父级目录
- ../../：代表文件所在的父级目录的父级目录
- /：代表文件所在的根目录
HTML 文档由 HTML 元素定义。
| 开始标签 * | 元素内容 | 结束标签 * |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href=”default.htm”> | 这是一个链接 | </a> |
| <br> | 换行 |
*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容
大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）
HTML 文档由相互嵌套的 HTML 元素构成
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>以上实例包含了三个 HTML 元素
<p> 元素:
<p>这是第一个段落</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。
<body> 元素:
<body>
<p>这是第一个段落。</p>
</body><body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>这是第一个段落</p>
</body>
</html>- <html> 元素定义了整个 HTML 文档
- 这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
- 元素内容是另一个 HTML 元素（body 元素）
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>这是一个段落
<p>这是一个段落以上实例在浏览器中也能正常显示，因为关闭标签是可选的
但不要依赖这种做法，忘记使用结束标签会产生不可预料的结果或错误
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>，许多网站都使用大写的 HTML 标签
教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
1. 一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）
2. 标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）
属性是 HTML 元素提供的附加信息
HTML 属性折叠框
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总
- 是以名称/值对的形式出现，比如：name=”value”。
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://liboven.cn">这是一个链接</a>属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='John "ShotGun" Nelson'
提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：HTML 提示：使用小写属性
属性和属性值对大小写不敏感
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值
而新版本的 (X)HTML 要求使用小写属性
查看完整的HTML属性列表: HTML 标签参考手册
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
更多标准属性说明： HTML 标准属性参考手册
- 属性和属性值，尽量小写，本来这样做也方便些。
- class 属性可以多用 class=” “ （引号里面可以填入多个class属性）
- id 属性只能单独设置 id=” “（只能填写一个，多个无效）
在 HTML 文档中，标题很重要
HTML 标题 标题（Heading）是通过 <h1> – <h6> 标签进行定义的. <h1> 定义最大的标题，<h6> 定义最小的标题，实例 <h1>这是一个标题
| 标签 | 描述 |
|---|---|
| <html> | 定义 HTML 文档 |
| <body> | 定义文档的主体 |
| <h1> – <h6> | 定义 HTML 标题 |
| <hr> | 定义水平线 |
| <!–注释内容 代码可以看到，网页看不见–> | 定义注释 |
- 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题
- 搜索引擎使用标题为您的网页的结构和内容编制索引
- 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的
- 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
标题（Heading）是通过 <h1> – <h6> 标签进行定义的，<h1> 定义最大的标题， <h6> 定义最小的标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 （liboven.cn）</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html><hr> 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解，浏览器会忽略注释，也不会显示它们
注意: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助
注释写法如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 （liboven.cn）</title>
</head>
<body>
<!--这是一个注释，注释在浏览器中不会显示-->
<p>这是一个段落</p>
</body>
</html>HTML 提示 – 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的的。
如果您想找到其中的奥秘，只需要单击右键，然后选择”查看源文件”（IE）或”查看页面源代码”（Firefox），其他浏览器的做法也是类似的，这么做会打开一个包含页面 HTML 代码的窗口
1.如何在 HTML 文档中显示标题
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>2.如何在 HTML 源代码中插入注释
<!--这是一个注释，注释在浏览器中不会显示-->3.如何插入水平线
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落</p>
<hr />
<p>这是段落</p>
<hr />
<p>这是段落</p>1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
暂无评论内容