02.HTML元素/属性/标题/段落/文本格式化/链接

02.HTML元素/属性/标题/段落

/文本格式化/链接

HTML 元素


HTML 文档由 HTML 元素定义。


HTML 元素

开始标签 *

元素内容

结束标签 *

<p>

这是一个段落

</p>

<a href="default.htm">

这是一个链接

</a>

<br>

*开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)


HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。


嵌套的 HTML 元素

HTML 文档由嵌套的 HTML 元素构成。


HTML 文档实例

以上实例包含了三个 HTML 元素。


HTML 实例解析

<p> 元素:

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

<body> 元素:

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

<html> 元素:

<html> 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>. 元素内容是另一个 HTML 元素(body 元素)。


不要忘记结束标签

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

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

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。


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 属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现,比如:name="value"

属性实例

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

实例


HTML 属性常用引用属性值

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

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

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


HTML 提示:使用小写属性

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

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

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


HTML 属性参考手册

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

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

属性

描述

class

为html元素定义一个或多个类名(classname)(类名从样式文件引入)

id

定义元素的唯一id

style

规定元素的行内样式(inline style)

title

描述了元素的额外信息 (作为工具条使用)


注意:

  1. 属性和属性值,尽量小写,本来这样做也方便些。
  2. class 属性可以多用 class=" " (引号里面可以填入多个class属性)
  3. id 属性只能单独设置 id=" "(只能填写一个,多个无效)

HTML 标题


在 HTML 文档中,标题很重要。


HTML 标题

标题(Heading)是通过 <h1> - <h6> 标签进行定义的.

<h1> 定义最大的标题。 <h6> 定义最小的标题。

实例

注释: 浏览器会自动地在标题的前后添加空行。


标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体大号的文本而使用标题。

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

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

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


HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。 hr 元素可用于分隔内容。

实例


HTML 注释

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

注释写法如下:

实例

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


HTML 提示 - 如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的的。

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


HTML 标签参考手册

菜鸟教程的标签参考手册提供了有关这些标题及其属性的更多信息。

您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。

标签

描述

<html>

定义 HTML 文档

<body>

定义文档的主体

<h1> - <h6>

定义 HTML 标题

<hr>

定义水平线

<!--...-->

定义注释


标题大小和文本大小的关系

1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。


HTML 段落


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


HTML 段落

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

实例

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


不要忘记结束标签

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

实例

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

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


HTML 折行

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

实例

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


HTML 输出- 使用提醒

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

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

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

(这个例子演示了一些 HTML 格式化方面的问题)

更多实例

更多段落 段落的默认行为。


HTML 标签参考手册

菜鸟教程的标签参考手册提供了有关 HTML 元素及其属性的更多信息。

标签

描述

<p>

定义一个段落

<br>

插入单个折行(换行)


HTML 文本格式化


HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如:粗体 or 斜体

这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而,这些标签的含义是不同的:<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。


HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

HTML "计算机输出" 标签

标签

描述

<code>

定义计算机代码

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

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

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目。


HTML 链接


HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 链接 如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)


HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。


HTML 链接语法

链接的 HTML 代码很简单。它类似这样:

href 属性描述了链接的目标。.

实例

上面这行代码显示为:访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。


HTML 链接 - target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

实例


HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":


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

注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.runoob.com/html/"。


HTML 链接标签

标签

描述

<a>

定义一个超级链接

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2018-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

关于Html与css的一些解释

32012
来自专栏cnblogs

Bootstrap源码分析之transition、affix

一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建...

2137
来自专栏一“技”之长

Java开发GUI之单复选框 原

    单复选框在处理一些用户选项时十分方便。在Java的GUI体系中,复选框使用Checkbox类来创建,单选框实际上是将多个复选框结合成为组,同一组的复选框...

832
来自专栏deepcc

jQuery阻止冒泡和HTML默认操作

3995
来自专栏LIN_ZONE

js 画布与图片的相互转化(canvas与img)

//将图片对象转化为画布,返回画布 function ImageToCanvas(image) { var canvas = document.createE...

2032
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

4653
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

4797
来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

1182
来自专栏菜鸟计划

javascript 事件基础

一:事件流       事件流描述的是从页面中接收事件的顺序。 ? ?  事件冒泡 <div id="one"> <div id="tw...

3705
来自专栏软件开发

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,...

2408

扫码关注云+社区

领取腾讯云代金券