1.1 认识网页和网站
1.1.1网页，网站
网页和网站的区别：网页和网站之间的主要区别在于，网页是 Internet 上唯一 URL 下的单个文档。相反，网站是多个网页的集合，其中有关相关主题或其他主题的信息在域地址下链接在一起。
常用术语：Internet，WWW，浏览器，URL，IP，域名，HTTP，FTP，站点，发表，超链接...
1.1.2 静态网页和动态网页
定义：静态网页是指内容固定不变的网页，通常由HTML、CSS和静态图像组成，不涉及服务器端的脚本处理。
动态网页是指内容可以根据不同用户、时间和请求而变化的网页，通常涉及到服务器端脚本和数据库
静态网页：HTM/CSS
动态网页：JavaScript，ActiFlash
1.2 网页的基本构成元素
1.文本 ：体积小，传输速度快，能够准确的表达信息的内容和含义
2.图片和动画：比文本更加生动和直观主要包括GIF，JPEG，PNG等格式
3.超链接
网页指向另一个目的端
4.音频视频
MP3压缩率高，音质不错背景音乐首选
5.交互表单
接收输入
6.其他常见元素
特效等可以点缀网站
1.3 页面布局结构
1.3.1 网页页面布局
1.3.2 网页色彩搭配
1.4 Web前端技术简介
1.4.1 初识WEB前端
1.4.2 WEB前端开发的三大核心技术
1. HTML
HTML是制作网页的标准语言。“超文本”就是指页面内可以包含图片、超链接、音乐程序等非文字元素。超文本标记语言的结构包括“头部”(Head)和“主体”(Body)两部分，其中“头部”提供关于网页的信息。“主体”提供网页的具体内容。
2. CSS 语言
CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元立置的排版进行像索级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模引式进行编辑的能力。
3.JavaScript 语言
JnaSenpt是一种属于网络的脚本语言，已经被广泛地用于 Web应用开发...
1.4.3 前端开发工具
浏览器和网页编辑器
1.5 HTML语法基础
1.5.1 HTML概述
1.5.1.1 语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统_的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。自1990年以来HTML就一直被用作WWW的信息表示语言，使用HIML描述的文件需要通过Web浏览器HTTP 显示出效果
1.5.1.2 超文本
超文本是可以加人图片、声音、动画、影视等内容的文本。事实上每一个 HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言
1.5.1.3 标记
HTMLS实际上不算是一种编程语言，而是一种标记语言。HTMLS文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的面面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML中每个用作标的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类:
单标然指的是只存在一个标签的写法，如<meta><inpul>等。
双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。
注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标需在左尖括号后添加一个关闭符“/”。
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和Web浏览5个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打eb网页文件，提供查看Web资源的客户端程序。
1.5.2 HTML基本结构
HTML文档是由一系列的元素和标签组成的。元素名不区分大小写，HTML用标签元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对行一些必要的定义，主体部分是文档要显示的信息。
1.5.2.1 HTML文档标签<html>...</html>
HTML文档标签的格式为
<htmI>HTML 文档的内容</huml>
<him>处于文档的最前面，表示HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>每个 HTML文档均以l>开始，tml>结束
1.5.2.2 HTML文档头标签<head>...</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为<head>头部的内客</head>
文档头部内容在开始标签<himl>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。
1.5.2.3 文档编码
<meta charset="utf-8"/>
1.5.2.4 HTML文档主体标签<body>...</body>
<bady>网页内容</bady>
1.6 创建HTML文档
1.7 网页头部标签
1.7.1 <title>标签
页面标题：<title>我的第一个网页</title>
1.7.2 <meta>标签
1. keywords
keyword关键字：网页关键字
<meat name="keywords"content="网页关键字"/>
2 .description
description关键字：描述网站内容
<meat name="keywords"content="网站主要内容"/>
3. <link>标签
链接CSS
<link rel="stylesheet" herf="外部样式表文件名.css"type="text/css"/>
4. <script>标签
链接JS
<scripttype="text/css"src="脚本文件名n.js"></script>
1.8 HTML5文档注释和特殊符号
1 .注释：单行：<!-- 注释内容-->
多行：<!--注释一
注释二
-->
2. 特殊符号
空格，>,<,"",...
1.9 综合案例——临江仙 · 送钱穆父
<! DOCTYPE hml>
<html>
<head>
<meta name="keywords" content="宋词,苏"chanet="u-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><!--使用<br/>的效果-->
<p>一别都门三改火,天涯踏尽红尘。<br />
依然一笑作春温。<br/>
无波真古井,有节是秋筠。<br />
惆怅孤帆连夜发,送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="brown"face="微软雅黑">人生如逆旅,我亦是行人。</font></p>
<img src="img/1.jpg" />
<!--水平线-->
<hr size=" 2" color=" black" width=" 100%"/>
<p align="center">网页制作教程 Copymghi©广东南方职业学院</p>
</body>
</html>