HTML基本标签
HTML H1-H6
h1
元素表示标题。HTML定义了标题元素的层次结构,其中 h1
是排名最高的。
其它标题元素是 h2
, h3
到 h6
。
相同排名的标题会分解内容,以便每个主题都在其自己的部分。
下面的代码使用h1 到 h3元素。
<!DOCTYPE HTML> <html> <body> <h1>This is h1.</h1> <p>I like XML.</p> <h2>Additional h2</h2> <p>I like XML.</p> <h3>More information</h3> <p>I like XML.</p> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <h1>Basic Text Formatting</h1> <p>The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language rather than a programming language. </p> <h2>White Space and Flow</h2> <p>HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.</p> <h2>Creating Headings</h2> <p> Web browsers can also refer to Cascading Style Sheets (CSS) to define the look and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentational HTML.</p> </body> </html>点击查看实例
组标题与hgroup
hgroup
元素允许您处理多个标头元素作为单个项目,而不会影响HTML文档的大纲。
以下代码使用 hgroup
元素。
<!DOCTYPE HTML> <html> <body> <hgroup> <h1>H1</h1> <h2>H2</h2> </hgroup> <h2>Additional</h2> <h3>More information</h3> <h1>H1</h1> <p>This is a test.</p> <h2>H2</h2> This is a test. <h3>H3</h3> </body> </html>点击查看实例
HTML线
hr
元素表示水平规则。一条横跨页面的线。
以下代码使用 hr
元素。
<!DOCTYPE HTML> <html> <body> <p> This is a test. </p> <hr/> <p>This is another test. </p> </body> </html>点击查看实例
div结构
div
元素不具有特定的含义。 div
元素创建结构。
div
元素是 span
元素的 block
。块元素开始新行,而行内元素保持在同一行。
以下代码使用 div
元素。
<!DOCTYPE HTML> <html> <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
元素本身没有意义。
您将使用它将一个全局属性应用于内容区域。
以下代码显示了与类属性一起使用的 span
元素。
<!DOCTYPE HTML> <html> <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
元素表示一个段落。
段落是包含一个或多个相关句子的文本块。
以下代码显示如何使用 p
元素到示例内容。
<!DOCTYPE HTML> <html> <body> <p> I code in CSS. </p> <p> HTML is good. </p> <p> This is the third paragraph. </p> </body> </html>点击查看实例
pre - 预格式化内容
在 pre
元素中,空格不会折叠,并保留格式。当内容的一部分的原始格式是重要的时,这可能是有用的。
当您使用代码元素时, pre
元素可能特别有用。
在编程语言中的格式化,例如,通常是显着的。
<!DOCTYPE HTML> <html> <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
元素表示从另一个来源引用的块内容。
这个元素类似于 q
元素,但通常适用于较大数量的引用内容。
可以使用 cite
属性以提供内容的原始源的URL。
以下代码使用 blockquote
元素。
<!DOCTYPE HTML> <html> <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
元素表示从另一个来源引用的内容。
q
元素的样式约定是以使用引号将引用的文本括起来。
以下代码使用 q
元素。
<!DOCTYPE HTML> <html> <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>点击查看实例