JavaWeb前端——HTML-2——HTML属性、HTML标题、HTML段落、HTML 输出

版权声明:------------------------------这个世界上只有一种成功,就是按照自己想要的方式度过一生--------------------------- https://blog.csdn.net/qq_44238142/article/details/87910431

HTML属性

HTML标签可以拥有属性。属性提供了有关HTML元素的跟多的信息。
属性总是以名称/值对的形式出现,比如:name=“value”。属性总是在HTML元素的开始标签中规定。
比如我们可以通过添加属性把一行文字居中:

<h1 align="center" >这是一个居中的一级标题<h1>

我们也可以用同样的方式给网页添加背景:

<body bgcolor="yellow" border="1">
	<p>现在背景是黄色的了</p>
</body>

为标签添加属性就是上面的这种格式,属性值往往是被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那你就必须使用单引号:

<p name='Bill "HelloWorld" Gates'>看左边别看这里</p>

大多数HTML元素适用的属性有:

属性 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)

HTML标题

标题(Heading)是通过< h1>到< h6>标签来定义的。
< h1>定义最大的标题。< h6>定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

浏览器会自动在标题的前后添加空行。
在默认情况下,HTML会自动在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

说明:标题很重要,请确保标题标签只用于标题,不要仅仅为了产生粗体或者大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。隐私用户可以通过标题来快速浏览你的网页,所以用标题来呈现文档结构是很重要的。应该将h1作为主标题(最重要的),其次是h2,再其次是h3,一次类推。

HTML水平线 < hr />

hr元素可以用来分隔内容。

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

使用水平线 (< hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

HTML注释

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

<!-- This is a comment -->

开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

HTML提示-如何查看源代码

您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的?”

如果您想找到其中的奥秘,只需要单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

HTML段落

段落通过< p>< /p>标签来设定。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

浏览器会自动地在段落的前后添加空行。(< p> 是块级元素)
使用空的段落标记 < p>< / p> 去插入一个空行是个坏习惯。用 < br /> 标签代替它!

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 < br /> 标签:

<p>This is<br />a para<br />graph with line breaks</p>

< br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

HTML 输出

我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果

对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时,浏览器会移除源代码中多余的空格和空行所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

<html>
	<body>

		<p>
			这个段落
			在源代码中
			包含许多行
			但是浏览器
			忽略了它们。
		</p>

		<p>
			这个段落
			在源代码       中
			包含   许多行
			但是      浏览器
			忽略了  它们。
		</p>

		<p>
			段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。
		</p>

	</body>
</html>

结果

这个段落 在源代码中 包含许多行 但是浏览器 忽略了它们。 

这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。

猜你喜欢

转载自blog.csdn.net/qq_44238142/article/details/87910431