原创力文档- 1、本文档共34页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
HTML5+CSS3网页设计基础教程;;单元导读
HTML5新增了用来布局页面的标签，更具有语义化，使结构更清晰，代码可读性更强；增强的表单元素功能更完善，减少了为实现某种常用功能而编写代码的工作量。;学习目标
掌握HTML5新增布局元素的意义；
掌握HTML5新增的页面元素；
掌握HTML5增强的表单及其属性；;思政目标
通过介绍HTML5新标签使学生明白，进步需要在原来的基础之上发展与创新，软件的升级是创新、技术的更新换代是创新，未来要想在职业生涯中立于不败之地，就要懂得不停学习，不断发展，???时创新，创新才能进步，创新才能创业。;HTML5提供的新的用来布局的元素有header、nav、aside、article、section、footer，这些元素根据语义互相搭配或嵌套描述网页布局，实际上他们都源于div标签，他们的显示效果和使用方法与div标签完全相同，和div唯一不同的就是它们具有语义，可以通过元素的名称表达元素内内容的意义。;<header>语义为头部，可以表示网页的头部，也可以表示网页中某个区域的头部，网页头部中经常包含的内容是网站标识logo。
<nav>语义为导航，可以表示整个网页的导航，也可以表示网页中某个区域的次级导航。
< footer >语义为脚部，表示页面的底部，经常包含网站的版权、联系方式、制作日期等网站信息，也可以表示网页中某个区域的脚部。;<article>语义为独立的内容，如文章、评论、通知、新闻等，它强调独立性、完整性，是一个可以独自被外部引用的内容，在一个<article>内部，经常会有自己的<header>和<footer>。
<aside>语义为侧边栏，通常在主要内容旁边，内部也可以包含一些导航。
<section>表示文档中的一节，用于对页面内容进行分块或者为文章分段，比如一个arcticle可以分成多个section ，一个section通常由标题和内容组成，没有标题的内容一般不用在section中，如果想要为某个区域进行样式的设置或添加行为，一般仍然使用div而不是section。;<header>、<nav>、<aside>、<article>、<section>、<footer>在布局页面时通常显示为类似如图4-1的结构。;任务1. HTML5布局标签体验——输入以下HTML5新增的布局标签，观察网页布局效果。;<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title> HTML5页面布局</title>
</head>
<body>
<header>此处是头部的内容</header>
<nav>此处是导航栏</nav>
<article><section>此处是主要内容</section></article>
<aside>此处是侧边栏</aside>
<footer>此处是底部</footer>
</body>
</html>
;效果如图4-2：;任务分析
1. 从图中可以观察到，这些新增布局标签的显示效果和<div>是一样的，也是块级元素，默认情况下，每个标签占一行，宽度占满父窗口的百分之百，它们除了有语义上的作用外，并没有显示出与<div>的不同。
2. 要想实现如图4-1的布局，是要和CSS样式结合在一起才能实现的。;新增的HTML5页面元素有figure、hgroup、mark、progress、time等。这些标签都具有一定的浏览器兼容性，在手机网页上可以广泛使用，在电脑端网页上还需要对浏览器兼容性进行测试。;4.2.1<figure>（块级元素）
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响，所有主流浏览器都支持 <figure> 标签。;任务2. <figure>元素用作文档插图——利用<figure>标签在文档中插入图像，如图4-3：;效果如图4-3：;<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>figure标签</title>
</head>
<body>
<figure>
<figcaption>两只蝴蝶</figcaption>
<img src="images/butterfly.jpg" width="280" height="210">
</figure>
</body>
</html>;任务分析
1. <figure>标签中包含了插入的图像。
2. <figcaption>标签定义<figure>元素的标题，<fig
文档评论（0）