HTML（一）
三组概念
客户端、服务器端
客户端：用来访问服务器的计算机（后面还会细化这个概念）
服务器端：用来存放数据的计算机
在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语言的规则
- 所有的标记都要放在<>里面
- 大部分标记成对出现
- 语法：<标记> </标记>
- HTML语言不区分大小写
多学一招：虽然HTML不区分大小写，但是W3C（万维网联盟）定义了一套标准，在这套标准中建议区分大小写。
World Wide Web Consortium ——（wwwc）——（3wc）——（w3c）
其中与我们有关的标准
- 区分大小写
- 所有的标记都成对出现
网页的基本框架
<html>：表示HTML页面的开始
<head>：页面的头
<body>：页面的身体
<title>：页面的标题
第一个网页
网页的扩展名是html或htm
第一步：创建站点文件夹
第二步：在站点文件夹中，右键—创建记事本
第三步：打开记事本，写入HTML框架结构
第四步：将扩展名改成html
第五步：双击打开此文件，默认通过浏览器打开，浏览器打开此页面的时候就会执行页面中的HTML代码，解析后就会生成我们的看到的界面
脚下留心：HTML语言是不认空格，不认回车。也就说HTML语言对空白字符不敏感。
脚下留心：右键创建文件的时候如果看不到文件的扩展名，肯定是扩展名被隐藏了，我们更改设置将扩展名显示出来即可。
Window宽口——查看——文件扩展名
注释
在代码中我们需要对代码进行备注，以便于多个程序员之间的交流和后期的文件更改。
语法：<!– 注释的内容 –>
浏览器不执行注释中的内容
常见的标记
- 排版标记
- <p></p> ：段落，排版标签
- <br>：换行
注意一下换段和换行的区别
-
- <hr>：水平线
- 字体标记
- <b>：粗体
- <i>：斜体
- <u>：下划线
- 强调标记
- <strong>：强调标记，通过加粗来强调
- <em>：强调标记，通过倾斜来强调
- <ins>：强调标记，通过下划线来强调
脚下留心：<b>和<strong>，<i>和<em>，<u>和<ins>外表看是一样的，但是他们的含义是有区别的，<b><i><u>表示是字体，<strong>，<em>,<ins>表示强调。推荐使用强调标记，从SEO（搜索引擎优化）的角度来说，强调标记的权重会更高。
- 上标（sup）、下标（sub）
p：top b:bottom
- 预格式化文本<pre>
标记的分类
HTML标记分成两类：
- 成对出现，我们称为容器标记，也叫围堵标记，也叫双标记
- 不成对出现：称为空标记，也叫单标记
属性
- 一个标签就是一个对象，每个对象都有自己的属性（特性）
- 一个对象可以有多个属性
- 每个属性都有对应的值，属性值要用单引号或者双引号引起来。
- 属性和属性之间用空格分开
- 属性是没有顺序的
使用属性
<标签 属性=’属性的值’ 属性=’属性的值’> </标签>
编辑器介绍
- dreamweaver
- 优点：写HTML和CSS比较方便
- 缺点：体积大，打开速度稍微优点慢，需要花钱买
- editplus：
- 优点：体积小，打开速度快，开源
- 缺点：提示需要自己去配置
- Sublime，写JS很方便
- 优点:体积小，打开速度快，开源，有提示
- 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语言的规则
- 所有的标记都要放在<>里面
- 大部分标记成对出现
- 语法：<标记> </标记>
- HTML语言不区分大小写
多学一招：虽然HTML不区分大小写，但是W3C（万维网联盟）定义了一套标准，在这套标准中建议区分大小写。
World Wide Web Consortium ——（wwwc）——（3wc）——（w3c）
其中与我们有关的标准
- 区分大小写
- 所有的标记都成对出现
网页的基本框架
<html>：表示HTML页面的开始
<head>：页面的头
<body>：页面的身体
<title>：页面的标题
第一个网页
网页的扩展名是html或htm
第一步：创建站点文件夹
第二步：在站点文件夹中，右键—创建记事本
第三步：打开记事本，写入HTML框架结构
第四步：将扩展名改成html
第五步：双击打开此文件，默认通过浏览器打开，浏览器打开此页面的时候就会执行页面中的HTML代码，解析后就会生成我们的看到的界面
脚下留心：HTML语言是不认空格，不认回车。也就说HTML语言对空白字符不敏感。
脚下留心：右键创建文件的时候如果看不到文件的扩展名，肯定是扩展名被隐藏了，我们更改设置将扩展名显示出来即可。
Window宽口——查看——文件扩展名
注释
在代码中我们需要对代码进行备注，以便于多个程序员之间的交流和后期的文件更改。
语法：<!– 注释的内容 –>
浏览器不执行注释中的内容
常见的标记
- 排版标记
- <p></p> ：段落，排版标签
- <br>：换行
注意一下换段和换行的区别
-
- <hr>：水平线
- 字体标记
- <b>：粗体
- <i>：斜体
- <u>：下划线
- 强调标记
- <strong>：强调标记，通过加粗来强调
- <em>：强调标记，通过倾斜来强调
- <ins>：强调标记，通过下划线来强调
脚下留心：<b>和<strong>，<i>和<em>，<u>和<ins>外表看是一样的，但是他们的含义是有区别的，<b><i><u>表示是字体，<strong>，<em>,<ins>表示强调。推荐使用强调标记，从SEO（搜索引擎优化）的角度来说，强调标记的权重会更高。
- 上标（sup）、下标（sub）
p：top b:bottom
- 预格式化文本<pre>
标记的分类
HTML标记分成两类：
- 成对出现，我们称为容器标记，也叫围堵标记，也叫双标记
- 不成对出现：称为空标记，也叫单标记
属性
- 一个标签就是一个对象，每个对象都有自己的属性（特性）
- 一个对象可以有多个属性
- 每个属性都有对应的值，属性值要用单引号或者双引号引起来。
- 属性和属性之间用空格分开
- 属性是没有顺序的
使用属性
<标签 属性=’属性的值’ 属性=’属性的值’> </标签>
编辑器介绍
- dreamweaver
- 优点：写HTML和CSS比较方便
- 缺点：体积大，打开速度稍微优点慢，需要花钱买
- editplus：
- 优点：体积小，打开速度快，开源
- 缺点：提示需要自己去配置
- Sublime，写JS很方便
- 优点:体积小，打开速度快，开源，有提示
- 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
