Web�交互界面设计与制作
第4章�HTML5和CSS3基础
目
录
01�HTML5基础
02��CSS3基础
03�案例实现：文章界面美化
01�HTML5基础
网页基本结构
<!DOCTYPE�html>
<html�lang="en">
<head>
�<meta�charset="UTF-8">
�<title>�网站名称 </title>
�<meta�name="keywords"�content="�关键词 ">
�<meta�name="description"�content="�网页描述 ">
�<link�rel="shortcut�icon"�href=""�type="image/x-icon">
<link�rel="stylesheet"�type="text/css"�href="style/"/>
<style>
�嵌入样式代码
</style>
<script>
�嵌入 JavaScript�代码
</script>
</head>
<body>
�网站基本内容
</body>
</html>
01�HTML5基础
网页基本结构
<!DOCTYPE�html>
1．文档声明
<html�lang="en">
</html>
2．html�根标签
<head>
��������<meta�charset="UTF-8">
��������<title>�网站名称�</title>
��������<meta�name="keywords"�content="�关键词�">
��������<meta�name="description"�content="�网页描述�">
��������<link�rel="shortcut�icon"�href=""�type="image/x-icon">
��������<link�rel="stylesheet"�type="text/css"�href="style/"/>
</head>
3．head�页面头标签
<body>
�网站基本内容
</body>
4．<body>�页面主体标签
01�HTML5基础
标签类型
1．单标签
单标签的形式为<标签�属性=参数>，常见的如强制换行标签<br>、分隔线标签<hr>、插入文
本框标签<input>等。
2．双标签
双标签的形式为<标签�属性=参数>对象</标签>，如定义“奥运”为5号字体，颜色为红色的
标签为：<font�size="5"�color="red">奥运</font>。
01�HTML5基础
HTML5结构标签
1.<div>�标签������
div是division（分区、分块）的缩写。<div>标签用于页面板块划分。可
以把它看作一个容器，用来装载页面内容。这是一个双标签，在使用时，
必须用</div>关闭它。
<div>�这是一个模块内容�</div>
01�HTML5基础
HTML5结构标签
2.<header>�标签������
<header>标签用于定义文档的页眉，通常包含一些引导和导航信息。它
不局限于网页头部，也可以写在网页内容中，表示网页中某个模块的头部。
它可以包含div标签，还可以包含表格内容、标识、搜索表单、nav导航等。
<header>标签中至少有一个标题标签或hgroup标签或nav标签。其语法
结构如下。
<header>
�����������<h1>�头部内容�</h1>�<!--�标题标签，后面会详解�-->
����������头部信息
</header>
01�HTML5基础
HTML5结构标签
3.<nav>�标签������
nav标签可以作为页面导航的链接组。同样可以包含<div>标签，
或者其他列表，表单等
用法：
<nav>
�����这里显示的是导航部分。
</nav>
01�HTML5基础
HTML5结构标签
4.<section>�标签������
�该标签用来定义文档中的节。比如章节、某个模块或文档中的其
它部分。一般用于成块的内容，会在文档流中开始一个新的节。
用法：
�<section>
�������该模块的标题
�������该模块的内容
��</section>
01�HTML5基础
HTML5结构标签
5.�<article>�标签
<article>是一个特殊的section标签，具有更明确的语义，它代表一个独立的、
完整的相关内容块，可独立于页面其它内容使用。
例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。
用法：
<article>
�����<header>
�����������这是文章标题
�������</header>
�����<p>文章内容详情</p>�����//这里的<p>是段落标签，后面做详解
����<article>
�������这里可以是文章内容
����</article>
�</article>
01�HTML5基础
HTML5结构标签
6.�<aside>�标签
1、可以表示包含在article元素中的附属信息，如名次解释，相关引用资
料等。
用法：
<article>
��<h1>文章标题</h1>
��<p>文章内容</p>
��<aside>本文出自…</aside>
</article>
2、也可以表示整个页面或站点的附属信息部分。如侧边栏、博客里面的
其他文章列表，友情链接、单元广告等。
01�HTML5基础
HTML5结构标签
7.�<footer>�标签
该标签用于定义section、article或网页的页脚，包含了与内容或页面有
关的信息，比如说文章信息（作者和日期）。作为页面的页脚时，一般
包含了版权、相关文件和链接。它和<header>标签使用基本一样，可
以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它
就相当于该模块的页脚了。
用法：
<footer>
�Copyright�©�2006-2019�重庆市巴南分局备案编号�:110105000000
</footer>
01�HTML5基础
HTML5结构标签
8.�<hgroup>�标签
若在一模块中需要含有一系列的标题元素，则可以用hgroup将他们包裹
起来。
用法：
�<hgroup>
�����<h1>标题1</h1>
�����<h2>标题2</h2>
����…
�</hgroup>
01�HTML5基础
HTML5结构标签
9．<figure>�标签与 <figcaption>�标签
一段独立的内容一般表示文档的一个独立单元。这两个标签常常一起使
用，<figcaption>为<figure>添加描述信息。可以用于对标签的组合，
多用于图片与图片的描述组合。
用法：
<figure>
�这里可以插入一张图片
�<figcaption>�这是图片的描述信息�</figcaption>
</figure>
01�HTML5基础
HTML5文本标签
1.标题标签������
标题的作用是让用户快速了解文档的结构与大致信息。标题标签从<h1>
到<h6>共6级。标题标签中包含的文本会被浏览器渲染为块级标签，即
会自动换行。<h1>显示的字号是最大的，<h6>显示的字号最小。
<h1>1�级标题�</h1>
<h2>2�级标题�</h2>
<h3>3�级标题�</h3>
<h4>4�级标题�</h4>
<h5>5�级标题�</h5>
<h6>6�级标题�</h6>
01�HTML5基础
HTML5文本标签
2.段落标签������
段落标签，顾名思义，用于表示段落，可以理解为一些句子或文本组织在
一起的块级标签。其具体语法结构如下。
<p>�这里是一个段落�</p>
01�HTML5基础
HTML5文本标签
3.<span>�标签������
<span>标签是一个行内标签，其本身没有任何含义和样式，但可以定义
组合文档中的部分文字。其具体语法结构如下。
<p>�
����������下面这是一段�<span>�文字�</span>
</p>。
01�HTML5基础
HTML5文本标签
4.<br>�标签������
在HTML中，使用“Enter”键进行换行时，显示效果为一个字符宽度的空格。所以HTML
中的换行需要用专门的标签<br>。该标签单独使用，不成对出现，是一种独立标签。需要
在一句话后面换行时，将<br>标签写在这句话的后面即可。
<p>
�����������千山鸟飞绝，<br>
�����������万径人踪灭。
</p>
<!--����不使用�br�换行的效果���-->
<p>
�����������千山鸟飞绝，
�����������万径人踪灭。
</p>
01�HTML5基础
HTML5文本标签
5．短语标签������
短语标签都是行内标签，用于定义一个段落或者一句话中的一部分文字。
比如，要强调某个文字、倾斜某个文字、高亮显示某个文字等。
文字加粗�<p>�这部分文字�<b>�加粗�</b></p>
强调文字�<p><strong>�强调�</strong>�这里的文字�</p>
斜体文字�<p>�这里的文字会有�<i>�斜体�</i>�效果�</p>
01�HTML5基础
HTML5文本标签
6．特殊字符������
若需要在HTML页面中显示某些符号，如<、>、&、“等，则在HTML代码中直接输入上述符号时，会与HTML中的关键字
产生冲突。因此不能直接在代码中输入以上符号，需要将其转化为对应的HTML代码。
01�HTML5基础
HTML5文本标签
7．网页注释
在HTML中，利用<!--�-->生成注释。注释的目的是便于他人阅读代码，注释部分只在源代码中显示，并不会出现在浏览器中。
如：
<p>
�千山鸟飞绝，<br>
�万径人踪灭。
</p>
<!--�不使用 <br>�换行的效果 -->
<p>
�千山鸟飞绝，
万径人踪灭。
</p>
02�CSS3基础
Web标准实际是由三大部分构成的：结构（Structure）、表现（Presentation）和行�为（Behavior）。对应的网站标
准也分为3个方面：结构化标准语言（HTML）、表现标准�语言（CSS）和行为标准（JavaScript）。其中，CSS�负责页
面的“表现”，即“装饰和�美化”。
02�CSS3基础
CSS3的引用方法
嵌入样式：
<head>
<style�type=＂text/css＂>
<!—
选择器1{样式属性1:取值;样式属性2:取值;…}
……
-->
</style>
</head>
内联样式：
<HTML�标签�style="样式属性:取值;样式属性:取值;…">
不提倡，因为他不能更好的实现结构样式分离，特殊情况
下可以使用，只适合该特定元素的特定属性
外部样式
将外部的独立的样式表文件引入到�HTML�文件中。
用法：
<head>
<link�rel="stylesheet"��type="text/css"��href="样式表
文件的地址">
</head>
导入样式：
在�HTML�文件初始化时，会被全部导入到�HTML�文件内，作为
文件的一部分
<style�type=”text/css”>
@import�url(外部样式表文件地址);
</stytle>
02�CSS3基础
CSS3声明
CSS的声明指的是需要设置的css属性（例如颜色）及
其值。它有一定的语法规则。不管是外部链接还是嵌
入样式，导入式样式，声明css的方法都是一样的。语
法结构如下：
选择符｛
属性1:属性值;
属性2:属性值;
…
｝
02�CSS3基础
CSS3选择器
选择器，又称为选择符。顾名思义，其作用是“做选择”，选择指定的标签，给它们添加样式，
进行美化。
CSS3�选择器主要有六种：
1. 标签选择器
2. id�选择器
3. 类选择器
4. 分组选择器
5. 包含选择器
6. 通配符选择器
02�CSS3基础
CSS3选择器：标签选择器
直接给标签设置样式的选择器就是标签选择器。
例如：
a{
color:#ff0000;
font-size:16px;
}
将页面中的超链接文字的颜色设置为#ff0000，文字大小设置为16px。
02�CSS3基础
CSS3选择器：类选择器
类选择器也叫class选择器，语法为:
.类名{属性1:属性值;}
02�CSS3基础
CSS3选择器：ID选择器
ID�选择器也可以用来为某一类定义相同的样式。但与类选择器不同的是，在同一
HTML文件中，id名不能重复。
02�CSS3基础
CSS3选择器：分组选择器
当多个选择器声明的样式完全相同时，可以将它们统一进行声明，各选择器之间使用
英文逗号（,）分开。
02�CSS3基础
CSS3选择器：包含选择器
当需要为一个容器中的标签设置样式时，需要使用包含选择器（父子选择器）。
02�CSS3基础
CSS3选择器：通配符选择器
通配符选择器是一种特殊类型的选择器，它由星号（*）来表示选择器的名称，可以定义所有
网页标签的显示格式。
通配符一般用于统一浏览器设置。
02�CSS3基础
id和类命名规则
id和类命名规则为了避免浏览器的不兼容问题以及按照网页开发人员的开发习惯，我们应尽量
规范选择器的命名规则，包括：
• 字母一律小写；
• 以字母开头，由字母和数字组成；
• 尽量不用短横线和下画线；
• 尽量用英文，尽量不使用缩写，除非一看就明白其含义的单词缩写；
• 尽量“见名知意”等。id和类命名采用对应内容的英文单词或组合命名，并且第一个单词小
写，第二个单词首字母大写，如newProduct（最新产品，new+Product）。
02�CSS3基础
颜色值语法
CSS中表现颜色值的方法较多，常用的有以下几种：色相名、十六进制色、RGB颜色值。
• 色相名：就是颜色的名称，如blue、brown等，
• 十六进制色：它规定用#RRGGBB来表示颜色，其中，RR、GG、BB代表红、绿、蓝色，所
有颜色值必须介于00～ff之间。比如color:#0000ff表示蓝色。
• RGB颜�色�值：它�规�定�用rgb(red,green,blue)来表示颜色值。每个参数的取值范围是0～
255，数值越大代表颜色的强度越高。比如color:rgb(0,0,255)也表示蓝色。
• RGBA颜色值：是在RGB的基础上增加了A（alpha，透明度，其有效值为0-1）。因此，通
过RGBA颜色值可以设置颜色的透明度，如rgba（255,0,0,5）表示半透明的蓝色。
02�CSS3基础
CSS中的注释
由于网页结构复杂，CSS代码量庞大，为了便于理解和后期维护，在CSS代码中应该有一定的注
释即解释，这些注释是不会对CSS代码产生影响的。
CSS中的注释语法结构是：
/*�注释的内容�*/
02�CSS3基础
CSS3文本属性
设置文字字体：font-family
设置文字大小：font-size
设置文字倾斜：font-style
设置文字粗体：font-weight
设置文字颜色：color
设置英文字体：font-variant
文字修饰：text-decoration
英文字母大小写转换：text-transform
中文字符间距：�letter-spacing
整英文单词间距：word-spacing
设置文本水平对齐方式：text-align
设置段落首行缩进：text-indent
调整行高：line-height
文本阴影属性：text-shadow
自动换行：word-wrap
02�CSS3基础
CSS3背景属性：背景颜色
可以为颜色名称的英文。对应的语法为：background-color:blue;
可以为颜色对应的16进制值。语法为：background-color:#0000ff;
可以为颜色对应的rgb值。语法为：background-color:rgb(0,0,255)
CSS3提供了半透明的显示。语法显示为：background-color:rgba(0,0,0,)。
02�CSS3基础
CSS3背景属性：背景图片
图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。
语法为：
background-image:url(图片路径);
在网页中，为了控制网页文件大小，背景图片常常不会直接使用整图，而是提取其中的一部分用
来重复显示。所以背景重复分为重复、横向重复、纵向重复、不重复。
background-repeat:�repeat�|�repeat-x�|�repeat-y�|�no-repeat;
02�CSS3基础
CSS3背景属性：背景图片
在网页中需要将背景图片放在我们希望的位置，所以可以通过background-
position属性来改变默认的位置。
• background-position：top��center
• background-position:10px�10px
• background-position:50%�50%
• background-position:left�20px�top�10px
02�CSS3基础
CSS3背景属性：渐变背景
Css3中，支持背景的渐变。
• 线性渐变linear-gradient
• 径向渐变radial-gradient
• 重复的线性渐变repeating-linear-gradient
• 重复的径向渐变repeating-radial-gradient
每一种渐变里面一定会有渐变方向，角度，起始颜色，终止颜色等。用法如下：
• background:linear-gradient(-90deg,#fff,#333);
• background:�radial-gradient(center,circle,#f00,#ff0,#080);
• background:�radial-gradient�(50%,circle,#f00,#ff0,#080);
02�CSS3基础
CSS3背景属性：滚动背景
背景可以被固定在某一处，也可以跟随网页内容的滚动更滚动。
用法为：background-attachment：scrool/fixed;
CSS3背景属性：背景定位
背景的左上角可以定位在边框、内边距和内容上
用法为：background-origin:padding-box/border-box/content-box
CSS3背景属性：背景裁剪
背景剪裁属性background-clip也与盒子模型有关。
background-clip:padding-box�|�border-box�|�content-box;
02�CSS3基础
CSS3背景属性：背景尺寸
background-size属性可以用来定义背景图片的尺寸。
用法为：background-size:100px�200px/�40%/cover/content。
CSS3背景属性：简写背景属性
部分属性可以简写到background属性中，例如：
background:#00ff00�url(images/�)�repeat-x�top�30px�left�30px�scroll;
03�案例实现：文章界面美化
这是一篇显示在网页中的文章，最终实现效
果如图所示。
图片为一张489像素×188像素的背景图。
03�案例实现：文章界面美化
HTML核心的代码：
<div�class="main">
�<p>�有着共同梦想，追求完美个性的几个好友，于 2006�年 10�月创造出了一个有别于
一般咖啡店的小天地 ~~~�阿伏得咖 ~~~
�</p>
�<p>�店里的每道餐点都需耗时制作，非泡制，“求精不求量”“好还要更好”，适合不
赶时间的您。在这个小平米的空间里，却有大大的用心，在座椅方面，换上了有别于一般咖啡厅的订做沙发，相对的牺牲了
空间，但就是希望客人坐得舒适，吃得愉快，享受那边片刻的宁静，放松一天紧绷的情绪。
</p>
<p>�在饮品方面，分为意式咖啡、花草（果）茶系列、健康蔬果汁、特调系列、养生及冰沙系列。意式咖啡有别于一般商业
咖啡，重视咖啡粉的粹取时间，更讲究咖啡滤器跟把手间分离，就怕滤器温度太高伤了咖啡原有精华的风味。这里的咖啡不
仅实在，而且杯杯呈现给您不一样的视觉感受。
</p>
�<p>�在餐点上，则提供了口袋堡轻食，也就是俗称的热三明治，别看它小小一片，肉馅可都是精心搭配的，有炸的，有炒的，
配上套餐附送的水果沙拉，酸酸甜甜的滋味让爱美又怕胖的女性朋友爱不释手。
</p>
�</div>
03�案例实现：文章界面美化
CSS3核心的代码：
.main{
�width:489px;
�height:400px;
�background-image:url(../images/);
�background-repeat:no-repeat;
�background-color:#FFFCDD;
�background-position:bottom�right;
}
.main�p{
�font-family:"�微软雅黑 ";
�color:#4F432B;
�font-size:14px;
�line-height:21px;
�text-indent:28px;
}
END
THANK YOU
