正文：
前言：
说到网页，其实大家并不陌生。人们上网时浏览新闻、查询信息、翻看图片等都是在使用网页。在制作网页前，先要对网页有一个基本的认识。
创建和呈现网页的过程，涉及到设计、开发和优化网站的内容、布局和功能。在当今数字化的时代，网页设计与制作变得越发重要，因为网站是企业、品牌和个人展示自己的重要渠道之一。一个好的网页设计能够吸引访客的注意，提升用户体验，增加网站的流量和转化率。
在进行网页设计与制作时，需要考虑到用户体验、页面响应速度、搜索引擎优化、安全性等因素。同时，不同平台（如PC、平板、手机）的适配也是至关重要的，以确保网站在各种设备上都能够正确显示和使用。网页设计与制作需要综合运用设计技巧、前端开发技术和市场营销知识，以达到用户需求和业务目标。总之，良好的网页设计与制作可以帮助您在竞争激烈的网络世界中脱颖而出，为您的内容和服务赢得更多曝光和认可
网页语言标签（HTML）：
1、页面格式化标签：
（1）标题标签：
HTML提供了6个等级的标题，即h1、h2、h3、h4、h5、h6，且重要性递减。标题标签的基本语法格式
（2）段落标签：
在网页中使用<p>标签来定义段落。
（3）水平线标签：
| 标签 | 显示效果 |
| <b></b>和<stong></strong> | 文字以粗体方式显示（HTML推荐使用<strong>标签） |
| <i></i>和<em></em> | 文字以斜体方式显示（HTML推荐使用<em>标签） |
| <s></s>和<del></del> | 文字以加删除线方式显示（HTML推荐使用<del>标签 ） |
| <u></u>和<ins></ins> | 文字以加下画线方式显示（HTML不赞成使用<u>标签） |
（4）特殊字符
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币符号 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ®； |
| ° | 角度单位 | °； |
| ± | 正负号 | ±； |
| x | 乘号 | ×； |
| ÷ | 除号 | ÷； |
| ² | 平方（上标2） | ²； |
| ³ | 立方（上标3） | ³； |
（5）图片标签（img）
| 属性 | 属性值 | 描述 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标指针悬停时显示的内容 |
| width | 像素值 | 设置图像的宽度 |
| height | 像素值 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
| vspace | 像素值 | 设置图像顶部和底部的空白(垂直边距) |
| hspace | 像素值 | 设置图像左侧和右侧的空白(水平边距) |
提示：图片引入的路径
绝对路径：就是网页上的文档或目录在盘符(即C盘、D盘等)中的真正路径，例如，“D:\案例源码\chapter03\images\bannerl.jpg”就是一个盘符中的绝对路径。再如，完整的网络地址“http://www.zcool.com.cn/但使(2)相对路径 images/logo.gif”也是一个绝对路径。
相对路径：就是相对于当前文档的路径，相对路径没有盘符，通常是以HTML网页文档为起点，通过层级关系可以 关系描述目标图像的位置
Css架构：
（1）CSS简介
1、结构与表现分离：
使用HTML标签属性对网页进行修饰的方式存在很大的局限性,因为将所有的样式都写在标签中既不利于阅读代码，也不利于维护代码。如果希望网页代码美观易读、维护方便，就需要使用CSS实现结构与表现的分离。
2、Css样式规则：
使用HTML搭建网页结构时，需要遵从一定的规范，CSS亦如此。要想熟练地使用CSS设置网页样式。先要了解CSS 的样式规则。
例：选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3}
3、Css样式表的引入：
（2）Css四种样式：
1、行内式：
行内式也被称为"内联样式"，是通过标签的style属性来设置标签样式的。
语法格式：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名>
代码示例：
<h1 style="font-size:20px; color:blue;">使用CSS行内式修饰一级标题的字体大小和颜色</h1>2、内嵌式：
内嵌式是将CSS代码集中写在HTML文档的<head>标签中，并且用<style>标签定义。
语法格式：<head> <style type="text/css">选择器(属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>
代码示例：
1 <!doctype html><htm1><head>
2 <meta charset="utf-8">
3 <title>内嵌式引入css 样式表</title><style type="text/css">
4 h2(text-align:center;}/*定义标题标签居中对齐*/
5 pl /*定义段落标签的样式*/
6 font-size:16pxi
7 font-family:“楷体”;
8 color:purple;
9 text-decoration:underline;
10
11 </style>
12 </head>
13 <body>
14 <h2>内嵌式Css 样式</h2>
15 <p>使用style 标签可定义内嵌式css 样式表，style标签一般位于head头部标签中且在title标签之后。 16 </p >
17 <body>
18 </html>
3、外链式
外链式也称为“链入式”，是将所有的样式放在一个或多个以( .css”为扩展名的外部样式表文件中通
过<link />标签将外部样式表文件链接到HTML文档中。
语法格式：link href="css 文件的路径"type="text/css" rel="stylesheet" />
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外链式引入css样式表</title>
</head>
<body>
<h2>外链式css 样式</h2>
<p>
通过 link 标签可以将扩展名为.css的外部样式表文件链接到HTML 文档中。
</p >
</body>
</html>
4、导入式
导入式与外链式相同，都是针对外部CSS样式表文件,为了实现结构与表现分离而采用的引入方式。
语法格式：<style type="text/css">
@import url(css 文件路径); /*或 @import "css文件路径";*/
/*在此还可以存放其他CSS样式*/
提示：（导入式使用的较少）
（3）四种CSS基础选择器
1、标签选择器：
标签选择器是指用 HTML标签名作为选择器，按照标签名分类，为页面中某一类标签指定统一的CSS样式。
语法格式：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
代码示例：
p{font-size:12px; color:#666; font-family:"微软雅黑";}
2、类选择器：
类选择器使用“.”(英文点号)进行标识，后面紧跟类名。
语法格式：.类名(属性1:属性值1;属性2:属性值2;属性3:属性值3;
代码示例：
<!doctype html><html><head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.green{ color:green;}
.blue{ color:blue;}
.fontl{ font-size:22px;}
p{font-family:"楷体"; text-decoration:underline;}
</style>
</head>
<body>
<h2 class="green">静夜思</h2>
<p class="blue font1">唐: 李白</p >
<p class="green font1">床前明月光，</p >
<p>疑是地上霜。</p ><p>举头望明月，</p >
<p>低头思故乡。</p >
</body>
</html>3、id选择器
id选择器使用“#”进行标识，后面紧跟id名。
语法格式：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
代码示例：
<!doctype html><html><head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#bold{font-weight:bold;}
#font24{ font-size:24px;}
</style>
</head>
<body>
<p id="bold">段落1: id="bold"，设置粗体文字。</p >
<pid="font24">段落2:id="font24"，设置字号为24px。</p >
<p id="font24">段落3: id="font24"，设置字号为24px。</p >
<p id="bold font24">段落4: id="bold font24"，同时设置粗体和字号24px。</p >
</body>
</html>4、通配符选择器：
通配符选择器用“*”表示，它在所有选择器中作用范围最广，能匹配页面中所有的元素。
语法格式：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
代码格式：
*{
margin:0; /*定义外边距*/
padding:0; /*定义内边距*/
隔开。 }（4）CSS文本样式
(1)文本字体样式
1、font-size属性:字号
font-size属性用于设置字号,该属性的属性值可以为像素值、百分比数值、倍率等。
font-size属性常用的属性值单位
| 单位 | 说明 |
| em | 倍率单位，指相对于当前对象内文本的字体倍率 |
| px | 像素值单位，是网页设计中常用的单位 |
| % | 百分比数值单位，指相对于当前对象内文本的字体百分比 |
代码示例：
px:p{font-size:12px;}em:p{font-size:2em;}%:p{font-size:2%;}2、font-family属性：字体
font-family属性是用于设置字体。
代码示例：
font-family：p{font-family:"微软雅黑";}3、font-weight属性:字体粗细
font-weight属性用于定义字体的粗细
font-weight属性的属性值
| 值 | 描述 |
| normal | 默认属性值，定义标准样式的字符 |
| bold | 定义粗体字符 |
| lighter | 定义更细的字符 |
| bolder | 定义更粗的字符 |
| 100~900(100的整数倍) | 定义由细到粗的字符，其中400等同于normal，700等同于bold，数值越大字体越粗 |
代码示例：
normal:p{font-weight:normal;}
bold:p{font-weight:bold;}
lighter:p{font-weight:lighter;}
bolder:p{font-weight:bolder;}
4、font-variant属性：变体
font-variant 属性用于设置英文字符的变体，一般用于定义小型大写字体，该属性仅对英文字符有效 font-variant属性
font-variant属性值
| 值 | 描述 |
| normal | 默认值，浏览器会显示标准的字体。 |
| small-caps | 浏览器会显示小型大写的字体，即所有的小写字 母均会转换为大写字母。但是所有使用小型大写字体的字母和其余文 本相比，字体尺寸更小。 |
代码示例：
font-variant：p{font-variant:normal}5、font-style属性：字体风格
font-style属性用于定义字体风格。
font-style属性值
| 值 | 描述 |
| normal | 默认值，浏览器会显示标准的字体样式。 |
| italic | 浏览器会显示斜体的字体样式。 |
| oblique | 浏览器会显示倾斜的字体样式。 |
代码示例：
font-style：p{font-style:normal;}6、font属性：综合设置字体样式。
font属性用于对字体样式进行综合设置。
代码示例：
font:p{font:font-style:normal;font-weight:bold;font-variant:normal;}
7、@font-face规则
@font-face是CSS3的新增规则，用于定义服务器字体。通过@font-face规则，可以使用计算机未安装字体。
语法格式：
@font-face{
font-family:字体名称;
src:字体路径;
}
（2）CSS文本外观属性
1、color属性：文本颜色。
color属性用于定义字体颜色。
color属性值
| 描述 | 值 |
| 颜色单词 | red、green、blue等等 |
| 十六进制颜色 | #F00000、#FF6600、#29D794 |
| RGB颜色值 | rgb（255，0，0）、rgb（100%，0%，0%） |
2、letter-spacing属性：字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白距离。
代码示例：
letter-spacing:h2{letter-spacing:20px;}3、word-spacing属性:单词间距
word-spacing属性用于定义英文单词之间的间距，该属性对中文字符无效
代码示例：
word-spacing:p{word-spacing:2em;} ---css
<p>文本内容要是英文单词才可以</p>----html4、line-height属性:行间距
line-height属性用于设置行间距。所谓行间距就是行
与行之间的距离，即字符的垂直间距，一般称为行高。
代码示例：
line-height：p{line-height:20px;}5、text-transform属性:文本转换
text-transform 属性用于转换英文字符的大小写
text-transform属性值
| 值 | 描述 |
| none | 不转换(默认值)。 |
| capitalize | 首字母大写。 |
| uppercase | 全部字符转换为大写。 |
| lowercase | 全部字符转换为小写。 |
代码示例：
text-transform：p{text-transform:none;}----none是一个值可替换的，达到不同的效果
6、text-decoration属性:文本装饰
text-decoration属性用于设置文本的下画线、上画线、删除线等装饰效果
text-decoration属性值
| 值 | 描述 |
| none | 没有装饰(正常文本默认值)。 |
| underline | 下画线。 |
| overline | 上画线。 |
| line-through | 删除线。 |
代码示例：
text-decoration：p{text-decoration:underline;}-----加了一个下划线7、text-align属性:水平对齐方式
text-align属性用于设置文本内容的水平对齐方式，相当于HTML中的align属性。
text-align属性值
| 值 | 描述 |
| left | 左对齐(默认值)。 |
| right | 右对齐 |
| center | 居中对齐。 |
代码示例：
text-align:p{text-align:center;}----居中8、text-indent属性:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为像素值、倍率或相对于浏览器窗口宽度的百分比数值。text-indent属性的属性值允许使用负数。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-indent属性</title>
<style type="text/css">
p{font-family:"微软雅黑";font-size;14px; color:red;}
.two{text-indent:2em;} ----首行缩进2个字符
.three{text-indent:50px;}-----首行缩进50像素
</style>11 </head>12 <body>
<p class="one">段落1:这是正常显示的文本内容，并没有设置段落1文本的首行缩进效果。</p >
<p class="two">段落2:使用text-indent:2em;设置段落2文本首行缩进2个字符的效果。</p >
<p class="three">段落3:使用text-indent:50px;设置段落3文本首行缩进50 像素的效果。</p >
</body>
</html>9、white-space属性:空白符处理
空白符是空格符、换行符等的统称。使用HTML制作网页时，无论源代码中有多少空格符、换行符，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式。
white-space属性值
| 值 | 描述 |
| normal | 常规(默认值)，文本中的空格无效，满行(到达区域边界)后自动换行。 |
| pre | 按文档的书写格式保留空格、换行样式。 |
| nowrap | 强制文本不能换行，即使内容超出元素的边界也不换行，超出时浏览器页面则会自动增加滚动条。 |
代码示例：
p{white-space:pre;}-----按文档的书写格式保留空格，换行样式10、text-shadow属性 阴影效果
text-shadow是CSS3新增属性，该属性可以为页面中的文本添加阴影效果。
语法格式：选择器{text-shadow:h-shadow v-shadow blur color;}
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow属性</title>
<style type="text/css">
p{font-size: 50px; text-shadow:10px 10px 10px red;}
/*设置文字阴影的距离、模糊半径和颜色*/
</style>
</head>
<body>
<p>Hello CSS3</p >
</body>
</html>（5）CSS高级特性
（1）CSS复合选择器
1、标签指定式选择器
标签指定式选择器又称为“交集选择器”，由两个选择器构成，一个为标签选择器，另一个为class选择器或id选择器，两个选择器之间不能有空格
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{ color:blue;}
.special{color:green;}
p.special{color;red; } /*标签指定式选择器*/
</style>
</head>
<body>
<p>普通段落文本(蓝色) </p >
<p class-"special">指定了.special类的段落文本(红色)</p >
<h3 class="special">指定了.special类的标题文本(绿色)</h3>
</body>
</html>2、后代选择器
后代选择器用于选择元素或元素组的后代，其定义方法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的“后代”。
代码示例：
<!doctype html>
<htm1>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
p strong{color:red;} /*后代选择器*/
strong{color:blue;}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中，使用strong标签定义的文本(红色)。</strong></p >
<strong>嵌套之外由strong标签定义的文本(蓝色)。</strong>
</body>
</html>3、并集选择器
并集选择器的各个选择器通过英文逗号连接而成，任何形式的选择器(包括标签选择器、类选择器和计选择器)，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，可以利用并集选择器为它们定义相同的CSS样式。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type="text/css">
h2,h3,p{color:red; font-size:14px;) /*不同标签组成的并集选择器*/
h3, .special, #one{text-decoration:underline;}
/*标签选择器、类选择器、id选择器组成的并集选择器*/</style>
</head>
<body>
<h2>二级标题文本。</h2>
<h3>三级标题文本,加下画线。</h3>
<p class="special">段落文本1，加下画线。</p >
<p>段落文本2，普通文本。</p >
<p id="one">段落文本3，加下画线。</p >
</body>
</html>（2）层叠性和继承性
1、层叠性
层叠性是指多种 CSS 样式的叠加。例 当使用内嵌式CSS 样式定义<p>标签字号为12px，同时使用外链式CSS 样式定义<p>标签颜色为红色后,段落文本的字号为12px且颜色为红色,即这两种样式产生了叠加。
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>csS 层叠性</title>
<style type="text/css">
.special{font-style:italic;}
p{font-size:18px; font-family:"微软雅黑";}
#one{color:green; font-weight:bold;}
</style>
</head>
<body>
<p>离离原上草，一岁一枯荣。</p >
<p class="special" id="one">野火烧不尽，春风吹又生。</p >
</body>
</html>2、继承性
继承性是指书写CSS样式表时，子标签会继承父标签的某些样式。例如，定义主体标签<body>的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为页面中其他的标签都嵌套在<body>标签中,是<body>标签的子标签。这些子标签继承了父标签<body>的属性。
提示：并不是所有Css属性都可以继承，如以下是不能继承的
1.边框
2.外边距属性
3.内边距属性
4.背景属性
5.定位属性
6.布局属性
7.原素宽高属性
（3）CSS优先级
权重示例：
p strong{color:black} /*权重为:1+1*/
strong.blue{color:green;} /*权重为:1+10*/
.father strong{color:yellow} /*权重为:10+1*/
p.father strong{color:orange;} /*权重为:1+10+1*/
p.father .blue{color:gold;} /*权重为:1+10+10*/
#header strong{color:pink;} /*权重为:100+1*/
#header strong.blue{color:red;} /*权重为:100+1+10*/网页开发工具：
（1）HBuilder X
HBuilderX是一款基于Electron框架开发的跨平台的集成开发环境（IDE），它是由DCloud公司推出的一款专门用于Web前端开发的工具。HBuilderX集成了多种开发工具和语言，包括HTML、CSS、JavaScript、TypeScript、Vue.js、React等，可以帮助开发者更高效地进行Web前端开发
下载网址：
https://www.dcloud.io/hbuilderx.html
使用步骤：
（2）Visual Studio Code
下载网址：
https://code.visualstudio.com/
Visual Studio Code（简称 VSCode）是由微软公司推出的一款免费的、开源的代码编辑器。也是一个多语言的开发工具，它旨在提供一个现代化的开发环境，支持多种编程语 言，包括但不限于 JavaScript、Python、C++、TypeScript、C# 等。VSCode 不仅具备基础的代码编辑功能，如语法高亮、代码折叠、智能感知、自动补全等，还包括了对 Git 的原生支持，便于代码版本管理和团队协作。
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
