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

最新推荐文章于 2024-11-15 14:49:42 发布

花海少爷

最新推荐文章于 2024-11-15 14:49:42 发布

阅读量805

点赞数 35

分类专栏：教程大二网页设计笔记花海少爷文章标签： html5

本文链接：https://blog.csdn.net/2402_83287175/article/details/142077957

版权

教程同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

大二网页设计笔记

1 篇文章 0 订阅

订阅专栏

花海少爷

1 篇文章 0 订阅

订阅专栏

1.1 认识网页和网站

网页和网站的区别:网站包含网页但是网页与网站有着很大的区别网站内还有包含网页以外的其他东西.(例如:服务器数据库等) 但网站和网页不为总分关系,网页只是单独的一页.

常用术语:

Internet 因特网

www 万维网

web 首页

HTMY 俗称电脑

Hypertext 超文本(内涵超链接的网页)

IP 国际协议

URL 统一资源定位符,指定通信协议和地址

域名指网站名称在全世界是唯一的.

HTTP 超文本传输协议

FTP 文件传输协议

发布指将制做好的网页传到网络上的过程,也称为上传网站.

站点 ;一个站点就是一个网站所有内容所存放的文件夹

超链接: 从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,可以是相同网页的不同位置也可以是一个图片,一个图片,一个电子邮件等.

客户机和服务器: 客户端和服务端

1.1.2 静态网页和动态网页

三大核心技术:HTML CSS (静态网页) JavaScript(网页加上JavaScript才能成为动态网页)

1.2 网页的基本构成元素

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

1.3页面布局结构

1.1.3网页页面布局

1.3.2 网页色彩搭配

网页安全色:在不同硬件环境,不同系统,不同浏览器中都能够正常显示的颜色集合

网页色彩的表达 :在网页设计中,颜色值通常的表达方式是十六进制

常见色彩搭配:相近色配色与近似色配色

1.4 Web前端技术简介

1.4.1初识Web前端

Web前端是干什么的？ - 知乎 (zhihu.com)

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

web前端三大核心技术_csdn 根据w3c标准,一个网页主要由三部分组成:结构、表现还有行为。-CSDN博客

1.4.3 前端开发工具

1 浏览器 : 网页运行平台 eg:IE浏览器 Chrome浏览器 Firefox浏览器 Safari 浏览器 Opera 浏览器等

2 网页编译器: 打开和编辑网页源代码的工具,eg: Adobe Dreamweaver编译器 Sublime Text编译器 NotePad++编译器 EditPlus编译器 HBuilder编译器等

3 切图软件 : 处理图片的软件 eg:Photoshop和Fireworks两种.

1.5 HTML语法基础

HTML是制作网页的基础语言,是初学者必学的内容.

1.5.1 HTML概述

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

1.5.1.1 语言

HTML作为一种超文本标记语言,有指定的语言规则,超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作.协议的制定使浏览器在运行超文本时有了系统的唯一的规则和标准.用HTML编写的超文本文档为HTML文档,他能独立与各种操作系统平台.自1990年以来HTML就一直被用作www的信息表示语言,使用HTML描述的的文件,需要通过Web浏览器HTTP显示出效果.

1.5.1.2 超文本

超文本是可以加入图片,声音,动画,影视等内容的文本.事实上每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,它只是一种排版网页中资料显示位置标记的结构语言,简单且易学易懂.

1.5.1.3 标记

HTML5实际上不算一种编程语言,而是一种标记语言.

1.5.2 HTML基本结构

HTML文档标签格式为<html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML第一节代码</title>
</head>
<body>
我的第一个网页
2023软件一班
</body>
</html>

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

1.5.2.2 HTML 文档头标签<head>...</head>

1.5.2.3 文档编码

文档编码格式如下:

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

1.6 创建HTML文档

1 首先老样子左上角文件新建

2 选择项目点击普通项目轻击创建

1.7 网页头部标签

在网页的头部中,通常存放一些介绍页面内容的信息.

1.7.1 <title>标签

<title>标签是页面标题标签 .它将是HTML文件的标题显示在浏览器的标题栏中,用以说明文件的用途.这个标签只能应用于<head>与</head>之间.<title>标签是对文件内容的概括.一个好的标题能使读者从中判断出该文件的大概内容.

1.7.2<meta>标签

<meat>标签是元信息标签,在HTML中是一个单标签.该标签可重复出现在头部标签中,用来指明本页的作者.制作工具.所包含的关键字,以及其他一些描述网页的信息.

1.7.2.1 keywords

keywords用来告诉搜索引擎网页使用的关键字.

1.7.2.2 description

description用来告诉搜索引擎网站主要内容.

1.7.3<link>标签

1.7.4 <script>标签

1.8 HTML5 文档注释和特殊符号

1.8.1 注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用标签为文档进行注释，注释标签以“”结束，中间的“…”替换为注释文字内容即可。标签支持单行和多行注释。

1.8.2 特殊符号

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

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

以一首宋词为例子，参照给定的 HIL代码和图片资源，利用HBuilder 设计 Web网页在编写时要遵守 HIL代码的编写规范，并养成良好的编码习惯。
以下为完整代码，以供参考。

<!--综合案例-->
<!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 >
		<!--水平线-->
		<hr size="2" color="blank" width="100%" />
		<p align="center">网页制作教程Conyright&copy;@花海少爷</p >
		<img src="img/3b24ad3b44b25937952906df784cd4a.jpg">
	</body>
</html>