HTML5教程之标签(2)

news2025/2/6 1:00:29

HTML5 <b> 标签

实例

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

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

尝试一下 »


浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

所有主流浏览器都支持 <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>

尝试一下 »


浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

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


标签定义及使用说明

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

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


提示和注释

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

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


HTML 4.01 与 HTML5之间的差异

无。


HTML 与 XHTML 之间的差异

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

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


属性

属性描述
hrefURL规定页面中所有相对链接的基准 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>

尝试一下 »


浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

所有主流浏览器都支持 <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>

属性

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


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

全局属性

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


事件属性

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

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

HTML5 <br />标签

实例

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

以下代码标记一个换行:

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

尝试一下 »


浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

所有主流浏览器都支持 <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>

浏览器支持

Internet Explorer

 

Firefox

 

Opera

 

Google Chrome

 

Safari

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

标签定义及使用说明

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

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

提示和注释

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

HTML 4.01 与 HTML5之间的差异

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

标准属性

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

属性描述
classclassname规定元素的类名
dirrtl
ltr
规定元素中内容的文本方向
idid规定元素的唯一 id
langlanguage_code规定元素中内容的语言代码
stylestyle_definition规定元素的行内样式
titletext规定元素的额外信息
xml:langlanguage_code规定 XHTML 文档中元素内容的语言代码

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

事件属性

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

属性描述
onclickscript当鼠标被单击时执行脚本
ondblclickscript当鼠标被双击时执行脚本
onmousedownscript当鼠标按钮被按下时执行脚本
onmousemovescript当鼠标指针移动时执行脚本
onmouseoutscript当鼠标指针移出某元素时执行脚本
onmouseoverscript当鼠标指针悬停于某元素之上时执行脚本
onmouseupscript当鼠标按钮被松开时执行脚本
onkeydownscript当键盘被按下时执行脚本
onkeypressscript当键盘被按下后又松开时执行脚本
onkeyupscript当键盘被松开时执行脚本

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

定义和用法

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

尝试一下 »


浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

所有主流浏览器都支持 <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 中的新属性。

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


全局属性

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

浏览器支持

元素

Google Chrome

Internet Explorer

Firefox

Safari

Opera

<bdi>Yes不支持YesYesYes

标签定义及使用说明

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>

浏览器支持

Internet Explorer

 

Firefox

 

Opera

 

Google Chrome

 

Safari

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

标签定义及使用说明

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

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

HTML 4.01 与 HTML5之间的差异

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

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

属性

属性描述
alinkcolorHTML5 不支持。 HTML 4.01 已废弃。 规定文档中活动链接的颜色。
backgroundURLHTML5 不支持。 HTML 4.01 已废弃。 规定文档的背景图像。
bgcolorcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档的背景颜色。
linkcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档中未访问链接的颜色。
textcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档中所有文本的颜色。
vlinkcolorHTML5 不支持。 HTML 4.01 已废弃。规定文档中已被访问链接的颜色。

全局属性

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

事件属性

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

相关文章

HTML 教程: HTML 元素

HTML DOM 参考手册:Body 对象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2293527.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Verilog基础(一):基础元素

verilog基础 我先说,看了肯定会忘,但是重要的是这个过程,我们知道了概念,知道了以后在哪里查询。语法都是术,通用的概念是术。所以如果你有相关的软件编程经验,那么其实开启这个学习之旅,你会感受到熟悉,也会感受到别致。 入门 - 如何开始 欢迎来到二进制的世界,数字…

Vue 图片引用方式详解:静态资源与动态路径访问

目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展&#xff08;图片不显示&#xff09; 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中&#x…

Qt网络相关

“ 所有生而孤独的人&#xff0c;葆有的天真 ” 为了⽀持跨平台, QT对⽹络编程的 API 也进⾏了重新封装。本章会上手一套基于QT的网络通信编写。 UDP Socket 在使用Qt进行网络编程前&#xff0c;需要在Qt项目中的.pro文件里添加对应的网络模块( network ). QT core gui net…

生成式AI安全最佳实践 - 抵御OWASP Top 10攻击 (上)

今天小李哥将开启全新的技术分享系列&#xff0c;为大家介绍生成式AI的安全解决方案设计方法和最佳实践。近年来&#xff0c;生成式 AI 安全市场正迅速发展。据 IDC 预测&#xff0c;到 2025 年全球 AI 安全解决方案市场规模将突破 200 亿美元&#xff0c;年复合增长率超过 30%…

pytorch基于FastText实现词嵌入

FastText 是 Facebook AI Research 提出的 改进版 Word2Vec&#xff0c;可以&#xff1a; ✅ 利用 n-grams 处理未登录词 比 Word2Vec 更快、更准确 适用于中文等形态丰富的语言 完整的 PyTorch FastText 代码&#xff08;基于中文语料&#xff09;&#xff0c;包含&#xff1…

Docker技术相关学习三

一、Docker镜像仓库管理 1.docker仓库&#xff1a;用于存储和分发docker镜像的集中式存储库&#xff0c;开发者可以将自己创建的镜像推送到仓库中也可以从仓库中拉取所需要的镜像。 2.docker仓库&#xff1a; 公有仓库&#xff08;docker hub&#xff09;&#xff1a;任何人都可…

在Mac mini M4上部署DeepSeek R1本地大模型

在Mac mini M4上部署DeepSeek R1本地大模型 安装ollama 本地部署&#xff0c;我们可以通过Ollama来进行安装 Ollama 官方版&#xff1a;【点击前往】 Web UI 控制端【点击安装】 如何在MacOS上更换Ollama的模型位置 默认安装时&#xff0c;OLLAMA_MODELS 位置在"~/.o…

Python 网络爬虫实战:从基础到高级爬取技术

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 网络爬虫&#xff08;Web Scraping&#xff09;是一种自动化技术&#xff0c;利用程序从网页中提取数据&#xff0c;广泛…

python学opencv|读取图像(五十四)使用cv2.blur()函数实现图像像素均值处理

【1】引言 前序学习进程中&#xff0c;对图像的操作均基于各个像素点上的BGR值不同而展开。 对于彩色图像&#xff0c;每个像素点上的BGR值为三个整数&#xff0c;因为是三通道图像&#xff1b;对于灰度图像&#xff0c;各个像素上的BGR值是一个整数&#xff0c;因为这是单通…

控件【QT】

文章目录 控件QWidgetenabledgeometrysetGeometry qrcwindowOpacityQPixmapfonttoolTipfocusPolicystyleSheetQPushButtonRadio ButtionCheck Box显示类控件QProgressBarcalendarWidget 控件 Qt中已经提供了很多内置的控件了(按钮,文本框,单选按钮,复选按钮&#xff0c;下拉框…

STM32 串口发送与接收

接线图 代码配置 根据上一章发送的代码配置&#xff0c;在GPIO配置的基础上需要再配置PA10引脚做RX接收&#xff0c;引脚模式可以选择浮空输入或者上拉输入&#xff0c;在USART配置串口模式里加上RX模式。 配置中断 //配置中断 USART_ITConfig(USART1, USART_IT_RXNE, ENABLE…

【Unity2D 2022:UI】创建滚动视图

一、创建Scroll View游戏对象 在Canvas画布下新建Scroll View游戏对象 二、为Content游戏对象添加Grid Layout Group&#xff08;网格布局组&#xff09;组件 选中Content游戏物体&#xff0c;点击Add Competent添加组件&#xff0c;搜索Grid Layout Group组件 三、调整Grid La…

Python sider-ai-api库 — 访问Claude、llama、ChatGPT、gemini、o1等大模型API

目前国内少有调用ChatGPT、Claude、Gemini等国外大模型API的库。 Python库sider_ai_api 提供了调用这些大模型的一个完整解决方案&#xff0c; 使得开发者能调用 sider.ai 的API&#xff0c;实现大模型的访问。 Sider是谷歌浏览器和Edge的插件&#xff0c;能调用ChatGPT、Clau…

密云生活的初体验

【】在《岁末随笔之碎碎念》里&#xff0c;我通告了自己搬新家的事情。乙巳年开始&#xff0c;我慢慢与大家分享自己买房装修以及在新家的居住体验等情况。 跳过买房装修的内容&#xff0c;今天先说说这三个月的生活体验。 【白河】 潮白河是海河水系五大河之一&#xff0c;贯穿…

Leetcode - 周赛434

目录 一、3432. 统计元素和差值为偶数的分区方案二、3433. 统计用户被提及情况三、3434. 子数组操作后的最大频率四、3435. 最短公共超序列的字母出现频率 一、3432. 统计元素和差值为偶数的分区方案 题目链接 本题可以直接模拟&#xff0c;这里再介绍一个数学做法&#xff0…

C32.【C++ Cont】静态实现双向链表及STL库的list

目录 1.知识回顾 2.静态实现演示图 3.静态实现代码 1.初始双向链表 2.头插 3.遍历链表 4.查找某个值 4.任意位置之后插入元素 5.任意位置之前插入元素 6.删除任意位置的元素 4.STL库的list 1.知识回顾 96.【C语言】数据结构之双向链表的初始化,尾插,打印和尾删 97.【C…

记录一次-Rancher通过UI-Create Custom- RKE2的BUG

一、下游集群 当你的下游集群使用Mysql外部数据库时&#xff0c;会报错&#xff1a; **他会检查ETCD。 但因为用的是Mysql外部数据库&#xff0c;这个就太奇怪了&#xff0c;而且这个检测不过&#xff0c;集群是咩办法被管理的。 二、如果不选择etcd,就选择控制面。 在rke2-…

51单片机入门_05_LED闪烁(常用的延时方法:软件延时、定时器延时;while循环;unsigned char 可以表示的数字是0~255)

本篇介绍编程实现LED灯闪烁&#xff0c;需要学到一些新的C语言知识。由于单片机执行的速度是非常快的&#xff0c;如果不进行延时的话&#xff0c;人眼是无法识别(停留时间要大于20ms)出LED灯是否在闪烁所以需要学习如何实现软件延时。另外IO口与一个字节位的数据对应关系。 文…

99.20 金融难点通俗解释:中药配方比喻马科维茨资产组合模型(MPT)

目录 0. 承前1. 核心知识点拆解2. 中药搭配比喻方案分析2.1 比喻的合理性 3. 通俗易懂的解释3.1 以中药房为例3.2 配方原理 4. 实际应用举例4.1 基础配方示例4.2 效果说明 5. 注意事项5.1 个性化配置5.2 定期调整 6. 总结7. 代码实现 0. 承前 本文主旨&#xff1a; 本文通过中…

6 [新一代Github投毒针对网络安全人员钓鱼]

0x01 前言 在Github上APT组织“海莲花”发布存在后门的提权BOF&#xff0c;通过该项目针对网络安全从业人员进行钓鱼。不过其实早在几年前就已经有人对Visual Studio项目恶意利用进行过研究&#xff0c;所以投毒的手法也不算是新的技术。但这次国内有大量的安全从业者转发该钓…