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

想摸鱼 zzz

已于 2024-09-12 19:36:51 修改

阅读量1k

点赞数 26

文章标签： html

于 2024-09-10 17:30:00 首次发布

本文链接：https://blog.csdn.net/2401_83529961/article/details/142091946

版权

1.1.认识网页和网站

1.1.1.网页、网站

网页和网站的区别：

网站是由一组相关的网页构成的，通常包含主页和其他相关的页面。网站是一个整体的在线平台，提供了访问和浏览网页的功能。
网页是网站的组成部分，是一个包含文本、图像、音频、视频等内容的页面。它们可以用来呈现信息、交互功能、展示商品等。网页通常由HTML、CSS、JavaScript等技术构建。
可以把网站看作是一个房子，而网页就是房子的房间。网站是一个更广泛的概念，包含了多个网页，而网页是构成网站的基本单位。

常用术语：

URL：跟踪 Web 文档的地址系统
HTTP：通过给定 URL 来查找文档的传输协议
HTML：允许嵌入超链接的文档格式
IP：网际协议
域名：值得网站名称，在全世界是唯一的。
超链接：超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念

1.1.2.静态网页和动态网页

HTML CSS JavaScript

1.2.网页的基本构成元素

1.2.1.文本

文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。

1.2.2.图片和动画

图片比文字更生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。

1.2.3.超链接

超链接是在网页上用来连接不同网页或不同部分的元素。它能够实现跳转到其他页面、下载文件、发送邮件等功能。超链接可以通过<a>标签来创建，其中包含了链接的目标地址和显示的文字。

1.2.4.音频视频

音频和视频是网页中常见的媒体元素。通过HTML5的<video>和<audio>标签，可以在网页上嵌入音频和视频文件，并且可以通过属性来控制播放、暂停、音量等功能。

1.2.5.交互表单

交互表单是用来收集用户输入信息并进行提交的一种方式。HTML提供了多种表单元素，如文本框、单选框、复选框、下拉框等，通过表单元素和相关的属性，可以实现各种不同的交互功能。

1.2.6.其他常见元素

除了超链接、音频视频和交互表单，还有一些常见的HTML元素，如文字相关的标签（标题、段落、列表等），图片相关的标签（<img>）、表格相关的标签（<table>）等。这些元素都可以用来构建丰富多样的网页内容。

1.3 页面布局结构

1.3.1 网页页面布局

网页页面布局是指将网页内容按照一定的方式进行排列和组织。常见的布局方式有流式布局、固定布局和弹性布局等。不同的布局方式可以实现不同的效果和适应不同的屏幕尺寸。

1.3.2 网页色彩搭配

网页色彩搭配是指在网页设计中选择合适的颜色组合来增强页面的视觉效果。要考虑到色彩的搭配是否协调、是否符合页面的主题、是否易于阅读等因素。

1.4 Web前端技术简介

1.4.1 初识WEB前端

初识WEB前端介绍了什么是Web前端技术，以及Web前端的发展历程和重要性。它涉及了Web前端技术对于用户体验和网站性能的影响。

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

WEB前端开发的三大核心技术包括HTML、CSS和JavaScript。它们分别负责网页内容、样式和交互的开发。掌握这三种技术可以实现网页的基本开发和设计。

1.4.3 前端开发工具

前端开发工具是用于辅助开发者进行Web前端开发的软件或应用程序。常见的前端开发工具有代码编辑器（例如Visual Studio Code）、浏览器开发者工具（例如Chrome开发者工具）和版本管理工具（例如Git）等。这些工具可以提高开发效率和调试代码的能力。

1.5 HTML语法基础

1.5.1 HTML概述

HTML是 Hyper Text Markup Language 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。

1.5.1.2 超文本

超文本是可以加入图片、声音、动画、影视等内容的文本。

1.5.1.3 标记

HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。

1.5.2 HTML基本结构

<!doctype html>：这是HTML文档的文档类型声明，指定文档遵循的HTML版本。

<html>：这是HTML文档的根元素，包含整个HTML文档的内容。

<head>：这是HTML文档的头部元素，用于定义文档的元数据和引入外部资源。

<title>：这是HTML文档的标题元素，用于指定网页的标题，将显示在浏览器的标题栏或标签页上。

<body>：这是HTML文档的主体元素，包含网页的实际内容。

标签（Tag）：HTML文档中的元素通过标签进行定义和描述，标签通常是成对出现的，一个开标签和一个闭标签，中间包含的内容是标签的内容。

属性（Attribute）：HTML标签可以包含属性，属性用于提供额外的信息或控制元素的行为。属性以名称-值的形式出现，放在标签的开始标签中。

1.6 创建HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		这是我的第一个网页内容</p>
		2023软件技术4班</p>
		zyq1</P>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

1.7 网页头部标签

<title>标签：定义网页的标题，显示在浏览器的标题栏或书签上。
<meta charset="UTF-8">标签：指定网页的字符编码为UTF-8，确保网页内容可以正确显示。
<meta name="keywords" content="关键词1, ...">标签：定义网页的关键词，有助于搜索引擎优化。
<meta name="description" content="网页描述">标签：定义网页的描述，有助于搜索引擎优化和展示。
<link rel="stylesheet" href="style.css">标签：引入外部CSS样式表文件。
<script src="script.js"></script>标签：引入外部JavaScript文件。
<link rel="shortcut icon" href="favicon.ico">标签：定义网页的favicon图标，显示在浏览器的标签页上。

1.8 HTML文档注释和特殊符号

HTML文档注释的语法如下：

<!-- 这是一个注释 -->

常见的特殊符号的示例：

< 表示小于符号 <
> 表示大于符号 >
& 表示与符号 &
" 表示双引号 "
' 表示单引号 '
  表示空格

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

<!--综合案例-->
<!DOCTYPE himl>
<html>
	<head>
		<meta mame="koywomde" contenl="宋调，苏轼"charmet="uf-8" />
		<meta name="descriplion"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 >
		<!--使用<br>的效果-->
		<p> 一别都门三改火，天涯踏尽红尘。<br/>
				依然一笑作春温。<br/>
			无波真古井，有节是秋筠。<br/>
			惆怅孤帆连夜发，送行淡月微云。<br/>
			尊前不用翠眉颦。<br />
			<font color= "brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
		<img src="img/1.1.jpg"/>
		<!--水平线-->
		<hr size="2" color="black" width="100%"/>
		<p align="center">网页制作教程 Copyright&copy;广东南方职业学院</p >
	</body>
</html>

代码运行结果如下：