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

最新推荐文章于 2024-10-05 10:13:36 发布

2402_83970805

最新推荐文章于 2024-10-05 10:13:36 发布

阅读量691

点赞数 26

文章标签：笔记

本文链接：https://blog.csdn.net/2402_83970805/article/details/142052735

版权

1.1认识网页和网站

1.1.1网页和网站的区别

网页是由HTML编写，通过www网传播，网站是多个网页的集合

2.常用术语

1.URL：统一资源定位符

2.HTTP：超文本协议

3.FTP：文件传输协议

1.1.2静态网页和动态网页

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

1.2网页的基本构成元素

一般网站的首页包含常见的网页元素，导航栏，广告动画，图片交互表单，文本，超链接等。

1.3页面布局结构

1.网页页面布局:共有四种分为国字型，厂字型，海报型，flash型

2.网页的色彩搭配：网页的安全色是红色，绿色，蓝色，常见的颜色搭配有采用相近色配色和采用近似色配色，颜色值表达的常见方式是十六进制。

1.4web前端技术简介

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

1.HTML：HTML是制作网页的标准语言

2.CSS语言：CSS是一种表现HTML或xml等文件样式的计算机语言

3.javascript:是一种属于网络的脚本语言，广泛用于web开发

1.4.3web前端开发工具

1.浏览器

2.网页编译器

3.切图软件

1.5html语法基础

1.5.1HTML概述


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

1.语言：HTML作为一种超文本标记语言，有指定的语法规则

2.超文本：超文本是可以加入声音，图片，动画，影视等内容的文本

3.标记：HTML5文件是由一系列成对出现的元素标签嵌套组合而成

1.5.2HTML基本结构

HTML文档是由一系列的元素和标签组成，元素名不区分大小写。

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

2.html文档头标签<head>...</head>

3.文档编码

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

1.6创建HTML文档

1.使用hbuilder新建项目

2.创建项目名称

3.打开项目的文件夹

4.可以编写代码了

5.在“创建文件导向”对话框，选择好文件所在目录，并为文件命名。

1.7网页头部标签

1.7.1<title>标签

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

1.7.2<meta>标签

1.keywords用来告诉搜索引擎网页使用的关键字
2.description用来告诉搜索引擎网站的主要内容

1.7.3<link>标签

1.7.4<script>标签

1.8html5文档注释和特殊符号

1.8.1注释

HTML使用<! --...-->标签为文档进行注释，注释标签以“"结束，中间的替换为注释文字内容即可

1.8.2特殊符号

由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以“&”开头，以“；”结束

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

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