(1.6有基础操作案例，可供参考)
1.1 认识网页网站
1.1.1 网页、网站
1.1.1.1含义
网页是单页文档，其网址类似于“网站”。
网站是由多个网页组成的群集，这些网页在单个域中相互链接。
1.1.1.2网页和网站的区别
网页比网站更易于使用，因为它是一个页面，并且没有群集，而网站更加复杂，因为它们由多个网页组成。
1.1.1.3 常用术语
* 统一资源定位符（URL）：是指定在互联网上可以找到资源的位置的文本字符串。
*文件传输协议（File Transfer Protocol，FTP）是一种在网络中进行文件传输的广泛使用的标准协议。作为网络通信中的基础工具，FTP允许用户通过客户端软件与服务器进行交互，实现文件的上传、下载和其他文件操作。
*超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。 (1)通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。 (2)链接的标志有文字和图形两种。 可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。
1.1.2静态网页和动态网页
静态网页（HTML、CSS）
静态页面是一种网页，其内容在服务器上预先生成，并在用户请求时以完全相同的形式发送到用户的浏览器。这意味着每个用户访问静态页面时都看到相同的内容，因为页面内容不会根据用户的特定需求或输入而改变。
动态网页（javaScript）
动态网页是一个对所有动态生成与动态更新的网页的统称。与传统的静态网页相反，它会因为变量的改变而产生不同的网页。这既可能是服务器端生成的网页，也可能是用户端生成的网页，或是两者的混合。
一个网站里面可以同时包含动态网页和静态网页，也可以只包含动态网页或静态网页
1.2 网页的基本构成元素
1.2.1.文本
文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是网页中最主要的信息载体。
1.2.2.图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。
1.2.3.超链接
*超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。
(1)通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。
(2)链接的标志有文字和图形两种。 可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。
1.2.4.音频视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于Flash MX 的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
1.2.5.交互表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。（1）这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。（2）表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
1.2.6.其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、 JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 页面布局结构
1.3.1 网页页面布局
1.3.2 网页色彩搭配
(1)网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。
网页安全色是红色、绿色和蓝色。当颜色数字信号值为0，51,102,153,204和255 时，构成的颜色组合一共有216种颜色。
(2)网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。
十六进制是计算机中数据的一种表示方法，由数字0~9和字母A~F组成，字母不区分大小写。 颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”,如# OE533D。还可通RGB，HSB,Lab和CMYK来进行表示。
(3)常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色:在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。
1.4 Web前端技术简介
1.4.1 初识WEB前端
Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。
1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee,启动了世界上第一个可以正式访问的网站(http://ino.cerm.ch),标志着万维网时代的到来。
早期的前端其实就是Tabel布局，后来发展到Div +CSS网站重构，再到JavaScript逐渐成为Web前端开发的语言以及Web2.0的出现，每个阶段都涌现出相应的产品，如 SNS、 博客、微博等。
1.4.2 WEB前端开发的三大核心技术
1. HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐、 程序等非文字元素。
2.CsS语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。
3.JavaScript语言
JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
1.4.3 前端开发工具
1.浏览器
浏览器是网页的运行平台，是可以把HTML文件展示在其中，供用户进行浏览的一种软件。目前主流的浏览器有IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器和Opera 浏览器等。
2.网页编辑器
HTML,CSS和JavaScript源代码文件均为纯文本内容，用计算机操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。常用的网页开发工具软件:Adobe Dreamweaver,Sublime Text,NotePad++,EditPlus和HBuilder。
3.切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。
1.5 HTML语法基础
1.5.1 HTML概述
HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。
1.5.1.1 语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
1.5.1.2 超文本
超文本是可以加入图片、声音、动画、影视等内容的文本。
1.5.1.3 标记
HTML5实际上不算是一种编程语言，而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。
标签分为单标签和双标签两大类:
单标签指的是只存在一个标签的写法，如<meta><input>等。
双标签指的是存在一对标签的写法，如<head></head>,<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/"。
1.5.2 HTML基本结构
(1).HTML文档标签<html>...</html>
HTML文档标签的格式为:
<html>HTML文档的内容</htmls >
<html>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到
遇到</html>结束。
(2).HTML文档头标签<head...</head>
HTML文档包括头部(head)和主体(body)。
HTML文档头标签的格式为:
<head>头部的内容</head>
文档头部内容在开始标签<html>和结束标签</html>
(3).文档编码
文档编码格式如下:
<meta charset-"utf-8"/>
为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。
(4).HTML文档主体标签<body>...</body>
HTML文档主体标签的格式为:
<body>网页的内容</body>
主体位于头部以后，以<body>为开始标签，</body>为结束标签。
1.6 创建HTML文档
方法一：直接点击新建项目
方法二：点击左上角的新建——点击项目
注意：选择普通项目 ——命名项目名——选择基本HTML项目——点击创建
1.6.1 HTML案例
我们可以在body里面编辑——我的第一个网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
我的第一个网页
小沐在努力
</body>
</html>
注意：一定要先保存——点击运行——运行到浏览器——Chrome（选择谷歌浏览器）
效果图：
大家发现没有，我的两行字挤在一行,那要怎样解决这个问题呢？
1.6.1.1 <p>：标签定义段落
p元素会自动在其前后创建空白
用法：<p>....</p>
<body>
<p>我的第一个网页</p>
<p>小沐在努力</p>
</body>效果图：
1.7 网页头部标签
在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词
链接的CSS样式文件和客户端的JavaScript脚本文件等。
1.7.1 <title>标签
<title>标签是页面标题标签。
<title>标签位于<bead>与</head>中，用于标示文档标题，格式如下:
<inle>标题<itle>
代码如下：
<title>第一个网页</title>
<!--页面标题标签-->效果图：
1.7.2 <meta>标签
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
<meta>标签的name属性的语法:
<meta name="参数" content="参数值">
name属性主要用于描述网页摘要信息，与之对应的属性值为content.content中的内容
主要是便于搜索引擎查找信息和分类信息用。
name属性主要有以下两个参数:keywords(关键字)和 description (网站内容描述)。
1.7.2.1 keywords
keywords用来告诉搜索引擎网页使用的关键字。
<meta name="keywords" content="参数"/>
<!--关键字-->
1.7.2.2 description
description用来告诉搜索引擎网站主要的内容。
<meta name="description" content="参数"/>
<!--网站内容描述-->
1.7.3 <link>标签
<link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中， 通常用于连接外部样式表。
格式如下:
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
<!--链接CSS样式文件-->
1.7.4 <script>标签
<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。
格式如下:
<script type="text/javascript" src="js/index.js"></script>
<!--脚本标签-->1.8 HTML5文档注释和特殊符号
1.8.1 注释
HTML5使用<!--...-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“...”替换为注释文字内容即可。<!--...-->标签支持单行和多行注释。
1.8.2 特殊符号
特殊符号 字符实体 实例 空格 银河商务 热线：400-111-1111 大于(>) > 3>2 小于(<) < 2<3 引号(") " 版权号 © Copyright©网页设计教程
1.9 综合案例——临江仙 · 送钱穆父
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="宋词，苏轼"/>
<!--关键字-->
<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>
<!--使用<br/>的效果-->
<p>一别都门三改火，天涯踏尽红尘。<br />
依然一笑作春温。<br />
无波真古井，有节是秋筠。<br />
惆怅孤帆连夜发，送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
<img src="D:\HB练习\小项目\img\1.jpg"/>
<!--引号里面是图片的路径（1.jpg是图片的名字和类型）-->
<hr size="2" color="black" width="100%"/>
<p align='2'>网页制作教程 Copyright©小沐在学习</p>
</body>
</html>
效果图：
扫一扫
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
