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

最新推荐文章于 2024-10-13 17:00:37 发布

吴白白白摆

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量997

点赞数 22

文章标签： html

本文链接：https://blog.csdn.net/2301_81609959/article/details/142079144

版权

1.1 认识网页网站

1.1.1 网页网站

网页和网站的区别：网站是多个网页的集合

常用术语：

URL:指通信协议和地址 http http:// 为超文本传输协议

FTP：文件传输协议

1.1.2 静态网页和动态网页

静态网页：HTML CSS

动态网页：HTML CSS + javaScript

1.2 网页的基本构成元素

1.2.1.文本

特点：体积小，网络传输快网页的主要信息载体

1.2.2.图片和动画

比文本更加生动和直观

1.2.3.超链接

从一个网页指向另一个目的的端链接

1.2.4.音频视频

音频文件可使网页效果多样，其中MP3压缩高，是背景音乐首选

网页中的视频文件一般为flv,文件小，加载速度快

1.2.5.交互表单

表单一般用来收集联系信息，接受用户要求

1.2.6.其他常见元素

悬停按钮，javaScript ，AetiveX

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

网络安全色：红，绿，蓝（十六进制）

常见颜色搭配：

采用相近色配色：相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，

采用近似色配色：在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组

1.4 Web前端技术简介

1.4.1 初识WEB前端

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

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

1.4.2.1 HTML

HTML 是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、
程序等非文字元素。超文本标记语言的结构包括“头部”(Head) 和“主体”(Body)两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。

1.4.2.2 CSS语言

CSS 是一种用来表现 HTML 或 XMI 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。

1.4.2.3 JavaScript语言

JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用于位页面添加各种各样的动态功能。

1.4.3 前端开发工具

1.4.3.1 浏览器

浏览器是网页的运行平台，是可以把 HTMI 文件展示在其中，供用户进行浏览的一种软件。

1.4.3.2 网页编辑器

Html,Css,JavsScrip源代码文件均为纯文本内容，用计算机操作系统自带的字板和记事本工具就可以打开和编辑源代码内容。

1.4.3.3 切图软件

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

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

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

1.5.1.2 超文本

超文本可以加入·

1.5.1.3 标记

HTMIS 文件是由一系列成对出现的元素标签嵌套组合而成的，这些标签用“”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素! 以形成文本的布局文字的格式及五彩定纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分

1.5.2 HTML基本结构

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

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

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

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

HTML. 文档头标签的格式为
<head>头部的内容<head>

1.5.2.3 文档编码

文档编码格式如下：<mela charsel="uf-8"/>

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

HTML 文档主体标签的格式为
<bod>网页的内容</body>

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<title>标签位于<bead>与</head>中，用于标示文档标题，格式：

1.7.2 <meta>标签

1.7.2.1 keywords

keyxords 用来告诉搜索引擎网页使用的关键字。

1.7.2.2 description

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

1.7.3 <link>标签

link 标签最常用的是川来催接(SS 样式文件，格式I下；
<link ="siyleshieeli"href=“外部样式表文件名.css "type="text/css"/>

1.7.4 <script>标签

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

1.8 HTML5文档注释和特殊符号

1.8.1 注释

1.8.2 特殊符号

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

<!—-综合变例-->
<!DOCTIPE html>
<html>
	<head>
		<meta name="keywords" content="宋词，苏轼”charset="utf-8”/>
		<meta name= "descriplion”content=”本网站收录精选宋词">
		<title>宋词精选</title>
		<style type="text/css">
		</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/afcd2fff00e72f0cfda15e98eace5cb.jpg"/>
		<!--水平线-->
		<hr size="2'" color="black'" width=”100%"/>
	</body>
<html>