집 > 기사 > 웹 프론트엔드 > HTML5의 새로운 주요 태그에 대한 코드 공유

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

黄舟원래의: 2017-03-30 13:12:252529검색

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 속성이 있는 메타 요소를 사용하여 인코딩 방법을 선언합니다. 예: 09477266eebbc8a01f42387ae29e71dd.

(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>Graduation</h1>
    <section>
        <h1>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>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>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>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> 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>Public demonstrations</h1>
                <p> ...more...</p>
            </section>
            <section id="destroy">
                <h1>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>My Blog</h1>
    </header>
    <article>
        <h1>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>Glossary</h1>
            <dl>
                <dt>Lorem</dt>
                <dd>ipsum dolor sit amet</dd>
            </dl>
        </aside>
    </article>
    <aside>
        <h2>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>Welcome to my WWF</h1>
  <h2>For a living planet</h2></hgroup><p>The rest of the content...</p>

header

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

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

<header>
    <h1>The most important heading on this page</h1></header>

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

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

footer

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

通过39000f942b2545a5315c57fa3276f220标签，我们可以抛弃最近不怎么讨好的Flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。

过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有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>

39000f942b2545a5315c57fa3276f220标签有如下几个常用属性：

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

audio

HTML5中的新元素标签b97864c2e0ef2353a16c4d64c7734e92是被大家等待已久的，它有原生支持音频播放的功能，而不需要浏览器安装额外的扩展

b97864c2e0ef2353a16c4d64c7734e92元素标签的一些常用属性：

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

可以看到这些属性和39000f942b2545a5315c57fa3276f220元素标签的属性很类似。下面我们来看一个代码范例：

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

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

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

另外，我们可以使用e02da388656c3265154666b7c71a8ddc元素标签来配合b97864c2e0ef2353a16c4d64c7734e92；e02da388656c3265154666b7c71a8ddc用来指定多个音频文件，如果当前浏览器不支持第一个文件，那么b97864c2e0ef2353a16c4d64c7734e92会自动尝试播放下面一个e02da388656c3265154666b7c71a8ddc中指定的文件；我们还可以在它们后面加上目前常规的d8e2720730be5ddc9c2a3782839e8eb6代码来加载Flash播放器，作为后备方案；范例如下：

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 새 레이블 Canvas에 대한 자세한 소개다음 기사：HTML5 새 레이블 Canvas에 대한 자세한 소개