Xiaoqiang의 HTML5 모바일 개발 과정(3) - HTML5와 HTML4 비교
- 黄舟원래의
- 2017-01-22 10:29:091135검색
이전 섹션에서는 HTML5의 새로운 기능, 새로운 태그 사용, 지능적인 양식 디자인, 멀티미디어 개체 도입, 캔버스용 캔버스 개체, 확장된 그래픽 태그, HTML5의 지리적 응용, 독립적인 데이터 저장 등을 소개했습니다. , 그리고 새로운 네트워크 연결.
HTML 5는 지난 10년 동안 웹 개발 표준에서 가장 큰 도약을 이루었습니다. 이전 버전과 달리 HTML 5는 웹 콘텐츠를 표현하는 데에만 사용되지 않습니다. HTML 5 플랫폼에서는 비디오, 오디오, 이미지, 컴퓨터 기반 상호 작용이 표준화됩니다. . (HTML5에도 자체 로고가 있습니다.) Html5를 학습하려면 다음과 같은 지식 측면을 숙달해야 합니다.
1. HTML 기본 지식
2. CSS 스타일 지식
3. JavaScript 지식
5월 이전에 HTML 4.0을 배운 친구들이 많습니다. 이제 이해가 되네요. HTML 4.0과 HTML5의 차이점은 무엇입니까? HTML4.0을 배우는 것이 HTML5 학습에 어떻게 도움이 될까요? 실제로 HTML5와 HTML4의 가장 큰 차이점은 HTML5가 성능보다 내용과 구조에 더 중점을 둔다는 것입니다. 예:
<body> <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:HTML5专题</h1> 发布日期:<time>19:00</time> <time datetime="2013-2-14">情人节</time> <p>测试相关内容</p> </article> <footer> <address>CSDN-大碗干拌的博客</address> </footer> </body>
위 HTML5의 많은 태그와 마찬가지로 이전 HTML4에서는 dc6dce4a544fdca2df29d5ac0ea9906b 태그를 사용할 수 있는데 왜 사용되지 않는 태그가 많아 기억하기 더 어렵습니까? 실제로는 그렇지 않습니다. 특정 이름을 가진 이러한 태그를 사용하면 각 기능을 쉽게 구분할 수 있습니다. 예를 들어 PC 브라우저와 모바일 브라우저 모두에서 인식되고 잘 표시됩니다. 공들여 나열한 것.
또 다른 차이점은 HTML5가 더 많은 선언과 태그를 단순화하고 호환성에 대한 세부 조항을 만들고 일부 요소를 폐지하고 다음 선언과 같은 일부 요소를 추가했다는 것입니다. 🎜>
HTML4 선언:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...... <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>HTML5 선언:
<!DOCTYPE html> <meta charset=utf-8/>JavaScript나 CSS 파일을 도입할 때 HTML4에서는 작성 방법은 다음과 같습니다.
<script src="js/juery-1.6.2.js" type="text/javascript"></script>HTML5에서는 더 간단해졌습니다.
<script src="js/juery-1.6.2.js"></script>뿐만 아니라 HTML5는 ae55229155ae708652405bb263ea55c1 대소문자 혼합과 같은 좀 더 느슨한 구문을 허용합니다.
<article> 标记定义一篇文章 <aside> 标记定义页面内容部分的侧边栏 <audio> 标记定义音频内容 <canvas> 标记定义图片 <command> 标记定义一个命令按钮 <datalist> 标记定义一个下拉列表 <details> 标记定义一个元素的详细内容 <dialog> 标记定义一个对话框(会话框) <embed> 标记定义外部的可交互的内容或插件 <figure> 标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部 <header> 标记定义一个页面或一个区域的头部 <hgroup> 标记定义文件中一个区块的相关信息 <keygen> 标记定义表单里一个生成的键值 <mark> 标记定义有标记的文本 <meter> 标记定义 measurementwithin apredefinedrange <nav> 标记定义导航链接 <output> 标记定义一些输出类型 <progress> 标记定义任务的过程 <rp> 标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示 <rt> 标记定义对rubyannotations的解释 <ruby> 标记定义 rubyannotations. <section> 标记定义一个区域 <source> 标记定义媒体资源 <time> 标记定义一个日期/时间 <video> 标记定义一个视频웹페이지 헤더 탐색을 생성하는 데 사용된 코드는 다음과 같습니다.
<div class="header">
<div class="navigation">
<ul class="nav_list">
<li><a href="#" title="Home">Home</li>
<li><a href="#" title="About">About</li>
</ul>
</div><!--导航标签结束-->
</div><!--头部结束-->HTML5를 사용한 구현은 다음과 같습니다. <header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>어떤 친구들은 거기에 있는지 묻습니다. 이런 식으로 쓰면 어떤 이점이 있나요? HTML5에서는 헤더용 1aa9e5d373740b65a0cc8f0a02150c53 및 탐색용 c787b9a589a3ece771e842a6176cf8e9와 같은 독립적인 태그를 사용하여 코드가 매우 의미 있고 이해하기 쉬워집니다. . 검색 엔진의 경우 찾기가 더 쉽습니다.