HTML5教程之标签(2)

HTML5 <b> 标签

实例

在HTML5中,你可以使用<b>标签来对某些文本实现加粗的效果,请参考下述的示例:

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

尝试一下 >>


浏览器支持

所有主流浏览器都支持 <b> 标签。


标签定义及使用说明

<b> 标签定义粗体的文本。


HTML 4.01 与 HTML5之间的差异

无。


提示和注释

注释: 根据 HTML 5 的规范,<b> 标签应该做为最后的选择,只有在没有其他标记比较合适时才使用它。HTML 5 规范声明:标题应该用 <h1> - <h6> 标签表示,被强调的文本应该用 <em> 标签表示,重要的文本应该用 <strong> 标签表示,被标记的或者高亮显示的文本应该用 <mark> 标签表示。

**提示:**您也可以使用 CSS 的 "font-weight" 属性设置粗体文本。


全局属性

<b> 标签支持 HTML 的全局属性


事件属性

<b> 标签支持 HTML 的事件属性

HTML5 <basefont> 标签 (已废弃)

定义和用法

HTML标签<basefont>用来设置文档的默认字体大小。使用<font>可以相对于默认字体大小进行变化。

使用说明:

不要再使用这个标签! 尽管在HTML 3.2中曾经(不严格地)标准化,但是它并不被主流的浏览器所支持。

而且,不同的浏览器、甚至同一浏览器的相邻版本,都没有使用相同的实现方式; 实际上,使用这个标签总是导致不确定的结果。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 不支持 <basefont> 标签。请用 CSS 代替。

HTML5 <base> 标签

实例

规定页面上所有链接的默认 URL 和默认目标:

<head><base href="//statics.w3cschool.cn/images/w3c/" target="_blank"></head> 
<body>
<img src="logo.png" width="24" height="39" alt="w3cschool">
<a href="logo.png">w3cschool logo</a>
</body>

尝试一下 >>


浏览器支持

所有主流浏览器都支持 <base> 标签。


标签定义及使用说明

<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。

在一个文档中,最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。


提示和注释

提示: 请把 <base> 标签排在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。

**注释:**如果使用了 <base> 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。


HTML 4.01 与 HTML5之间的差异

无。


HTML 与 XHTML 之间的差异

在 HTML 中,<base> 标签没有结束标签。

在 XHTML 中,<base> 标签必须被正确地关闭。


属性

属性 描述
href URL 规定页面中所有相对链接的基准 URL。
target _blank _parent _self _top framename 规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。

全局属性

<base> 标签支持 HTML 的全局属性


事件属性

<base> 标签不支持任何的事件属性。


相关文章

HTML DOM 参考手册: Base 对象

HTML5 <blockquote> 标签

实例

HTML5 <blockquote>标签用来引用大段的内容块,处于该标签内的文本会独自分离出来,并且自动缩进。详细请尝试使用以下的块引用示例:

定义一个摘自另一个源的块引用:

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

尝试一下 >>


浏览器支持

所有主流浏览器都支持 <blockquote> 标签。


标签定义及使用说明

<blockquote> 标签定义摘自另一个源的块引用。

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


提示和注释

提示: 如果标记是不需要段落分隔的短引用,请使用 <q>


HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,<blockquote> 标签定义一段长引用。

在 HTML5 中,<blockquote> 标签定义摘自另一个源的块引用。


HTML 与 XHTML 之间的差异

**注释:**如需把页面作为 XHTML 进行验证,那么 <blockquote> 元素必须包含块级元素,比如:

<blockquote>
<p>Here is a long quotation here is a long quotation.</p>
</blockquote>

属性

属性 描述
cite URL 规定引用的来源。

若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 属性上,若要以文本的形式告知读者引文的出处时,可以通过 <cite> 元素。

全局属性

<blockquote> 标签支持 HTML 的全局属性


事件属性

<blockquote> 标签支持 HTML 的事件属性

以上就是HTML5 <blockquote>标签的相关内容了,你可以在学习过程中熟练该标签的使用!

HTML5 <br />标签

实例

HTML5 <br> 标签用来对文档中的文本进行换行的处理,请参考下面的这个例子:

以下代码标记一个换行:

<p> 使用 br 元素<br>在文本中<br>换行。 </p>

尝试一下 >>


浏览器支持

所有主流浏览器都支持 <br> 标签。


标签定义及使用说明

<br> 标签插入一个简单的换行符。

<br> 标签是一个空标签,意味着它没有结束标签。

**提示:**由于 <br /> 标签是空标签,因此,不允许有"<br>...</br>"这样的写法!


提示和注释

**提示:**在写地址信息或者写诗词时 <br /> 标签非常有用。

注释: 请使用 <br /> 标签来输入空行,而不是分割段落。


HTML 4.01 与 HTML5之间的差异

无。


HTML 与 XHTML 之间的差异

在 HTML 中,<br> 标签没有结束标签。

在 XHTML 中,<br> 标签必须被正确地关闭,比如这样:<br /> 。


全局属性

<br> 标签支持 HTML 的全局属性


事件属性

<br> 标签支持 HTML 的事件属性


相关文章

HTML 教程:HTML 段落

HTML5 <big> 标签 (已废弃)

HTML <big> 标签 - HTML5 不支持

实例

让文本比常规的字体大一号:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>编程狮(w3cschool.cn)</title> 
</head>
<body>

<p>这个文本是正常的。</p>
<p><big>这个文本比较大。</big></p>

</body>
</html>

浏览器支持

所有主流浏览器都支持 <big> 标签。

标签定义及使用说明

HTML5 不支持 <big> 标签。请用 CSS 代替。

<big> 标签用来制作更大的文本。

提示和注释

提示:在文档中使用 CSS 来规定文本大小。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <big> 标签,HTML 4.01 支持 <big> 标签。

标准属性

在 HTML 4.01 中,<big> 标签支持如下标准属性:

属性 描述
class classname 规定元素的类名
dir rtl ltr 规定元素中内容的文本方向
id id 规定元素的唯一 id
lang language_code 规定元素中内容的语言代码
style style_definition 规定元素的行内样式
title text 规定元素的额外信息
xml:lang language_code 规定 XHTML 文档中元素内容的语言代码

如需完整的描述,请访问标准属性。

事件属性

在 HTML 4.01 中,<big> 标签支持如下事件属性:

属性 描述
onclick script 当鼠标被单击时执行脚本
ondblclick script 当鼠标被双击时执行脚本
onmousedown script 当鼠标按钮被按下时执行脚本
onmousemove script 当鼠标指针移动时执行脚本
onmouseout script 当鼠标指针移出某元素时执行脚本
onmouseover script 当鼠标指针悬停于某元素之上时执行脚本
onmouseup script 当鼠标按钮被松开时执行脚本
onkeydown script 当键盘被按下时执行脚本
onkeypress script 当键盘被按下后又松开时执行脚本
onkeyup script 当键盘被松开时执行脚本

如需完整的描述,请访问事件属性。

定义和用法

<big> 标签制作更大的文本。但是在HTML5中该标签不支持使用,你可以参考本站的"HTML <big>标签"部分!

HTML 4.01 与 HTML 5 之间的差异

HTML 5 不支持 <big> 标签。请用 CSS 代替。

相关参考

CSS教程:CSS font-size 属性

HTML5 <button> 标签

实例

HTML5 <button>标签用来定义按钮,该标签内的内容即为你要使用的按钮的内容。

以下代码标记一个按钮:

<button type="button">点我!</button>

尝试一下 >>


浏览器支持

所有主流浏览器都支持 <button> 标签。


标签定义及使用说明

<button> 标签定义一个按钮。

在 <button> 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

**提示:**请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。


提示和注释

注释: 如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。


HTML 4.01 与 HTML5之间的差异

HTML5 中的新属性:autofocus、form、formaction、formenctype、formmethod、formnovalidate 以及 formtarget。


属性

New :HTML5 中的新属性。

属性 描述
autofocusNew autofocus 规定当页面加载时按钮应当自动地获得焦点。
disabled disabled 规定应该禁用该按钮。
formNew form_id 规定按钮属于一个或多个表单。
formactionNew URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
formenctypeNew application/x-www-form-urlencoded multipart/form-data text/plain 规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。
formmethodNew get post 规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
formnovalidateNew formnovalidate 如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
formtargetNew _blank _self _parent _top framename 规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。
name name 规定按钮的名称。
type button reset submit 规定按钮的类型。
value text 规定按钮的初始值。可由脚本进行修改。

全局属性

<button> 标签支持 HTML 的全局属性


事件属性

<button> 标签支持 HTML 的事件属性

注意:<button> 元素比 <input> 元素更易样式化。你可以添加内联HTML内容(如<em>,<strong> 甚至<img>),并使用 :after 和 :before 伪元素实现复杂的渲染,而 <input> 只有文本值属性。

相关文章

HTML DOM 参考手册: Button 对象

HTML5 <bdi> 标签

实例

将用户名从周围的文本方向设置中隔离出来:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>w3cschool官网 - 编程狮,随时随地学编程</title> </head>
<body>

<p>在下面的示例中,显示着每个用户比赛的分数。将用户名从周围的文本方向设置中隔离出来。</p>

<ul>
 <li>用户 <bdi>hrefs</bdi>: 60 分</li>
 <li>用户 <bdi>jdoe</bdi>: 80 分</li>
 <li>用户 <bdi>إيان</bdi>: 90 分</li>
</ul>

<p><b>注意:</b> 目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签。</p>

</body>
</html>

浏览器支持

元素
<bdi> Yes 不支持 Yes Yes Yes

标签定义及使用说明

bdi 指的是 bidi 隔离(Bi-directional Isolation)。

<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

HTML 4.01 与 HTML5之间的差异

<bdi> 标签是 HTML5 的新标签。

全局属性

<bdi> 标签支持 HTML 的全局属性。

事件属性

<bdi> 标签支持 HTML 的事件属性。

HTML5 <bdo> 标签

定义和用法

<bdo> 标签覆盖默认的文本方向。bdo 指的是 bidi 覆盖(Bi-Directional Override)。

实例

在这个实例中,我们将改变显示文本的方向,使该段文本从右到左显示:

<p>该段落文字从左到右显示</p>
<p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>

亲自试一试

HTML 4.01 与 HTML 5 之间的差异

HTML4 的规范文档中没有描述该元素的事件,它们在 XHTML 中被添加。这应该是当时的疏忽。

属性

属性 描述
dir * ltr * rtl 必需。定义文本方向。

标准属性

<bdo> 标签支持 HTML 5 中的标准属性

事件属性

<bdo> 标签支持 HTML 5 中的事件属性

HTML5 <body> 标签

HTML <body> 标签

实例

一个简单的 HTML 文档,包含尽可能少的必需的标签:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

浏览器支持

所有主流浏览器都支持 <body> 标签。

标签定义及使用说明

<body> 标签定义文档的主体。

<body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中,删除了所有 body 元素的"呈现属性"。

在 HTML 4.01 中,所有 body 元素的"呈现属性" 已废弃。

属性

属性 描述
alink color HTML5 不支持。 HTML 4.01 已废弃。 规定文档中活动链接的颜色。
background URL HTML5 不支持。 HTML 4.01 已废弃。 规定文档的背景图像。
bgcolor color HTML5 不支持。 HTML 4.01 已废弃。规定文档的背景颜色。
link color HTML5 不支持。 HTML 4.01 已废弃。规定文档中未访问链接的颜色。
text color HTML5 不支持。 HTML 4.01 已废弃。规定文档中所有文本的颜色。
vlink color HTML5 不支持。 HTML 4.01 已废弃。规定文档中已被访问链接的颜色。

全局属性

<body> 标签支持 HTML 的全局属性。

事件属性

<body> 标签支持 HTML 的事件属性。

相关文章

HTML 教程: HTML 元素

HTML DOM 参考手册:Body 对象

相关推荐
学问小小谢2 小时前
第21节课:前端构建工具—自动化与模块化的利器
运维·前端·学习·计算机·自动化·电脑·硬件工程
Orange3015114 小时前
深入剖析Electron的原理
前端·javascript·electron
大模型铲屎官4 小时前
掌握 HTML5 多媒体标签:如何在所有浏览器中顺利嵌入视频与音频
前端·html·音视频·html5·多媒体标签
大模型铲屎官5 小时前
告别页面刷新!如何使用AJAX和FormData优化Web表单提交
前端·javascript·ajax·html·编程·页面刷新·表单提交
补三补四8 小时前
html中的列表元素
html5
无限大.8 小时前
前端知识速记--HTML篇:src和href
前端·html
东锋1.38 小时前
一些常用的HTML结构
html
子非鱼9218 小时前
两栏布局、三栏布局、水平垂直居中
前端·javascript·css
程序猿小D9 小时前
第三百五十八节 JavaFX教程 - JavaFX滑块
java·前端·数据库