首页 > 其他分享 >第一章 网页制作的基础知识

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

时间:2024-09-13 23:24:17浏览次数:13  
标签:网页 标签 元素 第一章 HTML 文档 基础知识 页面

1.1 认识网页和网站

1.1.1 网页、网站

网页是构成网站的基本单位,是由HTML、CSS和JavaScript等技术创建的文档。它可以包含文本、图像、链接、表格和其他多媒体元素,用于向用户展示信息和提供交互功能。

网站是由多个网页组成的集合,它们共同形成了一个完整的网络实体。网站旨在向用户提供特定的内容、服务或功能,并通过网页之间的导航和链接进行组织和展示。

一般来说,网页是网站的基本构成单元。每个网页都有一个唯一的URL(统一资源定位符),通过这个URL可以访问到特定的网页。网页通常包括以下几个方面:

  1. 结构:网页使用HTML(超文本标记语言)来定义其结构。HTML使用标签(如<h1>、<p>、<img>)来定义标题、段落、图像等元素。

  2. 样式:网页使用CSS(层叠样式表)来定义其外观和样式。CSS可以控制网页中的字体、颜色、布局等方面的样式。

  3. 功能:网页使用JavaScript来实现交互和动态功能。JavaScript可以用来验证表单、处理用户输入、创建动画效果等。

常用术语:

  1. Intertent:由各种不同类型的计算机网络连接起来的全球性网络

  2. URL(统一资源定位符):用于标识网页或网站的地址,用户通过URL访问特定的网页或网站。

  3. 超链接(Hyperlink):用于将一张网页与另一张网页或其他资源进行关联。通过点击超链接,用户可以快速跳转到目标页面。

  4. 浏览器是用来检索、展示以及传递Web信息资源的应用程序。

  5. IP:用于标识网络设备的唯一数字标识符。

  6. HTTP(Hypertext Transfer Protocol):用于在Web浏览器和服务器之间传输超文本的协议。

  7. FTP:文件传输协议,通过该协议,可把文件从一个地方传到另外一个地方

  8. WWW是“World Wide Web”的缩写,中文称为“万维网”。它是一个通过互联网访问的、由许多互相链接的文档和资源组成的系统。
  9. 域名(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.其他常见元素

除了网页的基本构成元素(如文本、图像、链接等),还有一些常见的网页元素,包括:

  1. 表格(Table):用于展示数据的结构化元素,可以包含多行和多列,用于呈现有组织的数据。

  2. 按钮(Button):用于触发特定操作或提交表单的交互元素,通常与JavaScript代码关联。

  3. 下拉菜单(Dropdown Menu):用于提供选项列表,当用户点击时会显示所有选项,可以选择其中一项。

  4. 导航栏(Navigation Bar):用于在网页中导航不同的页面或页面部分,通常包含链接到其他页面的按钮。

  5. 图片轮播(Image Slider):用于在网页中展示多张图片,以滑动、淡入淡出等动画效果切换图片。

  6. 模态框(Modal):用于展示重要信息或需要用户输入的弹出框,阻止用户操作页面其他部分。

  7. 轮播图(Carousel):类似于图片轮播,但通常包含更多内容,如标题、描述和按钮等。   这些元素可以让网页更具交互性和多样性,提供更好的用户体验。

1.3 页面布局结构

1.3.1 网页页面布局

854f2177a9564614be41736fb1eea757.png

网页布局,是指网页中文本、图片、按钮和图标等元素的组织和排列方式。这种布局决定了用户浏览网页时的视觉体验和交互效果。可以说,网页布局就是一个网页中各元素的组织方式

常见的网页页面布局包括:

  1. 固定布局(Fixed Layout):使用固定的像素单位来定义网页的尺寸和位置,不随窗口大小的改变而改变。

  2. 流式布局(Fluid Layout):使用相对单位如百分比来定义网页元素的尺寸和位置,使其能够自适应不同窗口大小。

  3. 分栏布局(Column Layout):将页面水平分成多个列,常用于显示多个内容块或导航栏。

  4. 响应式布局(Responsive Layout):根据设备的屏幕大小和分辨率自动调整和适应布局,使网页在不同设备上能够良好显示。

  5. 网格布局(Grid Layout):使用网格系统将页面划分为多个网格单元,方便对元素进行排列和布局。

  6. 绝对定位布局(Absolute Positioning):使用绝对定位将元素精确定位在页面上的指定位置,常用于创建特殊效果或重叠布局。

这些布局方式可以根据不同的设计需求和网页的目标来选择和组合,以实现更好的视觉和用户体验。 


1.3.2 网页色彩搭配

网页色彩搭配是网页设计中非常重要的一部分,选择合适的色彩搭配可以提升网页的视觉吸引力和用户体验。以下是一些常见的网页色彩搭配方式:

  1. 单色调搭配:使用同一色调的不同深浅变化来创造简洁而现代的效果。可以选择明亮的色调来增加活力,或选择柔和的色调来营造温暖和舒适的感觉。

  2. 对比色搭配:选择对比强烈的两种颜色来突出重要元素或信息。例如黑白对比或深蓝和橙色的对比,可以使网页元素更加醒目。

  3. 类似色搭配:选择相邻的色彩在色轮上的位置接近的颜色进行搭配。这种搭配方式通常会给人以和谐、温暖和舒适的感觉。

  4. 互补色搭配:选择色轮上相对位置相对的两种颜色进行搭配。例如红色和绿色、蓝色和橙色等。这种搭配方式可以产生强烈的对比和视觉效果。

  5. 分裂互补色搭配:选择一种颜色,然后选择该颜色相对位置两侧的两种颜色进行搭配。这种搭配方式可以产生较为平衡的色彩组合。

无论选择哪种色彩搭配方式,都需要考虑网页的主题、内容和目标受众,以及色彩的情感和文化含义对用户的影响。


1.4    Web前端技术简介


1.4.1 初识WEB前端

  1. HTML(HyperText Markup Language):HTML是一种标记语言,用于描述网页的结构和内容。学习HTML可以了解网页的基本元素、标签和属性,以及如何编写语义化的网页结构。

  2. CSS(Cascading Style Sheets):CSS是一种样式表语言,用于控制网页的样式和布局。学习CSS可以了解如何设计网页的外观、字体、颜色、布局和响应式设计等。

  3. JavaScript:JavaScript是一种脚本语言,用于为网页添加交互和动态效果。学习JavaScript可以了解如何处理用户输入、操作网页元素、处理数据、进行动画效果和与后端进行交互等。

  4. 响应式设计:随着移动设备的普及,响应式设计成为重要的前端技术。学习响应式设计可以了解如何根据不同设备的屏幕大小和分辨率,使网页能够自适应地显示和布局。

  5. 前端开发工具:学习使用一些常用的前端开发工具,如代码编辑器(如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文档

c5581aa6f90544518644a9c3056d5799.jpeg


1.7 网页头部标签


1.7.1 <title>标签

<title>标签是页面标题标题标签

<title>标签位于<bead>与</head>

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页标题</title>
	</head>
	<body>
		
	</body>
</html>

结果: 

f5bab451a6554e848422f7a40e8416ca.png


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 特殊符号

06df3fd8b597462ab9b8bf7b2b69faec.jpeg

 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">网页制作教程&copy;昼夜ɑː</p >
	</body>
</html>

运行结果: 

标签:网页,标签,元素,第一章,HTML,文档,基础知识,页面
From: https://blog.csdn.net/2401_87174676/article/details/142057921

相关文章

  • HTML·第二章 网页制作的排版方法
    目录2.1文字与段落排版2.1.1段落标签2.1.2标题标签2.1.3换行标签2.1.4水平线标签2.1.5预格式化标签2.1.6缩排标签2.1.7案例2.2超链接2.2.1超链接简介2.2.2超链接的应用2.3图像2.3.1网页图像的格式及使用要点2.3.2图像标签2.3.3图像超链接2.3.4......
  • C++入门基础知识65——【关于C++ 数据封装】
    成长路上不孤单......
  • C++入门基础知识66——【关于C++ 接口(抽象类)】
    成长路上不孤单......
  • 第一章课堂练习
    1.使用HBuilder编写符合以下要求的文档:网页标题为“网页学习”,在浏览器窗口中显示“欢迎大家一起开始学习网页制作”。完成效果。其中网页所有文字的颜色为blue,背景颜色为#99fff;水平分割线粗细为5,颜色为#ff3333。<!DOCTYPEhtml><html><head><title>网页学习</title>......
  • 面试-JS基础知识-作用域和闭包
    问题this的不同应用场景手写bind函数实际开发中闭包的应用场景,举例说明创建10个<a>标签,点击的时候弹出来对应的序号作用域:某个变量的合法使用范围全局函数块级**自由变量上面图的最里面的红框————aa1a2都是自由变量,因为都没有被定义。会一层一层往上找。......
  • 第一章 网页制作的基础知识~
    1.1认识网页和网站网页和网站的区别:网站包含网页但是网页与网站有着很大的区别网站内还有包含网页以外的其他东西.(例如:服务器数据库等)但网站和网页不为总分关系,网页只是单独的一页.常用术语:Internet因特网www万维网web首页HTMY俗称电脑Hypertext超文本(......
  • Python网页应用开发神器Dash 2.18.1稳定版本来啦
    本文示例代码已上传至我的Github仓库:https://github.com/CNFeffery/dash-masterGitee同步仓库地址:https://gitee.com/cnfeffery/dash-master大家好我是费老师,上周Dash发布了2.18.0新版本,并于今天发布了可稳定使用的2.18.1版本(自古.1版本最稳✌),今天的文章中就将针对2.18.1......
  • 【编程小白必看】使用Selenium进行网页自动化操作操作秘籍一文全掌握
    【编程小白必看】使用Selenium进行网页自动化操作操作秘籍......
  • 面试-运行环境-网页渲染
    网页加载过程网页是如何加载并渲染出来的从输入url到渲染出页面的整个过程(经典题来了)资源有哪些形式加载的大致过程请求啥就是返回啥,图片、音频都有可能。请求的是页面则返回HTML代码。渲染过程-①RenderTree:渲染树,每个节点挂了很多CSS属性,这样就能渲染......
  • 第一章 网页制作的基础知识
    1.1认识网页和网站1.1.1网页、网站网页和网站(Web站点)的区别:网页是一页两页,网站是可跳转,多网页,网页和网站不是总分关系,网页只是网站的基本信息单位,超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。eg.网站除了网页还有其他东西,如:服务器、域名...常用术语......