H5 튜토리얼

HTML5의 새로운 주요 태그에 대한 코드 공유

黄舟

Mar 30, 2017 pm 01:12 PM

HTML5소개

HTML5는 HTML4 이후의 차세대 HTML 표준 사양은 몇 가지 새로운 요소와 속성 을 제공합니다. 새로운 태그는 검색 엔진과 의미 분석에 도움이 되는 동시에 작은 화면에도 도움이 됩니다. 또한 몇 가지 새로운 기능을 제공합니다.

1. HTML4의 일부 오래된 요소가 취소되었습니다.

HTML5는 새로운 HTML 태그 사용과 같은 구조적 기능을 포함하여 XHTML2의 몇 가지 제안을 채택했습니다. Dialog, Aside, Figure 등을 사용하면 콘텐츠 제작자가 보다 의미론적으로 문서를 작성할 수 있습니다. 이전 개발자들은 이러한 기능을 구현할 때 일반적으로 p

2. >b 및 i 태그는 여전히 유지되지만 그 의미는 이전과 다릅니다. 이 태그의 의미는 굵게 또는 기울임꼴 스타일을 설정하는 대신 u, 글꼴, 가운데를 설정하는 것입니다.

새 양식을 추가하세요.

개체 를 포함하세요. >이메일 주소, 기타

객체에는 비라틴어 문자에 대한 지원이 추가되었습니다. HTML5에는 기계가 읽을 수 있는 태그로 콘텐츠에 주석을 추가하는 방법인 마이크로데이터도 도입되어 시맨틱 웹 작업이 더 쉬워졌습니다. 전반적으로 이러한 구조적 개선을 통해 콘텐츠 제작자는 관리하기 쉬운 웹 페이지를 검색 엔진 및 화면 읽기 소프트웨어에 더 친숙하게 만들 수 있습니다. 🎜>

다중미디어 개체는 더 이상 개체 또는 embedTag에 바인딩되지 않지만 비디오에는 비디오 태그가 있고 오디오에는 오디오 태그가 있습니다. 5. 로컬 저장소 추가된 브라우저. localStorage/sessionStorage/indexedDB

6. Canvas 객체

를 브라우저에 직접 그릴 수 있는 기능을 제공합니다. 브라우저에서 그래픽 작업

7. HTMLDocument에 대한 새로운

API

확장

및 HTMLElement 인터페이스는 새로운 API 확장을 제공합니다.

8. 새로운 구문

(1) DOCTYPE

HTML5의 HTML 구문에서는 브라우저가 다음에서 작동할 수 있도록 문서에서 DOCTYPE을 선언해야 합니다. 표준 모드 디스플레이 페이지. 선언은

<!DOCTYPE html>

입니다. 대소문자를 구분하지 않습니다. (2) 문자 집합

HTML5의 HTML 구문에는

문자열

의 인코딩 유형을 선언하는 세 가지 형식이 있습니다.

전송 수준에서 HTTP 인스턴스 헤더에 Content-Type을 설정합니다.

파일 시작 부분에 유니코드 BOM(Bype Order Mark)을 설정합니다. 이 문자는 파일의 인코딩 방법에 대한 서명을 제공합니다.

문서의 처음 1024바이트 사이의 내용에서 charset 속성이 있는 메타 요소를 사용하여 인코딩 방법을 선언합니다. 예: .

(3) MathML 및 SVG

HTML5의 HTML 구문에서는 MathML(Mathematical Markup Language) 및 SVG(Scalable
벡터 그래픽) 요소. 예를 들어, 매우 간단한 HTML 페이지에는 svg 요소로 그린 원이 포함되어 있습니다.
```
<!doctype html><title>SVG in text/html</title><p>
 A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></p>
```
section
요소의 내용을 함께 표시하여 해당 의미를 표현할 수 있다면 기사 요소로 정의할 수 있으며, 섹션 요소를 사용할 필요가 없습니다.

예:

<!DOCTYPE Html><html><head>
    <title>Graduation Ceremony Summer 2022</title></head><body>
    <h1 id="Graduation">Graduation</h1>
    <section>
        <h1 id="Ceremony">Ceremony</h1>
        <p>Opening Procession</p>
        <p>Speech by Validactorian</p>
        <p>Speech by Class President</p>
        <p>Presentation of Diplomas</p>
        <p>Closing Speech by Headmaster</p>
    </section>
    <section>
        <h1 id="Graduates">Graduates</h1>
        <ul>
            <li>Molly Carpenter</li>
            <li>Anastasia Luccio</li>
            <li>Ebenezar McCoy</li>
            <li>Karrin Murphy</li>
            <li>Thomas Raith</li>
            <li>Susan Rodriguez</li>
        </ul>
    </section></body></html>

article

article 元素代表文档、页面或应用程序中的所有“正文”部分，它所描述的内容应该是独立的、完整的、可以独自被外部引用的，可以是一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评论、一个独立的插件，或任何独立于上下文中其他部分的内容。

article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。一般来说，article会有标题部分。

当article内嵌article时，原则上来说，内部的article的内容是和外层的article内容相关的。例如，一篇博客中，包含用户提交的评论的article应该嵌套在包含博客文章article中。

<article>
    <h1 id="Safari-nbsp-nbsp-released">Safari 5 released</h1>
    <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p>
    <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>

nav

nav 元素是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以拥有多个nav元素，作为页面整体不同部分的导航。在nav元素中，一般以ul列表的形式来具体放置该组链接元素。

下面是w3c给出的一个示例代码：

<body>
    <h1 id="The-nbsp-Wiki-nbsp-Center-nbsp-Of-nbsp-Exampland">The Wiki Center Of Exampland</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/events">Current Events</a></li>
            ...more...        </ul>
    </nav>
    <article>
        <header>
            <h1 id="nbsp-Demos-nbsp-in-nbsp-Exampland"> Demos in Exampland</h1>
            <p>Written by A. N. Other.</p>
        </header>
        <nav>
            <ul>
                <li><a href="#public">Public demonstrations</a></li>
                <li><a href="#destroy">Demolitions</a></li>
                ...more...            </ul>
        </nav>
        <p>
            <section id="public">
                <h1 id="Public-nbsp-demonstrations">Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1 id="Demolitions">Demolitions</h1>
                <p>...more...</p>
            </section>
            ...more...        </p>
        <footer>
            <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
        </footer>
    </article>
    <footer>
        <p><small>© copyright 1998 Exampland Emperor</small></p>
    </footer></body>

aside

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他有别于主要内容的部分。

根据目前的规范，aside元素有两种使用方法：

被包含在article中作为主要内容的附属信息部分，其中的内容可以是当前文章有关的引用，词汇列表等。
在article外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏，其中的内容可以是友情链接、附属导航或广告单元等。

下面的代码示例综合了以上两种方法：

<body>
    <header>
        <h1 id="My-nbsp-Blog">My Blog</h1>
    </header>
    <article>
        <h1 id="My-nbsp-Blog-nbsp-Post">My Blog Post</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.</p>
        <aside>
            <h1 id="Glossary">Glossary</h1>
            <dl>
                <dt>Lorem</dt>
                <dd>ipsum dolor sit amet</dd>
            </dl>
        </aside>
    </article>
    <aside>
        <h2 id="Blogroll">Blogroll</h2>
        <ul>
            <li><a href="#">My Friend</a></li>
            <li><a href="#">My Other Friend</a></li>
            <li><a href="#">My Best Friend</a></li>
        </ul>
    </aside></body>

hgroup

hgroup 元素是将标题及其子标题进行分组的元素。hgroup元素通常对h1~h6元素进行分组，如将一个内容区块的标题及其子标题划为一组：

<hgroup>
  <h1 id="Welcome-nbsp-to-nbsp-my-nbsp-WWF">Welcome to my WWF</h1>
  <h2 id="For-nbsp-a-nbsp-living-nbsp-planet">For a living planet</h2></hgroup><p>The rest of the content...</p>

header

header 元素是一种具有引导作用和导航作用的结构元素，通常用来放置整个页面或页面内的一个article元素或section元素的标题，也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。

我们可以使用该标签来显示整个网页的标题部分：

<header>
    <h1 id="The-nbsp-most-nbsp-important-nbsp-heading-nbsp-on-nbsp-this-nbsp-page">The most important heading on this page</h1></header>

同一个页面内，每一个内容区块都可以有自己的header元素，例如：

<header> 
  <h1 id="The-nbsp-most-nbsp-important-nbsp-heading-nbsp-on-nbsp-this-nbsp-page">The most important heading on this page</h1></header><article> 
  <header>   
    <h1 id="Title-nbsp-of-nbsp-this-nbsp-article">Title of this article</h1> 
  </header> 
  <p>...Lorem Ipsum dolor set amet...</p></article>

footer 元素可以作为其上层父级内容区块或一个根区块的脚注。footer 元素通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。

过去(及目前)，我们通常使用类似下面这样的代码来写页面的页脚：

<p id="footer">
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul><p>

在HTML5中，我们可以不使用p，而用更加语义化的footer来写：

<footer>
  <ul>
     <li>copyright</li>
     <li>sitemap</li>
     <li>contact</li>
     <li>to top</li>
  </ul></footer>

在同一个页面中可以使用多个footer元素，即可以用作页面整体页脚，也可以作为一个内容区块的结尾，例如，我们可以将footer直接写在section或是article中：

<section>
   Section content appears here.   <footer>
      Footer information for section.   </footer></section><article>
   Article content appears here.   <footer>
      Footer information for article.   </footer></article>

address

address元素用来在文档中呈现联系信息，包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等；address不只是用来呈现电子邮箱或真实地址这样的“地址”概念，而应该包括与文档创建人相关的各类联系方式信息。

根据以上定义，我们可以使用下面的代码来展示一些志愿者的名字及主页链接：

The HTML5 Doctor is run by the following group of volunteers:<address>
  <a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,  
  <a href="http://html5doctor.com/author/richc">Rich Clark</a>,  
  <a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
  </address>

下面是另一个范例：

<footer>
  <p class="vcard"> by    <address class="author">
      <em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
    </address> on    <time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
  </p></footer>

video

通过

过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" 
height="344"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
  <param name="allowfullscreen" value="true" />
  <embed type="application/x-shockwave-flash" width="425" height="344"
  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
  </embed></object>

HTML5的方式：

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
  <p>
    Try this page in Safari  4! Or you can    
    <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>
    instead.  </p></video>

Autoplay: 用来设定视频是否在页面加载后自动播放。
Src: 为视频指定文件链接或下载路径，当浏览器不支持
Autobuffer: 用来设定视频是否自动缓冲；如果设定，那么页面加载之后，视频会自动下载缓冲，当用户点击播放按钮后，至少已经有一部分视频可以直接观看而无需等待了。
Poster: 用来为视频设置一个“相框默认图片”性质的背景图片；当视频无法正常加载播放时可以向用户呈现。
Controls: 用来设置是否为视频添加控制条，例如“播放”、“暂停”等；控制条的外观可以自定义。
Loop: 用来设置视频是否循环播放。
Width , Height: 用来控制视频的宽度与高度。

audio

HTML5中的新元素标签

src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：设置是否显示播放控制面板。

可以看到这些属性和

<audio src="elvis.ogg" controls autobuffer></audio>

根据定义规范，以下几种API方法是可以使用的：

play()：播放音频
pause()：暂停播放
canPlayType()：命令浏览器判断当前音频文件是否可以被播放
buffered()：设定文件需要缓冲部分的开始与结束时间点。

另外，我们可以使用元素标签来配合

<audio controls autobuffer>
  <source src="elvis.ogg" />
  <source src="elvis.mp3" />
  <!-- now include flash fall back --></audio>

datalist

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

<input list="browsers"><datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox"></datalist>

위 내용은 HTML5의 새로운 주요 태그에 대한 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

H5 코드 : 깨끗하고 효율적인 html5 작성Apr 20, 2025 am 12:06 AM

깨끗하고 효율적인 HTML5 코드를 작성하는 방법은 무엇입니까? 답은 태그, 구조화 된 코드, 성능 최적화 및 일반적인 실수를 피함으로써 일반적인 실수를 피하는 것입니다. 1. 코드 가독성 및 SEO 효과를 향상시키기 위해 시맨틱 태그 등을 사용하십시오. 2. 적절한 계약과 의견을 사용하여 코드를 구성하고 읽을 수 있도록하십시오. 3. CDN 및 압축 코드를 사용하여 불필요한 태그를 줄임으로써 성능을 최적화합니다. 4. 태그가 닫히지 않은 것과 같은 일반적인 실수를 피하고 코드의 유효성을 확인하십시오.

H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

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

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

VSCode Windows 64비트 다운로드

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

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

Dreamweaver Mac版

시각적 웹 개발 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는