1.1 认识网页和网站
1.网页和网站以及重要常用术语
网页和网站的区别：网页是由HTML编写，通过WWW网传输：功能主要展示信息
网站是由多个网页的集合；功能多样化，能进行用户的交互
重要常用术语：URL
2.静态和动态网页
静态网页和动态网页的区别
静态网页 HLML和CSS 特点：不加处理，事先做好
动态网页 HLML和CSS 和JavaScript 特点：运用动态网站技术，可以进行用户互动
1.2 网页的基本构成元素
1.文本 体积小，网络传输快，方便浏览和下载
2.图片和动画 生动直观，传递一些文本不能表达的信息 图片格式（GIF,JPEG,PNG）
3.超链接 从一个网页到另一个目的端的链接，从一个位置到另一个位置
4.音频和视频 音频格式mid和MP3，压缩快。 视频格式flv。加载快
5.交互表单 收集用户的信息，进行用户的交互
6.其他元素 点缀网页，活泼有趣
1.3 页面布局结构
1.网页页面布局
2.网页色彩搭配
网页安全色是红色，绿色，蓝色
1.4 web前端开发技术简介
1.web前端开发的三大核心技术
HTML 制作网页的标准语言。
CSS 修饰网页，处理色彩
JavaScript语言 使网页更生动，提供动态功能，更流畅美观
2.web前端开发工具
浏览器 IE浏览器，Chrome浏览器，Firefox浏览器
网页编辑器 Dreamweaver，HBuilder
切图软件 Photshop
1.5-1.6 HTML语法，结构，创建
1.HTML 概述
语言，超文本（图片，超链接，音乐，程序等），标记 （划分网页的元素）
2.HTML 基本结构
<!DOCTYPE html>
<html> 标签（html） <html> 文档内容</html>
<head> 头部(head) <head>头部内容</head>
<meta charset="utf-8" /> 编码 <meta charset="utf-8" />
<title></title>
</head>
<body> 主体（body） <body>网页内容 </body>
</body>
</html>
3.创建HTML文档
1.7 网页头部标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=" 加关键词 "/> //<meta>元信息标签，单标签
<meta name="description" content=" 加描述内容 " />
//keywords(关键词) 用来搜索关键词
description（网站内容描述） 用来搜索网站主要内容
<link ref="stylesheet" href="/外部样式表文件名.css" type="text/css"/>
//<link>标签 用来连接css文件和当前文档
<script type="text/javascript" src="脚本文件名.js"></script>
//<script> 脚本标签 用来引用js文件
<title>加标题</title> //标题标签
</head>
<body>
<p>由head和body标记组成</p> //分行
内容
<h3> 加标题</h3> //标题
<a href="http://www.baidu.cn">百度</a>
</body>
</html>
1.8HTML文档注释和特殊符号
1.注释
单行注释 <!--加注释内容-->
多行注释 <!--加注释内容第一行
第二行 -->
2.常用特殊符号
1.9 综合案例————临江仙·送钱穆父
<!--综合案例-->
<!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 >
<!--使用<br/>的效果-->
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井，有节 是秋筠。<br/>
惆怅孤帆连夜发，送行淡月微云。<br/>
尊前不用翠眉颦。<br/>
<font color="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p >
<!--水平线-->
<img src="img/1.1.jpg"/>
<hr size="2" color="blank" width="100%" />
<p align="center">网页制作教程Conyright©@lin</p >
</body>
</html>
效果图
