HTML 格式化、图像、元素、属性

韩未零

已于 2023-09-22 11:16:31 修改

阅读量55

点赞数

分类专栏：前端文章标签： html 前端

于 2023-09-16 12:05:07 首次发布

本文链接：https://blog.csdn.net/qq_60271706/article/details/132916755

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML 文本格式化

HTML中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写格式进行调整。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本的处理</title>
	</head>
	<body>
		<b>加粗文本</b><br><br>		
		<i>斜体文本</i><br><br>		
		<code>电脑自动输出</code><br><br>		
		这是 <sub> 下标</sub> 和 <sup> 上标</sup>
	</body>
</html>

HTML 格式化标签

HTML 使用标签 ("bold") 与 ("italic") 对输出的文本进行格式，如：粗体或斜体

这些HTML标签被称为格式化标签。

HTML "计算机输出" 标签

HTML 引文, 引用, 及标签指定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本的处理</title>
	</head>
	<body>
		<P>这是一个段落</P>
		<p><b>这是一个段落</b></p>
		<P><big>这是一个段落</big></P>
		<P><small>这是一个段落</small></P>
		<p><strong>这是一个段落</strong></p>
		<p><i>这是一个段落</i></p>
		<p>这是一个段落<sup>a</sup></p>
		<p>这是一个段落<sub>b</sub></p>
		<p><del>这是一个段落</del></p>
		<p><u>这是一个段落</u></p>
		<p><code>a = 10;a += 1 # 这是一个段落</code></p>
		<blockquote>xxx</blockquote>
	</body>
</html>

HTML 图像

使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt。

<h2>挪威山旅行</h2>

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock">

HTML 图像- 图像标签（<img>）和源属性（Src）

在 HTML 中，图像由<img>标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt属性用来为图像定义一串预备的可替换的文本。在编程测试中练习alt属性的使用方法。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与width（宽度）属性用于设置图像的高度与宽度。您可以在编程测试中调整一张图像的大小。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

设置图像边框

在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">

设置图像对齐

默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 图像标签

案例

新建一个imgs目录

imgs/ --> 将图片放到这里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 一般使用相对路径 -->
		<!-- src 图片地址 -->
		<!-- alt 图片不存在时，显示的内容 -->
		<img src="./imgs/1.jpg" alt="图片不存在">
		<img src="./imgs/1.jpg" alt="图片不存在" height="100px">
		<img src="./imgs/1.jpg" alt="图片不存在" height="100px" width="50px">
		<img src="./imgs/1.jpg" alt="图片不存在" border="3">
		<img src="./imgs/1.jpg" alt="图片不存在" border="3" align="center">
	</body>
</html>

HTML 元素

HTML 文档由 HTML 元素定义，HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

1. HTML 元素以开始标签起始

2. HTML 元素以结束标签终止

3. 元素的内容是开始标签与结束标签之间的内容

4. 某些 HTML 元素具有空内容（empty content）

5. 空元素在开始标签中进行关闭（以开始标签的结束而结束）

6. 大多数 HTML 元素可拥有属性

HTML 文档由嵌套的 HTML 元素（可以包含其他 HTML 元素）构成。

HTML 空元素

HTML 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为 （用于定义换行）， 元素就是没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 ，HTML、XHTML 和 XML 都接受这种方式。

注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。

HTML 提示：使用小写标签

由于 HTML 标签对英文字母的大小写不敏感，所以 和 表达的意思相同，不过早年的大部分网站喜欢使用大写的 HTML 标签。

万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

在HTML4之前，HTML的标准比较混乱，所以早年的HTML代码并不是那么规范，与XML的代码会更加相似，而XML代码的一大特点就是标签喜欢使用大写，所以在HTML刚发展的几年大部分网站都喜欢使用大写的标签。

随着HTML4甚至HTML5的普及，后续的网站都遵循HTML4的推荐——使用小写，这也是为什么现在的大多数网站使用小写的HTML标签的原因。

HTML 实例解析

元素:

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

这个 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 以及一个结束标签 。
元素内容是: 这<body> 元素:第一个段落。

<body> 元素:

	<html>

		<body>

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

		</body>

	</html>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

不要忘记结束标签

如果您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落

<p>这是一个段落

上述实例在浏览器中也能正常显示，因为关闭标签是可选的。

但您不能对此产生依赖性，因为忘记使用结束标签会产生不可预料的结果或错误。

HTML 属性

属性是为 HTML 元素提供的附加信息。

- HTML 元素可以设置属性

- 属性可以在元素中添加附加信息

- 属性一般描述于开始标签

- 属性总是以名称/值对的形式出现，比如：name="value"。

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="https://www.baidu.com">这是一个链接,使用了 href 属性</a>

HTML 属性常用引用属性值

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

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

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

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

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

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

HTML 属性参考

韩未零

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 格式化、图像、元素、属性

文本的处理这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落a这是一个段落b
复制链接

扫一扫

专栏目录