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

Tuscany。

已于 2024-09-30 12:37:05 修改

阅读量1.1k

点赞数 33

文章标签： anti-design-vue

于 2024-09-12 09:54:17 首次发布

本文链接：https://blog.csdn.net/2402_83184791/article/details/142055029

版权

1.1认识网页和网站

1.1.1 网页、网站

网页是由HTML编写，通过WWW网传输，且被浏览器编译后使用获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。

网站是有独立域名、独立空间的内容集合，这些内容可能是网页，也可能是网页，也可能是程序或者其他文件。

1.1.2静态网页和动态网页

1.2网页的基本构成元素

1.文本 2.图片和动画 3.超链接 4.音频和视频 5.交互表单 6.其他常见元素

1.3页面布局结构

（1）.“国”字型。最常见的一种布局方式 (3)海报型。布局方式比较简单

（2）.“厂”字型。与“国“字型相似（4）Flash型。常用于宣传网页首战

1.4Web前端技术简介

1.4.1初始Web前端

Web 前端即指平常上网浏览的网页。Web前端开发是从网页演变而来的，名称上有明显的时代特征。

1.4.2Web全端开发的三大核心技术

1.HTML 2.CSS语言 3.Javascript语言

1.4.3Web前端开发工具

1.浏览器

（1）IE浏览器（2）Chrome浏览器（3）Firefox浏览器（4）Safari浏览器（5）Opera浏览器

2.网页编辑器

（1）Adobe Dreamweaver。是一款所见即所得的网页编辑器

（2）Sublime Text。的界面布局非常有特色

（3）NotePad++。非常适合计算机程序的编辑器

（4）EditPlus。具有完成功能

（5）HBuilder。主要用于开发HTML，JS和CSS，同时配合HTML和后端脚本语言适用

3.切图软件

切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改处理。

1.5HTML语法基础

1.5.1HTML概述

（1）语言。有指定的语法规则

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

（3）标记。双标签两大类：

单标签指的是只存在一个标签的写法

双标签指的是存在一对标签的写法

1.5.2HTML基本结构

主体（body）：<body>标签内包含了所有实际显示在网页上的内容，如文本、图像、视频等。这是用户与网页交互的主要部分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我的第一个网页
	</body>
</html>

1.6创建HTML文档

使用任何文本编辑器（如VS Code、Sublime Text、Notepad++等）来编写HTML代码。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		我的第一个网页
		23软件技术3班
	</body>
</html>

1.7网页头部标签

1.7.1 < title>标签

<title>标签用于设置HTML页面的标题，也就是为网页取一个名称。在网页结构中，<title>标签必须位于<head>标签内，且一个HTML文档只能含有一个<title>标签。

1.7.2 <meta> 标签

（1）keywords 用来告诉引擎网页使用的关键字

（2）description 用来告诉搜索引擎网站主要的内容

1.7.3 <link>标签

链接外部样式表：定义网页的外观和布局。使用外部样式表以保持代码整洁和易于维护。

显示网站图标：在浏览器标签和书签栏中显示，提升品牌识别度。

1.7.4 <script>标签

外部脚本：链接到外部JavaScript文件，保持代码整洁和易于维护。<script>标签用于定义客户端脚本，如JavaScript。<script>元素既可包含脚本语句，也可以通过src属性指向外部脚本文件。

内嵌脚本：直接在HTML中编写JavaScript。小段脚本或测试代码可以直接内嵌。

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

注释标签用于在源文档中插入注释。注释会被浏览器忽略，但有助于自己和别人在以后对代码的编辑和理解。注释的基本结构是。

1.8.2 特殊符号

由于大于号“>" 和小于号 "<" 等以作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。

1.9综合案例——临江山. 送钱穆夫

<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="宋词，苏轼"charset="utf-8" />
		<meta name="description" cotent="本网站收录精选宋词" />
		<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">网页制作教程Ccpyrigh&copy;广东南方职业学院</p>
	</body>
</html>