免費AI編程助手
HTML 基本標簽
HTML基本標簽
HTML H1-H6
h1 元素表示標題。HTML 定義了標題元素的層次結(jié)構(gòu)，其中 h1 是排名最高的。
其它標題元素是 h2 ， h3 到 h6 。
相同排名的標題會分解內(nèi)容，以便每個主題都在其自己的部分。
下面的代碼使用 h1 到 h3 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>組標題與 hgroup
hgroup 元素允許您處理多個標頭元素作為單個項目，而不會影響 HTML 文檔的大綱。
以下代碼使用 hgroup 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<hgroup>
<h1>歡迎來到W3Cschool</h1>
<h2>http://www.o2fo.com/</h2>
</hgroup>
<p>剩下的內(nèi)容</p>
</body>
</html>HTML線
hr 元素表示水平規(guī)則。一條橫跨頁面的線。
以下代碼使用 hr 元素。
<!DOCTYPE html>
<html lang="en">
<body>
<p>
This is a test.
</p>
<hr/>
<p>This is another test.
</p>
</body>
</html>div結(jié)構(gòu)
div 元素不具有特定的含義。 div 元素創(chuàng)建結(jié)構(gòu)。
div 元素是 span 元素的 block 。塊元素開始新行，而行內(nèi)元素保持在同一行。
以下代碼使用 div 元素。
<!DOCTYPE html>
<html lang="en">
<style>
.favorites {
background: grey;
color: white;
border: thin solid black;
padding: 0.2em;
}
</style>
</head>
<body>
<div class="favorites">
<p>This is a test.</p>
<p>This is another test.</p>
</div>
<p>This is a test.</p>
</body>
</html>span元素
span 元素本身沒有意義。
您將使用它將一個全局屬性應(yīng)用于內(nèi)容區(qū)域。
以下代碼顯示了與類屬性一起使用的 span 元素。
<!DOCTYPE html>
<html lang="en">
<style>
.myClass {
border: thin solid black;
padding: 1px;
}
</style>
</head>
<body>
I like <span class="myClass">CSS</span> and
<span class="myClass">HTML</span>.
</body>
</html>HTML段落
p 元素表示一個段落。
段落是包含一個或多個相關(guān)句子的文本塊。
以下代碼顯示如何使用 p 元素到示例內(nèi)容。
<!DOCTYPE html>
<html lang="en">
<body>
<p>
I code in CSS.
</p>
<p>
HTML is good.
</p>
<p>
This is the third paragraph.
</p>
</body>
</html>pre - 預(yù)格式化內(nèi)容
在 pre 元素中，空格不會折疊，并保留格式。當內(nèi)容的一部分的原始格式是重要的時，這可能是有用的。
當您使用代碼元素時， pre 元素可能特別有用。
在編程語言中的格式化，例如，通常是顯著的。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<pre>
<code>
var fruits = ["XML", "HTML", "CSS", "Java"];
for (var i = 0; i < fruits.length; i++) {
document.writeln("I like " + fruits[i]);
}
</code>
</pre>
</body>
</html>HTML引用
blockquote 元素表示從另一個來源引用的塊內(nèi)容。
這個元素類似于 q 元素，但通常適用于較大數(shù)量的引用內(nèi)容。
可以使用 cite 屬性以提供內(nèi)容的原始源的URL。
以下代碼使用 blockquote 元素。
<!DOCTYPE html>
<html lang="en">
<body>
<blockquote cite="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">
Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a markup language.
</blockquote>
</body>
</html>例子
q 元素表示從另一個來源引用的內(nèi)容。
q 元素的樣式約定是以使用引號將引用的文本括起來。
以下代碼使用 q 元素。
<!DOCTYPE html>
<html lang="en">
<body>
<p>
<q cite="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">
The <dfn title="Cascading Style Sheets">CSS</dfn>
is a style sheet language used for describing the
look and formatting of a document written in a markup language.
</q>
</p>
</body>
</html>
更多建議：