집 >웹 프론트엔드 >H5 튜토리얼 >h5 정리된 콘텐츠를 사용하는 방법

h5 정리된 콘텐츠를 사용하는 방법

php中世界最好的语言원래의: 2018-01-12 09:49:062308검색

이번에는 h5 정리 콘텐츠 사용법, h5 정리 콘텐츠 사용법을 알려드리겠습니다. h5를 사용하여 콘텐츠를 정리할 때 주의사항은 무엇인가요? 아래는 실제 사례입니다. 살펴보겠습니다.

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

문단 만들기

HTML은 텍스트에 입력하는 캐리지 리턴 및 기타 추가 공백을 무시합니다. 웹 페이지의 새 단락은 p 요소로 식별되며 일반적으로 A 점 또는 인수를 둘러싸는 하나 이상의 관련 문장을 포함합니다. , 또는 공통 주제를 공유하는 여러 주장.

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

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

div 요소

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

그러나 div 요소를 최후의 수단으로 사용하지 않도록 주의하세요. 의미상 중요한 요소에 우선순위를 두어야 합니다.

사전 형식화된 콘텐츠

브라우저는 모든 추가 캐리지 리턴과 공백을 압축하고 창 크기에 따라 자동으로 줄 바꿈합니다. 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 속성을 사용하여 인용되는 콘텐츠의 출처를 지정할 수 있습니다.

주제 구분 추가

hr 요소는 단락 수준의 주제 구분을 나타냅니다. HTML5에서 hr 요소는 다른 관련 주제로의 전환을 나타내며 사용자 정의 스타일은 페이지를 가로지르는 직선입니다.

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

브라우저에서는 q 요소의 텍스트에 언어별 따옴표를 자동으로 추가하지만 브라우저에 따라 효과가 달라집니다. 다음은 q 요소를 사용한 예입니다.

<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>
<blockquote cite="http://en.wikipedia.org/wiki/Apple">

Theme 1

f32b48428a809b51f04d3228cdf461fa

Theme 2

f32b48428a809b51f04d3228cdf461fa

...

1aee16100a65d522474e4de7ff568f4a

위의 예는 특정 형식의 hr 요소를 추가합니다. 구조.

콘텐츠를 목록으로 구성

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

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

2) 순서가 없는 목록, ul은 상위 요소, li는 목록 항목입니다.

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

이 외에도 사용자는 자신의 목록을 정의할 수도 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!