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

于 2024-09-11 15:20:18 发布

文章标签： html5 javascript css

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

21
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
第一章网页制作的基础知识

<meta name="keywords" content="宋词,苏轼" charset="utf-8"/><meta name="description" content="本网站收录精选诗词"/><title>宋词精选</title>p{</style>宋苏轼
复制链接

扫一扫

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

1.1 认识网页和网站

1.1.1 网页、网站及常用术语

1.1.2 静态网页和动态网页

静态网页: 通常由纯粹的HTML/CSS语言编写。 动态网页：只要采用动态网站技术生成的网页

1.2 网页的基本构成元素

1.2.1 文本

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

1.2.2 图片和动画

1.2.3 超链接

1.2.4 音频视频

1.2.5 交互表单

1.2.6 其他常见元素

网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按1wscp与AeiveX等各种特效，它们不仅能点级网页，使网页更活泼有趣，还在网上乐、电子商务等方面也有着不可忽视的作用。

1.3 页面布局结构

1.3.1 网页页面布局

在网页设计中，结构布局是根据设计元素在网页中的位置分布进行分类的。常见的结构布局包括“国”字型、“厂”字型、海报型和 ash 型等，如图所示。

1.3.2 网页色彩搭配

1.4 Web前端技术简介

1.4.1 初识WEB前端

web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等是在浏览网页。

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

Web前端开发所包括的三大核心技术:HTML、CSS语言和JavaScript语言。

1. HTML

2. CSS语言

3. JavaScript语言

Javascript是一种属于网络的脚本语言,Javascript脚本通过嵌人在HTML,中的方式来实现自身的功能。

1.4.3 前端开发工具

在HTML+CSS开发过程中，需要先来选择适合的相关开发工具。HTML+CSS开发过程中主要涉及三大类工具:浏览器、网页编辑器和切图软件。

1. 浏览器

浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有正浏览器、Chrome浏览器、Firefox浏览器、Safari 浏览器和 Opera浏览器等。

2. 网页编辑器

HTML,CSS,JavaScrip源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。这里介绍几款常用的网页开发工具软件: Adobe Dreamweaver, Sublime Text, NotePad++, EditPlus 和 HBwilder.

3. 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

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

1. 语言

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

2. 超文本

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

3. 标记

注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。

1.5.2 HTML基本结构

HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。

1. HTML 文档标签<htmI>…</html>

HTML文档标签的格式为 <html>HTMl 文档的内容</html>

<html>处于文档的最前面，表示 HTML,文档的开始，即浏览器从<html>开始解释，直到</html>为止。每个 HTML 文档均以<html>开始，以</html>结束。

2. HTML 文档头标签<head>…</head>

HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为 <head>头部的内容</head>文档头部内容在开始标签<html>和结束标签</html>

3. 文档编码

格式如下 <meta charset="utf-8"/>

4. HTML 文档主体标签<body>…</body>

HTML文档主体标签的格式为 <body>网页的内容</body> 主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

1.6 网页头部标签

1.6.1 <tile>标签

<tile>标签是页面标题标签。它将HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途。这个标签只能应用于<head>与</head>之间。

<tile>标签位于<head>与</head>中，用于标示文档标题，格式如下, <tile>标題</tile>

1.6.2 <meta>标签

1.6.3 <link>标签

<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中。link 标签最常用的是用来链接 CSS 样式文件,格式如下:

<link rel="stylesheet" href="外部样式表文件名 .css "type=" tex/css”/>

1.6.4 <script>标签

<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文中包含一段客户端脚本程序,可以位于文档中任何位置，但常位于<head>标签内，以便维护。格式如下: <saripttype="tex/css" src="脚本文件名 n.js"></script>

1.7 HTML5文档注释和特殊符号

1.7.1 注释

1.7.2 特殊符号

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

静态网页: 通常由纯粹的HTML/CSS语言编写。
动态网页：只要采用动态网站技术生成的网页

HTML文档主体标签的格式为
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。

<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文中包含一段客户端脚本程序,可以位于文档中任何位置，但常位于<head>标签内，以便维护。格式如下:
<saripttype="tex/css" src="脚本文件名 n.js"></script>