版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
HTML5静态网站开发概述单元1目录01常用HTML5开发环境的搭建02完成第一个HTML5页面1-1HTML5+CSS3网页设计任务教程（第二版）常用HTML5开发环境的搭建1234技能知识网站目录结构网页命名规范开发环境搭建四大命名规范任务1-1
常用HTML5开发环境的搭建HBuilderX是数字天堂（北京）网络技术有限公司，即DCloud推出的集成开发环境，是免费绿色软件，可从DCloud官网https://www.dcloud.io/hbuilderx.html上直接下载。HBuilderX简称HX，HBuilder，H是HTML的缩写，Builder是建设者。是为前端开发者服务的通用IDE，或者称为编辑器。与vscode、sublime、webstorm类似。由于HX的轻巧、极速、小程序支持等特点，赢得了广大用户的喜爱，是900万开发者的选择。任务1-1常用HTML5开发环境的搭建
任务1-1
常用HTML5开发环境的搭建1、css文件夹。这个文件夹是用来存放网站的样式文件，样式文件的文件扩展名为.css。2、img文件夹。这个文件夹是用来存放网站页面显示的图片文件，常用的图片文件格式为.jpg，其他的比如.png，.gif等格式的图片文件也需要放置在此文件夹中。3、js文件夹。这个文件夹是用来存放完成网站相关功能的脚本文件，脚本文件的扩展名为.js。4、index.html文件。一个静态网站的首页面文件默认使用index.html命名，所以在HX中创建一个Web项目时会自动创建好一个空的index.html文件。任务1-1
常用HTML5开发环境的搭建常用HTML5开发环境的搭建1、骆驼命名法：也称为小驼峰命名法，当标识符是由一个或多个单词连结在一起构成的唯一识别字时，第一个单词以小写字母开始，之后每个单词的首字母都大写。例如：myFirstName、myLastName，这样的标识符看上去就像骆驼峰一样此起彼伏，故得名。2、帕斯卡命名法：也称为大驼峰命名法，与骆驼命名法相似，不同的是帕斯卡命名法的第一个单词是以大写字母开始。例如：MyFirstName、MyLastName。常用HTML5开发环境的搭建3、匈牙利命名法：其命名的基本原则是，变量名=属性+类型+对象描述。标识符的名字以一个或者多个小写字母开头作为前缀，前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途。如：iMyAge、cMyName[10]、fManHeight表示三个变量的类型分别为int、char、float。4、下划线命名法：此法在命名中用到的单词使用小写字母，每个单词直接用下划线‘_’分割，例如：book_author、book_price。在此推荐统一使用子页面功能翻译的英文命名，命名规则采用骆驼命名法。页面文件的命名统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。推荐统一使用子页面功能翻译的英文命名，如：首页—index.html、产品列表—proList.html产品详细页面—proDetail.html、新闻列表—newsList.html
新闻详细页面—newsDetail.html、发展历史—history.html关于我们—about.html、联系我们—contact.html任务1-1
常用HTML5开发环境的搭建1-2HTML5+CSS3网页设计任务教程（第二版）完成第一个HTML5页面任务1-2完成第一个HTML5页面<title>标签的使用<body>标签的使用HTML5注释的使用<meta>标签的使用完成第一个HTML5页面HTML文档的根元素（标签）标签的内容通常给浏览器看的指页面标题标签的内容给人看的1、<meta>标签<meta>标签是用来描述一个HTML页面文档的属性，可提供有关页面的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等。2、<title>标签<title>标签是用来定义一个HTML页面文档的标题。3、<body>标签<body>标签用来定义页面文档的主体。任务1-2完成第一个HTML5页面1、在HTML5中，注释标签用于在源代码中插入注释，注释不会显示在浏览器中。注释标签的格式为：<!--注释的内容-->。2、在HTML5中可使用注释对相关代码进行解释，这样做有助于自己在以后或者其他开发人员对代码进行修改，尤其是在编写大量代码时注释的作用非常明显。3、在后面的学习中需要在页面文档中添加脚本时，使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯。4、在HTML5中，注释标签仅仅起到解释相关代码的作用，它不支持任何的标准属性和事件属性。任务1-2完成第一个HTML5页面点击运行单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，选择Chrome浏览器浏览页面直接打开网站文件夹内直接打开网页任务1-2完成第一个HTML5页面HTML5静态网站开发概述单元1HTML5中常用标签的使用单元2目录02使用<a>标签实现超链接03使用<a>标签实现锚点链接01使用<marquee>标签制作滚动字幕04使用文本类标签实现页面文本的显示05使用文本格式类属性实现页面文本特殊显示效果06使用转义字符显示特殊符号07使用图像类标签显示图像及图像映射08<iframe>标签使用09多媒体标签使用10表单的简单应用11表单格式验证2-1HTML5+CSS3网页设计任务教程（第二版）使用<marquee>标签制作滚动字幕任务2-1使用<marquee>标签制作滚动字幕<marquee>标签的语法结构如下：<marqueeA属性=”A值”B属性=”B值”C属性=”C值”>...</marquee><marquee>标签常用属性：1、behavior：设置文本在marquee元素内如何滚动。2、bgcolor：可以通过颜色名称或十六进制设置背景颜色。3、direction：设置<marquee>标签内文本滚动的方向。4、height：以像素（px）或者百分比值设置高度。5、width：以像素（px）或者百分比值设置宽度。6、scrollamount：设定活动字幕的滚动速度。7、onMouseOut=“this.start();”：用来设置鼠标移出该区域时继续滚动。8、onMouseOver=“this.stop();”：用来设置鼠标移入该区域时停止滚动。任务2-1使用<marquee>标签制作滚动字幕HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在HTML元素的开始标签中规定。2-2HTML5+CSS3网页设计任务教程（第二版）使用<a>标签实现超链接任务2-2使用<a>标签实现超链接任务2-2使用<a>标签实现超链接<a>标签定义超链接，用于从一个页面链接到另一个页面，其语法结构如下：<a属性设置>...</a>href属性指示链接的目标，链接目标可以是网址，也可以是文件路径，还可以是空（使用“###”表示，如果使用“#”则会跳到当前网页的头部），href属性必不可少。target属性值可以为：_blank（在新空白窗口中打开链接），_parent（在当前窗口的上一层里打开链接），_self（在当前窗口中打开链接），_top（在顶层框架中打开链接）。2-3HTML5+CSS3网页设计任务教程（第二版）使用<a>标签实现锚点链接任务2-2使用<a>标签实现锚点链接任务2-3使用<a>标签实现锚点链接锚点链接是指在同一个页面跳转到指定位置的方式，类似于word的目录，点击目录可以跳转到内容处。此种方式是超链接的一种特殊方式，仍然使用<a>标签来实现。在HTML5规范中实现这种功能要利用标签的ID属性值进行页面内跳转。例如：<ahref=”#mark”>页面内链接</a>…………<pid=”mark”>目标</p>因为ID在同一个HTML页面中是唯一的，适合用于锚点连接。2-4HTML5+CSS3网页设计任务教程（第二版）使用文本类标签实现页面文本的显示任务2-4使用文本类标签实现页面文本的显示1<div>标签与<p>标签的区别<ul>、<ol>标签的使用<div>、<span>标签的使用<i>、<em>、<b>、<strong>标签的使用<h>、<p>、<br>标签的使用2354任务2-4
使用文本类标签实现页面文本的显示
〓<h>、<p>、<br>标签1、HTML
中提供了从<h1>到<h6>六个级别的标题标签，<h1>标签的级别最高，<h6>标签的级别最低，通过这些标签可以定义网页中的标题（与
word
中的标题类似），合理使用标题可以使网页的层次结构更加清晰。2、<p>标签用于在HTML文档里定义一个段落。浏览器在显示<p>段落时，将在其前后分别插入一个空白行。这些空白是由浏览器在呈现网页时自动加入的，你也可以用样式表来指定显示多少空白。3、<br>
可插入一个简单的换行符。<br>
标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在
XHTML
中，把结束标签放在开始标签中，也就是
<br
/>。请注意，<br>
标签只是简单地开始新的一行，而当浏览器遇到
<p>
标签时，通常会在相邻的段落之间插入一些垂直的间距。任务2-4
使用文本类标签实现页面文本的显示
〓<h>、<p>、<br>标签任务2-4
使用文本类标签实现页面文本的显示
〓<i><em><b><strong>标签任务2-4
使用文本类标签实现页面文本的显示
〓<i><em><b><strong>标签1、<i>标签的作用是给元素文本添加斜体样式；在html里添加i标签后，浏览器会将包含在i标签中的文本以斜体字（italic）或者倾斜（oblique）字体显示。2、<em>标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。3、<b>元素以粗体标记要强调的文本。对于所有浏览器来说，这意味着要把这段文字以加粗（粗体）样式方式显示。4、<strong>标签是一个短语标签，用于表示浏览器上文档的重要文本。任务2-4
使用文本类标签实现页面文本的显示
〓<div>、<span>标签任务2-4
使用文本类标签实现页面文本的显示
〓<div>、<span>标签1、<div>标签可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。<span>标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。2、<span>元素宽度是被包围的内容宽度决定，不建议给span设置宽度属性width，可以给<span>设置margin值，设置与父元素之前的距离。3、<span>可以通过CSS声明（display:block）转换为块元素，想对一行中的文字或图片单独设置样式，而又由不需要换行的条件下又不影响其他行内其他内容，<span>可以很好解决这些问题。任务2-4
使用文本类标签实现页面文本的显示
〓<div>标签与<p>标签1、结构差距<div>与<p>均是一对最先与闭合标签。<div>以<div>最先，以</div>结束的一对标签。<p>以<p>开端，以</p>完结的一对标签。2、称谓分歧<div>是布局框架标签，<p>是段落标签，布局文章标签。3、<div>与<p>基本CSS属性<div>与<p>均独占一行的块元素标签，<p>自带有不一定margin-top和margin-bottom属性值，而<div>两个属性值为0，也便是两个<p>之间有间距，而<div>没有。4、框架结构在结构HTML重构时分，<div>首要用于布局框架，大小结构结构均使用<div>来布局。任务2-4
使用文本类标签实现页面文本的显示
〓<div>标签与<p>标签任务2-4
使用文本类标签实现页面文本的显示
〓<ul>、<ol>标签<ul>是无序列表，全称是unordered
list，先来个例子：
●张三
●李四
●王二●刘五
<ol>是有序列表
,全称是ordered
list，同样举个例子：
1、张三2、李四3、王二4、刘五任务2-4
使用文本类标签实现页面文本的显示
〓<ul>、<ol>标签<ul>与<ol>前的符号是可以修改的。只需要修改它们的type值。
<ul>的type属性有：disc—实心圆(默认）、circle—空心圆、square—实心方块
<ol>的type属性有：1—数字（默认）、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。start属性，属性值是数字，表示第一个列表项的起始值。任务2-4使用文本类标签实现页面文本的显示2-5HTML5+CSS3网页设计任务教程（第二版）使用文本格式类属性实现页面文本特殊显示效果任务2-5使用文本格式类属性实现页面文本特殊显示效果1、word-spacing是单词间隔属性，表示单词之间所添加的空白间隔的长度，但对于中文无效。2、letter-spacing是字符间隔属性，表示字符之间所添加的空白间隔的长度，对于英文文本就是字母之间，对于中文文本就是每个汉字之间。这两个属性必须放在样式属性style中或是在样式表文件中进行设置。任务2-5使用文本格式类属性实现页面文本特殊显示效果任务2-5使用文本格式类属性实现页面文本特殊显示效果1、text-decoration属性是以下三种属性的简写：text-decoration-line属性规定文本修饰要使用的线条类型。text-decoration-color属性规定文本修饰的颜色。text-decoration-style属性设置文本装饰的类型（实线、波浪线、点线、虚线、双线）。text-decoration:overline;上划线。text-decoration:line-through;删除线。text-decoration:underline;下划线。2、text-indent属性规定文本块中首行文本的缩进，允许使用负值。如果使用负
值，那么首行会被缩进到左边。2em代表两个字符的大小。任务2-5使用文本格式类属性实现页面文本特殊显示效果2-6HTML5+CSS3网页设计任务教程（第二版）使用转义字符显示特殊符号任务2-6使用转义字符显示特殊符号对于HTML代码而言，有些字符具有特别的含义，比如说“<”和“>”这两个符号，根据前面所学知识知道这两个符号是标签的起始字符和结尾字符，是不显示在页面里的；除此，还有一种具有特殊含义但却无法用键盘直接输入的字符。HTML提供了转义字符功能专门用来显示这些字符。转义字符由三部分组成：以一个“&”符号开头，紧跟字符专用名称或字符代号，以“;”结束。任务2-6使用转义字符显示特殊符号任务2-6使用转义字符显示特殊符号显示结果描述实体名称实体编号
空格
<小于号<<>大于号>>&和号&&"双引号""￠分¢¢£镑££¥人民币¥¥§节§§©版权©©®注册商标®®×乘号××÷除号÷÷2-7HTML5+CSS3网页设计任务教程（第二版）使用图像类标签显示图像及图像映射<img>标签定义HTML页面中的图像。从技术上讲，图像并不会插入HTML页面中，而是链接到HTML页面上。<img>标签有两个必需的属性：src和alt。src属性是<img>标签的必需属性，用于在页面上显示图像。需要使用该属性指定图片的URL地址，即图像文件的路径和文件名。alt属性用来为图像定义一串预先自定义的可替换的文本，当浏览器无法载入图像时，会显示替换文本来告知用户相关信息，使用替换文本属性有助于更好的显示信息，提高页面友好度。title属性用来设置鼠标移动到图片上的提示文字。它的值一般与alt的值相同，最大的区别是显示的前提条件不同，alt属性是图片加载失败后显示，而title属性则是图片加载成功后鼠标放到它上面才显示。width属性用来设置图片的宽度，使用时不需要加单位，默认是像素（px）。height属性用来设置图片的高度，和width一样在使用时不需要加单位，默认是像素（px）。任务2-7使用图像类标签显示图像及图像映射任务2-7使用图像类标签显示图像及图像映射属性值描述alttext规定图像的替代文本srcURL规定显示图像的URLaligntop，bottom，middle，left，right不推荐使用。规定如何根据周围的文本来排列图像borderpixels不推荐使用。定义图像周围的边框heightpixels，%定义图像的高度hspacepixels不推荐使用。定义图像左侧和右侧的空白ismapURL将图像定义为服务器端图像映射longdescURL指向包含长的图像描述文档的URLusemapURL将图像定义为客户器端图像映射vspacepixels不推荐使用。定义图像顶部和底部的空白widthpixels，%设置图像的宽度<map>的作用是定义一个客户端"图像映射"，"图像映射"指带有可点击区域的一幅图像，<map>一般需要与<imgsrc="值"usemap="#值">配合使用，src属性负责为<map>提供作用对象；<map>依靠usemap属性来寻找和引用<img>。<area>用于定义可点击区域的形状、大小以及路径。<area>的shape属性表示定义热点(可点击区域)的形状，可选值有rect(矩形)\circle(圆)\poly(自定义形状)。<area>的href属性表示可点击区域的跳转链接地址。任务2-7使用图像类标签显示图像及图像映射base64为采用二进制流表示图片。常用格式为：<imgsrc=”data:image/png;base64,编码”/>1、使用base64的优点是：减少一个图片的http请求。2、使用base64的缺点是：1）、大小会比原文件大小大1/3，影响文件加载速度，增加文件解析渲染时间。2）、使用base64无法直接缓存，这相比于直接缓存图片的效果要差很多。3）、兼容性的问题，ie8以前的浏览器不支持。一般一些网站的小图标可以使用base64图片来引入。任务2-7使用图像类标签显示图像及图像映射2-8HTML5+CSS3网页设计任务教程（第二版）<iframe>标签使用任务2-8<iframe>标签使用<iframe>标签规定一个内联框架。一个内联框架被用来在当前HTML文档中嵌入另一个文档。所有的主流浏览器都支持<iframe>标签。例如：<iframename="myiframe"id="myrame"src="external_file.html"frameborder="0"align="left"width="200"height="200"scrolling="no"><p>你的浏览器不支持iframe标签</p></iframe>任务2-8<iframe>标签使用<iframe>的常用属性：name：规定<iframe>的名称。width：规定<iframe>的宽度。height：规定<iframe>的高度。src：规定在<iframe>中显示的文档的URL。frameborder：规定是否显示边框。(0为无边框，1位有边框)。align：规定如何根据周围的元素来对齐<iframe>。(left,right,top,middle,bottom)。scrolling：规定是否在<iframe>中显示滚动条(yes,no,auto)。任务2-8<iframe>标签使用2-9HTML5+CSS3网页设计任务教程（第二版）多媒体标签使用任务2-9多媒体标签使用<audio>标签是一对，其常用属性有：autoplay：如果出现该属性，则音频在就绪后马上播放。controls：如果出现该属性，则向用户显示控件，比如播放按钮。loop：如果出现该属性，则每当音频结束时重新开始播放。preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。src：要播放的音频的URL。<audio>标签支持的音频格式有：wav，mp3和ogg格式。任务2-9多媒体标签使用<video>标签也是一对，其常用属性有：autoplay：如果出现该属性，则视频在就绪后马上播放。controls：如果出现该属性，则向用户显示控件，比如播放按钮。poster：属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。src：要播放的视频的URL。height：设置视频播放器的高度。width：设置视频播放器的宽度。video标签支持的视频格式有：Ogg，MPEG4和WebM格式。任务2-9多媒体标签使用2-10HTML5+CSS3网页设计任务教程（第二版）表单的简单应用任务2-10表单的简单应用在HTML中，<label>元素用于创建文本标签，用于标识表单控件或其他交互元素。for属性是<label>元素的一个属性，用于指定与之关联的表单控件的ID属性。通过使用for属性，可以实现以下两个作用：关联表单控件：for属性的值应设置为要关联的表单控件的ID属性。这样，当用户点击<label>标签时，关联的表单控件就会被激活或获得焦点，从而方便用户与表单进行交互。这提供了更大的点击目标区域，增加了表单控件的可用性。辅助功能：<label>标签的for属性也有助于提升网页的可访问性。屏幕阅读器等辅助技术可以使用<label>标签与表单控件之间的关联，提供更好的用户体验和可访问性支持。任务2-10表单的简单应用<input>标签中常用的type属性有以下几种：text：用于输入单行文本数据，例如用户名、密码等。password：用于输入密码等敏感数据，输入的内容会被隐藏。checkbox：用于选择一个或多个选项，可以勾选或取消勾选。radio：用于选择一个选项，可以单选。submit：用于提交表单数据到服务器，通常与form标签一起使用。reset：用于重置表单数据，将所有表单元素的值重置为默认值。button：用于创建一个按钮，通常需要通过JavaScript脚本来实现点击后的功能。file：用于选择上传文件，可以上传图片、文档等多种类型的文件。number：用于输入数字，可以设置最大、最小值和步长等属性。date：用于选择日期，可以设置日期的格式和范围等属性。email：用于输入邮箱地址，可以进行邮箱地址格式的验证。tel：用于输入电话号码，可以进行号码格式的验证。search：用于输入搜索关键词，可以与JavaScript脚本一起使用，实现搜索功能。任务2-10表单的简单应用2-11HTML5+CSS3网页设计任务教程（第二版）表单格式验证任务2-11表单格式验证用户在提交数据的时候，不可避免的会对<input>内的数据格式进行验证，pattern属性规定用于验证输入字段的模式。pattern属性适用于以下<input>类型：text，search，url，telephone，email以及password，其格式为<inputpattern="regexp">。RegExp(正则表达式)是RegularExpression缩写，是用于查找符合某些规则的字符串的工具。任务2-11表单格式验证regexp常用表达式如下：1、^\d+$：正整数+02、^[0-9]*[1-9][0-9]*$：正整数3、^((-\d+)|(0+))$：负整数+04、^-[0-9]*[1-9][0-9]*$：负整数5、^-?\d+$：整数，正整数和负整数和0：6、^\d+(\.\d+)?$：正浮点数+07、^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$：正浮点数8、^((-\d+(\.\d+)?)|(0+(\.0+)?))$：负浮点数+09、^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$：负浮点数10、^(-?\d+)(\.\d+)?$：浮点数11、^[0-9]+(.[0-9]{2})?$：金额校验，精确到2位小数12、^[A-Za-z]+$：由26个英文字母组成的字符串任务2-11表单格式验证13、^[A-Z]+$：由26个英文字母的大写组成的字符串14、^[a-z]+$：由26个英文字母的小写组成的字符串15、^[A-Za-z0-9]+$：由数字和26个英文字母组成的字符串16、^\w+$：由数字、26个英文字母或者下划线组成的字符串17、^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$：email地址18、^[a-zA-z]+://注释：匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$：匹配url19、^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$：密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间20、^[\\u4e00-\\u9fa5]{0,}$：字符串仅能是中文21、^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$：18位身份证22、^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$：检验日期yyyy-mm-dd格式23、^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$：各大运营商手机号码正则表达式任务2-11表单格式验证HTML5中常用标签的使用单元2CSS基本应用单元3目录02CSS元素选择器的使用03内联式、嵌入式、外部式样式的使用01使用CSS设置body样式04测试样式优先级05创建盒子模型06CSS中float属性的使用07常用文本样式属性的使用08常用图片样式属性的使用09position的4种定位方式的使用10Chrome浏览器调试基本技巧3-1HTML5+CSS3网页设计任务教程（第二版）使用CSS设置body样式任务3-1使用CSS设置body样式任务3-1使用CSS设置body样式CSS是CascadingStyleSheets的缩写，即层叠样式表，在标准网页设计中，CSS负责网页内容在浏览器内的显示样式，如文字大小、字体颜色、元素位置等。CSS基本语法：selector{declaration1;declaration2;...declarationN}/*这里是注释*/body选择器是CSS中的基础选择器，用于对整个文档进行全局样式的设置。我们可以通过在CSS文件中为body元素添加样式来改变整个页面的风格。我们设置了背景颜色、字体、字号和字体颜色。这些样式将应用于整个文档的body元素。另外，我们也可以为body元素设置其他样式，如边距、边框和填充等。这些样式可以让网页的布局更加美观和整洁。CSS代码需要放在CSS文件或者<style>标签内，如果放在独立的CSS文件内，则页面需要调用：<linkrel="stylesheet"type="text/css"href="css/style.css"/>css/style.css为CSS文件存放的地址。任务3-1使用CSS设置body样式1、background-color:背景颜色，background-image:背景图像，background-repeat:背景重复，background-position:背景图像位置，background-attachment:如何设置固定的背景图像。2、margin:外边距，此处是指页边距，margin:20px（上、下、左、右各20px）;margin:20px40px（上、下20px；左、右40px）;margin:20px40px60px（上20px；左、右40px；下60px）;margin:20px40px60px80px（上20px；右40px；下60px；左80px）。3、font-size:字体大小。4、color:字体颜色，如果采用6位16进制数，前面需要加上”#”，注意字体颜色不是font-color。5、font-family:ComicSansMS,"微软雅黑";先写英文字体，再写中文字体，会优先匹配英文字体，但是在英文字体中找不到中文字符，这样中文就会自动使用后写的中文字体了。6、line-height:文本行高，一般采用em单位，1em代表一倍行距。3-2HTML5+CSS3网页设计任务教程（第二版）CSS元素选择器的使用1234CSS选择器标签选择器所谓标签选择器就是使用已有的HTML代码中的标签作为名称的选择器。例如：{font-size:12px;color:white;}类选择器为标签设置“class=CLASS名称”，类选择器定义时以“.”开头。格式为：.类选器名称{CSS样式代码；}通用选择器(通配选择器)
指的是当前页面上的所有标签都应用该样式
*{color:red;}
指所有元素,优先级非常低,
性能低
*{margin:0;padding:0}是指将所有元素的内外间距去除
ID选择器
即标记选择器，为标签设置“id=ID名称”，ID选择器定义时以“#”开头，ID选择器在一个HTML文件中只能使用一次。格式为：#ID选择器名称{CSS样式代码}任务3-2CSS元素选择器的使用〓
基础选择器1、组合选择器：也称为分组选择器，或并集选择器，用“,”将需要设置相同样式的多个选择器组合起来就构成了组合选择器。h1,p{background-color:yellow;}2、交集选择器：两个选择器构成，其中第一个为标签选择器，第二个为类选择器或ID选择器，两个选择器之间没有空格。p.hometown{background-color:yellow;}3、后代选择器：也称为包含选择器，即在选择器之间加入空格，用于选择指定选择器的后代元素，后面元素是前面元素的后代元素，是一种从属关系。divp{background-color:yellow;}任务3-2CSS元素选择器的使用〓
复合选择器4、子元素选择器：用来选择元素的子元素，父级标签写前面，子级标签写后面，中间跟一个“>”进行连接，符号左右两侧各保留一个空格。div>p{background-color:yellow;}5、兄弟选择器：是CSS3.0新增的一个选择器，分别使用“~”或者“+”连接两个元素，其中“~”表示某元素后所有同级的指定元素，强调所有的。“+”表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。div+p{background-color:yellow;}6、属性选择器：是选取标签带有某些特殊属性的选择器，使用[]括起来，一般用于<form>标签中的<input>标签。如input[type=”text”]表示type属性值为text的<input>标签。a[target=_blank]{background-color:yellow;}任务3-2CSS元素选择器的使用〓
复合选择器伪类选择器：用于向某些选择器添加特殊的效果。以“:”开头，分为链接伪类、结构伪类等。a:link{color:#FF0000;}/*未访问的链接*/a:visited{color:#00FF00;}/*已访问的链接*/a:hover{color:#FF00FF;}/*鼠标划过链接*/a:active{color:#0000FF;}/*已选中的链接*/任务3-2CSS元素选择器的使用〓
伪类选择器3-3HTML5+CSS3网页设计任务教程（第二版）内联式、嵌入式、外部式样式的使用任务3-3内联式、嵌入式、外部式样式的使用内联式：把CSS代码直接作为标签的style属性的内容写在现有的HTML标签
（如p,span...）中，如：<pstyle="color:red;font-size:12px;">表示这个段落中的文字大小是12像素，字体颜色是红色。嵌入式：也称作内部样式表，把CSS样式写在标签<styletype="text/css"></style>之间，并且一般情况下嵌入式CSS样式写在<head></head>之间。外部式：把CSS代码写在一个单独的外部文件中存放在根目录的CSS文件夹下面，这个CSS样式文件以“.css”为扩展名，在<head>标签内使用<link>标签将CSS样式文件链接到HTML文件内：
<linkhref="style.css"rel="stylesheet"type="text/css"/>一般外部式的样式文件名字为style.css。.任务3-3内联式、嵌入式、外部式样式的使用CSS三种使用方法40%15%15%20%20%3-4HTML5+CSS3网页设计任务教程（第二版）测试样式优先级任务3-4测试样式优先级任务3-4测试样式优先级通常我们可以将CSS的优先级由高到低分为六组：1、无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。2、第二高位的优先属性是在HTML中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。3、第三级优先的属性是由一个或多个id选择器来定义的。例如#id{margin:0;}会覆盖.classname{margin:3px;}。4、第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。例如.classname{margin:3px;}会覆盖div{margin:6px;}5、第五级由一个或多个类型选择器定义。例如div{margin:6px;}覆盖*{margin:10px;}。6、最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。CSS优先级的优先顺序!important>内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>通配选择器。3-5HTML5+CSS3网页设计任务教程（第二版）创建盒子模型任务3-5创建盒子模型1、内容（content）：内容包括了文本，块状盒子，图片，内容盒子的盒模型等等。2、内边距（padding）：内边距规定了内容与边框之间的填充距离。3、边框（border）：border默认为0；可以设置边框样式。4、外边距（margin）：外边距规定了盒子与盒子之间的距离，因此它不会被计算到盒子的总体宽度和高度之中，盒子内的盒子的外边距则会影响父级元素的宽度和高度。5、元素框的总宽度=内容（content）的width+padding的左边距和右边距的值+margin的左边距和右边距的值+border的左右宽度。6、元素框的总高度=内容（content）的height+padding的上下边距的值+margin的上下边距的值＋border的上下宽度。3-6HTML5+CSS3网页设计任务教程（第二版）CSS中float属性的使用任务3-6CSS中float属性的使用任务3-6CSS中float属性的使用我们可以给<div>设置float属性，让块元素转变为行元素，实现两个块元素并排显示。float是CSS属性，它可以让元素“浮动”到其容器的左侧或右侧。当一个元素设置了float属性后，它就会向左或向右移动，直到碰到父容器或另一个浮动元素的边缘为止。float属性的值有：1.none：元素将保持其原始位置，不会受到影响。2.left：元素将向左移动，直到达到其最近的无边边距元素或文档流中的其他元素。3.right：元素将向右移动，直到达到其最近的无边边距元素或文档流中的其他元素。4.top：元素将向上移动，直到达到其最近的无边边距元素或文档流中的其他元素。5.bottom：元素将向下移动，直到达到其最近的无边边距元素或文档流中的其他元素。6.inline-block：元素将转换为一个内联块元素，其宽度将根据其宽度值自动调整。7.inline：元素将保持其原始位置，但将被视为一个内联行元素。8.float：元素将浮起来，直到达到其最近的无边边距元素或文档流中的其他元素。3-7HTML5+CSS3网页设计任务教程（第二版）常用文本样式属性的使用任务3-7常用文本样式属性的使用〓<div>居中margin-left:auto;margin-right:auto;设置div左右居中任务3-7常用文本样式属性的使用〓
文字左右居中text-align:center;设置文字左右居中任务3-7常用文本样式属性的使用〓
文字上下居中如果只有一行文字，可通过设置块状元素的高度属性height与文本的行高属性line-height的属性值相等实现任务3-7常用文本样式属性的使用〓CSS3文本阴影文本设置阴影使用text-shadow属性，其使用格式为：text-shadow:h-shadowv-shadowblurcolor;h-shadow表示水平阴影的位置，允许负值；v-shadow表示垂直阴影的位置，允许负值；blur表示阴影模糊的距离；color表示阴影的颜色。任务3-7常用文本样式属性的使用〓
自定义字体在CSS3之前，WEB设计师必须使用已在用户计算机上安装好的字体。通过CSS3WEB设计师可将喜欢的字体文件存放到WEB服务器上，它会在需要时被自动下载到用户的计算机上。这种字体我们称之为自定义字体，是在CSS3@font-face规则中定义的。其使用的语法格式为：@font-face{font-family:<YourWebFontName>;src:<source>[<format>][,<source>[<format>]]*;[font-weight:<weight>];[font-style:<style>];}任务3-7常用文本样式属性的使用〓
远程调用字体引入<linkhref="/css?family=Condiment"rel="stylesheet"type="text/css">代表远程调用Condiment字体3-8HTML5+CSS3网页设计任务教程（第二版）常用图片样式属性的使用任务3-8常用图片样式属性的使用〓border-radius属性CSS3border-radius指定每个圆角如果你在border-radius属性中只指定一个值，那么将生成4个圆角。但是，如果你要在四个角上一一指定，可以使用以下规则：四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。三个值：第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角。两个值：第一个值为左上角与右下角，第二个值为右上角与左下角。一个值：四个圆角值相同。任务3-8常用图片样式属性的使用〓border-radius属性任务3-8常用图片样式属性的使用〓border-radius属性渐变属性是实现渐变效果的重要方式，其中包括线性渐变、径向渐变和重复渐变。线性渐变：在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。基本语法为bacground-image：linear-gradient（渐变角度，起始颜色，结束颜色）。径向渐变：在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。基本语法为：background-image：radial-gradient（渐变形状圆心位置，起始颜色，结束颜色）。任务3-8常用图片样式属性的使用〓CSS3渐变任务3-8常用图片样式属性的使用〓border-radius属性CSS滤镜（CSSfilters）是一种CSS属性，它可以应用于元素的
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 04年O公司人工智能语音识别技术研发合同
- 《476例结肠癌临床病理特征及预后比较分析》
- 《融合通信系统中分布式存储引擎的设计与实现》
- 2024城市地铁建设设备采购及安装服务合同
- 2024年快递店业务外包合同
- 2024年度舞台设备安装合同
- 2024年银川客运车资格证考试题库及答案
- 2024年乌鲁木齐道路运输客货从业资格证考试题库
- 2024年绵阳客运从业资格证理论考试题
- 2024年克拉玛依客运上岗证模拟考试题答案
- 车间生产计划完成情况统计表
- 品管圈（QCC）降低ICU护士床头交接班缺陷率课件
- 《左道：中国宗教文化中的神与魔》读书笔记模板
- 2023年初级游泳救生员理论知识考试题库（浓缩400题）
- 施工现场临时用电安全技术规范
- 同仁堂药品目录
- 社会问题概论
- 高中语文-如何读懂古诗词教学设计学情分析教材分析课后反思
- 虚假诉讼刑事控告书(参考范文)
- 部编版道德与法治四年级上册第11课《变废为宝有妙招》优质课件
- 2018年考研英语一真题和答案完整版
评论
0/150
提交评论