chap05 HTML5+CSS3-网页设计与Web前端开发案例教程-莫小梅-清华大学出版社
Web前端开发案例教程(HTML5+CSS3) 第1章 WEB前端开发概述
1.2 WEB相关概念
WEB相关 概念
1
2
3
IP地址 域名 URL
4 HTTP
5
网站、网 页与主页
6
7
HTML Web标准
13
第1章 WEB前端开发概述 1.3 HTML5概述
14
1.3 HTML5概述
HTML5是超文本标记语言的第5代版本， 目前在互联网的应用越来越普及。HTML5将 WEB应用带入一个标准的应用平台。在 HTML5平台上，视频、音频、图像和动画等 都被标准化。
本书是学习WEB前端开发技术的教材，主要学习利用HTML5和CSS3构建WEB网页的知识。
3
第1章 WEB前端开发概述 1.2 WEB相关概念
4
1.2 WEB相关概念
1、IP地址
IP地址(Internet Protocol Address)用于确定Internet上的每台主机，它是 每台主机唯一性的标识。在 Internet 上，每台计算机或网络设备的 IP 地 址是全世界唯一的。 IP 地址的格式是 xxx.xxx.xxx.xxx，其中 xxx 是 0 到 255 之间的任意整数。 例如，某台主机的 IP 地址是 61.172.201.232。
火狐浏览器
谷歌浏览器
21
1.5 创建第一个HTML5页面
编辑创建网页可以使用常用的文本编辑器，如Editplus、记事本等。但最方便 的网页制作工具是Dreamweaver，其智能化的输入代码方式、方便的可视化操作都 为网页制作和浏览提供了很大的方便。本节介绍在Dreamweaver 环境下创建网页的 步骤。
与前端开发对应的是后端开发，如果只做WEB前端的话，则只能供用户浏览而不 能与服务器交互。因此，要想开发一个用户体验更好、功能更强大的网站，我们就有必 要去学习一些后端技术。譬如PHP、JSP和等这些开发技术，通过这些编程 工具的使用，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。
网页设计与制作案例教程(HTML5+CSS3) 第1章网页基础
1.3 基础项目2：制作“陈欧介绍”网页
WEB
11
1.3 基础项目2：制作“陈欧介绍”网页 知识技能目标
（1）了解Dreamweaver工作界面，熟练掌握创建站点及网页的方法。 （2）初识超链接，能够为当前网页添加指向同站点内其它页面的超链接。 （3）了解HTML语言和CSS样式基本书写格式。 （4）掌握<style>标签的使用方法，能够使用<style>标签创建内部样式表。
网站程序开发
1.2.1 网 站 开 发 流 程
后 期 测 试 发 布
页面效果 链接有效性
浏览器兼容性 网站发布
视觉效果、布局、内容、亲 和力、易操作…… 所有链接是否都跳转正常、 所有页面是否均可到达…… 在各主流浏览器下均能正常 显示
本地发布、远程发布
测试过程通常也伴随着优化过程，优化是尽可能地减小网页文件的体积及日后发生错误的机率。
更改界面颜色
1.4.4 使用Dreamweaver CC 2018的几个小技巧 实时预览 快速更改代码（Ctrl+E） 同时编辑多行代码
WEB
13
1.5 提高项目：制作“青春颂歌”网页
14
1.6 拓展项目：制作“支付”网页
15
4
1.2 知识库：网页基础知识
1.2.1 网 站 开 发 流 程
前期准备
中期制作
后期测试 发布
WEB
5
1.2.1 网 站 开 发 流 程
前期准备 需求分析 确定主题 确定网站架构 收集素材 设计页面 导出效果图切片
功能分析、目标用户分析、内容分析等
1.2.1 网 站 开 发 流 程
中期制作
创建站点 静态页面制作
HTML5+CSS3 Web前端设计基础教程(第4章)
4.3 控制图像和颜色
此处图片通过横向 平铺实现效果。此 外，同时设置图像 高度，如果不设置， div元素内又没有内 容将容器撑起来， 将无法显示背景图 片 此处图片设置了跟 随滚动条滚动的效 果，即便不设置， 浏览器默认状态就 是滚动效果
图4-15 背景色、背景图预览效果
此 处 为 box 容 器同时设置背 景图和背景色
此处文本溢出，文 字折返到下一行
此列表项内容超出了容器设 置的范围，出现了省略标记
图4-7 文本溢出处理预览效果
4.2 控制超链接
4.2.1 文本链接、邮件链接与锚链接 4.2.2 CSS伪类与超链接 1．什么是CSS伪类 伪类的语法形式为：
选择符：伪类 { 属性: 属性值; }
表4-3 常见的伪类及其含义 伪类 :link、:visited、:hover、:active :focus :not(s)（CSS 3新增） :root（CSS 3新增） :first-child :last-child（CSS 3新增） :nth-child(n) （CSS 3新增） 解释 设置超链接被访问前后的4个状态样式。 设置对象在成为输入焦点时的样式。 匹配不含有s选择符的元素。 匹配某一个元素在文档的根元素。 匹配父元素的第一个子元素。 匹配父元素的最后一个子元素。 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
4.1 控制文本
1．font-family（字体类型） 2．font-size（字号大小）
3．font-style（字体风格）
标题设置固定字号， 字体风格为斜体
此行设置为“宋体” 此行设置为“华文彩云 此行设置为“微软雅黑”
图4-3 字体类型、字号和风格预览效果
此行设置为“黑体”， 字号大小为父级的 80%
HTML5+CSS3 Web前端设计基础教程(第2章)
图2-31 div元素和span元素预览效果
2.3 HTML 5入门
7．table元素（块级元素）
图2-32 table元素预览效果
（1）border属性 （2）caption元素 （3）scope属性
2.3 HTML 5入门
8．video元素（内联元素）和audio元素（内联元素）
（1）video元素 （2）audio元素
图2-33 video元素和audio元素预览效果
2.3 HTML 5入门
2.3.4 HTML 5新增结构元素
1．header元素
2．nav元素
3．section元素 4．article元素 5．aside元素 6．footer元素 7．section元素与article元素的区别
谢谢观看！
2.1.1 界面介绍
文档工具栏 代码视图
各类样式面板
设计视图 标签选择器 文件面板
属性检查器
图2-1 Dreamweaver 工作环境
2.1 Dreamweaver的工作环境概述
2.1.2 常用工具栏和面板 1．“文档”工具栏
图2-2 “文档”工具栏
2.1 Dreamweaver的工作环境概述
2．“编码”工具栏
2.3 HTML 5入门
2.3.2 DOCTYPE文档类型与基本结构元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>凤凰网</title> <meta content="凤凰,凤凰网,凤凰新媒体,凤凰卫视,凤凰卫视中文台,phoenix" name="keywords"/> <meta name="description" content="凤凰网是中国领先的综合门户网站，提供含文图音视频的全方位综合新闻资 讯、深度访谈、观点评论、财经产品等服务。"/> <meta content="index,follow" name="robots"/> <meta content="凤凰网" name="author"/> <meta content="Copyright 1999-2014. . All Rights Reserved." name="copyright"/> <script src="/20150625/fa.min.js"></script> <link href="/index/72x72_2520ifeng.png" rel="apple-touch-icon"/> </head> <body> </body> </html>
HTML5+CSS3网页设计案例教程课程设计 (2)
HTML5+CSS3网页设计案例教程课程设计简介本课程设计的主要目的是帮助初学者掌握HTML5和CSS3的基础知识，并通过实际案例的设计来提高其实践能力。
通过本课程设计的学习，学生可以熟悉网页设计的基本流程和开发工具，了解网页设计中的一些常用技术和技巧。
学习内容HTML5基础1.HTML5简介：历史背景、新特性和优势。
2.HTML5语法：标签、属性、注释等基础语法。
3.HTML5标签：文本标签、超链接标签、HTML5表单元素、媒体标签等。
4.HTML5语义化：了解HTML5的语义化，编写具有可读性和可维护性的HTML代码。
5.HTML5实例：通过实例练习HTML5的基本语法和标签使用。
CSS3基础1.CSS3简介：历史背景、新特性和优势。
2.CSS3选择器：元素选择器、ID选择器、类选择器、属性选择器等。
3.CSS3样式：文本样式、字体样式、背景样式、布局样式等。
4.CSS3盒子模型：内容、内边距、边框、外边距的组合和应用。
5.CSS3动画效果：过渡、变换、动画等CSS3新特性。
案例实战通过案例实战来巩固学生的HTML5和CSS3基础知识，并提高其实践能力。
1.公司主页设计：学生根据公司主页需求编写HTML5和CSS3代码，设计主页，包括公司概述、产品介绍、联系方式等模块。
2.个人博客设计：学生根据博客需求编写HTML5和CSS3代码，设计个人博客，包括博客首页、博客文章列表、博客文章详细页面等模块。
3.电商网站设计：学生根据电商需求编写HTML5和CSS3代码，设计电商网站，包括商品列表、商品详情、购物车、收银台等页面。
实验环境1.编辑器：Sublime Text、Atom、Visual Studio Code等。
2.浏览器：Chrome、Firefox、Safari等。
3.网站开发框架：Bootstrap、Vue.js、React等。
4.公共资源库：jQuery、Font Awesome、Animate.css等。
HTML5+CSS3Web前端开发技术(任务式)-教学大纲
≪HTM15+CSS3Web前端开发技术》课程教学大纲学分：4学分学时：学时64(其中：理论学时32实践学时：32)先修课程：图形图像处理、程序设计基础、Intemet应用基础后续课程：Web前端技术(JaVaSCriPt)适用专业：计算机类相关专业开课部门：计算机系一、课程的性质与目标《HTM15+CSS3Web前端开发技术》是面向计算机相关专业的一门专业核心课，该课程的内容适应Web前端开发工作岗位群的实际要求。
课程融入“1+X”Web前端开发技术技能等级证书的相关内容，对接互联网+大学生创新创业大赛，秉承“以赛促赛，赛证融合、以岗促赛，岗证融合、以创促课，专创融合”的思想，整合专业教育教学资源和内容，构建基于专业知识的模块化课程内容。
通过本课程的学习，学生可以掌握网页设计领域核心知识和技能，了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容。
本课程是一门基于真实项目的课程，具有较强的职业性、实践性和技术性，学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识，在操作实践中提升实战能力，同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力，对学生职业能力培养和职业素质养成起到支撑和促进作用，为职业能力的培养打下坚实的基础。
二、教学条件要求操作系统：Windows7开发工具：Hbui1derX三、课程的主要内容及基本要求学习单元一学习单元二学习单元三学习单元四学习单元五学习单元六学习单元七学习单元八学习单元九学习单元十学习单元十一学习单元十二四、学时分配五、教学效果评价及方式本课程为考试课程，根据课程特点采用多阶段、节点化、多方式的评价方式。
构建了素质、知识和能力考核相结合，过程性考核和终结性考核相结合，理论考核和实践考核相结合，校内评价和校外评价相结合的四个结合；知识、能力、素质、思政的四个维度、教师、学生、工程师的三个主体，课前、课中、课后的三个阶段的考评体系。
HTML5+CSS3网页设计实例教程-第1章-网页设计新时代(2024版)
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第11页
传统HTML与XHTML
标记语言在我们的日常计算中无处不在。在传统的文字处 理文档中，用于描述结构与外观的标记代码常常不是后台 编码的。在Web文档中，传统HTML和XHTML（XHTML 是HTML基于XML语法规则建立的标记语言）的标记代码 是明显可见的。这些非后台的标记语言能够将Web页面的 结构与外观传递给Web浏览器。
设计网页首先要关注不同用户如何使用Web。有些人使用 不同的设备或低速的Web连接；有些人只使用键盘；有些 人使用屏幕阅读器阅读Web页面；有些人听不到音频内容 。因此要熟悉形形色色的Web用户。不要只是假设所有人 都用相同的模式在使用Web。
HTML5给Web网页的可访问性带来的更广泛的便利。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第8页
结构化文档的Web
可以把Web想象成一个由文档组成的大海，文档之间相互 关联，并且与日常生活中遇到的打印文档有着很多相似性
新闻网站中文章的结构与报纸上的文章结构类似。每一篇 文章包含标题、文本段落以及一些图片（有时可能以视频 代替图片）。相同点非常明显，而唯一的不同就是，在报 纸上可以在一个版面上拥有多篇故事，而在网页上每篇故 事则倾向于独占一个页面。新闻网站还经常使用首页显示 新闻头条以及故事梗概。
在编写Web页面时，HTML代码会告知Web浏览器需要显 示的信息结构，即什么文本放在标题、段落或表格中等， 从而浏览器能够恰当地将其呈现给用户。
HTML5+CSS3网页设计实例教程
第1章 网页设计新时代
第9页
主要内容
1.1 WEB网页设计原则 1.2 HTML5概述 1.3 HTML5页面的特征 1.4 WEB网页设计基础 1.5 编写一个简单的Web页面 1.6 本章小结
网页设计与制作案例教程(HTML5 CSS3)素材
网页设计与制作案例教程（HTML5CSS3）素材本文旨在介绍《网页设计与制作案例教程（HTML5 CSS3）素材》的主题和背景。
本教程的主题是网页设计与制作案例教程，重点涵盖HTML5和CSS3素材的使用。
随着互联网的迅速发展，网页设计和制作变得越来越重要。
作为一种应用广泛的技术，HTML5和CSS3提供了丰富的功能和特性，可以使网页呈现出更加精美和交互性强的效果。
因此，研究和掌握HTML5和CSS3的使用对于提高网页设计和制作的质量和效果至关重要。
本教程将为读者提供一系列实际案例，展示如何利用HTML5和CSS3素材设计和制作各种类型的网页。
通过研究这些案例，读者将能够掌握重要的网页设计原理和技巧，提升自己的设计能力，并能够应用到实际项目中。
教程内容涵盖了HTML5和CSS3的基础知识、常用元素和样式以及高级特性的运用。
每个案例都包含了详细的步骤和说明，帮助读者理解和掌握相关的技术和方法。
希望通过本教程，读者可以研究到实用的网页设计和制作技巧，并能够应用到自己的项目中，提升自己的能力和竞争力。
本部分将介绍HTML5的基本概念和语法，包括标签、属性和元素的使用。
HTML5是一种用于构建网页的标记语言，它在HTML4的基础上进行了增强和改进。
HTML标签是HTML文档的基本结构元素，它们用于定义网页的内容和结构。
在HTML5中，标签可以包含属性，用于提供更多的信息和控制网页的呈现方式。
属性可以对标签进行设置，如字体、颜色、大小等。
除了标签和属性，HTML5还引入了一些新的元素，用于创建更丰富和动态的网页内容。
例如，``元素可以用于嵌入视频文件，``元素可以用于绘制图形等。
掌握HTML5的基本概念和语法是网页设计与制作的基础，它将为你提供开发高质量和现代化网页的能力。
待续。
本部分将介绍CSS3的基本概念和语法，包括选择器、属性和样式表的使用。
CSS3（Cascading Style Sheets 3）是一种用于描述网页样式的标记语言，它是CSS的最新版本。
《HTML5+CSS3+JavaScript网页设计基础与实战》—课程大纲(必修 5学分 66学时)
《HTML5+CSS3+JavaScript网页设计基础与实战》课程教学大纲学分：5 学分学时：66 学时（其中：讲课学时：46 学时上机学时：20学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI 设计、JavaScript 网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3+JavaScript网页设计基础与实战》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、动画、JavaScript基础、HTML5应用、JavaScript特效和响应式布局等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X 证书制度”Web 前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：webstorm或其他代码编辑工具四、课程的主要内容及基本要求第一章初识web前端第二章HTML构建基本网页第三章使用列表与表格布局第四章设计网页页面第五章表单与表单设计效果第六章实现CSS3动画第七章JavaScript基础应用第八章实现HTML5应用第九章JavaScript特效第十章移动端布局与响应式开发第十一章综合案例-快递网站首页五、学时分配六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。
HTML5+CSS3网页设计与制作案例教程
随着信息通信技术的不断成熟，以及互联网与各行各业的日益融合，越来越多的人接触或从事网页设计制作工作。
在介绍网页制作技术之前，我们有必要先了解一下相关的基础知识。
本章主要介绍网页相关知识、网页的基本元素以及制作网页常用的技术和软件。
本章学习目标◎ 了解互联网、因特网、万维网的关系和区别。
◎ 了解网站、网页和HTML的基本概念。
◎ 了解静态网页和动态网页的区别和联系。
◎ 了解HTTP、FTP、IP地址、域名和URL等基本概念。
◎ 能够安装并使用浏览器查看网页。
◎ 了解从媒体内容和布局元素两个角度出发，网页所包含的基本元素。
◎ 了解网页开发所使用的基本技术和工具。
HTML5+CSS3网页设计与制作案例教程在学习如何设计一个网页之前，我们首先要对网站、网页及其相关知识具有最基本的认识。
1.1.1 互联网(internet)、因特网(Internet)、万维网(WWW)互联网指由若干计算机网络相互连接而成的网络。
进一步讲，凡是能彼此通信的设备组成的网络就叫互联网，即使仅有两台机器，不论用何种技术使其彼此通信，就可以称为互联网。
互联网的英文用开头字母小写的internet表示，不是专有名词，泛指由多个计算机网络相互连接而成的一个大型网络。
因特网和其他类似的由计算机相互连接而成的大型网络系统，都可算是互联网，因特网只是互联网中最大的一个网络。
因特网是目前全球最大的一个电子计算机互联网，是由美国的ARPA网发展演变而来的。
但因特网并不是全球唯一的互联网络，例如在欧洲，跨国的互联网络就有“欧盟网”(Euronet)、“欧洲学术与研究网”(EARN)、“欧洲信息网”(EIN)，在美国还有“国际学术网”(BITNET)，世界范围的还有“飞多网”等。
Internet专指全球最大的也就是我们通常所使用的互联网络——因特网，“因特网”是作为专有名词出现的，因而开头字母必须大写。
万维网是指环球信息网，英文全称为World Wide Web，简称WWW。
Web前端开发HTML5 CSS3教案网页设计基础教案
课程名称WEB 前端开发（1） 课次 1 任务、项目、课题名称 网页设计基础课时2学时教学内容网页的相关知识 网站设计流程 Dreamweaver 操作界面教学目标 掌握网页的相关知识 了解网站设计流程 熟悉Dreamweaver 操作界面 教学重点 网页相关概念 教学难点网站设计流程教学活动及主要环节学生活动 导入新课：（2分钟） 1．有无制作过网页？2．以前学过的网页课程？ 课程介绍：(10分钟)本学期主要学习如下内容： 1）HTML52）Dreamweaver CC2018网页制作编辑软件的使用 3） CSS 的使用4) DIV+CSS 网页布局考试方法：平时成绩（50）+期末考试（50）平时50分：到课率10分+提交实验作业10分+上课表现10分+作品20分 新授：一、网页展示与认识（展示百度、淘宝官网，历届学生的优秀作品）（10分钟）在学习创建网站、制作网页之前，我们先浏览几个网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。
二、相关概念（15分钟）1、IP 地址和域名2、URL ：统一资源定位符3、HTTP ：超文本传输协议，提供一种发布和接收HTML 页面的方法。
4、网站、网页与主页：主页通常用index.htm 或index.html 表示。
5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。
（学生操作）6.WEB 标准：包括结构标准（HTML ）、表现标准(CSS)和行为标准(JAVASCRIPT).学生回答，参与互动动手操作，任意打开一个网页，查看网页源代码三、 HTML5概述（13分钟） HTML5主要优势：（1）良好的移植性 （2）更直观的结构。
（3）内容和样式分离。
（4）新的表单元素。
（5）更方便地嵌入音频和视频。
（6）矢量图绘制。
（演示canvas 画布） 四、常用的浏览器（5分钟）三大浏览器：IE 、火狐FireFox 、谷歌Chrome （推荐使用）。
网页设计与制作案例教程(HTML5+CSS3)第2章HTML语言基础
果
<h6>这是六号标题</h6>
19
2.4.2 常见HTML标签
HTML段落是通过<p></p>标签对定义的。
段落与换行标签
网
代 <p>爱好１：我喜欢散步</p>
页
<p>爱好２：我喜欢旅游</p> 码
效
果
20
2.4.2 常见HTML标签 段落与换行标签
要在不产生一个新段落的情况下达到换行效果，需要使用<br>标签。
为图像添加的超链接，点
点击文字进入其它页面。 击图像进入其它页面。
格式： <a href="链接目标路 径及文件名">链接文 字</a>
格式： <a href="链接目标路径 及文件名"> <img src=" 图像路径及名称"></a>
锚点超链接
电子邮件超链接
在同一页面上跳转的链接
创建锚点超链接分两步： 1．目标位置命名锚点 格式：<a name="锚点 名称">目标位置</a> 2．标题位置添加超链接 格式：<a href="#锚点 名称">标题名</a>
2.4.2 常见HTML标签 图像标签
插入图像<img>作为HTML实体标签存在 ，而背景图像则是CSS的修饰内容。
网
代 <img src="images/flower.png"
页
width="157" height="77" alt="这
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5.1 HTML5新增标签
5.1.2 HTML5结构性标签 5.<aside>标签 <aside> 标签定义 article以外的内容，如侧边栏、广告、nav 元素组，以及其他类似的内容部分 。aside的内容应该与 article的内容相关。
<nav> <ul> <li><a href="#">联系我们</a></li>
<li><a href="#">问题反馈</a></li> </ul>
<nav>
5.1 HTML5新增标签
5.1.2 HTML5结构性标签 3.<section>标签
<section> 标签定义文档中的版块（section）。比如章节、页 眉、页脚或文档中的其他部分。一个section元素中通常由内 容及其标题组成。
5.1 HTML5新增标签
5.1.3 HTML5语义化标签 4. <datalist>标签 <datalist>标签定义选项列表，要与 input 元素配合使用该元 素，来定义 input 可能的值。datalist 及其选项不会被显示出 来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属 性来绑定 <datalist >中的id属性。
5.1 HTML5新增标签
5.1.2 HTML5结构性标签 4.<article>标签
<article> 标签用来在页面中表示一套结构完整、独立、可以独 自被外部引用的内容。例如，杂志或报纸中的一篇文章，用户 提交的评论内容，可互动的页面模块挂件等，页面中主体部分 或其他任何独立的内容都可以用<article> 标签来定义。
5.1 HTML5新增标签
5.1.1 HTML5概述 HTML5的设计目的是为了在移动设备上支持多媒体。其新特 性包括： （1）语义特性（Class：Semantic） （2）本地存储特性（Class: OFFLINE & STORAGE） （3）设备兼容特性 (Class:DEVICE ACCESS) （4）连接特性（Class:CONNECTIVITY） （5）网页多媒体特性(Class:MULTIMEDIA) （6）三维、图形及特效特性（Class: 3D, Graphics & Effects） （7）性能与集成特性（Class: Performance & Integration） （8）CSS3特性(Class: CSS3)
<section> <h2>国内新闻</h2> <p>纵览国内时政、综述评论及图片的栏目,主要包括时政要闻、内地
新闻、港澳台新闻、媒体聚焦、评论分析。</p> </section> <section>
<h2>国际新闻</h2> <p>专门展示国际时事、综述评论及图片的栏目,主要包括最新报道、 新闻人物、评论分析、媒体聚焦、军事新闻。</p> </section>
网页设计与Web前端开发案例教程
——HTML5、CSS3、JavaScript
第5章 HTML5+CSS3移动网站布局
学习目标： 了解HTML5的概念及新增标签 熟悉CSS3的新增伪类和伪元素 熟练使用CSS3的几种常用属性 熟练使用CSS3的几种新增属性 理解和掌握CSS3弹性盒模型的原理和用法 理解响应式布局和自适应布局的原理和用法 通过相关的范例及综合案例实践，深入了解并掌握HTML5+CSS3技术 及在移动端网站布局方面的应用
5.1 HTML5新增标签
5.1.2 HTML5结构性标签 1. <header>标签 <header>标签定义文档的页眉（介绍信息），通常用来放置 整个页面或页面内的一个内容区块的标题，但也可以包括表 格、logo图片等内容。
<header><h1>页面标题</h1></header>
2.<nav>标签 <nav> 标签定义导航链接的部分，可用作链接导航的链接组 ，其中的导航元素链接到其他页面或当前页面的其他部分。
5.1.3 HTML5语义化标签 3. <time>标签 <time>标签定义公历的时间（24 小时制）或日期，时间和时 区偏移是可选的。该元素能够以机器可读的方式对日期和时 间进行编码，用户代理能够把生日提醒或排定的事件添加到 用户日程表中，搜索引擎能够生成更智能的搜索结果。
<p>我们每天早上<time>6:00</time>起床</p> <p>我在 <time datetime="2018-10-01">国庆节</time>要去旅行</p>
<figure> <figcaption>美图集锦</figcaption> <!--定义figure元素中的标题--> <img src="images/01.png" alt="图像1"> <img src="images/02.png" alt="图像2">
</figure>
5.1 HTML5新增标签
6.<footer>标签 <footer> 标签定义文档或节的页脚，一般作为其上层容器元 素的脚注，其中通常包含文档的作者、版权信息、使用条款 链接、联系信息等。
5.1 HTML5新增标签
5.1.3 HTML5语义化标签 1. <hgroup>标签 <hgroup> 标签被用来对标题元素进行分组，一般用于一个标 题和一个子标题（<h1>—<h6>），或者标语的组合。
<hgroup> <h1>欢迎来到程序员之家</h1> <h2>爱编程，爱生活！</h2> </hgroup> <p>分享几段有趣的编程故事……TML5语义化标签 2. <figure>标签 <figure> 标签用于对元素进行组合，它规定独立的流内容（图 像、图表、照片、代码等等）。<figure> 元素的内容应该与主 内容相关，同时元素的位置相对于主内容是独立的。
<input type="text" list='vallist'> <datalist id='vallist'> <option value="html">html</option> <option value="css">css</option> <option value="js">js</option> </datalist>