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>
</html>HTML文档标签的格式为
<html>HTML文档的内容</html>
<html>处于文档的最前面,表示HTML文档的开始,即浏览器从<html>开始解释,直到遇到</html>
1.5.2.2 HTML文档头标签<head>...</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内容</head>文档头部内容在开始标签<html>和结束标签</html>
1.5.2.3 文档编码
文档编码格式如下:<meta charset=" utf-8"/>
为了被浏览器正确解释和通过W3C代码标准,所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致,否则会成乱码。对于中文网页的设计者来说,用户一般使用GB2313(简体中文)。
1.5.2.4 HTML文档主体标签<body>...</body>
</body> HTML文档主体标签的格式为<body>网页的内容</body>
主体位于头部以后,以<body>为开始标签,</body>为结束标签。它定义网页上显示的主要内容与显示格式,是整个网页的核心,网页中要真正显示的内容都包含在主体中。
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>
运行结果:
标签:网页,标签,元素,第一章,HTML,文档,基础知识,页面 From: https://blog.csdn.net/2401_87174676/article/details/142057921