이 글에서는 HTML5 의 문서 구조와 새 태그에 대한 전체 분석을 주로 소개합니다. 필요한 친구들은
하나. HTML5 문서 구조
1. 1단계: 개발 도구를 열고 지정된 폴더를 엽니다.
2단계: index.html 파일을 디스크에 저장합니다. .html은 웹페이지 접미사입니다.
3. 3단계: HTML5의 기본 형식 작성을 시작합니다.
아아아아
2. 문서 구조 분석
1.Doctype
문서 유형 선언(
Document 유형 선언, Doctype이라고도 함) ). 기본적으로 현재 보고 있는 파일 유형을 브라우저에 알려줍니다. 이전 HTML4.01 및 XHTML1.0에서는 특정 HTML 버전과 스타일을 나타냈습니다.
2.html 요소
우선 요소는 레이블, html 요소를 의미합니다. 즉, html 태그입니다. html 요소는 문서의 시작과 끝을 나타내는 요소입니다. 이중 라벨로 머리와 꼬리가 서로 울려 퍼지며 내용을 담고 있습니다.
이 요소에는
속성 및 값: lang="zh-cn"이 있습니다. 은 문서의 언어가 중국어 간체임을 나타냅니다.
중국어 간체 페이지: html lang=zh-cmn-Hans
중국어 번체 페이지 : html lang=zh-cmn-Hant
3.head 요소
는 메타데이터 콘텐츠를 포함하는 데 사용됩니다. , 메타데이터 데이터에는
,
,
, <script>, <p><style>, <title>이 포함됩니다. 이러한 콘텐츠는 CSS 정보를 제공하는 링크, <br/>JavaScript<br/> 정보를 제공하는 스크립트<a href="http://www.php.cn/wiki/48.html" target="_blank">, 페이지 제목을 제공하는 제목 등의 정보를 브라우저에서 제공하는 데 사용됩니다. <head>...</head> //이 정보는 페이지에 표시되지 않습니다. <br/> <noscript> 요소는 스크립트가 실행될 때 대체 콘텐츠(텍스트)를 정의하는 데 사용됩니다. 실행되지 않았습니다. <p>이 태그는 <script> 태그를 인식하는 브라우저에서 사용할 수 있지만 태그 안의 스크립트는 지원할 수 없습니다. <p><p>4.meta 요소 <strong>이 요소는 문서에 대한 정보를 제공하는 데 사용됩니다. 시작 구조에는 charset="utf8" 속성이 있습니다. 페이지가 어떤 인코딩을 사용하는지 브라우저에 알려주는 <p>을 나타냅니다. 일반적으로 우리는 utf8을 사용합니다. 물론 파일을 저장할 때도 <br/>utf8이고, 브라우저에서도 중국어를 제대로 표시하도록 utf8을 설정해 줍니다. <br/><meta charset="utf-8"> //인코딩 설정 외에도 기타 사항이 있습니다 <br/><p>5.title 요소 <strong> 이 요소는 이름에서 알 수 있듯이 매우 간단합니다. 브라우저의 왼쪽 상단에 제목을 설정합니다. <p><title>기본 구조</title><br/><p>6.body 요소 <strong>는 문서의 내용을 담는 요소로, 브라우저 부분의 보이는 영역. 보이는 모든 콘텐츠는 이 <p> 요소 안에 추가되어야 합니다. <br/><body>...</body><p><p>7.a Element <strong>하이퍼링크, 나중에 자세히 설명하겠습니다. . <p><a href="http://www.baidu.com">바이두</a><p><p><span style="color: #ff0000">셋. 요소 태그에 대한 논의 <strong>HTML은 마크업 언어이고 구조에 대해서는 지금까지 자세히 논의했습니다. 여기서는 흔히 글에서 '요소'라고 부르는 이러한 <p> '마크'나 '태그'가 어떻게 구성되어 있는지 분석해 보겠습니다. <br/><p>1. 요소 <strong> 요소는 브라우저에 일부 콘텐츠를 처리하는 방법을 알려주는 태그 집합입니다. 각 요소에는 <p><body>, <title>, <meta>와 같은 키워드가 있습니다. 다른 태그 이름은 다른 의미를 나타냅니다. 단락 태그, 텍스트 태그, 링크 태그, <br/>그림 태그<a href="http://www.php.cn/code/5945.html" target="_blank"> 등은 나중에 관련됩니다. 요소는 일반적으로 단일 태그(빈 요소)와 이중 태그의 두 가지 유형으로 구분됩니다. 단일 태그는 일반적으로 특정 요소 <p>를 선언하거나 삽입하는 데 사용됩니다. 예를 들어 문자 인코딩을 선언하는 데는 <img> 영역을 선택하고 <p>...</p> 단락과 같이 위로 포함합니다. <br/><p>2. 속성 및 값 <strong> 홀수 및 짝수 요소 외에도 속성 및 값을 요소 내부에 설정할 수도 있습니다. 이러한 속성 값은 요소 <p>동작의 일부 <p><a href="http://www.php.cn/php/php-tp-behavior.html" target="_blank"> 측면을 변경하는 데 사용됩니다. 예를 들어, 하이퍼링크 <a>의 href 속성에서 해당 URL을 대체하여 다른 웹사이트로 연결할 수 있습니다. <p><span style="color: #ff0000"> 4. 엔터티<strong><p>HTML 实体就是将有特殊意义的字符通过实体代码显示出来。<p>显示结果 实体名称 实体编号 描述<p> 空格<p>< < < 小于号<br/>> > > 大于号<br/>& & & 和号<br/>" " " 引号<br/>' ' ' 撇号<br/>￠ ¢ ¢ 分<br/>£ £ £ 镑<br/>¥ ¥ ¥ 日圆 <br/>€ € € 欧元<br/>§ § § 小节<br/>© © © 版权<br/>® ® ® 注册商标<br/>™ ™ ™ 商标<br/>× × × 乘号<br/>÷ ÷ ÷ 除号<p><span style="color: #ff0000"><strong>五. 新增结构标签<p>article元素<p>表示页面中一块与上下文不相关的独立内容。比如一篇文章,一篇博文,一篇论坛帖子,可以嵌套使用的<p>section元素<p>表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>;HTML4 中<p> ……</p>。<p>aside元素<p>表示article元素内容之外的、与article元素内容相关的辅助信息。<p>header元素<p>表示页面中一个内容区块或真个页面的标题。<p>hgroup元素<p>表示对真个页面或页面中的一个内容区块的标题进行组合。<p>footer元素<p>表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。<p>nav元素<p>表示页面中<a href="http://www.php.cn/code/9303.html" target="_blank">导航链接的部分。<p>figure元素<p>表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><figure>
<figcaption>PRC</figcaption>
<p>The People&#39;s Republic of China was born in 1949</p>
</figure></pre><div class="contentsignin">로그인 후 복사</div></div><p><span style="color: #ff0000"><strong>五．元数据</strong></span></p><p><meta>元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个<meta><br/>元素。</p><p><strong>1.指定名/值元数据对</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="bnbbs">
<meta name="description" content="这是一个 HTML5 页面">
<meta name="keywords" content="html5,css3,响应式">
<meta name="generator" content="sublime text 3"></pre><div class="contentsignin">로그인 후 복사</div></div><p>元数据名称 说明</p><p>author 当前页面的作者</p><p>description 当前页面的描述</p><p>keywords 当前页面的关键字</p><p>generator 当前页面的编码工具</p><p><strong>2.声明字符编码</strong></p><p><meta charset="utf-8"></p><p><strong>3.模拟 HTTP 标头字段</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//5 秒跳转到指定 URL
<meta http-equiv="refresh" content="5;http://li.cc">
//另一种声明字符编码
<meta http-equiv="content-type" content="text/html charset=utf-8"></pre><div class="contentsignin">로그인 후 복사</div></div><p>属性值 说明</p><p>refresh 重新载入当前页面，或指定一个 URL。单位秒。<br/>content-type 另一种声明字符编码的方式</p><p><span style="color: #ff0000"><strong>六．<a href="http://www.php.cn/code/5845.html" target="_blank">全局属性</a></strong></span></p><p>在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如</p><p>id。全局属性是所有元素共有的行为，HTML5 还提供了一些其他的全局属性。</p><p><strong>1.id 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p id="abc">段落</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释： id 属性给元素分配一个唯一标识符。 这种标识符通常用来给 CSS 和 JavaScript</p><p>调用选择元素。一个页面只能出现一次同一个 id 名称。</p><p><strong>2.<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a> 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p class="abc">段落</p>
<p class="abc">段落</p>
<p class="abc">段落</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样<br/>式。</p><p><strong>3.accesskey 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input type="text" name="user" accesskey="n"></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：快捷键操作，windows 下 alt+指定键，前提是浏览器 alt 并不冲突。</p><p><strong>4.contenteditable 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p contenteditable="true">我可以修改吗</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：让文本处于可编辑<a href="http://www.php.cn/code/8243.html" target="_blank">状态</a>，设置 true 则可以编辑，false 则不可编辑。或者直接</p><p>设置属性。</p><p><strong>5.<a href="http://www.php.cn/wiki/1275.html" target="_blank">dir</a> 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p dir="rtl">文字到右边了</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：让文本从左到右（ltr），还是从右到左（rtl）。</p><p><strong>6.hidden 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p hidden>文字到右边了</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：隐藏元素。</p><p><strong>7.lang 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p lang="en">HTML5</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：可以局部设置语言。</p><p><strong>8.title 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p title="HTML5 教程">HTML5</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：对元素的内容进行额外的提示。</p><p><strong>9.tabindex 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input type="text" name="user" tabindex="2">
<input type="text" name="user" tabindex="1"></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。</p><p><strong>10.style 属性</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p style="color:red;">CSS 样式</p></pre><div class="contentsignin">로그인 후 복사</div></div><p>解释：设置元素行内 CSS 样式。</p><p><span style="color: #ff0000"><strong>七．<a href="http://www.php.cn/html5/html5-3-mip-normal.html" target="_blank">其它</a>新增标签</strong></span></p><p><strong>1.details</strong></p><p>定义和用法</p><p><details> 标签用于描述文档或文档某个部分的细节。</p><p>目前只有 <a href="http://www.php.cn/wiki/1332.html" target="_blank">Chr</a>ome 支持 <details> 标签。</p><p><strong>2.embed</strong><br/></p><p><embed> 标签定义嵌入的内容，定义外部交互内容或插件。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">HTML5: <embed src="horse.wav" /></pre><div class="contentsignin">로그인 후 복사</div></div><p>HTML4:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><object data="flash.swf" type="application/x-shockwave-flash"></object></pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>3.range </strong></p><p><strong>4.autofocus </strong></p><p><strong>5. mark</strong></p><p><mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在<a href="http://www.php.cn/code/8331.html" target="_blank">搜索</a>结果中向用户高亮显示搜索关键词。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">HTML5: <mark></mark>
HTML4: <span></span></pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>6. summary</strong></p><p><summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。<br/>HTML5: <details><summary>HTML 5</summary>This document t<a href="http://www.php.cn/wiki/1047.html" target="_blank">each</a>es you everything you have to learn about HTML 5.</details><br/>HTML4: none</p><p><strong>7. deta<a href="http://www.php.cn/wiki/1059.html" target="_blank">list</a></strong></p><p><datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的<a href="http://www.php.cn/code/5988.html" target="_blank">下拉列表</a>。</p><p>datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。</p><p>请使用 input 元素的 list 属性来绑定 datalist。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist></pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>9. command</strong></p><p>表示命令<a href="http://www.php.cn/code/5991.html" target="_blank">按钮</a></p><p>只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><menu>
<command onclick="alert(&#39;Hello World&#39;)">
Click Me!</command>
</menu></pre><div class="contentsignin">로그인 후 복사</div></div><p><span style="color: #ff0000"><strong>八．废弃的标签<p>表现性元素<p>basefont<br/>big<br/>center<br/>font<br/>s<br/>strike<br/>tt<br/>u<p>建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果<p><a href="http://www.php.cn/css/css-rwd-frameworks.html" target="_blank">框架类元素<p>因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。<p>frame<br/>frameset<br/>noframes<p>但html5支持iframe。<p>属性类<p>很多表现性的属性也被新规范移除，如下：<p>align<p>body标签上的link、vlink、alink、text属性<p>bgcolor<p>height和width<p>iframe元素上的scrolling属性<p>valign<p>hspace和vspace<p>table标签上的cellpadding、cellspacing和border属性<p>header标签上的pro<a href="http://www.php.cn/wiki/1313.html" target="_blank">file属性<p>链接标签a上的target属性<p>img和iframe元素的longdesc属性<p>abbr取代acronym（用于表示缩写）<p>object取代了applet<p>ul取代了dir<p>其他</script>
위 내용은 HTML5 문서 구조 및 새로운 태그에 대한 종합 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
