HTML自学手册-基础篇1

HTML自学手册-基础篇1

HTML 基础- 4个实例

HTML 基础- 4个实例 不要担心本章中您还没有学过的例子, 您将在下面的章节中学到它们

  1. 标题
  2. 段落
  3. 链接
  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运行测试工具 查看实例!

HTML 段落是通过标签 <p> 来定义的。

  • 实例
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

HTML 链接是通过标签 <a> 来定义的;提示:在 href 属性中指定链接的地址

  • 实例
  • 温馨提示:在 href 属性中指定链接的地址
<a href="https://liboven.cn">这是一个链接</a>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

HTML 图像是通过标签 <img> 来定义的.

  • 实例
  • 注意: 图像的名称和尺寸是以属性的形式提供的
<img decoding="async" src="/images/logo.png" width="258" height="39" />
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

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>
点击尝试
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。

Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='John "ShotGun" Nelson'

HTML 提示:使用小写属性

属性和属性值对大小写不敏感

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值

而新版本的 (X)HTML 要求使用小写属性


查看完整的HTML属性列表: HTML 标签参考手册

下面列出了适用于大多数 HTML 元素的属性:

属性描述
class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式(inline style)
title描述了元素的额外信息 (作为工具条使用)

更多标准属性说明: HTML 标准属性参考手册


  1. 属性和属性值,尽量小写,本来这样做也方便些。
  2. class 属性可以多用 class=” “ (引号里面可以填入多个class属性)
  3. 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>
点击尝试
复制代码,点击 “尝试一下” 按钮,粘贴到 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运行测试工具查 看实例!

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解,浏览器会忽略注释,也不会显示它们

注意: 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助

注释写法如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 (liboven.cn)</title>
</head>
<body>

<!--这是一个注释,注释在浏览器中不会显示-->

<p>这是一个段落</p>

</body>
</html>
复制代码,点击 “尝试一下” 按钮,粘贴到 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>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

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>
复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

温馨提示:本文最后更新于2022-12-27 10:02:07,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞30赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容