HTML基础二

时间:2020-01-09
本文章向大家介绍HTML基础二,主要包括HTML基础二使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1、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 heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

实例

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

HTML 注释

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

注释是这样写的:

实例

<!-- This is a comment -->

2、HTML 段落

可以把 HTML 文档分割为若干段落。

HTML 段落

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

实例

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

注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)

不要忘记结束标签

即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:

实例

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

上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释:在未来的 HTML 版本中,不允许省略结束标签。

提示:通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始,并在何处结束,不论对您还是对浏览器来说,都会使代码更容易理解

HTML 折行

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

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

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

<br> 还是 <br />

您也许发现 <br> 与 <br /> 很相似。

在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。

即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障。

 

3、HTML 样式

HTML 的 style 属性

style 属性的作用:

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

HTML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色:

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

HTML 样式实例 - 字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

HTML 样式实例 - 文本对齐

text-align 属性规定了元素中文本的水平对齐方式:

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

4、HTML 文本格式化

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。

 

文本格式化:

<html>

<body>

<b>This text is bold</b>

<br />

<strong>This text is strong</strong>

<br />

<big>This text is big</big>

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains
<sub>subscript</sub>

<br />

This text contains
<sup>superscript</sup>

</body>
</html>

 

文本与格式化:

<html>

<body>

<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

地址:

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

块引用:

<html>

<body>

这是长的引用:
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用:
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

删除字效果和插入字效果:

 

<html>

 

<body>

 

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

 

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

 

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

 

</body>
</html>

5、HTML 引用

HTML <q> 用于短的引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

实例

<p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>

 

用于长引用的 HTML <blockquote>

 

HTML <blockquote> 元素定义被引用的节。

 

浏览器通常会对 <blockquote> 元素进行缩进处理。

 

实例

 

<p>以下内容引用自 WWF 的网站:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来,WWF 一直致力于保护自然界的未来。
世界领先的环保组织,WWF 工作于 100 个国家,
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

 

用于缩略词的 HTML <abbr>

 

HTML <abbr> 元素定义缩写或首字母缩略语。

 

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

 

实例

 

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

 

用于定义的 HTML <dfn>

 

HTML <dfn> 元素定义项目或缩写的定义。

 

<dfn> 的用法,按照 HTML5 标准中的描述,有点复杂:

 

1. 如果设置了 <dfn> 元素的 title 属性,则定义项目:

 

实例

 

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

 

2. 如果 <dfn> 元素包含具有标题的 <abbr> 元素,则 title 定义项目:

 

实例

 

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

 

3. 否则,<dfn> 文本内容即是项目,并且父元素包含定义。

 

实例

 

<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

 

用于联系信息的 HTML <address>

 

HTML <address> 元素定义文档或文章的联系信息(作者/拥有者)。

 

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

 

实例

 

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

 

用于著作标题的 HTML <cite>

 

HTML <cite> 元素定义著作的标题。

 

浏览器通常会以斜体显示 <cite> 元素。

 

实例

 

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

 

用于双向重写的 HTML <bdo>

 

HTML <bdo> 元素定义双流向覆盖(bi-directional override)。

 

<bdo> 元素用于覆盖当前文本方向:

 

实例

 

<bdo dir="rtl">This text will be written from right to left</bdo>

 

$flag 上一页 下一页