html5 organize content-H5 Tutorial-php.cn

In this article, we will introduce the content of html5 organization to everyone. We hope it will be helpful to everyone. By default, the format of an HTML document is irrelevant to the format of the document content displayed in the browser window. For example, the browser will convert several consecutive whitespace characters into one space and ignore line breaks. HTML provides a way to organize content, segment displayed content, pre-format content, etc.

Create paragraphs

HTML will ignore carriage returns and other extra spaces you enter in the text. New paragraphs are identified using the p element. A paragraph contains one or more related sentences, usually surrounding a point of view or argument, or there are some common themes among multiple arguments.

<body>  
    <h1>Antoni Gaudí</h1>  
    <p>Many tourists are drawn to Barcelona  
       to see Antoni Gaudí&#39;s incredible  
       architecture.</p>  
    <p>Barcelona celebrated the 150th  
       anniversary of Gaudí&#39;s birth in  
       2002.</p>  
</body>

Copy after login

You can add styles to paragraphs, including font, font size, color, etc.

p element

The p element has no specific meaning. If no appropriate element is available, you can use this element to structure and give content Its meaning, its meaning is usually specified through the class or id attribute.

But note that it is best not to use p elements as a last resort. Priority should be given to elements with semantic importance.

Pre-formatted content

The browser will compress all extra carriage returns and spaces and automatically wrap lines according to the size of the window. The pre element can change the way the browser handles content, preventing whitespace characters from being merged so that the formatting in the source document is preserved. Note, however, that it is best not to use this element unless it is necessary to preserve the original formatting of the document, as it reduces the flexibility of the mechanism to control the rendering results through the use of elements and styles. The

pre element is usually used in conjunction with the code element to display code examples, because formatting in programming languages is usually important.

<p>Add this to your style sheet if you want  
  to display a dotted border underneath the  
  <code>abbr</code> element whenever it has  
  a <code>title</code> attribute.</p>  
<pre class="brush:php;toolbar:false">  
    <code>  
        abbr[title] {  
            border-bottom: 1px dotted #000;  
        }  
    </code>

Copy after login

Quoting content from elsewhere

The blockquote element represents a quote from elsewhere Content, similar to the q element (used for short quotes, cannot span lines), but is usually used in scenarios where there is a lot of content to be quoted. The cite attribute of this element can be used to specify the source of the content being quoted.

##Copy code

The code is as follows:

The">http://en.wikipedia.org/wiki/Apple"> ;The apple forms a tree that is small and deciduous, ......

Note that the browser will ignore the format of the content in the blockquote element and default to blockquote text To create structure in a quote, use some organizational elements such as p or hr.

Browsers will automatically add language-specific quotes to the text in the q element, but this varies from browser to browser. The effect will be different. Here is an example of using the q element

<p>She tried again, this time in French:  
<q lang="fr">Avez-vous lu le livre 
<cite lang="en">High Tide in Tucson</cite> 
de Kingsolver? C&#39;est inspirational.</q></p>

Copy after login

##Add topic separation

# The ##hr element represents a paragraph-level topic separation. In HTML5, the hr element represents a transition to another related topic, and the custom style is a straight line across the page. ##The above example adds some hr elements to the blockquote element to form a certain structure

##Organize the content into a list

The types of lists in HTML include ordered lists, unordered lists and description lists

1) Ordered lists, ol is the parent element, and li is the list item;

2 ) Unordered list, ul is the parent element, li is the list item; 3) Description list, dl is the parent element, dt and dd represent the terms and descriptions in dl respectively.

In. In addition, users can also define their own lists.

Ordered list

ol element represents an ordered list, and list items are represented by li elements.

<blockquote cite="http://en.wikipedia.org/wiki/Apple">  
主题1  
<hr>  
主题2  
<hr>  
......  
</blockquote>

Copy after login

ol element supports the following attributes: 1) start: Set the number value of the first item in the list. The default number of the first item is 1;

2) type: Set the type of number displayed next to each list item, including:

l: Decimal number (default), 1,2,3,4

a : Lowercase Latin letters, a,b,c,d

A: Uppercase Latin letters, A,B,C,D

i: Lowercase Roman numerals, i,ii,iii,iv

I: Uppercase Roman numerals, I, II, III, IV

3) reversed: List numbers are in descending order, some browsers support

Unordered list

The ul element represents an unordered list, and the li element represents the list item.

<body>  
    I like apples and oranges.  
    I also like:  
    <ol>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ol>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

Copy after login

A bullet will be displayed before each item in the unordered list. The style of the symbol can be controlled using the CSS attribute list-style-type.

Attributes of the li element

The li element represents the items in the list. It can be used with ul and ol, and can contain the value attribute to represent the serial number of the list item.

<body>  
    I like apples and oranges.  
    I also like:  
    <ul>  
        <li>bananas</li>  
        <li>mangoes</li>  
        <li>cherries</li>  
        <li>plums</li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlisthtml">here</a>  
</body>

Copy after login

Description list

定义说明列表需要用到三个元素：dl、dt和dd元素，这些元素没有局部属性：

1）dl：表示说明列表；

2）dt：表示说明列表中的术语；

3）dd：表示说明列表中的定义。

<body>  
    I like apples and oranges.  
    I also like:  
    <dl>  
        <dt>Apple</dt>  
            <dd>The apple is the pomaceous fruit of the apple tree</dd>  
            <dd><i>Malus domestica</i></dd>  
        <dt>Banana</dt>  
            <dd>The banana is the parthenocarpic fruit of the banana tree</dd>  
            <dd><i>Musa acuminata</i></dd>  
        <dt>Cherry</dt>  
            <dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>  
    </dl>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

Copy after login

自定义列表

HTML中的ul元素结合CSS中的counter特性和:before选择器，可以生成复杂的列表。下面是一个例子：

<head>  
    ......  
    <style>  
        body{  
            counter-reset: OuterItemCount 5 InnerItemCount;  
        }  
        #outerlist > li:before {  
         content: counter(OuterItemCount)". ";  
            counter-increment: OuterItemCount 2;  
        }  
        ulinnerlist > li:before {  
            content: counter(InnerItemCount, lower-alpha) ". ";  
            counter-increment: InnerItemCount;  
        }  
    </style>  
</head>  
<body>  
    I like apples and oranges.  
    I also like:  
    <ul id="outerlist" style="list-style-type: none">  
        <li>bananas</li>  
        <li>mangoes, including:</li>  
            <ul class="innerlist">  
                <li>Haden mangoes</li>  
                <li>Keitt mangoes</li>  
                <li>Kent mangoes</li>  
            </ul>  
        <li>cherries</li>  
        <li>plums, including:  
            <ul class="innerlist">  
                <li>Elephant Heart plums</li>  
                <li>Stanley plums</li>  
                <li>Seneca plums</li>  
            </ul>  
        </li>  
        <li>peaches</li>  
        <li>grapes</li>  
    </ul>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

Copy after login

使用插图

HTML5对插图的定义为：一个独立的内容单元，可带标题，通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的含义。

HTML使用figure元素插入图表、照片、图形、插图、代码片段等，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。

<body>  
    I like apples and oranges.  
    <figure>  
        <figcaption>Listing 23. Using the code element</figcaption>  
        <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>document.writen("I like " + fruits.length + " fruits");  
        </code>  
    </figure>  
    You can see other fruits I like <a href="fruitlist.html">here</a>.  
</body>

Copy after login

figure元素生成了一个将code元素裹在其中的插图，并用figcaption元素为其添加了一个标题。注意figcaption元素必须是figure元素的第一个或最后一个子元素。

figure元素可以包含多个内容块，但只能包含一个figcaption。