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