1.1 认识网页和网站
1.1.1 网页、网站
网页是构成网站的基本单位，是由HTML、CSS和JavaScript等技术创建的文档。它可以包含文本、图像、链接、表格和其他多媒体元素，用于向用户展示信息和提供交互功能。
网站是由多个网页组成的集合，它们共同形成了一个完整的网络实体。网站旨在向用户提供特定的内容、服务或功能，并通过网页之间的导航和链接进行组织和展示。
一般来说，网页是网站的基本构成单元。每个网页都有一个唯一的URL（统一资源定位符），通过这个URL可以访问到特定的网页。网页通常包括以下几个方面：
结构：网页使用HTML（超文本标记语言）来定义其结构。HTML使用标签（如<h1>、<p>、<img>）来定义标题、段落、图像等元素。
样式：网页使用CSS（层叠样式表）来定义其外观和样式。CSS可以控制网页中的字体、颜色、布局等方面的样式。
功能：网页使用JavaScript来实现交互和动态功能。JavaScript可以用来验证表单、处理用户输入、创建动画效果等。
常用术语：
Intertent:由各种不同类型的计算机网络连接起来的全球性网络.
URL（统一资源定位符）：用于标识网页或网站的地址，用户通过URL访问特定的网页或网站。
超链接（Hyperlink）：用于将一张网页与另一张网页或其他资源进行关联。通过点击超链接，用户可以快速跳转到目标页面。
浏览器是用来检索、展示以及传递Web信息资源的应用程序。
IP：用于标识网络设备的唯一数字标识符。
HTTP（Hypertext Transfer Protocol）：用于在Web浏览器和服务器之间传输超文本的协议。
FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方
WWW是“World Wide Web”的缩写，中文称为“万维网”。它是一个通过互联网访问的、由许多互相链接的文档和资源组成的系统。
域名（Domain Name）是互联网上用于识别和定位网站的名称。
1.1.2 静态网页和动态网页
静态网页：HTML/CSS
动态网页：JavaScript
1.2 网页的基本构成元素
1.2.1.文本
网页上的文本内容是最基本的元素之一，可以通过<p>、<h1>、<span>、<a>等标签来定义和显示文本内容。
文本体积小，网络传输数据快，是网页最主要的基本元素，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。
1.2.2.图片和动画
比文本更加生动和直观，可以传递一些文本不能表达的信息，包括GIF、JPEG（最广泛）和PNG等
网页中的图像可以通过<img>标签来引入和显示，可以指定图片的来源地址、大小、替代文本等属性。
1.2.3.超链接
从一个网页指向另一个目的端的链接（是WWW流行起来的最主要原因）
通过<a>标签可以创建超链接，让用户点击后跳转到其他页面或位置。
1.2.4.音频视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错是背景音乐的首选。
1.2.5.交互表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送发送到用户设置的 目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单 设备上都将显示为
一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点
1.2.6.其他常见元素
除了网页的基本构成元素（如文本、图像、链接等），还有一些常见的网页元素，包括：
表格（Table）：用于展示数据的结构化元素，可以包含多行和多列，用于呈现有组织的数据。
按钮（Button）：用于触发特定操作或提交表单的交互元素，通常与JavaScript代码关联。
下拉菜单（Dropdown Menu）：用于提供选项列表，当用户点击时会显示所有选项，可以选择其中一项。
导航栏（Navigation Bar）：用于在网页中导航不同的页面或页面部分，通常包含链接到其他页面的按钮。
图片轮播（Image Slider）：用于在网页中展示多张图片，以滑动、淡入淡出等动画效果切换图片。
模态框（Modal）：用于展示重要信息或需要用户输入的弹出框，阻止用户操作页面其他部分。
轮播图（Carousel）：类似于图片轮播，但通常包含更多内容，如标题、描述和按钮等。 这些元素可以让网页更具交互性和多样性，提供更好的用户体验。
1.3 页面布局结构
1.3.1 网页页面布局
网页布局，是指网页中文本、图片、按钮和图标等元素的组织和排列方式。这种布局决定了用户浏览网页时的视觉体验和交互效果。可以说，网页布局就是一个网页中各元素的组织方式
常见的网页页面布局包括：
固定布局（Fixed Layout）：使用固定的像素单位来定义网页的尺寸和位置，不随窗口大小的改变而改变。
流式布局（Fluid Layout）：使用相对单位如百分比来定义网页元素的尺寸和位置，使其能够自适应不同窗口大小。
分栏布局（Column Layout）：将页面水平分成多个列，常用于显示多个内容块或导航栏。
响应式布局（Responsive Layout）：根据设备的屏幕大小和分辨率自动调整和适应布局，使网页在不同设备上能够良好显示。
网格布局（Grid Layout）：使用网格系统将页面划分为多个网格单元，方便对元素进行排列和布局。
绝对定位布局（Absolute Positioning）：使用绝对定位将元素精确定位在页面上的指定位置，常用于创建特殊效果或重叠布局。
这些布局方式可以根据不同的设计需求和网页的目标来选择和组合，以实现更好的视觉和用户体验。
1.3.2 网页色彩搭配
网页色彩搭配是网页设计中非常重要的一部分，选择合适的色彩搭配可以提升网页的视觉吸引力和用户体验。以下是一些常见的网页色彩搭配方式：
单色调搭配：使用同一色调的不同深浅变化来创造简洁而现代的效果。可以选择明亮的色调来增加活力，或选择柔和的色调来营造温暖和舒适的感觉。
对比色搭配：选择对比强烈的两种颜色来突出重要元素或信息。例如黑白对比或深蓝和橙色的对比，可以使网页元素更加醒目。
类似色搭配：选择相邻的色彩在色轮上的位置接近的颜色进行搭配。这种搭配方式通常会给人以和谐、温暖和舒适的感觉。
互补色搭配：选择色轮上相对位置相对的两种颜色进行搭配。例如红色和绿色、蓝色和橙色等。这种搭配方式可以产生强烈的对比和视觉效果。
分裂互补色搭配：选择一种颜色，然后选择该颜色相对位置两侧的两种颜色进行搭配。这种搭配方式可以产生较为平衡的色彩组合。
无论选择哪种色彩搭配方式，都需要考虑网页的主题、内容和目标受众，以及色彩的情感和文化含义对用户的影响。
1.4 Web前端技术简介
1.4.1 初识WEB前端
HTML（HyperText Markup Language）：HTML是一种标记语言，用于描述网页的结构和内容。学习HTML可以了解网页的基本元素、标签和属性，以及如何编写语义化的网页结构。
CSS（Cascading Style Sheets）：CSS是一种样式表语言，用于控制网页的样式和布局。学习CSS可以了解如何设计网页的外观、字体、颜色、布局和响应式设计等。
JavaScript：JavaScript是一种脚本语言，用于为网页添加交互和动态效果。学习JavaScript可以了解如何处理用户输入、操作网页元素、处理数据、进行动画效果和与后端进行交互等。
响应式设计：随着移动设备的普及，响应式设计成为重要的前端技术。学习响应式设计可以了解如何根据不同设备的屏幕大小和分辨率，使网页能够自适应地显示和布局。
前端开发工具：学习使用一些常用的前端开发工具，如代码编辑器（如Visual Studio Code）、浏览器开发者工具（如Chrome DevTools）、版本控制工具（如Git）等，可以提高开发效率和调试能力。
1.4.2 WEB前端开发的三大核心技术
HTML:网页制作的标准语言，控制页面结构
CSS：可静态的修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
JavaScript：是一种属于网络的脚本语言常用来为网页添加各式各样的动态功能
1.4.3 前端开发工具
浏览器: 谷歌浏览器
网页编辑器：HBuilderX
1.5 HTML语法基础
1.5.1 HTML概述
HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。
1.5.1.1 语言
HTML（HyperText Markup Language）是一种标记语言，用于描述网页的结构和内容。HTML的语法基于
1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本
1.5.1.3 标记
标记用<>括起来，通常由一个开始标记和一个结束标记组成，中间包含元素的内容。即：<xxx> 内容</xxx>
1.5.2 HTML基本结构
1.5.2.1 HTML文档标签<html>...</html>
1.6 创建HTML文档
1.7 网页头部标签
1.7.1 <title>标签
<title>标签是页面标题标题标签
<title>标签位于<bead>与</head>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
</body>
</html>
结果
1.7.2 <meta>标签
用于提供与页面内容相关的关键词列表。
1.7.2.1 keywords
keyworlds用于提供关于页面的简短描述，设置关键字
1.7.2.2 description
description 设置描述信息，设置字符集
1.7.3 <link>标签
link用于建立文档（CSS）与连接资源的关联，指定外部资源，建立html和外部资源的联系。
常用属性：
rel：引入的资源类型（例如icon、stylesheet）
type：指定MIME类型（如text/css）
href：指定外部的URL
实例：
<link rel="stylesheet" type="text/css" href="common.css">
1.7.4 <script>标签
作用：内联、外置或动态引入js脚步文件。
1.8 HTML5文档注释和特殊符号
1.8.1 注释
注释：<!-- -->
快捷键位ctrl+
注释是文档中的说明文字，不会被浏览器执行。HTML5使用<!--..-->标签为文档进行注释，注释标签以“<!--”开
头，以“-->”结束，中间的“ ”替换为注释文字内容即可。
1.8.2 特殊符号
1.9 综合案例——临江仙 · 送钱穆父
代码如下：
<meta charset="utf-8" />
<meta name="descrption"content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align: center;
font-size: larger;
}
</style>
</head>
<body>
bgcolor="antiquewhite" text="#006633">
<h2 align="center">临江仙·送钱穆父</h2>
<p>宋·苏轼</p >
<!--使用<br/>的效果-->
<p>一别都门三改火，天涯踏尽红尘。<br />
依然一笑作春温。<br />
无波真古井，有节是秋筠。<br />
惆怅孤帆连夜发，送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="blue" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
< img src="img/1.jpg"/>
<!--水平线-->
<hr size="3" color="green" width="100%/>"
<p align="center">网页制作教程©昼夜ɑː</p >
</body>
</html>
运行结果：
扫一扫
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
