首页  思维导图  详情

网页设计与制作教程

2024-12-12 15:46:46   2  举报





AI智能生成

hao

技能提升

作者其他创作

大纲/内容

第一章网页制作的基础知识

认识网页和网站

网页，网站常用数法

网页：网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web 页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。如果说WWW是Internet(因特网)上的一个大型图书馆，那么图书馆的每一本书就是一个Web站点，而网页就是书中的某一页，页码就是网址，网址与页面一一对应，多个网页关联组合在一起就成为一个Web站点。Web站点中有一个特殊的网页叫作主页(Homepage，也叫首页)，相当于书的封面。

网站：Web站点也称为网站，WWW信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。

静态网页和动态网页

静态网页：静态网页是指客户端的浏览器发送URL请求给 WWW服务器,服务器查我需要的思文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。

动态网页：动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同，动态网页可分为客户端动态网页与服务端动态网页。

常用术语:internet、W W W、URL、IP、域名、HTTP、FTP、发布、站点、超链接、客户机和服务器。

网页的基础构成元素

文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。与图片相比，文本虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文本周有的缺点，人们赋予了网页中文本更多的属性，如字体、字号、颜色、底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。

图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要，

确定好网页风格，要对网页的

括GIF、JPEG和PNG等，其中使用最广泛的是CIF和JPEC两种格式。在网页中,为

超链接

超链接技术是www流行起来的最主要的原因。超链接是从一个网页指向另一个月

其上方为网站标和广告条，

端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。

为正文,左右分判栏，用于导航和工具栏等，下方是钻

链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

音频视频

音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为这种精不的布局方式比

主要用于突出需要表通常最上方为通栏的

文件，其压缩率非常高，音质也不错，是背景音乐的首选。

条,下方是正文部分

网页中的视频文件一般为flv格式，它是一种基于FlashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

交互表单

网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。

其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。

页面布局结构

网页页面布局

网页安全色。网页安全色是指在不同硬件环境、不同操作系统，不同满览器中都能够正常显示的颜色集合。在使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51，102，153，204和255时，构成的颜色组合一共有216种颜色。

网页色彩搭配

采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。

采用近似色配色:在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩，包括色相对比、明度对比、饱和度对比、冷暖对比等，如黄和蓝，紫和绿，红和青。任何色彩和黑、白、灰，深色和浅色，冷色和暖色，亮色和暗色都是对比色关系。

web 前端技术简介

初识WEB 前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都

是在浏览网页。但网页制作还需要了解与网页相关的基本概念下面对Web前端的相关

念进行详细讲解。

早期的前端其实就是Tabel布局，后来发展到Div+CSS网站重构，再到JavaScript逐渐成为Web前端开发的语言以及Web 2.0的出现，每个阶段都涌现出相应的产品，如SNS博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。

WEB前端开发的三大核心技术

HTML：

HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。

CSS语言：

CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

JavaScript 语言：

JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为 JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。通常 JavaScript脚本通过嵌入HTML中的方式来实现自身的功能。

WEB前端开发工具

浏览器
IE浏览器

Chrome 浏览器

Filefox l浏览器

Safari 浏览器

Opera 浏览器

网页编辑器

Adobe Dreamwcaver。Adobe Dreamweaver 是一款所见即所得的网页编辑器，中文名

称为“梦想编织者”或“织梦”。该软件最初的 1.0 版是 1997 年由美国 Maeromedia 公司发

布的。该公司于 2005 年被 Adobe 公司收购。Dreamweaver 也是当时第一套针对专业 Web 前

端工程师所设计的可视化网页开发工具，整合了网页开发与网站管理的功能。

HTML语法基础

HTML概述

语言

超文本

标记

HTML 基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>

<header>

</header>
<nav>

</nav>
<main>

<section>

</section>
<article>

</article>
<aside>

</aside>
</main>
<footer>

</footer>
</body>
</html>

HTML文档标签<html>...</html>

HTML 文档标签<html>…</html>

HTML 文档标签的格式为

<hml>HTML 文档的内容</html>

<hml>处于文档的最前面，表示 HTML 文档的开始，即浏览器从<html>开始解释，直到遇到</html>为止。每个 HTML 文档均以<html>开始，以</html>结束。

HTML 文档头标签<head>…</head>

HTTML 文档包括头部（head）和主体（body)。HTML文档头标签的格式为

<head>头部的内容</head>

文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。

文档编码

文档编码格式如下：

<meta charset="utf-8"/>

为了被浏览器正确解释和通过 W3C 代码标准，所有的 HTML 文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313（简体中文）。

HTML 文档主体标签<body>…</body>

HTML 文档主体标签的格式为

<body>网页的内容</body>

主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的

主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

创建HTML文档

使用 HBuilder 新建项目。依次点击选择“文件”→“新建”→“Wab 项目”。

(2）创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，在本示例中，项目名称为“课堂练习”。

（3）打开项目“课堂练习”的文件夹，会看到里面有首页 indes. hnml，有js文件夹，有css文件夹，还有图片的文件夹，基本齐全。

（4）到了这一步之后，便可以编写网页代码了，可以直接在 index. hml中编写代码。也可以单击鼠标右键，新建一个HTML文件

（5）在“创建文件向导”对话框中，选择好文件所在目录，并为文件命名，模板为html5。

网页头部标签

<title>标签

<tile>标签是页面标题标签。它将 HTML 文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<hend>与</hend>之间。<tile>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。

<meta>标签

keywords

keywonds 用来告诉搜索引擎网页使用的关键字。例如，著名的京东商城网，其主页的关键设置如下。

<meta name="keywonds" conton-“网上购物,网上商城,家电,手机,也脑,服装,居家,母婴，美妆,个护，食品，生鲜，京东"/＞

网前前不。

description

deseription 用来告诉搜索引擎网站主要的内容。例如，京东商城网站主贡的内容描述设置如下。

<meta name="description” content ="京东 JD.COM-专业的综合网上购物商城,为您提供正品低价的购物

选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>

当浏览者通过百度搜索引擎（百度）搜索“京东”时，就可以看到搜索结果中显示出

网站主页的标题、关键字和内容描述。

<link>标签

<script>标签

HTML5文档注释和特殊符号

注释

为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不被浏览器执行。HTML5 使用标签为文档进行注释，注释标签以“”结束，中间的“...”替换为注释文字内容即可。标签支特单;

和多行注释。

特殊符号

由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在英面中

显示这些特殊符号，就必须使用相应的 HTML.代码表示。这些特殊符号对应的 HTML 代码被称为字符实体。

常用的特殊符号及对应的字符实为文档进行注释，注释标签以“”结束，中间的“...”替换为注释文字内容即可。标签支特单;

和多行注释。

综合案例临江仙·送钱穆父

<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="宋词" charset="UTF-8"/>
<meta name="description " content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333" >
<h2 align="center">临江仙.送钱穆父</h2>
<p>宋苏轼</p>
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br />
无波真古井，有节是秋筠。<br />
惆怅孤帆连夜发，送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
</body>
</html>

第二章网页制作的排版方法

文字与段落排版

段落标签

<p>这是一个段落。</p >

<p>这是另一个段落。</p >

在这两个段落之间，浏览器会自动添加一些空间，使得它们在视觉上分隔开来。

除了 <p> 标签，还有其他一些HTML标签也可以用来组织文本内容，比如：

<div> ：用于定义文档中的分区或节，它本身不表示任何内容，但可以用来组织页面的结构。

<h1> 到 <h6> ：这些是标题标签，用于定义不同级别的标题。

<blockquote> ：用于定义一个块级的引用，通常用于引用文本段落。

这些标签都有助于组织和格式化网页内容，使页面结构更加清晰。

标题标签

<h1>这是主标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

换行标签

<p>这是第一行文字。<br>这是第二行文字。</p >

在这个例子中， <br> 标签使得 "这是第二行文字" 显示在新的一行。

<hr> 标签

用途：在文档中创建一个水平线。

语法： <hr>

虽然 <hr> 不是传统意义上的换行标签，但它在视觉上可以作为文本内容的分隔线，通常用于分隔段落或章节。

例如：

<p>这是一段文本。</p >

<hr>

<p>这是另一段文本。</p >

在这个例子中， <hr> 标签在两个段落之间创建了一个水平分隔线。

使用场景

文本换行：当你需要在文本中强制换行，而不是让浏览器自动处理时，可以使用 <br> 。

内容分隔：使用 <hr> 来分隔不同的内容部分，增加文档的可读性和美观性。

水平线标签

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>水平线示例</title>

<style>

hr {

border: 0;

height: 2px;

background-color: #000;

width: 100%;

margin: 20px 0;

}

</style>

</head>

<body>

<h1>标题</h1>

<p>这是段落文本。</p >

<hr>

<p>这是另一个段落文本。</p >

</body>

</html>

预格式化标签

1. 保留空格和换行：在 <pre> 标签中的文本，包括空格、换行和制表符，都会按照原样显示，而不会被浏览器忽略或合并。

2. 等宽字体显示：文本会以等宽字体显示，通常为 Courier 或类似的字体。

3. 用于显示代码：由于其能够保留格式的特性， <pre> 标签常用于显示编程代码，可以与 <code> 标签结合使用以提供更清晰的语义。

4. 处理特殊字符：在 <pre> 标签中的特殊符号会被转换为符号实体，例如 < 会被转换为 < ， > 会被转换为 > 。

在 HTML5 中， <pre> 标签不支持 width 属性，这个属性在 HTML 4.01 中已经废弃。如果需要设置宽度，应该使用 CSS 来实现。

在实际应用中，如果文本内容过长导致溢出，可以通过 CSS 设置 white-space 属性为 pre-wrap 来使得文本自动换行，或者为 pre 元素添加横向滚动条。

此外，为了提高可访问性，当使用 <pre> 标签创建图像或图表时，应提供替代描述，以便使用屏幕阅读器的用户能够理解预格式化文本的内容。

总的来说， <pre> 标签是一个强大的工具，用于在网页上准确地展示格式化文本。

缩排标签

1. 使用空格和制表符：直接在文本前添加空格或制表符可以实现文本的缩进效果。

2. 使用 CSS：通过样式表可以更精确地控制文本的缩进，例如使用 margin 或 padding 属性。

<p style="margin-left: 40px;">这段文本有左边距，看起来像是缩进。</p >

3. 使用 blockquote 标签：这个标签用于引用一段文本，并且通常会在视觉上自动缩进。

<blockquote>这是一个引用，通常浏览器会自动为其添加缩进。</blockquote>

4. 使用 q 标签：这个标签用于短的引用，通常也会显示为缩进。

<p>这里有一个引用：<q>这是引用的内容。</q></p >

案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全球汇商城简介</title>

</head>

<body>

<h1 align="center">100%正品十重保障</h1>

<hr color="deeppink"/>

<p> 全球汇成立于 2008年, 10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数据监测报告"中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。<br/>

唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>

</p ><br/>

全球汇承诺:

<blockquote>

全球直采:货源保障,全球布局直采全世界好货。<br/>

入仓全检:质检保障,独立自理仓库坚持入仓全检验。<br/>

自营物流:物流保障,自营物流封闭操作全程可溯。<br/>

</blockquote>

</body>

</html>

超链接

超链接简介

超链接的定义

超链接（Hyperlink）是互联网上的一种链接方式，它允许用户通过点击一个文本、图片或任何其他元素，直接跳转到另一个网页、页面或网站的不同部分。超链接是构成互联网的基础之一，它使得信息的组织和导航变得简单直观。

在HTML（超文本标记语言）中，超链接是通过 <a> 标签来定义的。以下是一个基本的超链接的例子：

<a href=" ">访问示例网站</a >

在这个例子中：

<a> 标签定义了一个超链接。

href 属性指定了点击链接后要跳转的URL地址。

链接文本是“访问示例网站”，用户点击这个文本就会跳转到 https://www.example.com 。

超链接不仅可以链接到其他网页，还可以链接到同一页面的不同部分（称为锚点链接），或者链接到电子邮件地址、文件下载等。此外，超链接还可以包含在图片或其他元素中，以提供更丰富的交互体验。

超链接的分类

1. 内部链接 vs 外部链接：

内部链接：指向同一网站内的其他页面。这有助于用户在网站内部导航。

外部链接：指向其他网站的页面。这允许用户访问不同的资源。

2. 绝对链接 vs 相对链接：

绝对链接：包含完整的URL，包括协议（如http或https）、域名和路径。

相对链接：只包含相对于当前页面的路径。它们依赖于当前页面的URL来确定目标位置。

3. 锚点链接：

这种链接指向同一页面上的特定部分，通常用于长页面，以便用户可以快速跳转到页面的不同部分。

4. 下载链接：

允许用户下载文件，如PDF、图片或文档。这种链接通常通过 <a> 标签的 href 属性指向文件的URL，并可能使用 download 属性来提示浏览器下载文件。

5. 电子邮件链接：

允许用户通过点击链接直接发送电子邮件。这种链接通常使用 mailto: 协议。

6. JavaScript链接：

当点击链接时，会执行一段JavaScript代码而不是导航到另一个页面。这可以用来执行各种客户端脚本，如打开模态窗口、更改页面内容等。

7. 空链接：

这种链接没有指定 href 属性，或者 href 属性为空。它们通常用于通过JavaScript来处理点击事件。

8. 友好链接（友情链接）

9. 跟踪链接

10. 社交媒体链接

每种类型的超链接都有其特定的用途和实现方式，选择合适的链接类型可以提高网站的用户体验和功能性。

路径

1. 绝对路径：从根目录开始的完整路径，它指定了从根目录到目标文件或目录的完整路径。例如，在Windows系统中，绝对路径可能看起来像这样： C:\Users\Username\Documents\file.txt 。在Unix或Linux系统中，它可能看起来像这样： /home/username/documents/file.txt 。

2. 相对路径：相对于当前工作目录的路径。它不从根目录开始，而是从当前位置开始。例如，如果当前工作目录是 /home/username/documents ，那么相对路径 file.txt 将指向 /home/username/documents/file.txt 。

在编程中，路径还可能涉及到文件访问权限、文件系统结构等概念。

如果你有特定的文件路径需要帮助，或者想要了解更多关于路径的信息，请提供更多的细节，我会尽力帮助你。

超链接的应用

锚点标签<a>···</a >

!-- 链接到同一页面上的其他部分 -->

<a href=" ">跳转到第1节</a >



<h2 id="section1">第1节</h2>



<a href="https://www.example.com">访问Example网站</a >

在上面的例子中， #section1 是一个锚点，它指向页面上具有相同 id 属性值的元素。当用户点击这个链接时，浏览器会自动滚动到页面上 id 为 section1 的元素。

锚点链接的详细说明

1. 链接到同一页面的不同部分：

使用 href 属性中的 # 符号后跟 id 属性值来创建锚点。

被链接的元素需要有一个 id 属性，其值与 href 属性中的锚点名称相同。



<a href="#contact">联系我们</a >



<div id="contact">

<h2>联系信息</h2>

<p>地址：1234 街道</p >

</div>

2. 链接到其他页面：

直接在 href 属性中指定完整的URL。



<a href="https://www.example.com">访问Example网站</a >

3. 使用锚点进行页面内部导航：

可以将锚点链接与页面内部的导航菜单结合使用，方便用户快速跳转到页面的不同部分。



<nav>

<ul>

<li><a href="#introduction">介绍</a ></li>

<li><a href="#features">特点</a ></li>

<li><a href="#pricing">价格</a ></li>

<li><a href="#contact">联系我们</a ></li>

</ul>

</nav>



<section id="introduction">

<h2>介绍</h2>

<p>这里是介绍部分的内容。</p >

</section>

<section id="features">

<h2>特点</h2>

<p>这里是特点部分的内容。</p >

</section>

<section id="pricing">

<h2>价格</h2>

<p>这里是价格部分的内容。</p >

</section>

<section id="contact">

<h2>联系我们</h2>

<p>这里是联系信息。</p >

</section>

锚点链接的高级用法

1. 使用JavaScript进行更复杂的导航：

可以使用JavaScript来增强锚点链接的行为，例如添加动画效果或处理更复杂的导航逻辑。

<a href="#contact" οnclick="scrollToSection('contact'); return false;">联系我们</a >

<script>

function scrollToSection(sectionId) {

var element = document.getElementById(sectionId);

if (element) {

element.scrollIntoView({ behavior: 'smooth' });

}

}

</script>

指向其他页面的超链接

1. 链接到同一目录内的网页文件：

语法： <a href=" ">热点文本</a >

说明：直接使用目标文件名作为链接地址。

2. 链接到下一级目录中的网页文件：

格式： <a href="子目录名/目标文件名.html">热点文本</a >

说明：在目标文件名前加上子目录名和斜杠。

3. 链接到上一级目录中的网页文件：

语法： <a href="../目标文件名.html">热点文本</a >

说明：使用 ../ 来表示上一级目录。

4. 链接到同级目录中的网页文件：

格式： <a href="../子目录名/目标文件名.html">热点文本</a >

说明：先使用 ../ 退到上一级目录，然后指定目标文件所在的子目录和文件名。

文件中还提到了一个例子，关于如何制作全球汇商城页面之间的链接，指向注册页和登录页。这个例子说明了如何使用相对路径来创建页面间的超链接。

指向书签的超链接

<!DOCTYPE html>

<html>

<head>

<title>指向其他页面书签的超链接同页效果</title>

</head>

<body>

<a href=" ">免费注册</a >

<a href="login.html">账户登录</a >

<a href="intro.html#intro">企业简介</a >

</body>

</html>

<a name="cme">(绝句)</a >

<p>两个黄鹂鸣翠柳,<br/>一行白鹭上青天。<br/>窗含西岭千秋雪,<br/>门泊东吴万里船。</p >

<a name="two">《登高》</a >

<p>风急天高猿啸哀,<br/>渚清沙白鸟飞回。<br/>无边落木萧萧下,<br/>不尽长江滚滚来。<br/>万里悲秋常作客,<br/>百年多病独登台。<br/>艰难苦恨繁霜鬓,<br/>潦倒新停浊酒杯。</p >

<a name="three">《茅屋为秋风所破歌》</a >

<p>八月秋高风怒号,<br/>卷我屋上三重茅。<br/>茅飞渡江洒江郊,<br/>高者挂罥长林梢,<br/>下者飘转沉塘坳。<br/>南村群童欺我老无力,<br/>忍能对面为盗贼,<br/>公然抱茅入竹去。<br/>唇焦口燥呼不得,<br/>归来倚杖自叹息。<br/>俄顷风定云墨色,<br/>秋天漠漠向昏黑。<br/>布衾多年冷似铁,<br/>娇儿恶卧踏里裂。<br/>床头屋漏无干处,<br/>雨脚如麻未断绝。<br/>自经丧乱少睡眠,<br/>长夜沾湿何由彻?</p >

<a name="four">(望岳)</a >

<p>南岳配未鸟，秩礼自百王。欻吸领地灵，鸿洞半炎方。<br/>

那家用祀典，在德非馨香。巡守何寂寥，有虞今则亡。<br/>

清香溢世网，行还越潇湘。渴日绝壁出，漾舟清光旁。<br/>

祝融五峰尊，峰峰次低昂。紫盖独不朝，争长囊相望。<br/>

泰闻魏夫人，群仙夹翱翔。有时五峰气，数风如飞霜。<br/>

养闻魏夫人,群仙夹翱翔。有时五峰气,散风如飞霜。<br/>牵迫限修途,未暇杖崇冈。归来觊命驾,沐浴休玉堂。<br/>

三叹问府主,曷以赞我皇。牲璧忍衰俗,神其思降祥。</p >

<a name="five">(春望)</a >

<p>国破山河在,<br/>城春草木深。<br/>感时花溅泪,<br/>恨别鸟惊心。<br/>烽火连三月,<br/>家书抵万金。<br/>白头搔更短,<br/>浑欲不胜簪。<br/></p >

</body>

<p>页面内容……</p >

<p>页面内容……</p >

<p>页面内容……</p >

<p>页面内容……</p >

<a name="intro"></a >

<p> 全球汇成立于 2008年，此格式在网页年度中国网络零售市场数据监测报告中，全球汇在 B2C市场交易份额方面发展势头良好，继续保持第三位。10年来，凭借独创的特卖模式，精选全球正品好货，深度折扣，在电子商务研究中心 2018年 6月发布的"20调图像。JPEG文</p >

<p>页面内容……</p >

<p>页面内容……</p >

<a name="intro"></a >

<p> 唯品会是全球最大的特卖电商，以及中国第三大电商。</p >

<br/>

</body>

</html>

指向下载文件的超链接

语法： <a href=" ">热点文本</a >

说明：在链接地址处输入文件所在的位置，点击超链接后，浏览器会自动判断文件类型并进行下载。

例如，下载一个名为 guide.rar 的文件，可以创建如下超链接：购物向导：<a href="guide.rar">下载</a >

指向电子邮件的超链接

语法： <a href="mailto:E-mail地址">热点文本</a >

说明：创建指向电子邮件地址的超链接，点击后可以自动打开用户的邮件客户端，准备发送邮件。

例如，电子邮件地址是 gdnanfang@163.com ，可以创建如下超链接：电子邮箱：<a href="mailto:gdnanfang@163.com">和我联系</a >

文件中还提到了图像质量和显示速度的考虑，提到了PNG格式的图像质量高，适合代替GIF格式，且显示速度快。此外，还提到了小图像可以拼合起来以不超过8KB的大小，以吸引访客的注意。

请注意，文件内容中的一些格式可能有误，例如重复的段落和不完整的句子，这可能是文件内容的复制错误。正确的格式应该只出现一次，并且句子应该是完整的。

图像

网页图像的格式及使用要点

常见的网页图像格式

1. GIF：

GIF是Internet上应用广泛的图像文件格式之一。

索引颜色的图像格式，体积小，适合网页使用。

支持小型翻页型动画。

最多使用256种颜色，适合制作徽标、图标、按钮等颜色风格单一的图片。

2. JPEG：

适用于摄影或连续色调图像。

可以包含数百万种颜色，文件体积较大，图像质量佳。

可以通过压缩在图像品质和文件大小之间取得平衡。

适用于对图像质量有要求的网页。

3. PNG：

新型无专利权限的图像格式。

结合了GIF和JPEG的优点。

显示速度快，下载少量信息即可显示预览图像。

支持透明层，质量和体积方面具有优势。

适合网络传输。

使用网页图像的要点

图像大小：

高质量图像体积大，不适合网络传输。

网页设计中建议图像不超过8KB。

大图像可以分割成小图像，显示时再拼合。

2. 动画使用：

动画不宜过多，应合理使用。

过度炫酷的动画可能分散访客注意力。

3. 图像路径：

多次使用相同图像时，推荐使用相对路径。

相对路径是相对于当前文件的路径。

例如，如果文件X.Y与A文件夹在同一目录下，文件B.A在目录A下的B文件夹中，对于文件X.Y的相对路径为 A/B/B.A 。

图像标签

图像的替换文本说明

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图像的基本用法</title>

</head>

<body>

<h1 align="center">新年开运款时尚保暖羽绒服冬季新品短款茧型宽松羽绒服</h1>

<p align="center">< img src="images/waitao.jpg" alt="宽松羽绒服面包服" title="面包服"/></p >

<p align="center"> 材质:面料:100%锦纶里料:100%聚酯纤维纤维填充物:90%白鸭绒10%羽毛</p >

</body>

</html>

设置图像大小

在HTML中，可以通过 <img> 标签的 width 和 height 属性来调整图像的大小。

调整大小的目的是为了加快图像的下载速度，因为较小的图像会更快地加载。

默认情况下，页面中显示的是图像的原始大小。

width 和 height 的单位可以是像素，也可以是百分比。百分比表示相对于父元素的大小。

< img src="images/waitao.jpg" width="150" height="174">

图像的边框

网页中的图像如果没有边框，可能会显得单调。

可以通过 img 标签的 border 属性为图像添加边框，使图像更醒目、美观。

border 属性的值用数字表示，单位为像素。

默认情况下图像没有边框，即 border=0 。

图像边框的颜色默认为黑色，不可调整。

当图片作为超链接使用时，图像边框的颜色和链接的颜色一致，默认为深蓝色。

图像超链接

图像也可以作为超链接热点，点击图像可以跳转到被链接的文本或其他文件。

语法： <a href=" ">< img src="图像文件名"/></a >

例如，制作产品图像的超链接，代码如下：<a href="product-page.html">< img src="images/waitao.jpg" alt="产品图像" /></a >

设置网页背景图像

在网页中可以利用图像作为背景，但要注意背景图像不应影响网页内容的显示，因为背景图像主要是为了增强网页的视觉效果。

背景图像不应该设置边框，以便于创建无缝的背景效果。

格式：

<body background="背景图像路径">

设置网页背景图像应注意以下要点：

1. 背景图像是否增加了页面的加载时间：背景图像文件大小不应超过10KB，以减少页面加载时间。

2. 背景图像是否与页面中的其他图像搭配良好：确保背景图像与页面上其他元素的风格和颜色协调。

3. 背景图像是否与页面中的文字颜色搭配良好：背景图像的颜色和图案不应干扰文字的可读性。

图文混排

图文混排是将图像和文字结合在一起，以提升网页的视觉效果。以下是一些关键点：

1. 布局合理：合理安排图像和文字的位置，确保整体布局和谐。

2. 保证可读性：确保文字在图像背景前清晰可见，通过调整颜色和对比度来实现。

3. 优化加载速度：选择合适大小的图像，避免影响页面加载时间。

4. 响应式设计：确保在不同设备上图文都能良好展示。

简单HTML示例：

<div style="text-align:center;">

< img src="image.jpg" alt="描述" style="width:300px;">

<p style="color:#333;">这里是文字描述，与图像相得益彰。</p >

</div>

这段代码展示了一个图像和文字的简单混排，图像居中显示，文字紧随其后。

列表

无序列表

在<ul>后指定符号的样式

type="disc" ：设置列表项的符号为实心圆点。

type="circle" ：设置列表项的符号为空心圆点。

type="square" ：设置列表项的符号为方块。

img src="graph.gif" ：设置列表项的符号为指定的图片文件。

在 <li> 标签后指定符号样式

type="disc" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为实心圆点。

type="circle" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为空心圆点。

type="square" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为方块。

img src="graph.gif" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为指定的图片文件。

有序列表

HTML中的有序列表（ <ol> 标签）用于创建带有编号的列表。以下是一些基本的属性和用法：

1. 基本结构：

<ol>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ol>

2. 类型：

type="1" ：默认，数字编号。

type="A" ：大写字母编号。

type="a" ：小写字母编号。

type="I" ：大写罗马数字编号。

type="i" ：小写罗马数字编号。

3. 起始编号：

通过 start 属性设置列表的起始编号，例如：<ol start="5">

<li>列表项1</li>

</ol>这将从5开始编号。

这些是创建有序列表的基本要点，你可以根据需要调整类型和起始编号。

定义列表

定义列表（Definition List）是一种 HTML 标签，用于定义术语和解释。在 HTML 中，定义列表由 <dl> 标签包围，每个术语由 <dt> 标签定义，每个术语的解释由 <dd> 标签定义。

例如：

<dl>

<dt>HTML</dt>

<dd>超文本标记语言 (Hyper Text Markup Language) 是用于创建网页的标准标记语言。</dd>

<dt>CSS</dt>

<dd>层叠样式表 (Cascading Style Sheets) 是用于描述 HTML 或 XML 文档的显示样式。</dd>

</dl>

在这个例子中，"HTML" 和 "CSS" 是术语，它们的定义分别在 <dd> 标签中给出。定义列表通常用于术语和解释的列表。

嵌套列表

<ul>

<li>水果

<ul>

<li>苹果</li>

<li>香蕉

<ul>

<li>大香蕉</li>

<li>小香蕉</li>

</ul>

</li>

<li>橙子</li>

</ul>

</li>

<li>蔬菜

<ul>

<li>胡萝卜</li>

<li>菠菜</li>

</ul>

</li>

</ul>

.nested-list ul {

list-style-type: none; /* 移除默认的列表符号 */

padding-left: 20px; /* 为嵌套列表增加缩进 */

}

.nested-list li {

margin-bottom: 5px; /* 为列表项增加一些间距 */

}

.nested-list li::before {

content: "→"; /* 在每个列表项前添加一个箭头符号 */

padding-right: 5px; /* 为箭头符号增加一些间距 */

color: #666; /* 改变箭头符号的颜色 */

}

综合案例——无线吸尘器说明书

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>无线吸尘器说明书</title>

<style>

body { font-family: Arial, sans-serif; }

h1, h2 { color: #333; }

ul { list-style-type: none; padding: 0; }

li { margin-bottom: 10px; }

.param { font-weight: bold; }

img { max-width: 100%; height: auto; }

.clearfix::after {

content: "";

clear: both;

display: table;

}

</style>

</head>

<body>

<h1>无线吸尘器说明书</h1>

<hr>

<h2>产品介绍</h2>

<p>品牌：Dyson 戴森</p >

<p>型号：V8 Absolute</p >

<p>吸力：高达115空气瓦特</p >

<p>使用时间：普通模式约40分钟，MAX模式约7分钟</p >

<p>充电时间：约5小时</p >

<p>产品尺寸：长124.4厘米，宽18厘米，高22.4厘米</p >

<p>重量：2.61公斤</p >

<p>容量：0.54升</p >

<h2>附件清单</h2>

<ul>

<li>软绒滚筒吸头</li>

<li>升级版直驱吸头</li>

<li>缝隙吸头</li>

<li>电动床褥吸头</li>

<li>二合一吸头</li>

<li>软除尘毛吊</li>

</ul>

<h2>使用说明</h2>

<p>启动清扫：按下电源开关启动，松开关闭。</p >

<p>切换挡位：短按挡位切换按钮，循环切换标准挡和强力挡。</p >

<h2>维护与保养</h2>

<p>定期清理集尘桶，确保不超过最大标记线。</p >

<p>使用清水冲洗滤网，晾干后重新安装。</p >

<p>至少每3个月充电一次避免电池出现过放。</p >

<h2>故障排除</h2>

<ul>

<li>吸尘器不工作：检查电源是否接通，电池是否需要充电。</li>

<li>吸力减弱：清理或更换堵塞的滤网。</li>

<li>电池充电缓慢：确保使用原装充电器，并在适宜温度下充电。</li>

</ul>

<h2>保修信息</h2>

<p>本产品享有12个月的有限保修服务。</p >

<p>非保修范围：不当使用、改装或未经授权的维修。</p >

<div class="clearfix">

< img src="dyson_v8_absolute.jpg" alt="Dyson V8 Absolute 无线吸尘器" class="img">

</div>

<p>官网地址：<a href=" ">Dyson Official Website</a ></p >

</body>

</html>

第四章 CSS样式基础

CSS概述

CSS的基本概念

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页样式和布局的样式表语言。以下是CSS的一些基本概念：

样式表：样式表包含了一系列的规则，这些规则定义了HTML元素的显示方式。

规则集：规则集由一个或多个CSS声明组成，每个声明定义了元素的属性和值。

选择器：选择器用于选择页面上的HTML元素，以便应用样式。常见的选择器包括：

标签选择器：根据HTML标签选择元素。
类选择器：使用点号（.）后跟类名来选择具有特定类的元素。
ID选择器：使用井号（#）后跟ID名来选择具有特定ID的元素。
属性选择器：根据元素的属性及其值来选择元素。
伪类：使用冒号（:）后跟伪类名来选择元素的特殊状态，如:hover。
伪元素：使用双冒号（::）后跟伪元素名来选择元素的特殊部分，如::before。

传统HTML的缺点

样式和内容混杂：在早期的Web开发中，样式和内容经常混在一起，这使得维护和更新变得困难。

布局限制：HTML本身不提供复杂的布局机制，如网格布局或灵活的盒子模型，这限制了页面设计的灵活性。

表现力有限：HTML主要用于结构和内容的标记，对于视觉效果的表现力有限，需要依赖CSS来实现丰富的样式。

不支持动态交互：HTML是静态的，不支持动态内容的更新和交互，这需要JavaScript等脚本语言来实现。

表单处理能力有限：HTML表单功能有限，对于复杂的表单验证和处理，需要额外的JavaScript代码。

不支持高级数据结构：HTML不支持复杂的数据结构，如树状结构或图结构，它主要用于线性内容的展示。

可访问性问题：传统的HTML可能没有考虑到无障碍访问的需求，导致某些用户群体（如视障人士）难以使用。

维护困难：随着项目的增长，大量的HTML、CSS和JavaScript代码可能会变得难以维护和扩展。

浏览器兼容性问题：不同的浏览器对HTML和CSS的支持程度不同，这可能导致跨浏览器的兼容性问题。

SEO优化困难：如果HTML结构设计不当，可能会影响搜索引擎优化（SEO），从而影响网站的可见性。

CSS的特点和优势

内容与表现分离：CSS允许将文档的内容（HTML）与文档的表现（CSS）分离，提高了代码的可维护性和可读性。

样式复用：通过定义类选择器和ID选择器，可以轻松地在多个元素或页面之间复用样式。

响应式设计：CSS的媒体查询功能使得开发者能够为不同的设备和屏幕尺寸创建响应式设计。

动态样式应用：CSS可以与JavaScript结合使用，实现动态的样式变化和交互效果。

丰富的视觉格式化选项：CSS提供了丰富的属性来控制字体、颜色、间距、边框、背景和其他视觉效果。

盒模型：CSS的盒模型提供了灵活的布局方式，包括内边距、边框和外边距。

定位和布局：CSS提供了多种定位技术，包括相对定位、绝对定位、固定定位和静态定位，以及现代的Flexbox和Grid布局系统。

伪类和伪元素：CSS的伪类和伪元素允许开发者为页面元素的不同状态或部分定义特定的样式。

过渡和动画：CSS提供了过渡（transitions）和动画（animations）功能，使得创建平滑的视觉效果变得简单。

易于维护：CSS的层叠和继承特性使得样式表易于维护和更新。

CSS的编写规则

使用语义化的类名：避免使用如.red、.blue这样的描述性类名，而应该使用更具语义的类名，如.error、.success。

避免过度使用ID选择器：ID在页面中应该是唯一的，因此应该谨慎使用。通常，类选择器更适合样式定义。

使用有意义的选择器：选择器应该清晰地表达样式应用的上下文。

避免使用行内样式：行内样式会破坏内容与表现的分离，应该通过外部或内部样式表来定义样式。

使用CSS重置或归一化：为了减少浏览器默认样式的差异，可以使用如Eric Meyer的CSS重置或Normalize.css。

保持样式表的组织性：逻辑地组织CSS规则，例如，按模块或组件组织，或者按照在HTML文档中出现的顺序。

使用CSS预处理器：如Sass或Less，它们提供了变量、混合、函数等高级功能，有助于提高CSS的可维护性。

避免使用!important声明：过度使用!important会破坏CSS的自然层叠规则，应该寻找其他解决方案。

使用简写属性：当可能时，使用简写属性，如margin、padding、font等，以减少代码量。

使用相对单位：使用像em、rem、vw、vh这样的相对单位，而不是像px这样的绝对单位，以提高响应式设计。

CSS语法基础

CSS基本语法

选择器：用来指定要样式化的HTML元素。

p {
/* CSS规则 */
}

大括号：包含一组声明

p {
color: blue;
font-size: 16px;
}

声明：由属性和值组成

color: blue;
font-size: 16px;

属性：指定要应用的CSS属性。

color
font-size

属性的设置值

blue
16px

分号：每个声明的末尾都有一个分号

color: blue;

CSS规则：选择器和声明块的组合。

p {
color: blue;
font-size: 16px;
}

注释：以 /* 开始，以 */ 结束。

/* 这是一个注释 */

媒体查询：允许针对不同的屏幕尺寸和特性应用不同的样式。

@media (max-width: 600px) {
p {
font-size: 14px;
}
}

CSS单位：用于指定长度、颜色、时间等的单位

font-size: 16px; /* 像素 */
color: #333333; /* 十六进制颜色 */
transition: all 0.3s ease; /* 时间单位 */

CSS选择器类型

选择器：用来指定要样式化的HTML元素。

p {
/* CSS规则 */
}

CSS选择器声明

基本格式
选择器 {
属性1: 值1;
属性2: 值2;
/* 更多的属性和值 */
}
示例
/* 标签选择器 */
p {
color: blue;
font-size: 16px;
}

/* 类选择器 */
.className {
background-color: yellow;
font-weight: bold;
}

/* ID选择器 */
#idName {
border: 1px solid black;
padding: 10px;
}

/* 属性选择器 */
a[href="#"] {
color: red;
}

/* 伪类选择器 */
a:hover {
color: green;
}

/* 伪元素选择器 */
p::first-line {
font-weight: bold;
}

/* 组合选择器 */
h1, h2, h3 {
color: navy;
}

/* 子选择器 */
ul > li {
margin-left: 20px;
}

/* 相邻兄弟选择器 */
h1 + p {
font-size: 20px;
}

/* 通用兄弟选择器 */
h1 ~ p {
color: grey;
}

/* 否定伪类 */
:not(.error) {
color: black;
}

/* 结构伪类 */
article :nth-child(even) {
background-color: #f2f2f2;
}

组合选择器
选择器可以组合使用，以更精确地定位元素：

/* 类和伪类的组合 */
.className:hover {
color: purple;
}

/* 类和属性选择器的组合 */
.className[attribute="value"] {
border: 2px dashed green;
}

/* ID和伪类的组合 */
#idName:active {
background-color: silver;
}
继承
某些CSS属性（如color和font-family）可以从父元素继承到子元素：

/* 父元素 */
.parent {
color: green;
font-family: Arial, sans-serif;
}

/* 子元素将继承父元素的颜色和字体 */
.parent .child {
font-size: 14px;
}
重要性声明
在某些情况下，你可能需要覆盖其他CSS规则：

p {
color: blue !important;
}

CSS的引入方式

内部样式表：内部样式写在HTML文档的<style>标签中，通常放在<head>部分。

<head>
<style>
/* CSS规则 */
body {
font-family: Arial, sans-serif;
}
</style>
</head>
外部样式表：外部样式存储在单独的.css文件中，并通过HTML文档的<link>标签引入。

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
其中href属性指定了外部CSS文件的路径。

内联样式：内联样式直接在HTML元素的style属性中定义，只影响那个特定的元素。

<body>
<p style="color: red; font-size: 20px;">这是一个段落。</p>
</body>
优先级
这三种引入方式的优先级（也称为特异性）不同，当存在冲突的样式规则时，优先级高的规则会覆盖优先级低的规则：

内联样式：具有最高优先级，因为它们直接应用于HTML元素上。
ID选择器：优先级高于类选择器、伪类和属性选择器。
类选择器：优先级高于类型选择器和伪元素。
类型选择器：包括伪元素。
继承样式：从父元素继承的样式。
!important规则：如果CSS规则中包含!important声明，它将覆盖其他所有规则（除了其他包含!important的规则）。

内联样式表（行内样式表）

内联样式表（也称为行内样式表）并不是一个标准的术语。通常，我们所说的"内联样式"是指直接在HTML元素的style属性中定义的CSS样式，这种方式仅影响当前元素。

内联样式

内联样式通过在HTML元素的style属性中直接写入CSS规则来实现：

<p style="color: red; font-size: 20px;">这是一个段落。</p>
特点：
直接性：内联样式直接作用于特定的HTML元素，不需要通过选择器来指定。
优先级：内联样式的优先级高于外部和内部样式表，但低于!important规则。
局限性：内联样式只能应用于单个元素，不适合全局样式的设置。
使用场景：
当需要对单个元素进行特殊样式处理时。
在快速原型制作或临时样式调整中。
当样式需要根据特定条件动态应用时（例如，通过JavaScript动态设置样式）。
行内样式表
如果你指的是在HTML文档中直接写入的CSS规则，而不是针对单个元素的样式，那么通常是指内部样式表。内部样式表使用<style>标签定义在HTML文档的<head>部分：

内部样式表

内部样式表是定义在HTML文档内部的<style>标签中的CSS代码。通常，这些样式被放在文档的<head>部分，这样在页面加载时，样式就已经被定义好了。

语法
<head>
<style type="text/css">
/* CSS规则 */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
}
p {
font-size: 16px;
}
</style>
</head>
<body>

</body>

特点
封装性：内部样式表只影响当前HTML文档，不会影响到其他页面。
维护性：对于小型网站或单个页面，将CSS放在<style>标签中可以简化维护工作。
优先级：内部样式表的优先级高于外部样式表，但低于内联样式和!important声明。
易用性：不需要额外的CSS文件，可以直接在HTML文档中编写和修改。

外部样式表

外部样式表是将CSS代码保存在一个或多个外部文件中，并通过HTML文档的<link>标签引入这些文件来应用样式。这种方法有助于样式的复用和维护，尤其适用于大型网站或需要统一风格多个页面的情况。

语法
首先，你需要创建一个CSS文件。通常，这个文件以.css为扩展名。例如，创建一个名为styles.css的文件，并在其中添加CSS规则：

/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

h1 {
color: navy;
}

p {
font-size: 16px;
}
然后，在HTML文档的<head>部分使用<link>标签引入这个CSS文件：

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>

CSS的属性单位

长度、百分比单位

CSS中，长度和百分比单位是用来定义尺寸、间距、位置等属性的值。以下是一些常用的长度单位和百分比单位：

长度单位
像素 (px)：

最常用的长度单位。
相对于显示器的分辨率，1px通常等同于一个物理像素点。
优点是精确，缺点是不易于响应式设计。
相对视窗长度 (vw/vh)：

vw代表视口宽度的百分比，1vw等于视口宽度的1%。
vh代表视口高度的百分比，1vh等于视口高度的1%。
适合于制作响应式设计。
毫米 (mm)：

1mm等于1毫米。
很少使用。
厘米 (cm)：

1cm等于10毫米。
很少使用。
英寸 (in)：

1in等于2.54厘米，等于96像素（取决于屏幕分辨率）。
很少使用。
点 (pt)：

1pt等于1/72英寸。
常用于打印文档。

色彩单位

颜色名

CSS 提供了一套预定义的颜色名，如 red、blue、green 等。

body {
color: red;
background-color: lightblue;
}

十六进制颜色码（Hex Color）

十六进制颜色码是一种常用的颜色表示方法，以 # 开头，后跟六个十六进制数字，表示红、绿、蓝各颜色通道的值。

body {
color: #000000; /* 黑色 */
background-color: #FFFFFF; /* 白色 */
}
也可以简写为三个十六进制数字，如果每个通道的两位数字相同的话：

body {
color: #000; /* 黑色 */
background-color: #FFF; /* 白色 */ }

RGB 颜色

RGB 表示红绿蓝三种颜色的组合，通过 rgb() 函数指定每种颜色的强度，范围从 0 到 255。

RGBA 颜色

RGBA 是 RGB 的扩展，增加了 alpha 通道来定义颜色的透明度。

body {
background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

HSL 颜色

HSL 颜色模型表示色调（Hue）、饱和度（Saturation）、亮度（Lightness）。

body {
background-color: hsl(240, 100%, 50%); /* 蓝色 */
}

HSLA 颜色

HSLA 是 HSL 的扩展，同样增加了 alpha 通道定义透明度。

body {
background-color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
}

透明度

HSLA 是 HSL 的扩展，同样增加了 alpha 通道定义透明度。

body {
background-color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
}

transparent 关键字

表示完全透明。

body {
background-color: transparent;
}

CSS继承与层叠

继承（Inheritance）
继承是指CSS属性值从父元素传递到子元素的过程。某些CSS属性是可继承的，这意味着这些属性的值可以从一个元素传递给其所有子元素。继承主要适用于文本相关的属性。

可继承的CSS属性包括但不限于：

color
font-family
font-size
font-weight
line-height
letter-spacing
text-align
visibility
white-space

元素类型

1. 标签选择器（Type Selector）

p {
color: blue;
}

类选择器（Class Selector）

.button {
background-color: gray;
padding: 10px;
border: none;
}
/* HTML中使用 */
<button class="button">Click me</button>

ID选择器（ID Selector

#header {
font-size: 24px;
}
/* HTML中使用 */
<div id="header">Welcome to my site</div>

伪类选择器（Pseudo-class Selector）

a:hover {
color: red;
}

伪元素选择器（Pseudo-element Selector）

.element::before {
content: "Before";
color: red;
}

属性选择器（Attribute Selector）

input[type="text"] {
border: 1px solid gray;
}

关系选择器

ul > li {
color: green;
}

第五章 CSS盒模型

盒模型的定义

内容区域（Content Area）：这是盒子的主要内容区域，包括文本、图片或其他媒体内容。

内边距（Padding）：内容区域周围的空间，可以是透明的或有颜色的。内边距是可选的，并且不会影响盒子的最终尺寸。

边框（Border）：围绕内边距和内容区域的边缘。边框可以有不同的样式（实线、虚线、点线等），宽度和颜色。

外边距（Margin）：边框外的空间，用于在盒子之间创建距离。外边距总是透明的，并且垂直外边距可以发生折叠。

盒阴影（Box Shadow）：可选的阴影效果，可以为盒子添加视觉效果。

轮廓（Outline）：围绕盒子的边框，但不会影响盒子的布局。轮廓通常用于高亮显示或聚焦。

CSS元素的高度和宽度

1. 基本属性
width: 设置元素的宽度。
height: 设置元素的高度。
2. 单位
像素（px）：固定大小，无论屏幕分辨率如何，像素值总是相同的。
百分比（%）：相对于父元素的宽度或高度。
em：相对于元素的字体大小。
rem：相对于根元素的字体大小。
vw/vh：视口宽度和高度的百分比（1vw = 1%的视口宽度，1vh = 1%的视口高度）。
fr：用于CSS网格布局，表示可用空间的一个分数。
3. 盒模型类型
content-box（默认）：宽度和高度只包括内容区域。
border-box：宽度和高度包括内容区域、内边距和边框。

边距和边框设置

边框和样式的属性值

外边距设置

外边距（Margin）在CSS中用于控制元素之间的空间。它是一个透明的区域，位于元素的边框之外。外边距可以是正数，也可以是负数，这使得元素可以重叠或者有更多的空间。

外边距的基本语法：
/* 单独设置每个边的外边距 */
.element {
margin-top: 10px; /* 顶部外边距 */
margin-right: 20px; /* 右侧外边距 */
margin-bottom: 10px; /* 底部外边距 */
margin-left: 20px; /* 左侧外边距 */
}

/* 简写形式，按顺时针方向设置外边距 */
.element {
margin: 10px 20px 10px 20px; /* 上右下左 */
}

/* 简写形式，两值 */
.element {
margin: 10px 20px; /* 上下10px，左右20px */
}

/* 简写形式，一值 */
.element {
margin: 10px; /* 上右下左都是10px */
}

外边距的属性：
margin-top: 设置元素的上边距。
margin-right: 设置元素的右边距。
margin-bottom: 设置元素的下边距。
margin-left: 设置元素的左边距。
margin: 简写属性，可以同时设置所有外边距。
外边距折叠：
当两个或多个垂直外边距相遇时，它们将合并为一个外边距。合并后的外边距值等于这些外边距值中的最大值。

外边距的合并

外边距合并的规则：
相邻兄弟元素：当两个兄弟元素的外边距相遇时，会发生外边距合并。

父子元素：如果一个元素是另一个元素的子元素，并且子元素的底部外边距与父元素的底部外边距相遇，也会发生外边距合并。

空的块级元素：如果一个块级元素没有内容（或内容都是内联元素），它的外边距可能会与相邻元素的外边距合并。

避免外边距合并：
添加内边距：给子元素添加内边距可以阻止外边距合并。
边框：给元素添加边框可以阻止外边距合并。
行内块元素：将子元素设置为display: inline-block;可以阻止外边距合并。
空内容：确保元素内有内容，即使是一个空的<div>也可以阻止外边距合并。

内边距设置

内边距（Padding）在CSS中用于在元素的内容与其边框之间创建空间。内边距是元素盒模型的一部分，它向内推内容，向外推边框。
内边距的属性：
padding-top: 设置元素的顶部内边距。
padding-right: 设置元素的右侧内边距。
padding-bottom: 设置元素的底部内边距。
padding-left: 设置元素的左侧内边距。
padding: 简写属性，可以同时设置所有内边距。

边框设置

边框的属性：
border-width: 设置边框的宽度。
border-style: 设置边框的样式（如实线solid、虚线dashed、点线dotted等）。
border-color: 设置边框的颜色。
border: 简写属性，可以同时设置边框的宽度、样式和颜色。
边框的样式：
none: 没有边框。
hidden: 与none相同，但用于表格时会隐藏边框。
dotted: 点状边框。
dashed: 虚线边框。
solid: 实线边框。
double: 双线边框。
groove: 3D凹槽边框。
ridge: 3D凸起边框。
inset: 3D凹入边框。
outset: 3D凸出边框。

新增边框属性

border-width: 设置边框的厚度。可以接受具体数值（如2px）、相对单位（如thin、medium、thick）。

border-style: 设置边框的样式。常见的有none、solid、dashed、dotted、double、groove、ridge、inset、outset。

border-color: 设置边框的颜色。可以使用颜色名（如red）、十六进制值（如#ff0000）、RGB值（如rgb(255, 0, 0)）等。

border: 简写属性，可以同时设置宽度、样式和颜色，如border: 2px solid black;。

CSS元素的定位

静态定位（Static Positioning）
静态定位是所有元素的默认定位方式。元素的位置由其在HTML文档流中的位置决定。

2. 相对定位（Relative Positioning）
相对定位将元素相对于其正常位置进行定位。可以使用top、right、bottom和left属性来调整位置

3. 绝对定位（Absolute Positioning）
绝对定位将元素相对于其最近的已定位（非静态定位）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的<html>元素。

4. 固定定位（Fixed Positioning）
固定定位将元素相对于浏览器窗口进行定位，即使页面滚动，元素也会停留在相同的屏幕位置。

5. 粘性定位（Sticky Positioning）
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

CSS元素的浮动

SS中的浮动（Float）属性是一种布局手段，允许元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素会脱离常规文档流，但它还是会占据空间，影响其他元素的布局。

第六章元素应用CSS

使用CSS设置字体样式

在CSS中设置字体样式是网页设计中非常基础且重要的部分，它可以帮助设计师控制网页上文本的外观。以下是一些常用的CSS属性，用于设置字体样式：

font-family：定义字体族，指定文本的字体。可以设置一个或多个字体，浏览器会使用列表中第一个可用的字体。

使用CSS设置文本样式

在CSS中设置文本样式涉及到一系列的属性，这些属性可以帮助你控制文本的外观和排版。以下是一些常用的CSS属性，用于设置文本样式：

color：设置文本颜色。

使用CSS设置图像格式

在CSS中设置图像格式主要涉及到图像的大小、位置、边框、阴影等样式。以下是一些常用的CSS属性，用于设置图像格式：

width 和 height：设置图像的宽度和高度。

使用CSS设置表单样式

在网页设计中，使用CSS（层叠样式表）来设置表单样式是一种常见的做法。CSS可以让你控制表单元素的外观，比如输入框、按钮、下拉菜单等。以下是一些基本的CSS样式，你可以用来美化HTML表单：

表单容器：添加了最大宽度、自动居中、内边距、圆角、阴影和背景色。
标题：为标题添加了外边距和颜色。
表单组：为每个表单组添加了外边距。
标签和输入框：为标签和输入框添加了样式，包括字体、颜色、边框、圆角和过渡效果。
焦点样式：为输入框和下拉菜单的焦点状态添加了边框颜色变化。
按钮：为按钮添加了宽度、内边距、边框、圆角、背景色、字体大小、鼠标悬停效果等。

第七章利用CSS和多媒体美化页面

CSS链接的美化

文字链接的美化

颜色和样式：可以通过CSS改变链接的颜色，增加悬停、活动和已访问状态的效果。

字体图标：使用字体图标库（如Font Awesome）来添加图标到链接中，增加视觉效果。

背景效果：为链接添加背景色或渐变色，增强立体感

动画效果：使用CSS动画为链接添加动态效果，如旋转、缩放等。

光标样式：更改鼠标悬停在链接上的光标样式，提供更直观的交互反馈。

边框样式：为链接添加边框，使其更加醒目。

钮式超链接：将链接设计成按钮样式，提供更好的点击体验。

响应式设计：确保链接在不同设备上都能正常显示，使用媒体查询来调整链接样式。

按钮链接的美化

基本样式：设置背景颜色、边框、圆角和字体样式。
悬停效果：当鼠标悬停在按钮上时，改变背景颜色或添加其他视觉效果。
点击效果：当按钮被按下时，改变颜色或其他样式以提供反馈。
焦点状态：当按钮获得焦点时，添加轮廓或其他视觉效果。
禁用状态：为禁用的按钮链接添加样式。

背景链接的美化

背景链接的美化通常指的是为那些本身不是<a>标签，但是需要像链接一样行为的元素添加样式。这可以通过使用display: block或display: inline-block属性，以及设置合适的text-decoration和其他背景相关的样式来实现。

CSS列表的美化

移除默认的列表样式：使用list-style-type属性来移除列表项前的默认标记。

添加自定义标记：使用list-style-image属性来为列表项添加图片作为标记。

调整列表项的内边距：使用padding属性来调整列表项内部的空间。

添加背景颜色和边框：为列表项添加背景颜色和边框。

设置鼠标悬停效果：为列表项添加悬停效果，改变背景颜色或添加其他视觉效果。

使用CSS选择器为特定列表项添加样式：使用:nth-child选择器来为特定的列表项添加样式。

CSS表格的美化

边框：使用border属性为表格添加边框。

单元格边框：使用border属性为表格的单元格（td和th）添加边框。

背景颜色：为表格的行或单元格设置背景颜色。

文本对齐：使用text-align属性为表格文本设置水平对齐。

单元格内边距：使用padding属性为单元格添加内边距。

着色表头和表尾：为表头（thead）和表尾（tfoot）设置不同的背景颜色

多媒体的添加与美化

设置图片尺寸

图片边框和圆角：

图片阴影

响应式图片：

视频
设置视频尺寸：

控制视频播放：

视频背景

第八章利用CSS制作导航栏

水平顶部导航栏

简单水平导航栏的设计与实现

响应式设计

汉堡菜单功能

悬停效果

活动链接高亮

品牌Logo

搜索框

简单水平导航栏的设计与实现

鼠标悬停显示下拉菜单

功能：当用户将鼠标悬停在导航项上时，显示下拉子菜单。
事件：使用mouseover事件来触发下拉菜单的显示。

鼠标移出隐藏下拉菜单

功能：当用户将鼠标从导航项移开时，隐藏下拉子菜单。
事件：使用mouseout事件来触发下拉菜单的隐藏。

点击导航链接页面跳转

功能：点击导航链接时，页面跳转到相应的部分。
事件：使用click事件来处理链接的点击行为。

焦点事件管理

功能：当用户使用键盘导航时，高亮显示当前焦点的导航项。
事件：使用focus和blur事件来处理焦点的变化。

移动设备上的点击展开下拉菜单

功能：在移动设备上，点击导航项展开或收起下拉子菜单。
事件：使用click事件来控制下拉菜单的显示和隐藏。

键盘可访问性

功能：确保导航栏可以通过键盘进行导航，特别是对于使用屏幕阅读器的用户。
事件：使用keydown事件来处理键盘输入。

响应式导航切换

功能：在移动设备上，通常使用汉堡菜单来控制导航栏的显示和隐藏。
事件：使用click事件来切换导航栏的显示状态。

多级下拉菜单

功能：实现多级下拉菜单，允许用户进一步导航到更深层次的页面。
事件：使用mouseover和mouseout事件来控制各级下拉菜单的显示和隐藏。

动态加载内容

功能：实现多级下拉菜单，允许用户进一步导航到更深层次的页面。
事件：使用mouseover和mouseout事件来控制各级下拉菜单的显示和隐藏。

纵向侧边导航栏

简单纵向导航栏的设计与实现

HTML结构搭建

CSS样式设置

.sidebar {
width: 200px;
height: 100vh;
background-color: #333;
color: #fff;
padding: 20px;
position: fixed;
left: 0;
top: 0;
}

.sidebar-menu {
list-style-type: none;
}

.sidebar-link {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}

.sidebar-link:hover {
background-color: #555;
}

响应式设计

@media (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}

.main-content {
margin-left: 0;
}
}

悬停和点击效果

这部分已经在CSS中通过:hover伪类实现。

无障碍支持

.sidebar-link:focus {
outline: 2px solid #fff;
}

底部固定导航栏

HTML结构搭建

CSS样式设置

.bottom-navbar {
width: 100%;
background-color: #333;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

.nav-link {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}

响应式设计

@media (max-width: 768px) {
.bottom-navbar {
flex-direction: column;
align-items: flex-start;
padding: 10px;
}

.nav-link {
padding: 10px;
border-top: 1px solid #555; /* 分隔链接 */
}

.nav-link:first-child {
border-top: none; /* 第一个链接不需要上边框 */
}
}

悬停和点击效果

.nav-link:hover {
background-color: #555;
}

.nav-link:active {
background-color: #777;
}

无障碍支持

.nav-link:focus {
outline: 2px solid #fff;
}

第九章 DIV+CSS布局

DIV+CSS概述

认识DIV

基本语法：

块级元素

<div>是一个块级元素，这意味着它会自动开始于新的一行，并且其后的内容也会在新的一行显示，除非使用CSS来改变其行为。

无默认样式：

<div>元素本身没有默认的样式，如边框、边距等，它仅作为一个容器存在。

分组内容

<div>可以用来将页面上的不同部分进行逻辑分组，如头部、导航栏、内容区域、侧边栏和底部

应用样式：

通过CSS，你可以为<div>元素添加样式，如背景颜色、宽度、高度、边距、对齐等。

CSS类或ID

<div>元素可以通过class或id属性来应用特定的样式或进行JavaScript操作。

嵌套使用

<div>元素可以嵌套使用，即一个<div>内部可以包含另一个或多个<div>，这有助于创建复杂的布局结构。
语义化：

DIV的宽高设置

固定宽度：使用像素（px）设置固定宽度。

div {
width: 300px;
}

百分比宽度：使用百分比（%）设置相对于其父容器的宽度。

div {
width: 50%;
}

最大宽度：使用max-width属性设置最大宽度，这样当容器尺寸超过这个值时，<div>的宽度不会增加。

div {
max-width: 600px;
}

固定高度：使用像素（px）设置固定高度

div {
height: 200px;
}

百分比高度：使用百分比（%）设置相对于其父容器的高度。但请注意，百分比高度的有效性取决于父容器的高度是否被明确设置。

div {
height: 50%;
}

最小高度：使用min-height属性设置最小高度，确保<div>的高度至少是这个值，即使内容不足以填满它。

div {
min-height: 100px;
}

DIV+CSS的应用

DIV元素的布局技巧

浮动布局（Floats）

使用float属性可以让<div>元素向左或向右浮动，通常用于创建多栏布局。

.left-sidebar {
float: left;
width: 25%; /* 或者其他宽度值 */
}

.right-content {
float: right;
width: 75%; /* 或者其他宽度值 */
}

清除浮动（Clearing Floats）

浮动元素可能会导致父容器高度塌陷，使用clear属性可以清除浮动，恢复正常的文档流。

.clearfix::after {
content: "";
display: table;
clear: both;
}

定位布局（Positioning）

使用position属性可以精确控制<div>元素的位置。

static：默认定位，元素按照正常文档流排列。
relative：相对定位，元素相对于其正常位置进行偏移。
absolute：绝对定位，元素相对于其最近的已定位祖先元素进行偏移。
fixed：固定定位，元素相对于浏览器窗口进行偏移，即使滚动页面，元素位置也保持不变。

弹性盒子布局（Flexbox）

Flexbox提供了一种更加高效的方式来布局、对齐和分配<div>元素之间的空间，即使它们的大小是动态的或者未知。

.flex-container {
display: flex;
justify-content: space-between; /* 水平分布 */
align-items: center; /* 垂直居中对齐 */
}

网格布局（Grid）

CSS Grid布局是一个二维布局系统，它允许你创建复杂的网格布局。

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建三列，每列等宽 */
grid-gap: 10px; /* 设置网格间隙 */
}

边距重叠（Margin Collapsing

当两个垂直边距相遇时，它们会合并为一个边距，这就是边距重叠。这可以用来创建紧凑的布局。

盒模型（Box Model）

理解盒模型对于布局至关重要。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。

响应式设计

使用媒体查询（Media Queries）和灵活的布局技术来创建适应不同屏幕尺寸的响应式布局。

DIV元素的宽度自适应

百分比宽度
使用百分比（%）设置宽度，<div>元素的宽度将根据其父容器的宽度自动调整。

.div-width-adaptive {
width: 50%; /* 宽度为父容器宽度的50% */
}

最大宽度
使用max-width属性设置最大宽度，这样当容器尺寸超过这个值时，<div>的宽度不会增加。

.div-width-adaptive {
max-width: 1200px; /* 最大宽度为1200px */
}

最小宽度
使用min-width属性设置最小宽度，确保<div>的宽度不会小于这个值。

.div-width-adaptive {
min-width: 300px; /* 最小宽度为300px */
}

视口宽度单位
使用视口宽度单位（vw）设置宽度，<div>元素的宽度将根据视口宽度自动调整。

.div-width-adaptive {
width: 50vw; /* 宽度为视口宽度的50% */
}

媒体查询
使用媒体查询（Media Queries）根据不同的屏幕尺寸应用不同的宽度设置，实现响应式设计。

/* 默认样式 */
.div-width-adaptive {
width: 100%; /* 默认宽度为100% */
}

/* 屏幕宽度小于768px时 */
@media (max-width: 768px) {
.div-width-adaptive {
width: 100%; /* 宽度调整为100% */
}
}

/* 屏幕宽度小于480px时 */
@media (max-width: 480px) {
.div-width-adaptive {
width: 100%; /* 宽度调整为100% */
}
}

DIV的内容的居中

水平居中
使用margin: auto
对于块级元素（如<div>），可以通过设置左右margin为auto来实现水平居中。

.center-div {
width: 50%; /* 或其他宽度 */
margin-left: auto;
margin-right: auto;
}

垂直居中
使用position和transform
可以使用绝对定位配合transform属性来实现垂直居中。

.center-div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

水平和垂直居中
使用Flexbox
Flexbox可以同时实现水平和垂直居中。

.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

DIV元素的嵌套

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套DIV元素示例</title>
<style>
/* 清除默认边距 */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

/* 容器样式 */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}

/* 头部样式 */
header {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
font-size: 24px;
}

/* 内容区域样式 */
.content {
background-color: #fff;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 底部样式 */
footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<div class="container">
<header>网站头部</header>
<div class="content">
<p>这里是主要内容区域。您可以在这里放置文章、图片或其他内容。</p>
</div>
<footer>页脚内容 © 2024 公司名</footer>
</div>

</body>
</html>

container是一个容器<div>，它包含了页面的所有部分。
header是一个头部<div>，包含网站的标题或导航链接。
.content是一个内容<div>，包含页面的主要内容。
footer是一个底部<div>，包含版权信息或其他页脚内容。
高级示例：创建一个具有侧边栏的三栏布局
让我们来看一个使用DIV元素嵌套来创建具有头部、侧边栏、内容区和底部的高级布局示例。这个示例将展示一个响应式设计的布局，它会在较小的屏幕上自动调整布局。

DIV+CSS的典型布局

上中下布局示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上中下布局示例</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.content {
flex: 1;
background-color: #f4f4f4;
padding: 20px;
}
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<div class="container">
<header>头部区域</header>
<div class="content">
<p>内容区域，您可以在这里放置文章、图片或其他内容。</p>
</div>
<footer>页脚内容 © 2024 公司名</footer>
</div>

</body>
</html>

左中右布局示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左中右布局示例</title>
<style>
.container {
display: flex;
}
.sidebar-left {
background-color: #333;
color: white;
padding: 20px;
width: 200px; /* 固定宽度 */
}
.main-content {
flex: 1;
background-color: #f4f4f4;
padding: 20px;
}
.sidebar-right {
background-color: #333;
color: white;
padding: 20px;
width: 200px; /* 固定宽度 */
}
</style>
</head>
<body>

<div class="container">
<div class="sidebar-left">左侧边栏</div>
<div class="main-content">
<p>主要内容区域，您可以在这里放置文章、图片或其他内容。</p>
</div>
<div class="sidebar-right">右侧边栏</div>
</div>

</body>
</html>

混合布局示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混合布局示例</title>
<style>
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #35424a;
color: white;
text-align: center;
padding: 20px;
font-size: 24px;
}
.sidebar-left {
background-color: #333;
color: white;
padding: 20px;
width: 200px; /* 固定宽度 */
order: -1; /* 左侧边栏浮动到顶部 */
}
.main-content {
flex: 1;
background-color: #fff;
padding: 20px;
display: flex;
flex-direction: column;
}
.sidebar-right {
background-color: #333;
color: white;
padding: 20px;
width: 200px; /* 固定宽度 */
}
footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px 0;
font-size: 18px;
position: relative;
bottom: 0;
width: 100%;
}
@media (max-width: 768px) {
.sidebar-left, .sidebar-right {
width: 100%; /* 在较小屏幕上，侧边栏变为全宽 */
order: 0;
}
.main-content {
flex-direction: column-reverse; /* 在较小屏幕上，内容区垂直堆叠 */
}
}
</style>
</head>
<body>

<div class="container">
<header>网站头部</header>
<div class="sidebar-left">左侧边栏 - 功能列表</div>
<div class="main-content">
<div>主要内容区域 - 在这里放置文章、图片或其他内容。</div>
</div>
<div class="sidebar-right">右侧边栏 - 最新文章</div>
<footer>页脚内容 © 2024 公司名</footer>
</div>

</body>
</html>

第十章 JavaScript的应用

JavaScript的概述

主要特点

解释型：JavaScript 代码通常不需要编译，可以直接由浏览器或其他环境中的解释器执行。
基于原型：JavaScript 使用基于原型的对象模型，与传统的类继承不同。
弱类型：变量的数据类型是在运行时确定的，开发者不需要提前声明变量的类型。
动态：可以在运行时修改对象和函数。
事件驱动：非常适合处理用户交互和异步操作。
跨平台：几乎所有的现代 Web 浏览器都支持 JavaScript，且有多种运行环境（如 Node.js）可以运行 JavaScript。

应用场景

Web 开发：最普遍的应用是前端开发，用来增加网页的交互性，比如表单验证、动态内容加载等。
后端开发：通过 Node.js，JavaScript 可以用于构建服务器端应用。
移动应用开发：使用框架如 React Native 或 Ionic 可以用 JavaScript 开发跨平台的移动应用。
游戏开发：结合 HTML5 和 Canvas，可以开发简单的网页游戏。
桌面应用开发：使用 Electron 等框架，可以用 JavaScript 构建跨平台的桌面应用程序。
物联网 (IoT)：JavaScript 也可以用于开发 IoT 设备上的应用。

JavaScript语法

注释

// 这是一个单行注释
/* 这是一个
多行注释 */

标识符

let _name = "Kimi"; // 有效的标识符
let $age = 30; // 有效的标识符
let name = "Kimi"; // 有效的标识符

数据类型

let number = 10; // Number
let text = "Hello"; // String
let isTrue = true; // Boolean
let undefinedVar; // Undefined
let nullVar = null; // Null
let symbol = Symbol("mySymbol"); // Symbol
let bigNumber = 1234567890123456789012345678901234567890n; // BigInt

变量声明

let newVariable = "This is a new variable"; // 使用 let 声明变量
const constantVariable = "This is a constant variable"; // 使用 const 声明常量
var oldStyleVariable = "This is an old-style variable"; // 使用 var 声明变量

操作符

let a = 5;
let b = 3;

console.log(a + b); // 算术操作符
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

a++; // 递增操作符
console.log(a);

控制流

函数

function sayHello() {
console.log("Hello");
}

sayHello();

const sayHelloArrow = () => {
console.log("Hello with arrow function");
};

sayHelloArrow();

数组和对象

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // "Banana"

let person = {
name: "Kimi",
age: 30,
greet: function() {
console.log("Hello, " + this.name);
}
};

person.greet(); // "Hello, Kimi"

解构赋值

let [first, second] = [1, 2];
console.log(first); // 1
console.log(second); // 2

let { name, age } = { name: "Kimi", age: 30 };
console.log(name); // "Kimi"
console.log(age); // 30

模板字符串

let name = "Kimi";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Kimi!"

函数定义：定义了 initPage 和 greetUser 两个函数。
事件处理：使用 onload 事件在页面加载时执行 initPage 函数，使用 onclick 事件在按钮点击时执行 greetUser 函数。
DOM 操作：通过 document.getElementById 获取页面元素，并修改它们的 textContent。
用户输入：通过 document.getElementById("userName").value 获取用户在文本框中的输入。
字符串操作：使用字符串拼接来构造欢迎信息，并使用 trim 方法来去除用户输入的前后空格。

JavaScript对象

对象字面量：这是创建对象最常用的方法。

javascript

const person = {
firstName: "Kimi",
lastName: "Chat",
age: 30,
greet: function() {
console.log("Hello, " + this.firstName + " " + this.lastName);
}
};

构造函数：使用构造函数创建对象，可以创建具有相同属性和方法的对象。

javascript

function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.greet = function() {
console.log("Hello, " + this.firstName + " " + this.lastName);
};
}

const person1 = new Person("Kimi", "Chat", 30);

Object.create()：使用 Object.create() 方法基于一个现有对象创建一个新对象。

javascript

const personProto = {
greet: function() {
console.log("Hello, " + this.firstName + " " + this.lastName);
}
};

const person = Object.create(personProto);
person.firstName = "Kimi";
person.lastName = "Chat";
person.age = 30;

类（ES6）：使用 class 关键字定义类，它提供了一种新的语法，使得创建对象和实现继承更加清晰。

javascript

class Person {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}

greet() {
console.log("Hello, " + this.firstName + " " + this.lastName);
}
}

const person = new Person("Kimi", "Chat", 30);

ocation对象：这个对象提供了当前文档的URL信息，并允许我们修改它。常用的属性和方法包括location.href（获取当前URL），location.assign()（加载新的文档）等。
location.href：获取或设置完整的 URL。
location.protocol：获取 URL 的协议部分。
location.host：获取主机名和端口号。
location.pathname：获取路径部分。
location.search：获取查询字符串部分。
location.hash：获取锚点部分。
location.assign(url)：加载新的文档。
location.reload()：重新加载当前文档

JavaScript事件

事件及事件处理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>confirm()的使用</title>

</head>
<body>
<script>
var userChoice = window.confirm("请选择“确定”或“取消”");
if(userChoice==true){
document.write("ok!");
}
if(userChoice==false){
document.write("Cancel");
}
</script>
</body>
</html>

常用事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onchange事件</title>
<script type="text/javascript">
function myFunction(){
var x = document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()"/>
<p>当你离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
</html>

事件应用举例

提供实际的例子，展示如何使用事件处理来增强网页的交互性。

第三章表格布局与表单交互

表格概述

表格的结构

<table>

<thead>

<tr>

<th>标题1</th>

<th>标题2</th>

</tr>

</thead>

<tbody>

<tr>

<td>数据1</td>

<td>数据2</td>

</tr>

<tr>

<td>数据3</td>

<td>数据4</td>

</tr>

</tbody>

</table>

在网页设计中，表格通常使用 HTML 的 <table> 标签来创建。一个基本的表格结构包括：

1. <table> ：定义整个表格。

2. <thead> ：包含表头（标题行）。

3. <tbody> ：包含表格的主体部分。

4. <tr> ：定义表格中的行。

5. <th> ：定义表头单元格。

6. <td> ：定义标准单元格。

这个结构创建了一个有两列的表格，第一行是标题行，下面两行是数据。

表格的基本语法

<table border="1"> 

<tr> 

<th>标题1</th> 

<th>标题2</th>

<th>标题3</th>

</tr>

<tr>

<td>数据1</td> 

<td>数据2</td>

<td>数据3</td>

</tr>

<tr>

<td>数据4</td>

<td>数据5</td>

<td>数据6</td>

</tr>

</table>

在网页制作中，表格的基本语法使用 HTML 来实现。下面是一个简单的示例这段代码会创建一个带有边框的表格，包含三行三列。其中 <table> 标签定义了表格， <tr> 标签定义了表格的行， <th> 标签定义了表头单元格，而 <td> 标签定义了表格中的数据单元格。

表格属性的设置

表格边框属性

HTML表格边框属性用 border 来设置。例如：

<table border="1">



</table>

这里的 "1" 表示边框的粗细，可以是任何正整数。

表格的宽度和高度属性

表格的宽度属性是 width ，高度属性是 height 。例如：

<table width="500" height="300">



</table>

这里的 "500" 和 "300" 分别表示宽度和高度的像素值。

表格背景颜色与表格图像属性

表格的背景颜色属性是 bgcolor ，背景图像属性是 background 。例如：

<table bgcolor="#FFFFFF" background="image.jpg">



</table>

这里的 #FFFFFF 是白色背景色， image.jpg 是背景图像的文件名。

表格边框样式属性

表格边框样式属性是 border 。例如：

<table border="1">



</table>

这里的 "1" 表示边框的粗细。

表格单元格间距、单元格边距属性

表格单元格间的间距属性是 cellspacing ，单元格边距属性是 cellpadding 。例如：

<table cellspacing="10" cellpadding="5">



</table>

这里的 "10" 表示单元格之间的间距， "5" 表示单元格内容与边框之间的距离。

载请附上原文出处链接和本声明。

表格水平对齐属性

表格水平对齐属性是 align ，用于整个表格。例如：

<table align="center">



</table>

这里的 "center" 表示表格在页面中居中对齐。

设置表格的（tr）标记行的属性

<tr style="background-color:yellow; color:red;">

<td>行1，列1</td>

<td>行1，列2</td>

</tr>

使用 class 或 id 属性：

<style>

.highlight {

background-color: yellow;

color: red;

}

</style>

<tr class="highlight">

<td>行1，列1</td>

<td>行1，列2</td>

</tr>

或者

<tr id="specialRow">

<td>行1，列1</td>

<td>行1，列2</td>

</tr>

<style>

#specialRow {

background-color: yellow;

color: red;

}

</style>

这样，你就可以控制表格行的外观了。

设置单元格的属性

1. 使用 style 属性直接添加CSS样式：

<td style="background-color:yellow; color:red;">内容</td>

2. 使用 class 或 id 属性引用外部CSS样式：

<style>

.cell-style {

background-color: yellow;

color: red;

}

</style>

<td class="cell-style">内容</td>

或者

<td id="specialCell">内容</td>

<style>

#specialCell {

background-color: yellow;

color: red;

}

</style>

这样，你就可以控制表格单元格的外观了。

表格单元格跨行、跨列属性

单元格跨行

<table border="1">

<tr>

<td>常规单元格</td>

<td rowspan="2">跨两行的单元格</td>

</tr>

<tr>

<td>常规单元格</td>



</tr>

</table>

在这个例子中，第二个单元格使用了 rowspan="2" 属性，表示它将占据两行的空间。

单元格跨列

<!DOCTYPE html>

<html>

<head>

<title>跨列单元格示例</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

text-align: left;

}

</style>

</head>

<body>

<table>

<tr>

<th>标题1</th>

<th>标题2</th>

<th>标题3</th>

</tr>

<tr>

<td colspan="2">这是一个跨两列的单元格</td>

<td>标题3</td>

</tr>

<tr>

<td>数据1</td>

<td>数据2</td>

<td>数据3</td>

</tr>

</table>

</body>

</html>

表格嵌套

<!DOCTYPE html>

<html>

<head>

<title>表格嵌套示例</title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

text-align: left;

}

</style>

</head>

<body>

<table>

<tr>

<th>外部标题1</th>

<th>外部标题2</th>

</tr>

<tr>

<td>

<table>

<tr>

<th>内部标题1</th>

<th>内部标题2</th>

</tr>

<tr>

<td>内部数据1</td>

<td>内部数据2</td>

</tr>

<tr>

<td>内部数据3</td>

<td>内部数据4</td>

</tr>

</table>

</td>

<td>

<table>

<tr>

<th>内部标题1</th>

<th>内部标题2</th>

</tr>

<tr>

<td>内部数据5</td>

<td>内部数据6</td>

</tr>

<tr>

<td>内部数据7</td>

<td>内部数据8</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

表单

表单标记

<!DOCTYPE html>

<html>

<head>

<title>简单表单</title>

</head>

<body>

<h2>联系我们</h2>

<form action="/submit-form" method="post">

<label for="name">姓名:</label><br>

<input type="text" id="name" name="name"><br>

<label for="email">邮箱:</label><br>

<input type="email" id="email" name="email"><br>

<label for="message">留言:</label><br>

<textarea id="message" name="message"></textarea><br>

<input type="submit" value="提交">

</form>

</body>

</html>

定义域和域标题

定义域（Domain）和域标题（Domain Title）是网站制作中的两个重要概念。
1. 定义域（Domain）：
定义域是指网站的网址，比如 www.example.com 。
它是互联网上识别网站的唯一地址。
2. 域标题（Domain Title）：
域标题是网页的标题，通常显示在浏览器的标签页上。
它也是搜索引擎结果页面（SERP）上显示的网站标题。
网页制作中的实现方法：
定义域：
需要通过域名注册商购买域名。
将域名解析到网站的服务器IP地址。
域标题：
在HTML文档的 <head> 部分使用 <title> 标签定义。
例如：<!DOCTYPE html>
<html>
<head>
<title>我的网站标题</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这里是网站的内容。</p >
</body>
</html>
这段代码中， <title>我的网站标题</title> 就是域标题。
希望这个简短的解释对你有帮助！如果需要更详细的信息，随时告诉我。

表单信息输入

单行文本输入框

密码输入框

复选框

<form>
<label><input type="checkbox" name="agree" value="agree"> 我同意条款和条件</label>
</form>

单选按钮

图像按钮

<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* 绿色背景 */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px; /* 圆角边框 */
}

.button img {
width: 24px; /* 图片大小 */
height: 24px;
}
</style>
</head>
<body>

<button class="button">
< img src="image.png" alt="图标">
点击我
</button>

</body>
</html>

提交按钮

<!DOCTYPE html>
<html>
<head>
<style>
.submit-button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>

<form>
<input type="submit" value="提交" class="submit-button">
</form>

</body>
</html>

重置按钮

<!DOCTYPE html>
<html>
<head>
<style>
.reset-button {
padding: 10px 20px;
background-color: #FF4500;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>

<form>
<input type="reset" value="重置" class="reset-button">
</form>

</body>
</html>

普通按钮

<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 10px 20px;
background-color: #f0f0f0;
border: 1px solid #dcdcdc;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>

<button class="button">点击我</button>

</body>
</html>

文件选择框

隐藏框

多行文本输入框

下拉列表框

综合案例——表格与表单