三组概念

客户端、服务器端

客户端：用来访问服务器的计算机（后面还会细化这个概念）

服务器端：用来存放数据的计算机

在WEB（网页）技术中，客户端和服务器端的通讯是通过http协议进行的

网页的执行过程

客户端给服务器发送一个请求，服务器将代码（HTML,CSS,JS）到送到客户端，这些代码通过浏览器解析执行，就形成了我们看到界面。

浏览器（浏览器的种类，浏览器的内核）

浏览器就是一个软件，这个软件用来解析服务器发送到客户端的代码。

浏览器的种类：

1、IE（微软公司）

2、火狐（firefox）

3、Chrome（谷歌）

4、Opera

5、Safari（苹果）

浏览器的内核：浏览器中的核心代码，360的核心代码就是ie

文件名、基本名、扩展名

文件名由基本名和扩展名组成，比如face.jpg，文件名：face.jpg文件基本名face，扩展名是jpg

扩展名：扩展名是表示文件的类别

Jpg：图片

Txt:文本

Doc：word文档

HTML介绍

什么是HTML

HyperText Mark-up Language（超文本标记语言）

HTML的作用

HTML是组成服务器发送到客户端内容的一门语言，

HTML：做网页页面结构的

查看网页的HTML

IE浏览器——查看——源

站点介绍

一个网站有很多网页页面组成，还有图片等等资源，我们为了便于管理，要将这些资源放到一个文件夹下，这个文件夹就叫站点

做网站的第一步想建站点。

站点就是文件夹。

HTML语言的规则

1. 所有的标记都要放在<>里面
2. 大部分标记成对出现
3. 语法：<标记> </标记>
4. HTML语言不区分大小写

多学一招：虽然HTML不区分大小写，但是W3C（万维网联盟）定义了一套标准，在这套标准中建议区分大小写。

World Wide Web Consortium ——（wwwc）——（3wc）——（w3c）

其中与我们有关的标准

1. 区分大小写
2. 所有的标记都成对出现

网页的基本框架

<html>：表示HTML页面的开始

<head>：页面的头

<body>：页面的身体

<title>：页面的标题

第一个网页

网页的扩展名是html或htm

第一步：创建站点文件夹

第二步：在站点文件夹中，右键—创建记事本

第三步：打开记事本，写入HTML框架结构

第四步：将扩展名改成html

第五步：双击打开此文件，默认通过浏览器打开，浏览器打开此页面的时候就会执行页面中的HTML代码，解析后就会生成我们的看到的界面

脚下留心：HTML语言是不认空格，不认回车。也就说HTML语言对空白字符不敏感。

脚下留心：右键创建文件的时候如果看不到文件的扩展名，肯定是扩展名被隐藏了，我们更改设置将扩展名显示出来即可。

Window宽口——查看——文件扩展名

注释

在代码中我们需要对代码进行备注，以便于多个程序员之间的交流和后期的文件更改。

语法：<!– 注释的内容 –>

浏览器不执行注释中的内容

常见的标记

1. 排版标记
   1. <p></p> ：段落，排版标签
   2. <br>：换行

注意一下换段和换行的区别

• 1. <hr>：水平线

1. 字体标记
   1. <b>：粗体
   2. <i>：斜体
   3. <u>：下划线

1. 强调标记
   1. <strong>：强调标记，通过加粗来强调
   2. <em>：强调标记，通过倾斜来强调
   3. <ins>：强调标记，通过下划线来强调

脚下留心：<b>和<strong>，<i>和<em>，<u>和<ins>外表看是一样的，但是他们的含义是有区别的，<b><i><u>表示是字体，<strong>，<em>,<ins>表示强调。推荐使用强调标记，从SEO（搜索引擎优化）的角度来说，强调标记的权重会更高。

1. 上标（sup）、下标（sub）

p：top b:bottom

1. 预格式化文本<pre>

标记的分类

HTML标记分成两类：

1. 成对出现，我们称为容器标记，也叫围堵标记，也叫双标记
2. 不成对出现：称为空标记，也叫单标记

属性

1. 一个标签就是一个对象，每个对象都有自己的属性（特性）
2. 一个对象可以有多个属性
3. 每个属性都有对应的值，属性值要用单引号或者双引号引起来。
4. 属性和属性之间用空格分开
5. 属性是没有顺序的

使用属性

<标签 属性=’属性的值’ 属性=’属性的值’> </标签>

编辑器介绍

1. dreamweaver
   1. 优点：写HTML和CSS比较方便
   2. 缺点：体积大，打开速度稍微优点慢，需要花钱买

1. editplus：
   1. 优点：体积小，打开速度快，开源
   2. 缺点：提示需要自己去配置

1. Sublime，写JS很方便
   1. 优点:体积小，打开速度快，开源，有提示

1. Netbeans和PHPstrom：对PHP提示比较好

上面5个工具，在后面学习中会一一带大家使用，在HTML+CSS阶段我们学习DW。

Dreamweaver介绍

在使用DW软件来管理文件的时候，需要建立软件和站点文件夹的关联

在DW中新建站点

在DW中新建站点是创建的软件和文件夹的关联

思考一：dw是否可以创建多个站点（多个关联）

答：可以

思考二：删除DW站点的时候会不会将文件夹中的文件删除？

答：不会，只是删除的是软件和文件夹的关联。

DW的使用

打开DW软件——点击HTML——在代码模式中写代码

多学一招：DW中F12是预览的快捷键

滚动文字的设置

<marquee direction=”right” scrollamount=”20″ width=”300″ onmouseover=”stop()” onmouseout=”start()”>锄禾日当午</marquee>

direction：方向

up:上 down：下 left：左 right：右

scroll：滚动 amount：数值

width：宽度 height：高度

onmouseover：当鼠标移上去

onmouseout：当鼠标离开

stop()：停止

start()：开始

路径

绝对路径：c:\face.txt

相对路径：相对于当前的文件的地址

例题一：

例题二：

例题三：

思考：../是表示上一级目录，那么../../表示什么？

答：表示上一级目录的上一级目录，也就是上两级目录

超链接

所有的超链接都是<a>标记

内部链接

在同一个站点内页面之间的链接

target：目标

blank：空白的

注意：要掌握a标记的href,target,title属性

外部链接

跳转到其他网站的链接称为外部链接

空链接

有链接的样子，但是没有链接的地址

下载链接

当链接一个浏览器无法打开的文件时，就会自动出现下载界面。

锚点链接

就像用轮船的锚将两个点链接起来。

第一步：在需要跳转的地方添加一个锚点

id:是唯一的编号，每一个标签都有id属性，因为ID号是唯一的编号，所以不能重复。

第二步：点击超链接，跳转到指定的锚点处（id）

注意：#表示id

作业

跳转到其他页面的指定锚点处

客户端、服务器端

客户端：用来访问服务器的计算机（后面还会细化这个概念）

服务器端：用来存放数据的计算机

在WEB（网页）技术中，客户端和服务器端的通讯是通过http协议进行的

网页的执行过程

客户端给服务器发送一个请求，服务器将代码（HTML,CSS,JS）到送到客户端，这些代码通过浏览器解析执行，就形成了我们看到界面。

浏览器（浏览器的种类，浏览器的内核）

浏览器就是一个软件，这个软件用来解析服务器发送到客户端的代码。

浏览器的种类：

1、IE（微软公司）

2、火狐（firefox）

3、Chrome（谷歌）

4、Opera

5、Safari（苹果）

浏览器的内核：浏览器中的核心代码，360的核心代码就是ie

文件名、基本名、扩展名

文件名由基本名和扩展名组成，比如face.jpg，文件名：face.jpg文件基本名face，扩展名是jpg

扩展名：扩展名是表示文件的类别

Jpg：图片

Txt:文本

Doc：word文档

HTML介绍

什么是HTML

HyperText Mark-up Language（超文本标记语言）

HTML的作用

HTML是组成服务器发送到客户端内容的一门语言，

HTML：做网页页面结构的

查看网页的HTML

IE浏览器——查看——源

站点介绍

一个网站有很多网页页面组成，还有图片等等资源，我们为了便于管理，要将这些资源放到一个文件夹下，这个文件夹就叫站点

做网站的第一步想建站点。

站点就是文件夹。

HTML语言的规则

1. 所有的标记都要放在<>里面
2. 大部分标记成对出现
3. 语法：<标记> </标记>
4. HTML语言不区分大小写

多学一招：虽然HTML不区分大小写，但是W3C（万维网联盟）定义了一套标准，在这套标准中建议区分大小写。

World Wide Web Consortium ——（wwwc）——（3wc）——（w3c）

其中与我们有关的标准

1. 区分大小写
2. 所有的标记都成对出现

网页的基本框架

<html>：表示HTML页面的开始

<head>：页面的头

<body>：页面的身体

<title>：页面的标题

第一个网页

网页的扩展名是html或htm

第一步：创建站点文件夹

第二步：在站点文件夹中，右键—创建记事本

第三步：打开记事本，写入HTML框架结构

第四步：将扩展名改成html

第五步：双击打开此文件，默认通过浏览器打开，浏览器打开此页面的时候就会执行页面中的HTML代码，解析后就会生成我们的看到的界面

脚下留心：HTML语言是不认空格，不认回车。也就说HTML语言对空白字符不敏感。

脚下留心：右键创建文件的时候如果看不到文件的扩展名，肯定是扩展名被隐藏了，我们更改设置将扩展名显示出来即可。

Window宽口——查看——文件扩展名

注释

在代码中我们需要对代码进行备注，以便于多个程序员之间的交流和后期的文件更改。

语法：<!– 注释的内容 –>

浏览器不执行注释中的内容

常见的标记

1. 排版标记
   1. <p></p> ：段落，排版标签
   2. <br>：换行

注意一下换段和换行的区别

• 1. <hr>：水平线

1. 字体标记
   1. <b>：粗体
   2. <i>：斜体
   3. <u>：下划线

1. 强调标记
   1. <strong>：强调标记，通过加粗来强调
   2. <em>：强调标记，通过倾斜来强调
   3. <ins>：强调标记，通过下划线来强调

脚下留心：<b>和<strong>，<i>和<em>，<u>和<ins>外表看是一样的，但是他们的含义是有区别的，<b><i><u>表示是字体，<strong>，<em>,<ins>表示强调。推荐使用强调标记，从SEO（搜索引擎优化）的角度来说，强调标记的权重会更高。

1. 上标（sup）、下标（sub）

p：top b:bottom

1. 预格式化文本<pre>

标记的分类

HTML标记分成两类：

1. 成对出现，我们称为容器标记，也叫围堵标记，也叫双标记
2. 不成对出现：称为空标记，也叫单标记

属性

1. 一个标签就是一个对象，每个对象都有自己的属性（特性）
2. 一个对象可以有多个属性
3. 每个属性都有对应的值，属性值要用单引号或者双引号引起来。
4. 属性和属性之间用空格分开
5. 属性是没有顺序的

使用属性

<标签 属性=’属性的值’ 属性=’属性的值’> </标签>

编辑器介绍

1. dreamweaver
   1. 优点：写HTML和CSS比较方便
   2. 缺点：体积大，打开速度稍微优点慢，需要花钱买

1. editplus：
   1. 优点：体积小，打开速度快，开源
   2. 缺点：提示需要自己去配置

1. Sublime，写JS很方便
   1. 优点:体积小，打开速度快，开源，有提示

1. Netbeans和PHPstrom：对PHP提示比较好

上面5个工具，在后面学习中会一一带大家使用，在HTML+CSS阶段我们学习DW。

Dreamweaver介绍

在使用DW软件来管理文件的时候，需要建立软件和站点文件夹的关联

在DW中新建站点

在DW中新建站点是创建的软件和文件夹的关联

思考一：dw是否可以创建多个站点（多个关联）

答：可以

思考二：删除DW站点的时候会不会将文件夹中的文件删除？

答：不会，只是删除的是软件和文件夹的关联。

DW的使用

打开DW软件——点击HTML——在代码模式中写代码

多学一招：DW中F12是预览的快捷键

滚动文字的设置

<marquee direction=”right” scrollamount=”20″ width=”300″ onmouseover=”stop()” onmouseout=”start()”>锄禾日当午</marquee>

direction：方向

up:上 down：下 left：左 right：右

scroll：滚动 amount：数值

width：宽度 height：高度

onmouseover：当鼠标移上去

onmouseout：当鼠标离开

stop()：停止

start()：开始

路径

绝对路径：c:\face.txt

相对路径：相对于当前的文件的地址

例题一：

例题二：

例题三：

思考：../是表示上一级目录，那么../../表示什么？

答：表示上一级目录的上一级目录，也就是上两级目录

超链接

所有的超链接都是<a>标记

内部链接

在同一个站点内页面之间的链接

target：目标

blank：空白的

注意：要掌握a标记的href,target,title属性

外部链接

跳转到其他网站的链接称为外部链接

空链接

有链接的样子，但是没有链接的地址

下载链接

当链接一个浏览器无法打开的文件时，就会自动出现下载界面。

锚点链接

就像用轮船的锚将两个点链接起来。

第一步：在需要跳转的地方添加一个锚点

id:是唯一的编号，每一个标签都有id属性，因为ID号是唯一的编号，所以不能重复。

第二步：点击超链接，跳转到指定的锚点处（id）

注意：#表示id