html5 콘텐츠 정리

小云云원래의: 2017-12-08 09:07:111661검색

이 기사에서는 모든 사람에게 html5 구성의 내용을 소개하겠습니다. 기본적으로 HTML 문서의 형식은 브라우저 창에 표시되는 문서 내용의 형식과 관련이 없습니다. 예를 들어 브라우저는 여러 개의 연속된 공백 문자를 하나의 공백으로 변환하고 줄 바꿈을 무시합니다. HTML은 콘텐츠 구성, 표시된 콘텐츠 분할, 사전 형식 콘텐츠 등을 제공하는 방법을 제공합니다.

문단 만들기

HTML은 텍스트에 입력하는 캐리지 리턴 및 기타 추가 공백을 무시합니다. 웹 페이지의 새 단락은 일반적으로 하나 이상의 관련 문장을 포함합니다. 요점이나 주장을 중심으로 전개되거나 여러 주장 사이에 몇 가지 공통 주제가 있습니다.

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

글꼴, 글꼴 크기, 색상 등을 포함하여 단락에 스타일을 추가할 수 있습니다.

p 요소

p 요소에는 특정 의미가 없습니다. 적절한 요소를 사용할 수 없는 경우 이 요소를 사용하여 콘텐츠를 구조화하고 의미를 부여할 수 있습니다. 해당 의미는 일반적으로 class 또는 id 속성을 통해 지정됩니다. .

그러나 p 요소를 최후의 수단으로 사용하지 않는 것이 가장 좋습니다. 의미상 중요한 요소에 우선순위를 부여해야 합니다.

사전 서식이 지정된 콘텐츠

브라우저는 모든 추가 캐리지 리턴과 공백을 압축하고 창 크기에 따라 자동으로 줄 바꿈합니다. pre 요소는 브라우저가 콘텐츠를 처리하는 방식을 변경하여 공백 문자가 병합되는 것을 방지하여 소스 문서의 서식이 유지되도록 할 수 있습니다. 그러나 문서의 원래 형식을 유지해야 하는 경우가 아니면 이 요소를 사용하지 않는 것이 가장 좋습니다. 요소와 스타일을 사용하여 렌더링 결과를 제어하는 메커니즘의 유연성이 감소하기 때문입니다.

pre 요소는 일반적으로 코드 예제를 표시하기 위해 code 요소와 함께 사용됩니다. 프로그래밍 언어의 형식 지정이 일반적으로 중요하기 때문입니다.

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

다른 곳의 콘텐츠 인용

blockquote 요소는 q 요소와 유사하게 다른 곳에서 인용된 콘텐츠를 나타내지만 일반적으로 다음과 같은 용도로 사용됩니다. 내용이 많은 장면을 인용해 보세요. 이 요소의 cite 속성을 사용하여 인용되는 콘텐츠의 출처를 지정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

79f71d63376099874f04fcbca2c2fe6fThe ">http://en.wikipedia.org/wiki/Apple">사과는5db79b134e9f6b82c0b36e0489ee08ed 작고 낙엽이 있는 나무를 형성합니다. ......1aee16100a65d522474e4de7ff568f4a

브라우저에 주의하세요. 인용문 요소의 콘텐츠 형식은 무시되며, 인용문 텍스트는 기본적으로 들여쓰기됩니다. 인용문에 구조를 설정하려면 p 또는 hr과 같은 일부 구성 요소를 사용할 수 있습니다.

브라우저는 q 요소에 자동으로 텍스트를 추가하지만 효과는 브라우저마다 다릅니다. 다음은 q 요소를 사용하는 예입니다.

주제 구분 추가

hr 요소는 단락 수준의 주제 구분을 나타냅니다. HTML5에서 hr 요소는 다른 관련 주제로의 전환을 나타내며, 사용자 정의 스타일은 페이지를 가로지르는 직선입니다. 위의 예에서는 일부 hr 요소를 blockquote 요소에 추가하여 구성합니다. 콘텐츠를 목록으로 구성

HTML의 목록 유형에는 순서가 있는 목록, 순서가 없는 목록 및 설명 목록이 포함됩니다.

1) 순서가 있는 목록, ol은 상위 요소, li는 목록 항목입니다.

2 ) 순서가 지정되지 않은 목록, ul은 상위 요소, li는 목록 항목

3) 설명 목록, dl은 상위 요소, dt와 dd는 각각 dl의 용어와 설명을 나타냅니다.

또한 사용자는 정의할 수도 있습니다. . 자체 목록. Ordered list

ol 요소는 순서가 지정된 목록을 나타내며 목록 항목은 li 요소로 표시됩니다.

1) start: 목록의 첫 번째 항목 숫자 값, 첫 번째 항목의 기본 숫자는 1입니다.

2) 유형: 다음을 포함하여 각 목록 항목 옆에 표시되는 숫자 유형을 설정합니다.

l: 10진수(기본값), 1, 2, 3, 4

a: 라틴 소문자, a, b, c, d

A: 라틴 대문자, A, B, C, D

i: 로마 숫자 소문자, i, ii, iii , iv

I: 대문자 로마 숫자, I, II, III, IV

3) 역순: 목록 번호는 내림차순이며 일부 브라우저는

순서 없는 목록

ul 요소를 지원하며, li 요소는 목록 항목을 나타냅니다. 순서가 지정되지 않은 목록의 각 항목 앞에 글머리 기호가 표시됩니다. 기호의 스타일은 CSS 속성 list-style-type을 사용하여 제어할 수 있습니다. 목록의 항목입니다. ul 및 ol과 함께 사용할 수 있으며 목록 항목의 일련 번호를 나타내는 value 속성을 포함할 수 있습니다.

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

설명 목록

定义说明列表需要用到三个元素：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>

自定义列表

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>

使用插图

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>

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

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

html5 콘텐츠 정리

관련 기사