HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 의미 요소

의미 요소는 이름을 보면 그 요소가 나타내는 내용의 의미를 알 수 있습니다. 예를 들어, <article> 문서에 대해, <header> 페이지 머리, <catalog> 목차, <content> 내용, <footer> 푸터 등의 정보가 있습니다.

의미 요소는 무엇인가요?

의미 요소는 브라우저와 개발자에게 의미를 명확히 설명할 수 있습니다.

의미 없는 요소 예시: <div> 및 <span> - 내용을 고려하지 않아도 됩니다.

의미 요소 예시: <form>, <table>, and <img> - 그 내용을 명확하게 정의합니다.

브라우저 지원

Internet Explorer 9+, Firefox, Chrome, Safari 및 Opera는 의미 요소를 지원합니다.

참고: Internet Explorer 8 및 이전 버전에서는 이 요소를 지원하지 않지만, 문서 하단에 호환 가능한 해결책을 제공합니다.

HTML5중국에서 새로운 의미 요소

많은 기존 웹사이트는 다음과 같은 HTML 코드를 포함하고 있습니다:

<div id="nav">, <div>, 또는 <div id="footer">, 서브메뉴 링크, 헤더, 그리고 푸터를 지정하기 위해 사용됩니다.

HTML5 웹 페이지의 다른 부분을 명확히 하는 새로운 의미 요소를 제공합니다:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 <section> 요소

《section》 태그는 문서 내의 섹션(섹션, 구역)을 정의합니다. 예를 들어, 장, 헤더, 푸터 또는 문서 내 다른 부분.

W를 기준으로}}3C HTML5문서: 　section은 콘텐츠 그룹 및 제목을 포함합니다.

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>이는 새로운 HTML 언어 버전으로, 새로운 요소, 속성 및 행동을 포함하고 있으며, 웹 사이트 및 애플리케이션을 더 다양하고 강력하게 만들 수 있는 기술을 포함하고 있습니다. 이 기술은 일반적으로 HTML로 알려져 있습니다.5　과 그의 친구들, 일반적으로 HTML로 알려져 있습니다5입니다./p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>CSS 진화의 주요 변화는 W3C는 CSS를3를 여러 개의 모듈로 나눕니다. 브라우저 제조업체는 CSS 리듬에 따라 빠르게 혁신하므로, 모듈 방법을 통해 CSS를 사용하면 CSS3규범에서의 요소는 다른 속도로 발전할 수 있습니다. 왜냐하면 다른 브라우저 제조업체는 주어진 특성을 지원하기 때문입니다. 그러나 다른 브라우저는 다른 시간에 다른 특성을 지원하므로, 이는 크로스 브라우저 개발을 복잡하게 만듭니다. </p>
</section>
</body>
</html>

测试看看 ‹/›

HTML5 <article> 요소

<article> 태그는 독립적인 내용을 정의합니다.

<article> 요소 사용 예제:

포럼 포스트
블로그 포스트
뉴스 스토리
댓글

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3CSS(층叠 스타일 시트) 기술의 업그레이드 버전으로,1999년에 제정되었습니다.2001年5月23일W3CSS를 완료했습니다3의 작업 초안,
주로 박스 모델, 목록 모듈, 슈퍼 링크 방식, 언어 모듈, 배경 및 경계선, 텍스트 효과, 다중 열 레이아웃 등 모듈을 포함합니다. </p>
</article>
</body>
</html>

测试看看 ‹/›

HTML5 <nav> 요소

<nav> 태그는 탐색 링크 부분을 정의합니다.

<nav> 요소는 페이지의 탐색 링크 부분 영역을 정의합니다. 그러나, 모든 링크가 <nav> 요소에 포함되지 않아야 합니다!

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a　href="/html/">HTML</a>　|
　　　　<a　href="/CSS/">CSS</a>　|
　　　　<a　href="/제이스크립트/">JavaScript</a>　|
　　　　<a　href="/제이쿼리/">jQuery</a>
</nav>
</body>
</html>

测试看看 ‹/›

HTML5 <aside> 요소

<aside> 태그는 페이지의 주 区域 내용 외의 내용(예:サイ드바)를 정의합니다.

aside 태그의 내용은 주 区域의 내용과 관련되어야 합니다.

예제

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　www.w에 의한 예제3codebox.com/title>
</head>
<body>
<article>
　　<h1>Article의 제목/h1>
　　<p>article 아래에 나타나는 텍스트/p>
</article>
<aside>
　　<p>aside 아래에 나타나는 텍스트</p>
</aside>
</body>
</html>

测试看看 ‹/›

HTML5 <header> 요소

<header> 요소는 문서의 헤더 영역을 설명합니다

<header> 요소는 주로 내용의 소개 및 표시 영역을 정의합니다.

페이지에서 여러 개의 <header> 요소를 사용할 수 있습니다.

다음 예제는 문서의 헤더를 정의합니다:

예제

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　www.w에 의한 예제3codebox.com/title>
</head>
<body>
<header>
　　<img　src="/정적/이미지/로고-n.png"　alt="Logo">
</header>
<article>
　　<h1>Article의 제목/h1>
　　<p>article 아래에 나타나는 텍스트/p>
</article>
</body>
</html>

测试看看 ‹/›

HTML5 <footer> 요소

<footer> 요소는 문서의 하단 영역을 설명합니다.

<footer> 요소는 포함된 요소를 포함해야 합니다

푸터는 일반적으로 문서의 작성자, 저작권 정보, 이용 약관의 링크, 연락처 정보 등을 포함합니다

문서에서 여러 개의 <footer> 요소를 사용할 수 있습니다.

예제

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　www.w에 의한 예제3codebox.com/title>
</head>
<body>
<article>
　　<h1>Article의 제목/h1>
　　<p>article 아래에 나타나는 텍스트/p>
</article>
<footer>
　　<p>저작권 ©2013</p>
</footer>
</body>
</html>

测试看看 ‹/›

HTML5 <figure>과 <figcaption> 요소

<figure> 태그는 독립적인 흐름 내용(이미지, 그래프, 사진, 코드 등)을 정의합니다.

<figure> 요소의 내용은 주 내용과 관련이 있어야 하지만, 삭제되더라도 문서 흐름에 영향을 미치지 않아야 합니다.

<figcaption> 태그는 <figure> 요소의 제목을 정의합니다.

<figcaption> 요소는 "figure" 요소의 첫 번째 또는 마지막 자식 요소 위치에 배치되어야 합니다.

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img src="venglobe.gif" alt="venglobe" width="304" height="228">
　　<figcaption>venglobe　venglobe　venglobe.</figcaption>
</figure>
</body>
</html>

测试看看 ‹/›

　HTML5의미 요소 온라인 총망로 예제

예제

<!doctype html>
<html>
<head>
　　　　<meta charset="UTF-8">
　　　　<title>의미 요소</title>
</head>
<body>
　　　　<!--구조 요소-->
　　　　<header>헤더</header>
　　　　<section>한 단락을 나타냅니다: 영역의 장 절을 설명하는 데 사용됩니다/section>
　　　　<footer>영역의 푸터 부분</footer>
　　　　<nav>메뉴 - 탐색을 위한/nav>
　　　　<article>문서의 주 내용을 나타냅니다/article>
　　　　<!--부분 요소 - 영역 구분에 사용됩니다-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>일단의 코드를 나타냅니다/code>
　　　　<dialog>대화를 나타냅니다
　　　　　　　　<dt>말하는 사람</dt><dd>내용</dd>
　　　　</dialog>
　　　　<!--의미 요소-->
　　　　<mtter>한 범위의 수치</mtter>
　　　　<time></time>
　　　　<progress>进度条</progress>
　　　　<video>视频</video>
　　　　<audio>音频</audio>
　　　　<!--交互元素-->
　　　　<details>一段具体内容　通过某个方法显示</details>
　　　　<datagrid>用来控制客户端数据显示</datagrid>
　　　　<menu>动态交互菜单</menu>
　　　　<command>命名</command>
　　　　<!--显示文章案例-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>HTML head 头部分的标签</h1>
　　　　　　　　　　　　<time>2015年12月12日</time>
　　　　　　　　</header>
　　　　　　　　<p>HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素，这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head 头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。</p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--评论-->
　　　　<section>
　　　　<h2>评论</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>李四</h3>
　　　　　　　　　　　　　　　　<p><time　pubdata　datatime="2013-09-23　10:00　-　11:00>一小时前</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>评论内容</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>李四</h3>
　　　　　　　　　　　　　　　　<p><time　pubdata　datatime="2013-09-23　10:00　-　11:00>一小时前</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>评论内容</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

测试看看 ‹/›

我们可以开始使用这些语义元素吗？

以上的元素都是块元素（除了<figcaption>）。

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置以下属性（以下样式代码可以让旧版本浏览器支持本章介绍的块级元素）:

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Internet Explorer 8 及更早IE版本中的问题

IE8 较早的IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 또는 다른 HTML 요소를 사용할 수 있습니다.5 <article>, <figure>, 또는 다른 HTML 요소를 사용할 수 있습니다.

해결 방법: HTML elements.5 Shiv JavaScript 스크립트는 IE의 호환성 문제를 해결합니다.

HTML5 Shiv 다운로드 주소:http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

다운로드 후, 다음 코드를 웹 페이지에 추가하세요:

위 코드는 브라우저가 IE보다 작을 때만 적용됩니다.9버전이 로드될 때 html5shiv.js 파일. 그것을 <head> 요소에 위치시켜야 합니다. IE 브라우저는 이러한 HTML을 먼저 헤더에서 로드한 후 렌더링합니다.5의 새 요소

HTML5 클라이언트 스토리지 HTML5 폼 속성