任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

2023-03-14
| 71页
| 117人阅读
| 5人下载
普通

内容正文：

任务2 搭建简单学院网站 Web前端开发案例教程 HTML5+CSS3 微课版 制作网站是从搭建网页结构开始的，本项目使用HTML5语言常用标记构建网页内容，分别创建网站主页、学院简介页面、学院新闻页面、新闻详情页面。使用文本标记、图像标记、超链接标记、列表标记等知识点实现页面的创建，通过该任务的实现，掌握 HTML5 网页的基本结构、HTML5 的语法、常用的 HTML5标记等。 任务导学 任务3 搭建简单学院网站 任务2 任 务 描 述 任务效果 图2-1 网站首页 图2-2　学院简介页面 综合利用 HTML5 标记，搭建一个简单的学院网站，页面浏览效果如图 2-1～图 2-4 所示。 任务效果 图2-3 学院新闻页面 图2-4　新闻详情页面 知识点 HTML5文档基本结构 01 HTML标记及属性 02 HTML文本标记 03 HTML列表标记 04 HTML超链接标记 05 HTML图像标记 06 任务3 搭建简单学院网页 任务2 知 识 准 备 2.2.1 HTML5文档的基本结构 使用 HBuilderX 新建网页文件时会自动生成一些源代码，这些自带的源代码构成了 HTML5 文档的基本结构。 2.2.1 HTML5文档的基本结构 京东网主页 京东网主页源代码 查看网页文件源代码的方法：在页面上右击，选择“查看源代码”。 2.2.1 HTML5文档的基本结构 HTML5文档类型声明 文档的开始标记 头部的开始标记 元数据标记 标题标记 头部结束标记 主体开始标记 主体结束标记 文档的结束标记 文档类型声明 ，位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 标准规范。HTML5文档中的文档类型声明代码如下。 <！DOCTYPE> <!DOCTYPE html> 2.2.1 HTML5文档的基本结构 11 <html>标记标志着 HTML 文档的开始，</html>标记标志着 HTML 文档的结束。在它们之间的是文档的头部和主体内容。 <html>标记 2.2.1 HTML5文档的基本结构 12 <head>标记用于定义 HTML 文档的头部信息，也称为头部标记。<head>标记紧接在<html>标记之后，主要用来封装其他位于文档头部的标记，例如，<title>、<meta>、<link>和<style>等用来描述文档的标题、作者以及样式等。 一个 HTML 文档只能含有一对<head>标记。 <head>标记 2.2.1 HTML5文档的基本结构 13 <body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内。 一个 HTML 文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>标记之后，与<head>标记有并列关系。 <body>标记 2.2.1 HTML5文档的基本结构 14 <html>标记、<head>标记和<body>标记都是 HTML 文档中的基本标记，除了这些标记之外，HTML5 还提供了大量其他标记，下面对标记及标记中的属性进行简要说明。 2.2.2 HTML标记及其属性 标记 2.2.2 HTML标记及其属性 HTML标记以“<”开始，以“>”结束 HTML中的标记分双标记和单标记 双标记：由开始标记和结束标记组成，结束标记前有“/”符号； 譬如，<html>…</html>、<head>…</head>等； 单标记：只有开始标记，无结束标记； 譬如，<meta…>等 标记书写时不区分大小写，但一般用小写 可以同时使用多个标记共同作用于网页中的内容，各标记之间的顺序任意 标记的属性 2.2.2 HTML标记及其属性 <标记 属性 1="属性值 1" 属性 2="属性值 2"... >受标记影响的内容</标记> 标记可以通过不同的属性展现各种效果，属性在标记中的使用格式如下。 例如，<a href="http://www.sdcit.edu.cn">未来信息学院</a> 标记的属性 2.2.2 HTML标记及其属性 所有属性必须包含在开始标记里，不同属性间用空格隔开。有的标记无属性。 属性值用双引号引起来，放在相应的属性之后，属性和属性值用等号连接；属性值不设置时采用属性默认值。 属性之间的顺序任意。 注释标记 2.2.2 HTML标记及其属性 <!-- 注释文字 --> 如果需要在HTML文档中添加一些便于读者阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下。 例如，<a href="http://www.sdcit.edu.cn">未来信息学院</

资源预览图

任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
1
任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
2
任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
3
任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
4
任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
5
任务2搭建简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
6
所属专辑
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。