1.1认识网页和网站
1.1.1.网页，网站
网页和网站的区别：
网页和网站的区别在于其功能不同、性质不同、结构不同，网站由网页组合而成，我们在浏览网站过程中所看到的一张张的画面就是网页，多个网页集合成为一个网站，所以网站建设设计工作包括网页的设计。
网站的构成元素中最重要的就是网页，所以网站与网页最打的区别是性质的不同。我们可以理解为网页是个体，由多个体组成的整体便是网站。除了网页，想要构成一个网站还需要完整的域名、程序、空间等，没有串联的工具就无法组成网站。
网页分为静态网页和动态网页，例如我们日常查询资料的网页基本都是静态网页，其优势在于比较稳定、方便用户阅览。网站是一个完整的系统，网站与网页属于包含关系，网站中网页的数量没有硬性规定，哪怕只有一个网页，只要有完整的元素也能形成网站。
由此可见，网页设计与网站建设不是同一个工作，在字面上理解，网页设计就是针对每一个网页进行视觉排版、设计美化等工作，包括网页中的图片、文字、视频等。而网站建设相对比较复杂，不仅要做网页的排版，还有安排网站的空间、域名、日常维护、推广、网站代码编写等各方面的工作，所以网页设计的工作范围比较小，建设网站的内容体系比较大，网页设计也是网站建设工作中的一部分。
常用术语：
URL:统一资源定位符，用于标识互联网上的资源的地址。
HTTP:超文本传输协议，用于在客户端和服务器之间传输超文本资源。
FTP:文件传输协议，通过协议，可把文件传输，实现资源共享
1.1.2静态网页和动态网页
网页技术：HTML CSS JavaScriot等；
静态网页和动态网页的区别：前者只是使用HTML/CSS来编写；后者则是使用了JavaScript实现动态功能的交互。
1.2 网页的基本构成元素
网页的基本构成元素：文本、图片和动画、超链接、音频和视频、交互表单、常见其他元素。
1.2.1.文本
网页文本具有可编辑、可链接、多媒体融合、格式多样、可搜索、可交互、跨平台、动态、可打印等特点。这些特点使得网页文本成为信息传播和沟通的重要工具。
1.2.2.图片和动画
网页图片和视频不仅能够丰富网页内容，提升用户体验，还能以直观、生动的方式传达信息，扩大传播范围。
1.2.3.超链接
超链接可以将用户从一个网页跳转到另一个网页。通过点击超链接，用户可以访问相关的信息、页面或资源，实现网页之间的导航和互相连接。
1.2.4.音频视频
用户只需要通过互联网连接，就可以在任何地方随时访问网页上的音频视频内容，无需下载或安装任何软件。网页上的音频视频可以支持多种格式，包括MP3、MP4、WAV等，用户可以根据自己的需求选择合适的格式进行播放。
1.2.5.交互表单
网页交互表单是用户和服务器之间进行数据交互的重要工具，具有丰富的功能和灵活的扩展性。
1.2.6.其他常见元素
网页中除了以上几种最基本的元素外，还有一些其他的常用元素，包括悬停按钮、JavaScript与ActiveX等各种特效，它们可以点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
页面布局结构的特点包括网格系统的应用、响应式设计、导航栏和页眉的存在、内容区域的重要性、侧边栏和页脚的补充以及白空间的利用。这些特点旨在提供更好的用户体验和视觉效果。
1.3.1 网页页面布局
1.3.2 网页色彩搭配
-
色彩的选择要符合网页的主题和目标。网页的色彩搭配应该与网页的内容和定位相符，给人一种一致的感觉。
-
色彩的搭配要考虑色彩的明度和饱和度。色彩明度的高低可以决定网页的整体明暗程度，而色彩的饱和度则可以影响网页的活泼度和平静度。
-
色彩的对比要适度。在网页设计中，对比可以用来突出重要的内容，但过度的对比会给人带来视觉疲劳，所以对比应该适度。
-
色彩的使用要考虑用户的习惯和喜好。不同的人对于色彩的喜好有所不同，所以在网页设计中要尽量考虑用户的喜好，让他们感到舒适和愉悦。
-
色彩要有层次感。在网页设计中，通过色彩的明暗度和饱和度的差异可以为网页创造层次感，使得内容更加清晰和易于理解。
-
色彩的使用要避免过多。过多的色彩会给人造成混乱的感觉，所以在网页设计中应该尽量避免使用过多的色彩，保持简洁和清晰。
-
色彩的使用要符合文化和习俗。不同的文化和习俗对于色彩的认知和喜好也有所不同，所以在设计跨文化的网页时要考虑到这一点，以避免可能的误解和冲突。
总的来说，网页色彩搭配要考虑到网页的主题、用户的习惯和喜好以及文化和习俗等因素，以创造出一种舒适、美观和有意义的网页设计。
1.4 Web前端技术简介
1.4.1 初识WEB前端
初识WEB前端需要学习HTML、CSS和JavaScript的基础知识，同时了解一些常用的技术和工具。通过不断实践和学习，你可以逐渐提升自己的前端技能。
1.4.2 WEB前端开发的三大核心技术
HTML CSS JavaScript
三大核心技术作用
HTML：控制页面结构
CSS：控制页面的样式
JavaScript：使静态网页变为动态网页
这三种技术在Web前端开发中相互配合，HTML负责结构，CSS负责样式，JavaScript负责交互和动态效果，共同构建出丰富、可视化和用户友好的网页。
1.4.3 前端开发工具
分为浏览器、网页编辑器和切图软件。
浏览器：谷歌浏览器 GoogleChrome
编辑器：HBuilderX 、Adobe Dreamweaver、Sublime Text、NotePad++、EditPlus
切图工具：Photoshop、Fireworks
1.5 HTML语法基础
1.5.1 HTML概述
1.语言
2.超文本
3.标记
1）单标签：指只存在一个标签的写法如<meta><input>等
2)双标签：指存在一对标签如<head></head><body></body>等，注意第一个为起始标签，第二个为结束标签，“/”在结束标签里作为关闭符
1.5.2 HTML基本结构
1.5.2.1 HTML文档标签<html>...</html>
1.5.2.2 HTML文档头标签<head>...</head>
1.5.2.3 文档编码
文档编码格式为<meta charset="utf-8"/> 文档声明的编码应该与实际编码一致，否则会成乱码
1.5.2.4 HTML文档主体标签<body>...</body>
它定义网页上显示的主要内容与显示格式，网页中要显示的内容都包含在主体中
1.6 创建HTML文档
1.7 网页头部标签
1.7.1 <title>标签
用于标示文档标题
1.7.2 <meta>标签
<meta>标签是用于在HTML文档中提供元数据的标签。它通常放置在HTML文档的<head>部分，用于指定关于文档的信息，如字符编码、关键字、描述等。
1.7.2.1 keywords
用来告诉搜索引擎网页使用的关键字
1.7.2.2 description
用来告诉搜索引擎网站主要的内容
1.7.3 <link>标签
用于连接外部资源和当前HTML文档，如果需要同时引用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一个<link>标签
1.7.4 <script>标签
<script> 标签是HTML中的一个标签，用于插入或引用JavaScript代码。在<script>标签中，可以直接编写JavaScript代码，也可以引用外部的JavaScript文件。
1.8 HTML5文档注释和特殊符号
1.8.1 注释
1.8.2 特殊符号
1.9 综合案例——临江仙 · 送钱穆父
扫一扫
816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
