文档库
文档库 最新最全的文档下载
当前位置：文档库 › html笔记

html笔记

Html+css 四天

HTML是什么？

1,HTML是超文本标记语言，主要的用处是做网页，也可以也可以在网页上显示文字，图像，视频，声音。。。

标记=元素如：

蒂姆。伯纳斯—李万维网之父；HTML创始人；W3C创始人；

W3c的介绍：

是一个制定标准的组织（比如给HTML，css,xml,wml，，，制定标准）

Html->xhtml->xml

Xhtml是使html向xml过渡；

Html的运行原理：

Hello.html

Html的运行有两种方式：

Html基本机构：

1.本地运行；

就是直接用浏览器打开；

第二讲：

2.远程访问；要装一个服务器（PHP是要装一个apache）；

如果把服务器放在公网上，那么不在一个局域网中的客户也可以访问到；

（映射文件<花生壳>，把自己的ip映射成公网ip）；

工具：httpWatch.rar

何为协议？

计算机互相通信（网络通信）的规则，ftp:文件传输协议；http:用于网页的协议；

这里我们涉及到http协议，这里我们没有深入讲解；

做服务器：稳定，健壮，安全。和前台做代码的很少有交集；

开发工具：记事本；editplus，vim；ftontpage；dreamweaver；zend studio集成开发环境（挺好，专业的Php开发集成环境）；其他的ide；

Html的基本机构

<元素，属性=”属性值“属性2=”属性值“......>内容

<元素属性=”属性值“/>

说明：1、标记通常是成对出现；

2、单标记

面试：请问后缀html和htm有什么区别？

答：1、如果一个网站有index.html和index.htm默认情况下，优先访问.html这个文件；2、.htm后缀是为了兼容以前的dos系统8.3的命名规范。

W3school教程（下载）

Demo.htm:

横看成岭侧成峰//加粗
//换行

远近高低各不同
//颜色

不识庐山真面目
//size值在1-7之间，再大就要用ＣＳＳ

//不识庐山真面目’

这是一个段落

表头

第三讲

Html符号实体

用来显示一些特殊的符号

用语句：版权符号©

 表示空格（用全角空格也行）；

说明：当我们在网页中有一些特殊字符的时候，可以考虑使用字符实体（char entity）；

超链接：连接到a.html文件

连接到a.html文件这样可以不把a.html文件放在该html 同目录下；

如果我们希望在点击该超链接后，就跳转到外网的某个地址，则应当写完整的URL

URL中文解释是统一资源定位

所访问的每一个资源都有一个URL地址，要访问时，只需写其的URL就行

联系管理员 //点击发送邮件

如果你希望跳转的页面是在网络，则在href属性应当写完整的url（协议：//主机：端口（有默认端口:80）/web应用/资源文件）

第四讲：

图片：”这是一只小狗”/

Alt是把鼠标放在图片上显示话

Border=”4px” bordercolor=””是给图片加边框,j及边框颜色；

一个html文件加载两个图片，浏览器发送三次请求：首先先请求读一下这个程序本身，再要第一个图片，再要第二个图片；

Html的表格元素：

在以前对网页布局要求不高的情况下，经常有人使用table布局方式（即使用表格来显示数据，同时用于布局）

快速入门案例：

1
2
3
//这是个一行一列的表格；

tr表示一行；

Td表示列；

Px表示像素；

表格居中控制：在table中加align=# #=left,right,center；//垂直居中，valign水平居中；字体居中在tr中加

背景颜色：table中加bgcolor=”yellow”

三列并一列表示该列要占用三列；

跨行：不仅要用这行，还要用垂直的下一行

Cellspacing表示两个格子之间的距离table中的属性；

Cellpadding表示格子中的字体与格子左边的距离；fastStone Capture丈量工具；

应用案例：

上图是由表格组成的；

做这个表格：http://192.168.1.100:8080/kechengbiao.html

第五讲：

使字体成粗体；

定义表头，自动加粗体；不加粗；

Html列表--无序列表：

案例：

无序列表

    #=disc,dircle,square

  • 英雄

  • 英雄

  • 英雄

有序列表：

案例代码：

    #=i.I,

  1. 松江

  2. 卢俊义

Type用于指定什么来显示，start表示从第几开始计算；

******框架集frameset:

主要是用于同一个页面分割显示多个页面

快速入门：

把别的页面包进去的页面自身不能有body题；

a.html:

//cols是页面左右分；rows是上下分；

\

B.html:

c.html

这样做中间的分割线可以移动，当在frame中加noresize属性，则就不能移动了；

不要中间的分割线在:frame中加frameborder=”0”；


换行；

一般不用；

练习：

思路：先创建一个页面（该页面的代码中不不能有body体）用来包含两个子页面，再在一个子页面中添加两个超链接，各自链接的页面在另一个子页面中分别显示；

Target表示我们点击后，目标指向谁；target属性值有：_blank:表示打开一个全新的页面;_self替换本页面；_top;_parent;后两个用的比较少；

还有一个就是在target值中直接写对应的那个frame的名字；

一般网页的大致组成结构：

Frameset的综合小案例：

分析：

练习：

1、按照笔记走一遍；

2、

3、做个邮箱：

第六讲：

浮动窗口：对框架集的一个补充

Iframe的使用：

？有时我们需要，在一个含有body的页面嵌入另一个页面，形成画中画的效果，怎么处理-iframe元素（浮动窗口）

案：(形成画中画的效果):

hellow world

链接到淘宝