HTML5基础
文章目录
第一章 新建文档
1.1 新建文档
1.1.1 定义空白文档
完整的HTML文档应该包含两部分： 头部信息（< head >）和主题内容（< body >）。
第1步，用记事本创建一个文本文件保存为include.html。
第2步，输入下列字符。
<!DOCTYPE html>
<html long="en">
<!--lang 设置语言码
中文 html lang="zh-Hans"
简体中文 html lang="zh-cmn-Hans"
繁体中文 html lang="zh-cmn-Hant"
English html lang="en"-->
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
</body>
</html>
1.1.2 添加网页内容
一般网页包括三个部分文本内容，外部引用，标记。
- 文本内容：纯文字；
- 外部引用：添加图片，音频，样式，JavaScript文件等等。
- 标记：对文本内容进行描述，确保浏览器可以正确显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <!--<meta> 标签的属性定义了与文档相关联的名称/值对 -->
<title>从今天开始努力学习HTML5</title>
</head>
<body>
<!-- <article> 标签定义外部的内容。标签的内容独立于文档的其余部分。-->
<article>
<h1>小白自语</h1>
<!--img中src="URL" alt="text" width="pixels %" -->
<img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />
<!--<p> 标签定义段落。<em> 呈现为被强调的文本。<a> 标签定义超链接。href="URL" rel 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 title="text"显示在工具提示中的文本。 -->
<p>我是<em>小白</em>, 现在准备学习<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册">HTML5</a></p>
</article>
</body>
</html>
1.1.3 简化HTML5文档
<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5基本语法</title>
<h1>HTML5的目标</h1>
<p>HTML5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。
<br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多新的功能。HTML5可以省去很多标记。
1.2 头部信息
1.2.1 定义网页标题
<html>
<head>
<meta charset="utf-8">
<title>HTML5标签说明</title><!--一般是60个字符尽量核心简短-->
</head>
<body>
HTML5标签列表
</body>
</html>
1.2.2 定义网页元信息
< mate >
<html>
<head>
<meta charset="utf-8">
<title>设置网页元信息</title>
<meta name="description" content="text" />
<meta name="keywords" content="HTML,DHTML, CSS, XML, XHTML, JavaScript" />
<meta http-equiv="content-language" content="zh-CN" />
<meta http-equiv="refresh" content="5" /> <!--五秒刷新-->
<meta http-equiv="refresh" content="5; url= https://www.baidu.com/" /> <!--五秒跳转百度-->
<meta http-equiv="expires" content="Sunday 20 October 2019 01:00 GMT" /> <!--网页缓存时间-->
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="https://www.baidu.com/" /> <!--设置网页作者-->
<meta name="copyright" content=" https://www.baidu.com/" /> <!--设置网页版权-->
<meta name="date" content="2019-01-12T20:50:30+00:00" /> <!--设置创建时间-->
<meta name="robots" content="none" /> <!--设置禁止搜索引擎检索-->
</head>
<body>
</body>
</html>
1.2.3 定义文档视口
viewport 视口可视区域（移动前端）
dip（device-independent pixel，设备逻辑像素）
layout viewport（布局视口） CSS像素
ideal viewport （理想视口） 逻辑像素（分辨率）
visual viewport （视觉视口） 物理像素
视口标签语法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置文档视口</title>
<meta name="viewport" content="width=device-width, heigth=device-heigth,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<h1>width=device-width, heigth=device-heigth,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1,user-scalable=no</h1>
<p>width=device-width将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。</p>
<p>heigth=device-heigth将layout viewport（布局视口）的高度设置为 ideal viewport（理想视口）的宽度，一般有一个就够了，</p>
<p>initial-scale=1.0表示初始缩放比例，</p>
<p>minimum-scale=1.0表示最小缩放比例，一般不用，</p>
<p>maximum-scale=1.0表示最大缩放比例，</p>
<p>user-scalable=no表示用户缩放布局，一般设置width=device-width,initial-scale=1.0就足够了</p>
</body>
</html>
1.3 基本结构
1.3.1 定义文档结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个简单的文档包含内容</title>
</head>
<body>
<h1>我的第一个网页文档</h1>
<p>HTML文档必须包含三个部分：</p>
<!--<ul> 标签无序列表。<li> 标签定义列表项，有序列表和无序列表中都使用 <li> 标签。-->
<ul>
<li>html——网页包含框</li>
<li>head——头部区域</li>
<li>body——主体内容</li>
</ul>
</body>
</html>
1.3.2 使用div元素
< div > 标签定义文档中的 division/section。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="nav"> <!--简单的网页也可以直接使用<ul id="nav"><div>一般用于交互实现效果-->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a hzef="#">联系</a></li>
</ul>
</div>
</body>
</html>
< span >来组合行内元素，以便通过样式来格式化它们。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>新闻标题</h1>
<p>新闻内容</p>
<p>......</p>
<p>发布于<span class="date">2016年12月</span>，由<span class="author">张三</span>编辑</p>
</body>
</html>
在网页开发的时候使用div和span都可以，通常可以理解为没有什么区别。但注意的是div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。
1.3.3 使用 id 和 class
id 和 class名称一定要保持语义行，与表现方式无关。一般用来区别同类样式，能少用尽量少用例如，导航id 名为right_nav，这样在后面CSS和HTML产生歧义。名为sub_nav或nav_main效果要好。
滥用class
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 class="newsHead">标题新闻</h1>
<p class="newsText">新闻内容</p>
<p>......</p>
<p class="newsText"><a href="news.php" class="newsLink">更多</a></p>
</body>
</html>
正确使用class
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="news">
<h1>标题新闻</h1>
<p>新闻内容</p>
<p>......</p>
<p><a href="news.php">更多</a></p>
</div>
</body>
</html>
1.3.4 使用 title 和 role（辅助属性）
HTML5任何元素都可以添加title。
role的发挥的作用是供有障碍的人士使用，但这并不意味着每个标签都需要增加role属性，因为对于正常的文本本来就可读。role属性的应用主要是表单，比如输入密码，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5标签，所以有必要使用role属性。
示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 开始页面容器container -->
<div class="container">
<!--<header> 标签定义 section 或 document 的页眉。<header> 标签是 HTML 5 中的新标签。横幅banner-->
<header role="banner">
<!--导航<nav> 标签定义导航链接的部分，标签是 HTML 5 中的新标签。-->
<nav role="navigation">[包含多个链接的列表]</nav>
</header>
<!-- 应用CSS后的第一栏 主体main-->
<main role="main">
<article></article>
<article></article>
[其他区块]
</main>
<!-- 结束第一栏 -->
<!-- 应用CSS后的第二栏 边注栏sidebar补充complementary-->
<div class="sidebar">
<aside role="complementary"></aside>
<aside role="complementary"></aside>
[其他区块]
</div>
<!-- 结束第二栏 内容信息contentinfo文章信息大块、可感知区域-->
<footer role="contentinfo"></footer>
</div>
<!-- 结束页面容器 -->
</body>
</html>
1.4 HTML5主结构
1.4.1 定义页眉
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。
注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。
示例1：外部文章引入
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文</p>
</article>
</body>
</html>
示例2：个人博客首页头部区域
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<hgroup>
<h1>LOGO</h1>
<a href="#">[URL]</a> <a href="#">[订阅]</a> <a href="#">[手机订阅]</a> </hgroup>
<nav>
<ul>
<li>首页</li>
<li><a href="#">目录</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">微博我</a></li>
</ul>
</nav>
</header>
</body>
</html>
示例3：区块的目录
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<main role="main">
<article>
<header>
<h1>客户反馈</h1>
<!--nav一般在header元素里面-->
<nav>
<ul>
<li><a href="#answer1">新产品什么时候上市？</a>
<li><a href="#answer2">客户电话是多少？</a>
<li> ...
</ul>
</nav>
</header>
<article id="answer1">
<h2>新产品什么时候上市？</h2>
<p>5月1日上市</p>
</article>
<article id="answer2">
<h2>客户电话是多少？</h2>
<p>010-66668888</p>
</article>
</article>
</main>
</body>
</html>
1.4.3 定义主要区域
< main >标签规定文档的主要内容，main的主要目的是将ARIA的地标性作用main映射到HTML中的元素，这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。< main >元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
示例1：基本框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header role="banner">
<nav role="navigation">[包含多个链接的ul]</nav>
</header>
<main role="main">
<article>
<h1 id="gaudi">主要标题</h1>
<p>[页面主要区域的其他内容]
</article>
</main>
<aside role="complementary">
<h1>侧边标题</h1>
<p>[附注栏的其他内容]
</aside>
<footer role="info">[版权]</footer>
</body>
</html>
示例2：在框架添加简单内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">站内新闻</a></li>
<li><a href="#">站外新闻</a></li>
</ul>
</nav>
</header>
<main>
<h1>站内新闻</h1>
<nav>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<H2 id="web">W3C</H2>
<h3>W3C中国区会员沙龙在北京航空航天大学举行</h3>
<p>2017年9月14日，W3C在北京航空航天大学举办了中国区会员沙龙活动，向到会的中国区会员代表介绍 W3C 目前标准工作进展及计划，并提供一个新老朋友参与W3C及其他相关话题问答与互动讨论的交流平台。</p>
<h2 id="new">最新新闻</h2>
<ul>
<li>W3C发布 ODRL信息模型、ODRL词汇表及表达两份候选推荐标准 征集参考实现及审阅意见</li>
<li>W3C技术研讨会：Web虚拟现实编著—机遇与挑战</li>
<li>W3C发布核心无障碍API映射（Core-AAM）1.1版候选推荐标准 征集参考实现</li>
</ul>
<h2 id="blog">W3C官方博客</h2>
<ul>
<li>W3C启动WebAssembly工作组</li>
<li>W3C数据的未来方向</li>
<li>W3C数字出版主要进展</li>
</ul>
</main>
<footer>本站由北京航空航天大学(W3C/Beihang)维护 京ICP备05004617-3 文保网安备案号1101080018</footer>
</body>
</html>
1.4.4 定义文章块
在html中，< article >标签是html5新增标签，是使用来定义独立于文档且有意义的来自外部的内容，比如：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。
< article >标签中的内容是独立的、完整的、摘自外部的内容。它可以是博客文章、新闻文章、论坛帖子、网友评论等独立的内容。< article >标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。它可以嵌套使用，但是一般需要外部内容和内部内容有关系。比如：一篇博客文章，它的评论就可以使用嵌套的形式，将评论内容嵌套在整体内容中。
< article >是< div > 的细化不单在文章可以用在其他也可以用。
示例1：关于一则web新闻
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>首届Web高层论坛（Web Executive Forum）将于2017年11月在美国旧金山举行 </h1>
<time pubdate="pubdate">2017年9月26日消息</time>
</header>
<p>W3C将于2017年11月8日在美国加州旧金山举行首届W3C Web高层论坛（Web Executive Forum），来自支付宝（Alipay）、美国运通（American Express）、彭博（Bloomberg）、哈曼（HARMAN）、谷歌（Google）、英特尔（Intel）、Mozilla、三星（Samsung）、南内华达地区交通局（Southern Nevada Regional Transportation Agency）、悉尼大学（University of Sydney）、Worldpay、Yubico等机构的代表将与W3C的发明人、W3C理事长 Tim Berners Lee一起，探讨Web的技术趋势及对行业产业的影响。这是W3C首次举办此类论坛，论坛将与 W3C TPAC 2017 会议同期举行。 </p>
<footer>
<p>来自<a href="http://www.chinaw3c.org/archives/1980/" target="_blank">W3C中国</a></p>
</footer>
<section>
<h2>评论</h2>
<article>
<header>
<h3>网友昵称1</h3>
<p>
<time pubdate datetime="2017-9-26 19:40-08:00"> 1小时前 </time>
</p>
</header>
<p>ok</p>
</article>
<article>
<header>
<h3>网友昵称2</h3>
<p>
<time pubdate datetime="2017-9-27 19:40-08:00"> 1天前 </time>
</p>
</header>
<p>good</p>
</article>
</section>
</article>
</body>
</html>
1.4.5 定义区块
< section >元素标签 HTML标签元素在HTML5中新增长< section >标签。英文翻译为：部份、段、截面、章节、章、分段等含意。html5 section元素显现页面中的一个内容区，譬喻章节、页脚、页眉或网页中另外部分组织。section或是配合h1、h2、h3、h4、h5等问题标签一起使用，闪现组织文档的结构。
示例：蝶恋花鉴赏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>蝶恋花</h1>
<h2>晏殊</h2>
</header>
<p>槛菊愁烟兰泣露，罗幕轻寒，燕子双飞去。明月不谙离恨苦，斜光到晓穿朱户。</p>
<p>昨夜西风凋碧树，独上高楼，望尽天涯路。欲寄彩笺兼尺素，山长水阔知何处。</p>
<section>
<h2>解析</h2>
<article>
<h3>注释</h3>
<p>槛：栏杆。</p>
<p>罗幕：丝罗的帷幕，富贵人家所用。</p>
<p>朱户：犹言朱门，指大户人家。</p>
<p>尺素：书信的代称。</p>
</article>
<article>
<h3>评析</h3>
<p>此词经疏澹的笔墨、温婉的格调、谨严的章法，传达出作者的暮秋怀人之情。 </p>
<p>上片由苑中景物起笔，下片写登楼望远。以无可奈何的怅问作结，给人情也悠悠、恨也悠悠之感。 </p>
</article>
</section>
</article>
</body>
</html>
1.4.6 定义附栏
< aside >元素
HTML< aside >元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。< aside >元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。
< aside >元素使用注意事项：
不要使用< aside >元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<aside>
<nav>
<h2>友情链接</h2>
<ul>
<li> <a href="#">网站1</a></li>
<li> <a href="#">网站2</a></li>
<li> <a href="#">网站3</a></li>
</ul>
</nav>
</aside>
</body>
</html>
1.4.7 定义页脚
HTML < footer > 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
示例：页脚内容为关于、导航、联系
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>首届Web高层论坛（Web Executive Forum）将于2017年11月在美国旧金山举行</h1>
<h2>September 26, 2017</h2>
<h3>国际新闻,TPAC及AC,博客文章,技术活动 </h3>
</hgroup>
</header>
<p>本次论坛的议程包括一系列圆桌讨论（Panel Discussion）和高端对话：</p>
<ul>
<li>Web支付的未来（Future of Payments on the Web），主持人：Nick Telford-Reed （Worldpay） </li>
<li>网联汽车、城市和Web（Connected Cars、Cities and Web），主持人：Steve Crumb（GENIVI） </li>
<li>Web新兴技术（Emerging Technologies），主持人：Mark Pesce（Web 3D先驱） </li>
<li>对话：Web的未来，嘉宾：Brad Stone （彭博）、Sir Tim Berners Lee （W3C） </li>
</ul>
</p>
</article>
<footer>
<ul>
<li>关于</li>
<li>导航</li>
<li>联系</li>
</ul>
</footer>
</body>
</html>
1.5 项目实战
第一步，构建框架设计页面基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>博客首页结构模板</title>
</head>
<body>
<header>
<h1>[网页标题]</h1>
<h2>[次级标题]</h2>
<h4>[标题提示]</h4>
</header>
<main>
<nav>
<h3>[导航栏]</h3>
<a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a>
</nav>
<section>
<h2>[文章块]</h2>
<article>
<header>
<h1>[文章标题]</h1>
</header>
<p>[文章内容]</p>
<footer>
<h2>[文章脚注]</h2>
</footer>
</article>
</section>
<aside>
<h3>[辅助信息]</h3>
</aside>
<footer>
<h2>[网页脚注]</h2>
</footer>
</main>
</body>
</html>
第二步，细化模块内容生成静态页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>我的小树林</title>
</head>
<body>
<header>
<h1>我的小树林</h1>
<h2>褪一分浮躁，守一分宁静，握一份真诚，携一份善良，做个简单的程序员。。。</h2>
<h4>专注于HTML5、CSS3、JavaScript，欢迎各位道友前来论道</h4>
</header>
<main>
<nav>
<h3>导航</h3>
<a href="#">博客园</a> <a href="#">首页</a> <a href="#">新随笔</a> <a href="#">联系</a> <a href="#">管理</a>
</nav>
<section>
<h2>文章</h2>
<article>
<header>
<h1>戏说HTML5</h1>
</header>
<p>如果有非技术人员问你，HTML5是什么，你会怎么回答？</p>
<p>新的HTML规范。。。</p>
<p>给浏览器提供了牛逼能力，干以前不能干的事。。。（确切地说应该是给浏览器规定了许多新的接口标准，要求浏览器实现牛逼的功能。。。 这里感谢红枫一叶）</p>
<p>给浏览器暴露了许多新的接口。。。</p>
<p>加了很多新的效果。。。</p>
<p>问的人其实并不明白他想问的真正问题，回答的人貌似明白，但又好像少了点什么。牛逼的能力、新的接口、炫酷的效果，首先回答的人自己就是晕晕乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript，大部分的前端开发每天都在用这些，但很少会有人去思考一下他们之间的关系。</p>
<p>。。。。。。</p>
<p>当交互性不能在满足人们需求时，web迎来了新的需求：webapp。要迎合新的需求，首先要改变的就是HTML规范，这个时候已有的HTML4.0，已经无法满足人们日益增长的需求，所以HTML5迎着历史的需求，经过八年的艰苦努力，终于在2014年正式定稿！HTML5肯定是要加入新标签，然对于传统HTML而言，HTML5算是一个叛逆。所有之前的版本对于JavaScript接口的描述都不过三言两语，主要篇幅都用于定义标记，与JavaScript相关内容一概交由DOM规范去定义。而HTML5规范，则围绕着如何使用新增标记定义了大量JavaScript API（所以其中有一些API是与DOM重叠，定义了浏览器应该支持的DOM扩展，由此可以看到HTML5也必定不是HTML的最终版。 </p>
<footer>
<h2>标签</h2>
<p><a href="#">生活感悟</a></p>
</footer>
</article>
</section>
<aside>
<h3>常用链接</h3>
<ul>
<li><a href="#">我的随笔</a></li>
<li><a href="#">我的评论</a></li>
<li><a href="#">我的参与</a></li>
<li><a href="#">最新评论</a></li>
<li><a href="#">我的标签</a></li>
</ul>
<h3>最新随笔</h3>
<ol>
<li><a href="#">Three.js使用局部纹理更新</a></li>
<li><a href="#">webgl自学笔记——矩阵变换</a></li>
<li><a href="#">webgl开发第一道坎——矩阵与坐标变换</a></li>
<li><a href="#">webgl自学笔记——光照</a></li>
<li><a href="#">webgl自学笔记——几何图形</a></li>
</ol>
<h3>我的标签</h3>
<ul>
<li><a href="#">javascript(61)</a></li>
<li><a href="#">css(10)</a></li>
<li><a href="#">webgl(6)</a></li>
<li><a href="#">ajax(3)</a></li>
<li><a href="#">更多</a></li>
</ul>
<h3>随笔档案(114)</h3>
<ul>
<li><a href="#">2019年8月 (2)</a></li>
<li><a href="#">2019年7月 (4)</a></li>
<li><a href="#">2019年5月 (1)</a></li>
<li><a href="#">2019年3月 (1)</a></li>
<li><a href="#">2019年1月 (1)</a></li>
</ul>
<h3>积分与排名</h3>
<ul>
<li>积分 - 194821</li>
<li>排名 - 1133 </li>
</ul>
</aside>
<footer>
<h2>版权信息</h2>
<p><a href="#">关于博客园</a> <a href="#">联系我们</a></p>
<p>©2004-2019博客园保留所有权利，沪ICP备09004260号</p>
</footer>
</main>
</body>
</html>
第三步，加入CSS（目前不解释）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>我的小树林</title>
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("section");
document.createElement("nav" );
document.createElement("aside" );
document.createElement("main" );
document.createElement("header" );
document.createElement("hgroup" );
document.createElement("footer" );
</script>
<![endif]-->
<style type="text/css">
body {
background-color: #000;
font-family: Geneva, Arial, Helvetica, sans-serif;
margin: 0px auto;
max-width: 1024px;
border: solid 1px #fff;
}
article, section, nav, aside, main, header, hgroup, footer { display: block; }
h1 {
font-size: 34px;
margin: 0px;
}
h2 {
font-size: 24px;
margin: 0px;
text-align: center;
color: #F47D31;
}
h3 {
font-size: 18px;
margin: 0px;
text-align: center;
color: #F47D31;
}
ul, ol {
list-style-type: none;
padding: 0;
margin: 1em 0 1em 2em;
}
/*超链接 */
a {
text-decoration: none;
color: #F47D31;
}
a:hover {
text-decoration: none;
color: #000;
}
footer a { color: #eee; }
footer a:hover { color: #000; }
/*标题栏 */
header {
background-color: #F47D31;
color: #FFF;
}
body > header h1 {
margin-left: 40px;
line-height: 2em;
padding-top: 4px;
}
body > header h2 {
color: #eee;
font-size: 14px;
text-align: left;
margin-left: 40px;
padding-bottom: 16px;
}
header h4 {
color: #F47D31;
background-color: #fff;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(45deg);
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(45deg);
box-shadow: 2px 2px 20px #888;
transform: rotate(45deg);
position: fixed;
padding: 12px 200px;
top: 40px;
right: -240px;
text-align: center;
text-shadow: 1px 1px #eee;
width: 260px;
}
/*导航栏 */
nav {
width: 15%;
float: left;
background: #fff;
margin-top: 1px;
}
nav a:link, nav a:visited {
display: block;
border-bottom: 1px solid #ccc;
padding: 12px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: white;
background-color: #F47D31;
}
nav h3 {
margin: 15px;
color: white;
display: none;
}
/*主要内容区域 */
main { background-color: #888; }
/*文章区块 */
section {
width: 60%;
float: left;
}
section>h2{display:none;}
/*文章栏 */
article {
background-color: #eee;
margin: 10px;
padding: 10px;
text-indent: 2em;
line-height: 1.8em;
-webkit-border-radius: 8px;
-webkit-box-shadow: 2px 2px 20px #888;
-webkit-transform: rotate(2deg);
-moz-border-radius: 8px;
-moz-box-shadow: 2px 2px 20px #888;
-moz-transform: rotate(2deg);
border-radius: 8px;
box-shadow: 2px 2px 20px #888;
transform: rotate(2deg);
}
article header {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 5px;
}
article h1 {
font-size: 22px;
line-height:2em;
}
article footer {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 5px;
text-align: left;
}
article footer h2, article footer p {
display: inline;
padding: 6px;
margin-left:-12px;
color:#fff;
font-size:16px;
}
article footer h2:after{
content:":";
}
/*辅助栏 */
aside {
width: 25%;
float: left;
background: #fff;
}
aside h3 {
margin: 16px 12px 0 12px;
padding: 0 0 6px 0;
color: #777;
border-bottom: solid 1px #ccc;
}
/*有序列表排序符号 */
aside ol li {
background: url(images/top10-bullet.png) no-repeat 2px 10px;
padding: 1px 0px 0px 28px;
line-height: 30px;
height:30px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
aside ol li:first-child {
background-position:2px 10px;
}
aside ol li:nth-child(2) {
background-position:2px -31px;
}
aside ol li:nth-child(3) {
background-position:2px -72px;
}
aside ol li:nth-child(4) {
background-position:2px -113px;
}
aside ol li:nth-child(5) {
background-position:2px -154px;
}
aside ol li:nth-child(6) {
background-position:2px -195px;
}
aside ol li:nth-child(7) {
background-position:2px -236px;
}
/*页脚栏 */
footer {
clear: both;
background-color: #F47D31;
color: #FFFFFF;
text-align: center;
padding: 6px;
}
main > footer h2 {
display: none;
}
</style>
</head>
<body>
<header>
<h1>我的小树林</h1>
<h2>褪一分浮躁，守一分宁静，握一份真诚，携一份善良，做个简单的程序员。。。</h2>
<h4>专注于HTML5、CSS3、JavaScript，欢迎各位道友前来论道</h4>
</header>
<main>
<nav>
<h3>导航</h3>
<a href="#">博客园</a> <a href="#">首页</a> <a href="#">新随笔</a> <a href="#">联系</a> <a href="#">管理</a>
</nav>
<section>
<h2>文章</h2>
<article>
<header>
<h1>戏说HTML5</h1>
</header>
<p>如果有非技术人员问你，HTML5是什么，你会怎么回答？</p>
<p>新的HTML规范。。。</p>
<p>给浏览器提供了牛逼能力，干以前不能干的事。。。（确切地说应该是给浏览器规定了许多新的接口标准，要求浏览器实现牛逼的功能。。。 这里感谢红枫一叶）</p>
<p>给浏览器暴露了许多新的接口。。。</p>
<p>加了很多新的效果。。。</p>
<p>问的人其实并不明白他想问的真正问题，回答的人貌似明白，但又好像少了点什么。牛逼的能力、新的接口、炫酷的效果，首先回答的人自己就是晕晕乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript，大部分的前端开发每天都在用这些，但很少会有人去思考一下他们之间的关系。</p>
<p>。。。。。。</p>
<p>当交互性不能在满足人们需求时，web迎来了新的需求：webapp。要迎合新的需求，首先要改变的就是HTML规范，这个时候已有的HTML4.0，已经无法满足人们日益增长的需求，所以HTML5迎着历史的需求，经过八年的艰苦努力，终于在2014年正式定稿！HTML5肯定是要加入新标签，然对于传统HTML而言，HTML5算是一个叛逆。所有之前的版本对于JavaScript接口的描述都不过三言两语，主要篇幅都用于定义标记，与JavaScript相关内容一概交由DOM规范去定义。而HTML5规范，则围绕着如何使用新增标记定义了大量JavaScript API（所以其中有一些API是与DOM重叠，定义了浏览器应该支持的DOM扩展，由此可以看到HTML5也必定不是HTML的最终版。 </p>
<footer>
<h2>标签</h2>
<p><a href="#">生活感悟</a></p>
</footer>
</article>
</section>
<aside>
<h3>常用链接</h3>
<ul>
<li><a href="#">我的随笔</a></li>
<li><a href="#">我的评论</a></li>
<li><a href="#">我的参与</a></li>
<li><a href="#">最新评论</a></li>
<li><a href="#">我的标签</a></li>
</ul>
<h3>最新随笔</h3>
<ol>
<li><a href="#">Three.js使用局部纹理更新</a></li>
<li><a href="#">webgl自学笔记——矩阵变换</a></li>
<li><a href="#">webgl开发第一道坎——矩阵与坐标变换</a></li>
<li><a href="#">webgl自学笔记——光照</a></li>
<li><a href="#">webgl自学笔记——几何图形</a></li>
</ol>
<h3>我的标签</h3>
<ul>
<li><a href="#">javascript(61)</a></li>
<li><a href="#">css(10)</a></li>
<li><a href="#">webgl(6)</a></li>
<li><a href="#">ajax(3)</a></li>
<li><a href="#">更多</a></li>
</ul>
<h3>随笔档案(114)</h3>
<ul>
<li><a href="#">2019年8月 (2)</a></li>
<li><a href="#">2019年7月 (4)</a></li>
<li><a href="#">2019年5月 (1)</a></li>
<li><a href="#">2019年3月 (1)</a></li>
<li><a href="#">2019年1月 (1)</a></li>
</ul>
<h3>积分与排名</h3>
<ul>
<li>积分 - 194821</li>
<li>排名 - 1133 </li>
</ul>
</aside>
<footer>
<h2>版权信息</h2>
<p><a href="#">关于博客园</a> <a href="#">联系我们</a></p>
<p>©2004-2019博客园保留所有权利，沪ICP备09004260号</p>
</footer>
</main>
<noscript>
<h1>警告</h1>
<p>因为你的浏览器不支持HTML5，一些元素是模拟使用JavaScript。不幸的是，您的浏览器已禁用脚本。请启用它以显示此页。</p>
</noscript>
</body>
</html>
小结
div，section，article的区别和使用
1，针对一个块内容做样式化，三者并无区别。
2，div section article ，语义是从无到有，逐渐增强的。
3，div 无任何语义，仅仅用作样式化或者脚本化；对于一段主题性的内容，则就适用 section；假如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容，则就适用 article。
div：
定义：文档中的分区或节。
使用场合：作为布局以及样式化时使用（此时三者并无区别,但div更常用）
section：
定义：文档中的节，一般是具有标题性的。
使用场合：文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
article:
定义：独立的自包含内容。一般来说，article会有标题部分( 包含在header内 )，有时也会包含footer。
使用场合：一段内容脱离了所在的语境，仍是完整的、独立的，则应该用article标签。
写的比较啰嗦内容不做商用，学习笔记供自己学习
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
