html5 콘텐츠 정리-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5 콘텐츠 정리

小云云

Dec 08, 2017 am 09:07 AM

h5html5정리하다

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

문단 만들기

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

<body>  
    <h1 id="Antoni-nbsp-Gaudí">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 속성을 사용하여 인용되는 콘텐츠의 출처를 지정할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

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

브라우저에 주의하세요. 인용문 요소의 콘텐츠 형식은 무시되며, 인용문 텍스트는 기본적으로 들여쓰기됩니다. 인용문에 구조를 설정하려면 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。

관련 기사

H5 : 최신 버전의 HTML 탐색May 03, 2025 am 12:14 AM

html5isamajorrevisionof thehtml thatrevolutions webdevelopments and capabilitiess.1) itenhancescodereadabilitys 및 and .2) html5enablestriCher, Interactive Experiences, Withoutplugs를 허용합니다

기본 이외 : H5 코드의 고급 기술May 02, 2025 am 12:03 AM

H5에 대한 고급 팁에는 다음이 포함됩니다. 1. 복잡한 그래픽 사용, 2. 웹 워크를 사용하여 성능 향상, 3. WebStorage, 4. 응답 디자인 구현, 5. WebRTC를 사용하여 실시간 커뮤니케이션을 달성하기 위해, 6. 성능 최적화 및 모범 사례를 수행하십시오. 이 팁은 개발자가보다 역동적이고 대화식 및 효율적인 웹 응용 프로그램을 구축 할 수 있도록 도와줍니다.

H5 : 웹 컨텐츠 및 디자인의 미래May 01, 2025 am 12:12 AM

H5 (HTML5)는 새로운 요소와 API를 통해 웹 컨텐츠와 디자인을 개선합니다. 1) H5는 시맨틱 태깅 및 멀티미디어 지원을 향상시킵니다. 2) 웹 디자인을 풍부하게하는 캔버스 및 SVG를 소개합니다. 3) H5는 새로운 태그와 API를 통해 HTML 기능을 확장하여 작동합니다. 4) 기본 사용에는이를 사용하여 그래픽 생성이 포함되며, 고급 사용량은 WebStorageapi와 관련이 있습니다. 5) 개발자는 브라우저 호환성 및 성능 최적화에주의를 기울여야합니다.

H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.