零基础学习HTML(9)——q标签、blockquote标签、cite标签、abbr标签、dfn标签、address标签、ruby标签、bdo标签

Dragon水魅

发布于 2026-01-23 14:57:28

850

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

q标签：https://man.ilovefishc.com/pageHTML5/q.html blockquote标签：https://man.ilovefishc.com/pageHTML5/blockquote.html cite标签：https://man.ilovefishc.com/pageHTML5/cite.html abbr标签：https://man.ilovefishc.com/pageHTML5/abbr.html dfn标签：https://man.ilovefishc.com/pageHTML5/dfn.html address标签：https://man.ilovefishc.com/pageHTML5/address.html ruby标签：https://man.ilovefishc.com/pageHTML5/ruby.html bdo标签：https://man.ilovefishc.com/pageHTML5/bdo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--q标签为引用内容加上双引号-->
	<p>孔子有云：<q>学而不思则罔，思而不学则殆。</q></p>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">

</head>
<body>
	<p>《中国合伙人》有几句台词很好：</p>
	<!--blockquote标签将引用内容进行缩进-->
	<blockquote>
		<p>梦想是什么？梦想就是一种让你感到坚持，就是幸福的东西。</p>
		<p>我们只有在失败中寻找胜利，在绝望中寻求希望。</p>
		<p>我们改变不了世界，是世界改变了我们。</p>
		<p>男人的梦想最初都是从女人开始的。</p>
	</blockquote>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">

</head>
<body>
	<!--abbr标签默认斜体，具体可CSS定制-->
	<p><cite>《中国合伙人》</cite>有几句台词很好：</p>
	<blockquote>
		<p>梦想是什么？梦想就是一种让你感到坚持，就是幸福的东西。</p>
		<p>我们只有在失败中寻找胜利，在绝望中寻求希望。</p>
		<p>我们改变不了世界，是世界改变了我们。</p>
		<p>男人的梦想最初都是从女人开始的。</p>
	</blockquote>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">

</head>
<body>
	<!--abbr标签可定义缩写，配合title属性可完整展示-->
	<p><abbr title="鱼C工作室">FishC.com</abbr> was founded in 2010.</p>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">

</head>
<body>
	<!--dfn标签用于表示术语-->
	<p><dfn>HTML</dfn>是一门用于创建网页的标准标记语言。</p>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">

</head>
<body>
	<!--address用于定义联系信息-->
	<address>
		<strong>联系我们</strong><br>
		邮箱：<a href="mailto:1160951354@qq.com">1160951354@qq.com</a><br>
		电话：52444425<br>
	</address>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--ruby标签用于定义注音符号-->
	<!--rt元素用来标记注音符号，rp元素则用来标记当浏览器不支持ruby元素时所显示的内容-->
	<ruby>魑<rp>（</rp><rt>chī</rt><rp>）</rp></ruby>
	<ruby>魅<rp>（</rp><rt>mèi</rt><rp>）</rp></ruby>
	<ruby>魍<rp>（</rp><rt>wǎng</rt><rp>）</rp></ruby>
	<ruby>魉<rp>（</rp><rt>liǎng</rt><rp>）</rp></ruby>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十一节课</title>
	<meta name="viewport" content="width=device-width, intial-scale=1.0">
	<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
	<meta name="description" content="《零基础入门学习Web开发》案例演示">
	<meta name="author" content="小甲鱼">
</head>
<body>
	<!--bdo标签修改默认的文本方向-->
	<bdo dir="rtl">
		<ruby>魑<rp>（</rp><rt>chī</rt><rp>）</rp></ruby>
		<ruby>魅<rp>（</rp><rt>mèi</rt><rp>）</rp></ruby>
		<ruby>魍<rp>（</rp><rt>wǎng</rt><rp>）</rp></ruby>
		<ruby>魉<rp>（</rp><rt>liǎng</rt><rp>）</rp></ruby>
	</bdo>
</html>