版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务1创建第一个HTML5网页Web前端开发案例教程（HTML5+CSS3）
（AI助学）微课版（第3版）Web前端开发是从创建网页开始的，本任务运用HBuilderX网页编辑软件创建一个简单的HTML5网页。通过该任务的实现，熟悉HBuilderX网页编辑软件，了解网页文件的基本结构和网页相关概念等。1.1任务描述图1-1第一个网页启动HBuilderX，创建项目，在该项目中新建一个HTML文件，在网页上显示：“厚德立信精技通达——校训”。浏览效果如图1-1所示。1.2知识准备1.2.1认识Web前端开发1.2.2Web相关概念1.2.3HTML5概述1.2.4常用的浏览器1.2.5网页编辑软件1.2.1认识Web前端开发Web前端开发是创建Web页面或App界面等前端界面并将其呈现给用户的过程，通过超文本标记语言（Hyper-TextMarkupLanguage，HTML）、层叠样式表（CascadingStyleSheets，CSS）、JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。1.2.1认识Web前端开发前端开发从网页设计演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页设计是Web1.0时代的产物，早期网站的主要内容都是静态的，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现在的网页更加美观，交互效果显著，功能更加强大。1.2.1认识Web前端开发与前端开发对应的是后端开发。后端开发通过编写程序代码与后台服务器交互，来动态更新网站的内容。页面超文本预处理器（HypertextPreprocessor，PHP）、Java服务器页面（JavaServerPages，JSP）和活动服务器页面（ActiveServerPages，ASP）.NET等后台开发技术，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。IP地址（InternetProtocolAddress）用于确定互联网上的每台主机，它是每台主机唯一的标识。在互联网上，每台计算机或网络设备的IP地址都是全世界唯一的。IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整数。例如，某台主机的IP地址是32，本机的IP地址是
。IP地址1.2.2Web相关概念由于IP地址是数字编码的，不易记忆，所以我们平时上网使用的大多是诸如的地址，即域名。www表示万维网（WorldWideWeb，WWW）。例如，是人邮教育社区的域名。域名1.2.2Web相关概念统一资源定位符（UniformResourceLocator，URL）其实就是Web地址，俗称“网址”。万维网上的所有文件都有唯一的URL，只要知道资源的URL，就能够对其进行访问。URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。例如，/book/details/6948，就是一本书详情页的URL。URL1.2.2Web相关概念超文本传输协议（HyperTextTransferProtocol，HTTP）是互联网上应用最为广泛的一种网络协议。所有的万维网文件都必须遵守这个协议。设计HTTP的最初目的是提供一种发布和接收HTML页面的方法。超文本传输安全协议（HyperTextTransferProtocolSecure，HTTPS）是由HTTP+安全套接字层（SecureSocketLayer，SSL）构建的、可进行身份认证的加密传输协议，比HTTP更安全。HTTP与HTTPS1.2.2Web相关概念在浏览网站时看到的每个页面都像是书中的一页，我们称之为“网页”。把一系列逻辑上可以视为一个整体的网页叫作网站，或者说，网站就是一组相互链接的页面集合，它具有共享的属性。主页是网站被访问的第一个页面，其中包含指向其他页面的超链接，通常用index.html表示。网站、网页与主页1.2.2Web相关概念HTML表示网页的一种规范（或者说是一种标准），它通过标记定义了网页内容的显示。HTML提供了许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容，就用相应的HTML标记进行描述。HTML1.2.2Web相关概念查看网页源代码的方法：在网页上右击，选择“查看页面源代码”Web标准是一系列标准的集合，主要包括结构标准、表现标准和行为标准。结构主要指的是网页的HTML结构，即网页文档的内容；表现指的是网页元素的版式、颜色、大小等外观样式，是指用CSS设置的样式；行为指的是网页模型的定义及交互代码的编写，主要是指用JavaScript脚本语言实现的网页行为效果。Web标准1.2.2Web相关概念HTML5是超文本标记语言的第5代版本。
2014年10月29日，W3C宣布HTML5标准规范制定完成，并公开发布。1.2.3HTML5概述HTML5的主要优势如下。（1）良好的移植性。（2）更直观的结构。（3）内容和样式分离。（4）新的表单元素。（5）更方便地嵌入音频和视频。（6）矢量图绘制。1.2.4常用的浏览器
目前，常用的浏览器有Edge、火狐（Firefox）、Chrome、Safari和Opera等，如下图所示。Edge浏览器是微软新一代的浏览器，是IE的替代产品，其功能全面，支持扩展程序，界面简洁、注重实用，对HTML5有很好的支持。Edge浏览器1.2.4常用的浏览器
火狐浏览器是一个开源网页浏览器。火狐浏览器由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它可以集成很多小插件，具有可拓展等特点。该浏览器发布于2002年，它也是世界上使用较广泛的浏览器，对HTML5也有很好的支持。火狐浏览器1.2.4常用的浏览器Chrome浏览器是由谷歌公司开发的开放源代码的浏览器。该浏览器的目标是提升网页的稳定性、传输速度和安全性，并创造出简单有效的使用界面。Chrome浏览器完全支持HTML5的功能。Chrome浏览器1.2.4常用的浏览器Safari浏览器是苹果公司开发的浏览器，Opera浏览器是Opera软件公司开发的一款浏览器，两款浏览器都对HTML5有很好的支持。其它浏览器1.2.4常用的浏览器1.2.5网页编辑软件
网页编辑软件有很多种，比较常用的有HBuilderX、AdobeDreamweaver、VisualStudioCode、SublimeText等。微软公司产品国产软件（本书使用）Adobe公司产品由程序员JonSkinner开发1.3任务实现1.3.1启动HBuilderX1.3.2新建项目1.3.3在项目中创建网页文件1.3.4输入网页代码1.3.5保存并浏览网页1.3.1启动HBuilderX双击HBuilderX.exe文件或桌面上的HBuilderX快捷方式，启动HBuilderX，如图所示。1.3.2新建项目从菜单栏中选择“文件”|“新建”｜“项目”选项，出现“新建项目”对话框，输入项目名称chapter01，项目存放位置为“E:/Web前端开发/源码”，选择模板类型为“空项目”，单击“创建”按钮，如图所示。项目用来存储一个网站的所有文件，这些文件包括网页文件、图像及音视频文件、脚本文件、样式表文件等1.3.3在项目中创建网页文件在左侧视图中右击项目名称，在弹出的快捷菜单中选择“新建”｜“html文件”选项，出现“新建html文件”对话框，输入文件名example01.html，单击“创建”按钮，如图所示。1.3.4输入网页代码在网页文件代码的<title>与</title>之间输入HTML文档的标题，这里输入“第一个网页”，然后在<body>与</body>标记之间添加网页的主体内容，如图所示。在菜单栏中选择“文件”｜“保存”选项，或按“Ctrl+S”组合键，即可保存文件内容。单击工具栏中的“浏览器运行”按钮或按“Ctrl+R”组合键，选择Chrome浏览器浏览网页，效果如下图所示。1.3.5保存并浏览网页浏览网页时，也可在“此电脑”中双击文件名来浏览。小提示任务小结任务2搭建简单学院网站Web前端开发案例教程（HTML5+CSS3）
（AI助学）微课版（第3版）制作网站是从搭建网页结构开始的，本项目使用HTML5语言常用标记构建网页内容，分别创建网站主页、学院简介页面、学院新闻页面、新闻详情页面。使用文本标记、图像标记、超链接标记、列表标记等知识点实现页面的创建，通过该任务的实现，掌握HTML5网页的基本结构、HTML5的语法、常用的HTML5标记等。2.1任务描述图2-1网站首页图2-2学院简介页面综合利用HTML5标记，搭建一个简单的学院网站，页面浏览效果如图2-1～图2-4所示。图2-3学院新闻页面图2-4新闻详情页面2.1任务描述2.2知识准备2.2.1HTML5文档基本结构2.2.2HTML标记及属性2.2.3HTML文本标记2.2.4HTML列表标记2.2.5
HTML超链接标记2.2.6HTML图像标记2.2.1HTML5文档的基本结构使用HBuilderX新建网页文件时会自动生成一些源代码，这些自带的源代码构成了HTML5文档的基本结构。2.2.1HTML5文档的基本结构
京东网主页
京东网主页源代码查看网页文件源代码的方法：在页面上右击，选择“查看源代码”。2.2.1HTML5文档的基本结构HTML5文档类型声明文档的开始标记头部的开始标记元数据标记标题标记头部结束标记主体开始标记主体结束标记文档的结束标记文档类型声明
，位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。HTML5文档中的文档类型声明代码如下。<！DOCTYPE><!DOCTYPEhtml>2.2.1HTML5文档的基本结构<html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束。在它们之间的是文档的头部和主体内容。<html>标记2.2.1HTML5文档的基本结构<head>标记用于定义HTML文档的头部信息，也称为头部标记。<head>标记紧接在<html>标记之后，主要用来封装其他位于文档头部的标记，例如，<title>、<meta>、<link>和<style>等用来描述文档的标题、作者以及样式等。一个HTML文档只能含有一对<head>标记。<head>标记2.2.1HTML5文档的基本结构<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内。一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>标记之后，与<head>标记有并列关系。<body>标记2.2.1HTML5文档的基本结构<html>标记、<head>标记和<body>标记都是HTML文档中的基本标记，除了这些标记之外，HTML5还提供了大量其他标记，下面对标记及标记中的属性进行简要说明。2.2.2HTML标记及其属性标记2.2.2HTML标记及其属性HTML标记以“<”开始，以“>”结束HTML中的标记分双标记和单标记
双标记：由开始标记和结束标记组成，结束标记前有“/”符号；
譬如，<html>…</html>、<head>…</head>等；单标记：只有开始标记，无结束标记；
譬如，<meta…>等标记书写时不区分大小写，但一般用小写可以同时使用多个标记共同作用于网页中的内容，各标记之间的顺序任意标记的属性2.2.2HTML标记及其属性<标记属性1="属性值1"属性2="属性值2"...>受标记影响的内容</标记>标记可以通过不同的属性展现各种效果，属性在标记中的使用格式如下。例如，<ahref="">未来信息学院</a>标记的属性2.2.2HTML标记及其属性所有属性必须包含在开始标记里，不同属性间用空格隔开。有的标记无属性。属性值用双引号引起来，放在相应的属性之后，属性和属性值用等号连接；属性值不设置时采用属性默认值。属性之间的顺序任意。标记的嵌套2.2.2HTML标记及其属性标记里面还可以包含其他标记，称为标记嵌套。例如，<p><strong>未来信息学院</strong>是一所公办学校</p>注意：在嵌套标记时，必须先结束里面的标记，再结束外面的标记，不要出现交叉嵌套的情况。注释标记2.2.2HTML标记及其属性<!--注释文字-->如果需要在HTML文档中添加一些便于读者阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式如下。例如，<ahref="https://">未来信息学院</a><!--给文字设置超链接-->标题标记2.2.3HTML文本标记<hn>标题文字</hn>标题标记基本语法格式如下。用于设置文档中的标题，其中n
表示1～6的数字，分别表示一～六级标题，<h1>表示一级标题，<h6>表示六级标题。标题标记2.2.3HTML文本标记例2-2：example02.html段落标记2.2.3HTML文本标记<p>段落文字</p>段落标记基本语法格式如下。“p”是英文“paragraph”（段落）的缩写。<p>和</p>之间的文字表示一个段落，多个段落需要用多对<p>标记。段落标记2.2.3HTML文本标记例2-3：example03.html水平线标记2.2.3HTML文本标记<hr/>水平线标记基本语法格式如下。“hr”是英文“horizontalrule”（水平线）的缩写，其作用是绘制一条水平线。该标记为单标记，/可以省略，写为<hr>。水平线标记2.2.3HTML文本标记例2-4：example04.html换行标记2.2.3HTML文本标记<br/>换行标记基本语法格式如下。“br”是英文“break”的缩写，其作用是强制换行。该标记为单标记，/可以省略，写为<br>。换行标记2.2.3HTML文本标记例2-5：example05.html字体样式标记2.2.3HTML文本标记字体样式标记可以设置文字的粗体、斜体、删除线和下画线效果。<strong>文本内容</strong>：文本以粗体显示。<em>文本内容</em>：文本以斜体显示。<del>文本内容</del>：为文本添加删除线。<ins>文本内容</ins>：为文本添加下划线。字体样式标记2.2.3HTML文本标记例2-6：example06.html特殊字符2.2.3HTML文本标记在网页设计过程中，除了显示文字以外，有时还需要插入一些特殊的字符，如版权符号、注册商标、货币符号等。这些字符需要用一些符号代码来表示。特殊字符符号代码备注空格
表示一个英文字符的空格>>大于号<<小于号©©版权符号®®注册商标¥¥人民币符号查阅资料：如何表示一个汉字字符的空格？无序列表2.2.4HTML列表标记无序列表的基本语法格式如下。<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ul>ul是英文“unorderedlist”（无序列表）的缩写。浏览器在显示无序列表时，会以特定的项目符号对列表项进行排列。无序列表2.2.4HTML列表标记例2-8：example08.html有序列表2.2.4HTML列表标记有序列表的基本语法格式如下。<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...</ol>ol是英文“orderedlist”（有序列表）的缩写。浏览器在显示有序列表时，会用数字对列表项进行排列。有序列表2.2.4HTML列表标记例2-9：example09.html。列表嵌套2.2.4HTML列表标记在HTML中可以实现列表的嵌套，也就是说，无序列表或有序列表的列表项中还可以包含有序列表或无序列表。列表嵌套2.2.4HTML列表标记例2-10：example10.html。自定义列表2.2.4HTML列表标记自定义列表用于对条目或术语进行解释或描述。与无序列表和有序列表的列表项不同，自定义列表的列表项前没有任何项目符号或数字。自定义列表2.2.4HTML列表标记自定义列表的基本语法格式如下。<dl><dt>条目1</dt><dd>数据</dd><dd>数据</dd>...<dt>条目2</dt><dd>数据</dd><dd>数据</dd>...</dl>dl是英文“definitionlist”（定义列表）的缩写。dt是“definitionterm”（定义项）的缩
写，表示条目名称；dd是“definitiondata”（定义数据）的缩写，表示条目的数据内容。自定义列表2.2.4HTML列表标记<dl>标记中可以有多对<dt>标记，每对<dt>标记下可以有多对<dd>标记。自定义列表在显示时，条目的数据内容会自动缩进，使列表结构更加清晰。自定义列表2.2.4HTML列表标记例2-11：example11.html超链接一般有以下几种形式2.2.5HTML超链接标记（1）页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。（2）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。（3）空链接：单击该链接时不进行任何跳转。2.2.5HTML超链接标记超链接的语法格式如下。<ahref="目标地址"target="目标窗口"title="提示文本">热点文字</a>说明：（1）href：定义超链接指向的文档的
URL，URL
可以是绝对
URL，也可以是相对URL。①
绝对URL：也称绝对路径，是指资源的完整地址，包含协议名称、计算机域名以及路径等。代码如下。<ahref="">百度</a>2.2.5HTML超链接标记②
相对URL：也称相对路径，是指目标地址相对当前页面的路径。代码如下。<ahref="webs/page1.html">热点文字</a>webs/page1.html表示page1.html是在当前目录下webs子目录中的文件。若目标文件在当前目录的上一级目录中，则应该写成下面的格式。<ahref="../page1.html">热点文字</a>其中，..表示当前目录的上一级目录。2.2.5HTML超链接标记（2）target：定义超链接的目标文件在哪个窗口打开。其常用取值有_blank和_self。_blank表示在新的浏览器窗口打开；_self表示在原来的窗口打开，_self是默认取值。（3）title：定义鼠标指针指向超链接文字时显示的提示文字。例如，<ahref="news1.html"title="学院2023年新年贺词：风正劲帆高扬提质培优谱新篇">学院2021年新年贺词…</a>
页面间的超链接2.2.5HTML超链接标记例2-12：example12_1.html和example12_2.html，通过超链接实现两个页面的相互跳转。代码略。锚点链接2.2.5HTML超链接标记当同一页面中内容较多，浏览时需要不断拖动滚动条来查看内容时，为了提高信息检索速度，可以在页面上创建锚点链接来快速定位到要查看的内容。创建锚点链接需要以下两步。第一步：定义锚点的位置，使用id="锚点名称"来标注。第二步：创建指向锚点的链接，使用格式<ahref="#锚点名称">热点文字</a>。锚点链接2.2.5HTML超链接标记例2-13：example13.html代码略。空链接2.2.5HTML超链接标记空链接的语法格式如下。<ahref="#">热点文字</a>单击空链接时不进行任何跳转。在制作网页时，如果暂时无法确定超链接的目标文件，就可以将其建立为空链接。说明：常用的Web图像格式2.2.6HTML图像标记支持动画制作LOGO、小图标等相对单一的图像支持透明无损压缩GIF格式常用的Web图像格式2.2.6HTML图像标记体积更小不支持动画颜色过渡更光滑支持alpha透明PNG格式常用的Web图像格式2.2.6HTML图像标记显示颜色丰富特别为照片设计的的文件格式
有损压缩的图像格式JPG格式图像标记2.2.6HTML图像标记<imgsrc="图像路径"alt="替换文本"title="提示文本"width="图像宽度"height="图像高度">语法格式：说明：height属性设置图像的高度。src属性设置图像的来源，必需属性。alt属性图像不能显示时的替换文本，必需属性。width属性设置图像的宽度。title属性鼠标指向图像时显示的文本。图像标记2.2.6HTML图像标记例2-14：example14.html给图像创建超链接2.2.6HTML图像标记例2-15：example15.html给图像创建超链接2.2.6HTML图像标记效果如图所示。
单击百度Logo跳转到百度网站单击第二个图像跳转到图像本身2.3任务实现2.3.1创建学院网站项目2.3.2创建学院网站首页2.3.3创建学院简介页面2.3.4创建学院新闻页面2.3.5创建新闻详情页面2.3.1创建项目简单学院网站由多个页面构成，而且用到了图像，为了便于操作和组织这些文件，先创建网站项目。打开HBuilderX工具，选择“文件”｜“新建”选项，再选择“项目”选项，在“新建项目”对话框中输入项目名称school，位置位于“E:/Web前端开发/源码/chapter02”目录下，选择模板“空项目”，单击“创建”按钮。2.3.1创建项目右击项目名称school，选择“新建”|“目录”选项，创建目录images，用于存放图像文件，把本任务提供的素材中的图像复制到该目录中。2.3.2创建网站首页下面对首页的结构进行分析，然后在项目中创建页面文件，使用HTML相应标记添加页面的内容。页面分析2.3.2创建网站首页标题水平线段落（包含换行）图像超链接版权信息创建首页2.3.2创建网站首页右击项目名称school，选择“新建”|“html文件”选项，将文件命名为index.html,并添加代码如下。页面分析2.3.3创建学院简介页面标题水平线段落水平线超链接版权信息创建学院简介页面2.3.3创建学院简介页面右击项目名称school，选择“新建”|“html文件”选项，将文件命名为intr.html,并添加代码如下。页面分析2.3.4创建学院新闻页面标题水平线
无序列表水平线超链接版权信息创建学院新闻页面2.3.4创建学院新闻页面右击项目名称school，选择“新建”|“html文件”选项，将文件命名为news.html,并添加代码如下。页面分析2.3.5创建新闻详情页面标题水平线段落图像超链接版权信息创建新闻详情页面2.3.5创建新闻详情页面右击项目名称school，选择“新建”|“html文件”选项，将文件命名为news1.html,并添加代码如下。任务小结本任务围绕简单学院网站项目的制作，介绍了HTML5文档的基本结构，以及段落标记、字体样式标记、列表标记、超链接标记和图像标记等的使用方法，并综合利用这些标记完成了简单学院网站项目的制作。任务小结任务3美化简单学院网站Web前端开发案例教程（HTML5+CSS3）
（AI助学）微课版（第3版）在任务2中使用HTML标记和相应的属性搭建了简单学院网站，可以看出，只使用HTML标记创建的网站并不美观，本任务对简单学院网站进行美化，设置文字的颜色和对齐方式等。通过本任务的实现，掌握CSS3的基本语法、使用方式、选择器以及常用的文本样式属性等。3.1任务描述图3-1网站首页图3-2
学院简介页面对任务2中搭建的简单学院网站进行美化，页面浏览效果如图3-1~3-4所示图3-3学院新闻页面 图3-4新闻详情页面3.1任务描述3.2知识准备CSS常用文本属性043.2.1CSS基本概念3.2.2
CSS使用方式3.2.3常用CSS选择器3.2.4CSS常用文本属性3.2.5
CSS的高级特性3.2.1什么是CSS如果希望网页美观、大方，并且升级轻松、维护方便，有什么好办法吗?3.2.1什么是CSS我们在完成了首页的HTML代码后，需要对网页进行美化，这就需要使用CSS。3.2.1什么是CSSCSS（CascadingStyleSheet），称为层叠样式表不需要编译、可直接由浏览器执行的标记性语言，是用于格式化网页的标准格式扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式由W3C工作组组织负责制定和发布CSS3.2.1什么是CSSCSS3.2.1什么是CSS样式就是格式。对于网页来说，像网页显示的文字的大小和颜色、图片位置、段落和列表等，都是网页显示的样式层叠是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器就按照CSS的样式优先级来应用样式。对于由几百个网页组成的大型网站来说，要使所有的网页样式风格统一，可以定义一个CSS样式表文件，这样几百个网页都调用这个样式表文件即可CSS将样式的定义与HTML文件结构分离如果要修改网页的样式，只需修改CSS样式表文件就可以3.2.1什么是CSSCSS的特点CSS的发展历程1994年提出了CSS的想法2005年12月开始CSS3标准的制定1996年12月发布了CSS1.0规范开始CSS3标准的制定可向网页添加字体、颜色等属性1998年5月发布了CSS2.0规范添加了用于定位的属性还扩展了对其他媒体的显示控制3.2.1什么是CSSCSS样式，用于控制文字的颜色、对齐方式等HTML内容CSS嵌入在HTML文档中，虽然与HTML在同一个文档中，但CSS集中写在HTML文档的头部，符合结构与表现相分离的。3.2.1什么是CSS3.2.2引入CSS样式
行内式也称为内联样式，是通过标记的style属性设置元素的样式，其基本语法格式如下：
<标记style="属性：属性值；属性：属性值；……">内容</标记名>通过style属性设置标记的样式。CSS属性，不同于HTML标记的属性。属性和属性值之间用英文状态下的冒号分隔多个属性之间必须用英文状态下的分号隔开最后一个属性值后的分号可以省略行内样式3.2.2引入CSS样式例3-1：使用行内式设置元素样式
example01.html行内样式行内式由于将表现和内容混在一起，不符合Web标准，所以很少使用。一般需要临时修改某个样式规则时使用。3.2.2引入CSS样式
内部样式表是将所有CSS样式代码写在HTML文档的<head>头部标记中，使用<style>标记定义，其语法格式如下：
<head><styletype="text/css">
选择器1{属性：属性值；属性：属性值；……}/*注释内容*/
选择器2{属性：属性值；属性：属性值；……}
</style></head><style>标记一般位于<head>标记中的<title>标记之后指定CSS样式作用的HTML对象，有标记选择器、类选择器和ID选择器等CSS的注释符号，用于说明该行代码的作用，注释内容不会显示在网页上内部样式表3.2.2引入CSS样式例3-2：使用内部样式表设置网页内容的样式
example02.html内部样式表只对其所在的HTML页面有效网站只有一个页面时，使用内嵌式有多个页面且多个页面使用相同风格的样式时，则应使用外部样式表3.2.2引入CSS样式
将所有的CSS样式放入外部样式表文件（扩展名为css），通常使用<link>标记将外部样式表文件链接到HTML文件中。其语法格式如下：<head><linkhref="外部样式表文件路径"rel="stylesheet"type="text/css"></head><link>标记一般位于<head>标记中的<title>标记之后定义被链接的文件是样式表文件定义所链接的外部样式表文件的URL定义所链接文档的类型为text/css，即CSS文档，该属性可以省略外部样式表3.2.2引入CSS样式外部样式表例3-3：将例3-2实现的效果用外部样式表实现
example03.html（1）搭建页面结构3.2.2引入CSS样式外部样式表（2）创建外部样式表文件
3.2.2引入CSS样式外部样式表（3）编写CSS样式表代码3.2.2引入CSS样式外部样式表（4）链接CSS外部样式表
在<title>标记后，添加<link>语句。<linkhref="css/style.css"rel="stylesheet">
3.2.2引入CSS样式外部样式表同一个CSS样式表可以被多个HTML页面链接使用实际网站制作时一般都是用此种方式该种方式实现了结构与表现的分离，使得网页的前期制作和后期维护都十分方便。3.2.3CSS常用选择器标记选择器
标记选择器即标签选择器（TagSelector），也称为元素选择器（ElementSelector），是最基础且常用的选择器之一。它通过HTML标记名来匹配并选中页面中对应的元素，从而对这些元素应用样式。其语法格式如下。标记名称{属性：属性值；属性：属性值；……}所有的HTML标记都可以作为标记选择器，如body、h1~h6、p、ul、li、strong等标记选择器定义的样式能自动应用到网页中的相应元素上3.2.3CSS常用选择器标记选择器举例：使用p选择器定义HTML页面中所有段落的样式。标签名称属性属性值3.2.3CSS常用选择器标记选择器标记选择器最大的优点是能快速统一页面中同类型标记的样式，同时这也是它的缺点，不能设计差异化样式。3.2.3CSS常用选择器类选择器
类选择器（ClassSelector）是通过元素的class属性值来选择页面元素的选择器，类选择器以英文“.”开头，后面紧跟类名。.类名称{属性：属性值；属性：属性值；……}使用类选择器定义的CSS样式，需要设置元素的class属性值为其指定样式类选择器的最大优势是可以为元素定义相同或单独的样式3.2.3CSS常用选择器类选择器例3-4：使用类选择器定义网页元素的样式
example04.html类选择器可以为页面中相同的标记设置不同的样式，也可以为不同的标记设置相同的样式。一个元素可以同时添加多个类，类名之间用空格分隔。类名的第一个字符不能为数字，且类名严格区分大小写，一般用小写英文字符。3.2.3CSS常用选择器
ID选择器用于对某个元素定义单独的样式，ID选择器以“#”开始，其语法格式如下。#ID名称{属性：属性值；属性：属性值；……}ID名称即为HTML元素的ID属性值，ID名称在一个文档中是唯一的，只对应于页面中的某一个具体元素ID选择器定义的样式能自动应用到网页中的某一个元素上ID选择器3.2.3CSS常用选择器ID选择器
例3-5：使用ID选择器定义网页元素的样式
example05.html
3.2.3CSS常用选择器交集选择器交集选择器由两个选择器构成，表示两个选择器的交集，第一个是标记选择器，第二个是类选择器。两个选择器之间不能有空格。，其语法格式如下。标记名称.类名称{属性:属性值;属性:属性值;...}交集选择器是为了简化样式表代码的编写而采用的选择器。初学者如果不能熟练应用此选择器，则完全可以创建一个类选择器来代替交集选择器。3.2.3CSS常用选择器交集选择器
例3-6：使用交集选择器定义网页元素的样式
example06.html3.2.3CSS常用选择器并集选择器
并集选择器由多个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等）都可以作为并集选择器的一部分。选择器1,选择器2{属性：属性值；属性：属性值；……}3.2.3CSS常用选择器例3-7：使用并集选择器定义网页元素的样式
example07.html并集选择器使用并集选择器定义样式与各个选择器分别定义样式作用相同，但并集选择器的样式代码更简捷。3.2.3CSS常用选择器后代选择器
后代选择器也叫包含选择器，用于控制容器对象中的子对象，其他容器对象中的同名子对象不受影响。选择器1选择器2{属性：属性值；属性：属性值；……}书写后代选择器时，将容器对象写在前面，子对象写在后面，中间用空格分隔若容器对象有多层，则分层依次书写3.2.3CSS常用选择器
例3-8：使用后代选择器控制页面元素的样式
example08.html后代选择器3.2.3CSS常用选择器通配符选择器
通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素，其语法格式如下。*{属性：属性值；属性：属性值；……}例如:*{margin:0;padding:0;}注意：实际网页开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，这样反而降低了代码的执行速度。3.2.4CSS常用文本属性属性说明font-family设置字体font-size设置字号font-weight设置字体的粗细font-style设置字体的倾斜@font-face用于定义服务器字体，是CSS3新增属性text-decoration设置文本是否添加下划线、删除线等color设置文本颜色text-align设置文本的水平对齐方式text-indent设置段落的首行缩进line-height设置行高text-shadow设置文字的阴影效果，是CSS3新增属性text-overflow设置元素内溢出文本的处理，是CSS3新增属性表3-1常用文本属性3.2.4CSS常用文本属性font-family设置字体p{font-family:"微软雅黑";}body{font-family:"华文彩云","宋体","黑体";}3.2.4CSS常用文本属性各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：p{font-family:"TimesNewRoman";}尽量使用系统默认字体，以保证在任何用户的浏览器中都能正确显示。font-family3.2.4CSS常用文本属性font-size设置字号，一般以像素（px）为单位表示字号大小。p{font-size:12px;}最适合显示网页正文的字号大小一般为12px左右。对于标题或其他需要强调的地方可以适当设置较大的字号。页脚和辅助信息可以用小一些的字号。3.2.4CSS常用文本属性font-weight定义字体的粗细。p{font-weight:bold;}/*设置段落文本为粗体显示*/h2{font-weight:normal;}/*设置标题文本为正常显示*/3.2.4CSS常用文本属性font-style定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下。normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。p{font-style:italic;}/*设置段落文本为斜体显示*/h2{font-style:oblique;}/*设置标题文本为倾斜显示*/3.2.4CSS常用文本属性@font-faceCSS3新增属性，用于定义服务器字体。通过该属性，开发者可以在网页中使用任何喜欢的字体，而不管用户计算机是否安装这些字体。定义服务器字体的基本语法格式如下。@font-face{font-family:字体名称;src:字体文件路径;}font-family用于指定服务器字体的名称，该名称由自己定义src属性用于指定该字体文件的路径。3.2.4CSS常用文本属性@font-face
例3-9：使用@font-face属性定义服务器字体。example09.html3.2.4CSS常用文本属性text-decoration设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下。none：没有装饰（默认值）underline：下划线overline：上划线line-through：删除线a{text-decoration:none;}/*设置超链接文字不显示下画线*/a:hover{text-decoration:underline;}/*设置鼠标悬停在超链接文字上时显示下画线*/3.2.4CSS常用文本属性color定义文本的颜色，常用的取值方式有如下4种：预定义的颜色值表示：例如，black、red、green、blue等十六进制数表示：例如，#FF0000，#29D794等rgb函数表示：例如，rgb(255,0,0)或rgb(100%,0%,0%)表示红色rgba函数表示：例如，rgba(255,0,0,0.5)表示采用半透明的红色3.2.4CSS常用文本属性text-align用于设置文本内容的水平对齐。其可用属性值如下：left：
左对齐（默认值）。right：
右对齐。center：居中对齐。justify：两端对齐。h1{text-align:center;}3.2.4CSS常用文本属性text-indent设置首行文本的缩进，其属性值可为不同单位的数值。一般建议使用em（1em等于一个中文字符）作为设置单位。p{text-indent:2em;}/*设置段落缩进2个中文字符*/3.2.4CSS常用文本属性line-height段落中两行文字之间的垂直距离称为行高。在HTML中是无法控制行高的，在CSS样式中，使用line-height属性控制行与行之间的垂直间距，属性值一般以px像素为单位。p{line-height:25px;}/*设置行高为25px*/3.2.4CSS常用文本属性text-shadow设置文本的阴影效果。常用语法格式如下：选择器{text-shadow:水平阴影距离，垂直阴影距离，模糊半径，阴影颜色;}阴影距离可以是正值，也可以是负值，正负值表示阴影的方向不同。3.2.4CSS常用文本属性text-shadow
例3-10：给文字设置阴影效果。example10.html3.2.4CSS常用文本属性text-overflow设置元素内文本溢出时如何处理。基本语法格式如下：选择器{text-overflow:clip|ellipsis;}clip：修剪元素内溢出的文本，使溢出的文本不显示，也不显示省略标记“…”。Ellipsis：在元素文本末尾用省略标记“…”标示被修剪的文本。3.2.4CSS常用文本属性
例3-11：使用属性text-overflow设置溢出的文本。example11.htmltext-overflow3.2.4CSS常用文本属性设置省略标记表示溢出文本的步骤如下：（1）为包含文本的元素定义宽度。（2）设置元素的white-space属性值为nowrap，强制文本不能换行。（3）设置元素的overflow属性值为hidden，使溢出文本隐藏。（4）设置text-overflow属性值为ellipsis，显示省略标记。text-overflow3.2.5CSS的高级特性CSS是层叠样式表的简称，层叠性和继承性是其基本特征。对于Web开发工程师来说，应该深刻理解和灵活运用这两种特性。另外，当对元素定义了多个样式规则时，其样式应用的优先级也遵循一定的规则，下面分别进行介绍。3.2.5CSS的高级特性所谓层叠性是指多种CSS样式的叠加。
例如，当使用内嵌式CSS样式定义<p>标记字号大小为12像素，外部样式表定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。153
层叠性3.2.5CSS的高级特性层叠性例3-12：设置层叠样式
example12.html。第一行文本同时应用了标记p的样式、类选择器.special定义的样式和id选择器#one定义的样式，显示为微软雅黑、24px和红色，即三个选择器定义的样式进行了叠加。3.2.5CSS的高级特性继承性是指书写CSS样式表时，子元素会继承父元素的某些样式，如文本颜色和字号等。例如，定义页面主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他元素都是body元素的子元素。恰当地使用继承可以简化代码，降低CSS样式的复杂性。155
继承性3.2.5CSS的高级特性
并不是所有的CSS属性都可以继承，譬如边框属性、外边距属性、内边距属性、背景属性、定位属性、布局属性、元素宽高属性等。156当为body元素设置字号属性时，标题文本不会采用这个样式，因为标题标记h1～h6有默认的字号大小。
继承性3.2.5CSS的高级特性定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级问题。根据规定，样式表的优先级别从高到低为：行内样式>嵌入式>外部样式表也就是最接近目标元素的样式优先级越高，即就近原则。157CSS优先级3.2.5CSS的高级特性CSS优先级例3-13：优先级练习
example13.html3.2.5CSS的高级特性159CSS优先级若对同一个元素在行内样式或在内部样式表或在外部样式表中定义了相同的选择器的样式，则此时的优先级为：行内样式>内部样式表>外部样式表，也就是越接近目标元素的样式，优先级越高，即就近原则。例3-13运行效果3.3任务实现3.3.1美化学院网站首页3.3.2美化学院简介页面3.3.3美化学院新闻页面3.3.4美化新闻详情页面3.3.1美化网站首页3.3.2美化学院简介页面3.3.3美化学院新闻页面3.3.4美化新闻详情页面任务小结本任务围绕简单学院网站页面的美化，介绍了CSS在网页中的引用方式、CSS选择器的类型、CSS常用的属性，以及CSS的层叠性、继承性及优先级等内容。通过本任务的学习，读者可以掌握CSS在网页中的使用方法，学会灵活使用CSS最常用的属性。任务小结任务4制作学院介绍页面Web前端开发案例教程（HTML5+CSS3）
（AI助学）微课版（第3版）任务3制作的页面内容都是在浏览器中直接呈现的，实际上网页中的内容是由一个个的块组成的，这些块也叫盒子。本任务制作学院介绍页面，将介绍的内容放入盒子中，并设置盒子的各种属性。通过本任务的实现，掌握盒子模型的概念和盒子的各种属性设置。使用盒子模型制作学院介绍页面，浏览效果如图所示。4.1任务描述4.2知识准备CSS常用文本属性044.2.1盒子模型的概念4.2.2
盒子模型的相关属性4.2.3背景属性4.2.1盒子模型的概念盒子模型就是把HTML页面中的元素看作一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。例4-1使用div标记定义盒子。example01.html4.2.1盒子模型的概念使用div标记定义盒子定义盒子的样式4.2.1盒子模型的概念一个盒子实际占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的例4-1中定义的盒子box的实际宽度和高度均是310px在网页排版时，要非常精确地计算盒子实际占有的宽度和高度4.2.1盒子模型的概念大部分网页元素本质上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子给盒子添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中不要求每个元素都必须定义这些属性(内边距、边框、外边距、宽和高)div标记定义的盒子默认宽度是浏览器宽度，默认高度由盒子中内容决定，默认的边框、内边距、外边距都为0body、p、h1～h6、ul、li等都有默认外边距和内边距。设计网页时，一般要将这些元素的外边距和内边距都先设为0，需要时再设置为非零的值要精确描述盒子的外观，需要设置盒子的边框属性（border）、内边距属性（padding）、外边距属性（margin）、盒子阴影属性（box-shadow）和盒子大小属性（box-sizing）等。4.2.2盒子模型的相关属性border-top：上边框宽度、样式、颜色border-right：右边框宽度、样式、颜色border-bottom：下边框宽度、样式、颜色border-left：左边框宽度、样式、颜色若将盒子box的下边框设置为2px、实线、红色，代码如下。.box{border-bottom:2pxsolid#f00;}4.2.2盒子模型的相关属性边框（border）属性若4个边框具有相同的宽度、样式和颜色，使用如下方式表示。若将盒子box的4个边框均设置为2px、实线、红色，代码如下。格式：border：边框宽度样式颜色.box{border:2pxsolid#f00;}4.2.2盒子模型的相关属性边框（border）属性border：边框宽度
样式
颜色solid：边框样式为单实线dashed：边框样式为虚线dotted：边框样式为点线double：边框样式为双实线none：没有边框4.2.2盒子模型的相关属性边框（border）属性
CSS3中新增的border-radius属性可以给元素设置圆角边框。border-radius：圆角半径属性值可以是长度或百分比，表示圆角的半径4.2.2盒子模型的相关属性圆角边框（border-radius）属性在例4-1中对盒子添加圆角半径的设置。4.2.2盒子模型的相关属性圆角边框（border-radius）属性4.2.2盒子模型的相关属性浏览效果如图所示。圆角边框（border-radius）属性设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。4.2.2盒子模型的相关属性圆角边框（border-radius）属性依次为左上、右上、右下、左下4.2.2盒子模型的相关属性圆角边框（border-radius）属性padding-top：
上内边距大小padding-right：
右内边距大小padding-bottom：下内边距大小
padding-left：
左内边距大小
用于设置盒子中内容与边框之间的距离若4个内边距具有相同的大小，则可以用一行代码设置格式：padding：内边距大小4.2.2盒子模型的相关属性内边距（padding）属性上右下左上右下左上右下左上下左右内边距均为10px有4个属性值：有3个属性值：有2个属性值：有1个属性值：4.2.2盒子模型的相关属性内边距（padding）属性margin-top：
上外边距大小margin-right：
右外边距大小margin-bottom：下外边距大小
margin-left：
左外边距大小
外边距用于设置盒子与其他盒子之间的距离margin：0auto让盒子在浏览器中水平居中若4个外边距具有相同的大小，则可以用一行代码设置格式：margin：外边距大小4.2.2盒子模型的相关属性外边距（margin）属性用于给盒子添加周边阴影效果说明：阴影水平偏移量：必选项，可以为负值，正值表示向右偏移，负值表示向左偏移。阴影垂直偏移量：必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。阴影模糊半径：可选项，不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。阴影扩展半径：可选项，可以为负值。正值表示在所有方向扩展，负值表示在所有方向上消减，默认值为0。阴影颜色：可选项，省略时为黑色。阴影类型：可选项，内阴影的值为inset，省略时为外阴影。4.2.2盒子模型的相关属性语法格式：box-shadow:水平偏移量垂直偏移量模糊半径扩展半径颜色阴影类型；盒子阴影（box-shadow）属性示例4.2.2盒子模型的相关属性盒子阴影（box-shadow）属性阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影颜色语法格式：box-sizing:content-box|border-box;说明：content-box（默认值）：盒子的width属性值不包括内边距和边框，盒子在页面上实际占的宽度在计算时要把内边距和边框包括进去。border-box：元素的width属性值包括内边距和边框。用于定义一个盒子的总宽度和总高度是否包含内边距和边框4.2.2盒子模型的相关属性盒子大小（box-sizing）属性设置背景颜色或背景图像时可使用综合属性background，通过该属性可以设置与背景相关的所有值。4.2.3背景属性属性
作用备注background-color设置要使用的背景颜色
background-image设置要使用的背景图像
background-repeat设置如何重复背景图像
background-position设置背景图像的位置
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动
background-size设置背景图像的大小CSS3新增加的属性background-clip设置背景的裁剪区域CSS3新增加的属性background-origin设置背景图像的参考原点CSS3新增加的属性与background属性相关的属性如下表所示4.2.3背景属性语法格式：background-color：#RRGGBB或#rgb(r,g,b)或预定义的颜色值4.2.3背景属性设置背景颜色例4-4：分别设置网页的背景颜色和标题行的背景颜色
example04.html语法格式：background-image：URL（图像来源）4.2.3背景属性设置背景图像例4-5
修改例4-4的代码，设置网页的背景图像，example05.html语法格式：
background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round4.2.3背景属性设置如何重复背景图像repeat：背景图像在横向和纵向上平铺，为默认值。no-repeat：背景图像只显示一次，不平铺。repeat-x：背景图像在横向上平铺。repeat-y：背景图像在纵向上平铺。space：背景图像以相同的间距平铺，且填充满整个容器或某个方向（CSS3新增关键字）。round：背景图像自动缩放至合适大小，且填充满整个容器（CSS3新增关键字）。语法格式：background-position:关键字|百分比|长度关键字：在水平方向上有left、center和right，垂直方向上有top、center和bottom。百分比、长度：指定两个值，分别代表水平位置和垂直位置。示例4.2.3背景属性设置背景图像位置示例语法格式：background-size：长度|百分比|auto|cover|contain长度：用长度值指定背景图像的大小，不允许为负值。百分比：用百分比值指定背景图像的大小，不允许为负值。auto：背景图像的真实大小，默认值为auto。cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。4.2.3背景属性设置背景图像大小语法格式：background-clip:border-box|padding-box|content-box;border-box：背景图像不会发生裁剪，为默认值。padding-box：超出padding区域，也就是位于border区域的背景图像将会被裁剪。content-box：从content区域（内容区域）开始向外裁剪背景，即位于border和padding区域内的背景将会被裁剪。4.2.3背景属性设置背景图像的裁剪区域语法格式：background-origin:padding-box|border-box|content-box;padding-box：在padding区域（含padding）内显示背景图像。border-box：在border区域（含border）内显示背景图像。content-box：在content区域内显示背景图像。4.2.3背景属性设置背景图像的参考原点用于指定background-image属性显示图像时的参考原点。默认情况下，背景图像以元素左上角为坐标原点显示，设置background-origin属性可以指定图像显示的参考原点。例4-6：利用背景图像的各种属性设置元素的背景颜色和背景图像example06.html4.2.3背景属性例4-6：利用背景图像的各种属性设置元素的背景颜色和背景图像example06.html4.2.3背景属性语法格式：background:背景颜色url("图像")是否重复位置大小裁剪方式参考原点;所有属性在书写时顺序任意。如果同时设置了“position”和“size”两个属性，则应该用左斜线“/”分隔，如“position/size”，而不是用空格把两个参数值隔开。设置元素的背景颜色和背景图像时，建议使用综合属性background一次性设置。4.2.3背景属性综合设置背景4.2.3背景属性综合设置背景例4-7修改例4-6，使用background属性综合设置背景颜色和图像example07.html4.2.3背景属性设置多重背景图像例4-8
使用background属性给盒子添加两个背景图像
example08.html语法格式：opacity:不透明度值;4.2.3背景属性设置不透明度不透明度值是0～1的浮点数值。其中，0表示完全透明，1表示完全不透明，0.5表示半透明。4.2.3背景属性设置不透明度例4-9：使用opacity属性设置图像的不透明度example09.html
语法：background:linear-gradient(渐变角度,颜色值1,颜色值2,…,颜色值n);渐变角度：指水平线和渐变线之间的夹角，通常是以deg为单位的角度值，角度省略时默认为180deg。颜色值：用于设置渐变颜色，其中，颜色值1表示起始颜色，颜色值n表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值用逗号隔开。4.2.3背景属性设置背景图像渐变效果例
4-10：设置具有渐变色的背景
example10.html4.2.3背景属性设置背景图像渐变效果4.3任务实现4.3.1搭建学院介绍页面结构4.3.2定义学院介绍页面CSS样式4.3任务实现任务小结本任务围绕学院介绍页面的实现，首先介绍了盒子模型的概念、盒子相关属性、CSS背景设置等知识点及其运用方法，最后综合利用所学知识对学院介绍页面的结构重新布局，并对文本内容的样式进行美化。任务小结任务5制作学院网站导航
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 高考语文写作押题作文4篇
- 2026年欧盟对中国产品碳排放默认值歧视性分析及影响测算
- 2026年磁力吸盘清洁与工件底面贴合防翘曲措施
- 南开中学初2026年初三统一抽考试题化学试题含解析
- 2026届四川省成都市龙泉九中重点名校初三第一次大考生物试题含解析
- 贵州省兴义市2025-2026学年初三下学期中考仿真考试生物试题含解析
- 2026年青海省西宁二十一中学中考生物试题模拟试卷命题比赛试卷含解析
- 2026届内蒙古鄂尔多斯市准格尔旗重点中学高中毕业班第二次质量检测试题生物试题文试题含解析
- 江苏省丰县2026届初三下学期期末统一质量检测试题化学试题含解析
- 山东省东营区实验学校2025-2026学年第二学期初三第一次模拟考试生物试题含解析
- 校招国企财务面试题目及答案
- 智塑健康科技（嘉兴）有限公司年产2万套3D打印骨科融合器项目环评报告
- 输电专业十八项反措内容宣贯
- 车辆公证协议书范文
- 计量经济学基础-计量经济学1学习资料
- 水电合同协议模板下载
- 通风工程施工方案通风
- 高速道路救援培训课件
- 部队网络安全意识教育
- 《STM32单片机概述》课件
- 2024年镇江市高等专科学校高职单招语文历年参考题库含答案解析
评论
0/150
提交评论