|
|
http://yunpan.cn/QnttE2AIgzn4C
饭客网络安全培训基地           www.hackfans.com.cn
============================================================
中国最大的网络安全培训基地
只做网络安全 信息安全方面的培训
宗旨：坚持  宣传  信誉  实力  回报
专业培训网络信息安全人才  成就中国网络安全边防军团
============================================================
大家好欢迎来到饭客网络安全培训基地。我是大家的新朋友，也是大家的讲师。从今天开始我们一起学习html。
简单的说,html是网页的基础语言,用于排版网页上要显示的内容。一切网页都基于此来表示。HTML语言比较基础，也比较简单，但是它是所有网站，脚本，模板等课程的基础，希望大家可以跟我一起学习，课程不会太多，预计在3课时左右.
第一课时我们先简单的了解一下html的作用。以及它的结构。
html用来记录超文本的语言，所谓超文本就是它可以加入图片、文字、影视、声音、动画，等内容。还可以做超链接从一个文件跳转到另一个文件。与世界各地的文件连接。想要把我们的信息发布出去，就必须借助这种语言来实现。Html是编写网页的主要语言。我们可以用记事本打开它，来查看html语言。也可以在打开网页时点击查看源文件进行查看。我给大家示范一下。
我们再来看一下HTML 它的结构.
HTML分为三部分：开始与结束。     头部内容       主题内容。
Html中通常使用<标志名>  </标志名>来表示标志的开始和结束 (例<html></html>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。
1.<html>...</html>文件的开始与结束部分。相当于文章的提纲，规定我们只能写html的文章。
<html>用于Html文档的最前端，用来标识文档的开始。而</html>标志,它放在文档的最后端，用来标识文档的结束，两个标志必须一块使用。
2.<head>...</head>头部内容。它包含当前文档的主要信息。包括标题。关键字等等。它的内容都不直接显示在页面上。例如标题会出现在网页的标题栏上。这个标记同样也是必须成对使用。
常用的头部标记内容主要有下面几种：
（1）《base》当前文档url全称（基地网址）。可以设定相对路径和绝对路径。相对路径会附在基地网址中 ,即设置的绝对路径的后面。绝对路径不受基地网址设定的绝对路径的控制。*
（2）《basefont》设定基准的文字，字体、字号和颜色。*
（3）《title》标题标记。设定浏览器左上方的标题内容，称它为页面标题。它位于<head>...</head>之间。*
（4）<isindex>表明该文档是一个可以用于检索的网关脚本，有服务器自动建立。
（5）《meta》元信息标记   meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，它不会显示在浏览器页面之中，一般显示在源代码中。meta 标签的用处很多。它可以大大提高个人网站被搜索到的可能性。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）、keywords（分类关键词）和刷新，所以应该给每页加一个meta值。*
（6）《style》设定css层叠样式表的内容。
（7）《link》设定外部文件的链接。
（8）《script》设定页面中程序脚本的内容。
3.<body>...</body>是主体内容。它相当于文章的正文。
它作为一个标记有很多与其相关的属性：我们分别看一下它的属性。
（1）bgcolor 设定页面背景颜色。
（2）background 设定页面背景图像。
（3）text   设定页面文字的颜色。
（4）bgproper-ties  设定页面图像为固定
（5）link     设定页面默认的链接颜色。
（6）vlink  设定访问过后的链接颜色。
（7）alink  设定鼠标正在单击时的链接颜色。
（8）leftmargin 设定页面的左边距。
（9）topmargin  设定页面的上边
文字是组成网页的主要的主体。下面我们就看一下怎么插入文字。
<body>...</body>之间文字的内容包括普通文字、空格符号、特殊符号、页面的注释语句（不出现在页面中）
我们再看一下标题字标记，它是依某种固定的字号显示的文字。一般用在标题上所以起名为标题字标记。在html中一共有六种标记。现在我们看一下它的使用方法。*
第二课时我们学一下，文字和段落的修饰标记，以及列表的标记还有图片的插入方法和图片一些的属性。
1.首先我们看一下，文字和段落的修饰标记。
在html中文字有多种修饰标记。
比如有：粗体标记，它是用来对所选的文字进行加粗。斜体标记，是用来对所选文字进行斜体显示。删除线标记，是用来对所选文字加入删除线。下划线标记，是为所选文字加入下划线。*
我们重点看一下，以下四种文字标记：
上标和下标标记，是对一段文字以小字体的形式显示。*
大字号标记和小字号标记，是用来减小或放大字号。*
文字和段落的修饰标记,分为以下几种。
《font》标记。用这个标记改变文字的字体（face）、大小（size）、颜色（color）。*
《p》标记即段落标记。*
《pre》标记  这个标记可以是页面中和代码中的显示是一致的。*
《center》标记  是文字和段落居中对齐。*
《hr》水平线标记    为页面添加水平线，用来分割段落 使文档结构清晰。*
《kbd》标记  用来提示用户键盘输入的信息。通常是固定的宽度来显示。*
《var》标记   用来表示变量。通常用斜体显示，以便用户对代码的分析。
《addressss》标记  用于显示文档中比较重要的信息，如作者的名字、通信地址等。通常斜体显示。*
《blink》标记    它使文字闪烁。频率为一秒钟一次。但不被ie4.0更高版本的浏览器所支持。
《tt》标记   它可以使文字以标准的打字机字体的形式显示 。但是在现在的网页中使用的不多了。
其他文字标记：《plaintex》可以使该标签后的html标签使其标示作用。而直接显示在网页页码中。它无相应的结束标签。
《ruby》与《rt》标记 （文字上方标注说明标记）    基本句法为：《ruby》标示的 文字《rt》说明文字《/rt》《/ruby》   *
2.我们再看一下列表标记，列表再文档中起到提纲挈领的作用。它一共分为三种列表方式：
（1）项目列表---- 它是以圆点、圆圈、方块等开头的无顺序排列。*
（2）编号列表----也叫有序列表   主要使用《ol》《li》 两个标记和《type》和《star》两个属性，《type》可以设置数字 小写字母、大写字母 、小写罗马数字和大写罗马数字。《star》用于调整数字或者字母是从那个开始。*
（3）定义列表---- 也称为字典列表 它是有两个层次的列表。分为定义术语标《dt》记和定义说明标《dd》记这两个层次。*
（4）接下来我在给大家介绍一下列表的嵌套。
3.这节课的最后我们再学习一下如何插入图片 ，以及它的属性。                
（1） 我们导入图片看一下  <img>标记的功能是在html文档中插入图片。《src》标记是指定源文件的路径，也就是存放图片的具体路径。Width，指定图像在浏览器窗口中的的宽度，heigth，指定图像在浏览器窗口中的高度。
（2）.我们再说一下低解析度源   如果显示图像很大，浏览器下载很慢，我们指定一个低分辨率的图像副本（文件小），浏览器会先下载副本，在浏览器中先显示出来，然后下载较大的图像。它的路径为<lowsrc>。
（3）替代 是图片的注释 当鼠标放在该图像上，鼠标旁边会出现提示字，用于说明或者描述图像，当图像没有被下载,在图像的位置上就会显示提示文字。《alt》的属性是设置替代文字 。
（4）图片的其他属性    (a)边框：当图像没有链接时边框为黑色，当添加了链接时边框的颜色与链接的颜色为一致。默认为蓝色。
  (b)《border》的属性来设置边框 。垂直边距 ：是图像在垂直方向与其本或其他页面元素的间距
   (c)《vspace》的属性是设置垂直边距。水平边距 ： 是图像在水平方向与文本或其他页面元素的间距
   (d)《hspace》的属性是设置水平边距。  对齐--用来设定图片旁边文本的排列格式,它是通过《align》属性来设定 的。
   (e)文本环绕与停止环绕    在插入图片时可以用《align》  属性设置文本环绕。基本语法如下：
  <img src="file-name""  align="value"/> 《align>属性有两个取值分别为：”left“ 和”rigt,当把《align》的属性设置为“left”时，就是把图像排在左边，文字在右边。当设置为“rigt”时则相反。
停止环绕就是：就是在想要停止处的代码前的相应位置插入《br》标记，并设定《br》的属性“clear的属性值。就可以停止环绕。其中“clear”的取值有三种。分别为：left：停止文本环绕直到没有对齐左页边的图像.rigt：停止文本环绕直到没有对齐右页边的图像。 All：停止文本环绕直到两边都没有图像。
（f）图像的映射：就是将一副图片分成若干个区域，并且每个区域都有自己的链接。当我们点击某个区域时，会跳到相应的页面。目前最长用于电子地图、页面导航等。
第三课时我们学习链接、表格和表单层及其属性的简单介绍
1.首先我们了解一下链接，它有文字链接、锚点链接、图片链接和一些其它的链接，这些链接组合在一起，才构成了网站。所以说链接是网页以及网站中不可缺少的元素。
文字链接：多个页面组成了一个网站，这些页面是通过链接联系在一起的。
锚点链接：  锚点的基本功能就是，将内容较长的文档，有条理的编号。此功能可以方便我们寻找主题、节省时间。
              
图片链接：当鼠标经过图像时，鼠标的形状变为小手的形状，《a  href》属               性，用于指定跳转的目的端点。
其它链接 ：    有E-mail链接，（如果希望插入多个参数就在参数之间用“&”隔开）、 ftp 链接、new链接。
2.表格      
用于对页面的排版，也可以做出好看的效果。表格有三部分代码组成.表格的开与结束标记《table》；行标记 《tr》；单元格标记《td》,它之间为单元格的内容。可以用表格的属性对它进行修改。
我们先看一下边框属性：-《border》用来确定表格的宽度，宽度属性《width》；和高度属性《heigth》；《bordercolor》，用它来改变边框的颜色，背景色属性《bgcolor》使用它可以给表格设定背景色；背景图像属性《background》它是用来为表格设计背景图像的：单元格间距属性《cellspacing》用它设定单元格之间的距离；单元格边距属性《cellpadding》用来设定单元格内容和边框之间的距离；表格的对齐方式属性《align》用它来设定表格的对齐方式，共有三种对齐方式分别为；居左、居中、居右。
3.表单   表单是浏览者与网站互交的重要手段，它的主要功能是搜集网站所需要的信息，
例如我们申请免费qq时需要填写表单。表单分为两部分：一是描述html的源代码。二是客户端的脚本或者服务器用来处理用户所填信息的程序。我们在注册用户时，填写完表单之后，点击提交或注册按钮，我们所填写的信息，将有表单处理程序处理，存入数据库中.一般的表单处理程序，会返回一个成功或失败的信息给浏览者 。
我们看一下表单标记   表单是用《form》标记定义的，这个标记是一个容器控件，它不显示任何何信息。“action”事来设置表单的提交地址的。
表单名称“name”，应输入一个能在脚本程序，asp或Javascr*t中引用的表单的名，一般为英文名称。  
动作“action”---输入一个在服务器端处理表单信息的应用程序的链接。
方法：指的是表单内数据传送给服务器的传送方式，共有三种方式--默认：用浏览器的默认方式，一般默认为Get
Get方法--将表单内的数据附加到链接后面，传送给服务器，服务器用读取环境变量的方式读取表单内的数据，因为链接的长度限制是八千一百九十二个字符，所以长表单不能用此传送方式。  post方法--用标准输入方式将表单内的数据传送给服务器，服务器用读取标准输入的方式读取表单内的数据，在理论上此方式对表单的长度不限。
mime类型--指定对提交给服务器进行处理的数据，使用mime编码类型
目标--在该窗口中显示被调用程序所返回的数据。目标值有：-blank在未命名的新窗口中打开目标文档。-parent在显示当前文档的窗口的副窗口中打开目标文档。 -self在提交表单所使用的窗口中打开目标文档。-top在当前窗口的窗体内打开目标文档。
插入文本域     (1).将光标至于表单虚线框内，单击插入栏上的【文本字段】按钮。可以在文本域前输入说明文字.
文本域的名称必须有唯一的名字，可以自行定义。字符宽度--文本域的宽度就是文本域一次最多能显示的字符数。最多字符数--可设置最多向文本域输入的字符数。
  (2).文本域的类型：有单行、多行、和密码三种可以选择。单行--文本域只能显示单行字符。多行--文本可以显示多行字符，《textarea》标记用来制作多行的文字域，可以在其输入更多的文本。
密码--当向密码文本域输入密码时“type”类项的文本内容将显示为*。以防别人看到密码。
文件域    文件域可以让用户，在域的内部填写自己硬盘中的文件路径，然后通        过表单上传。
《type》域的类型；“file”文件域；“name”添加文件域到名称。
插入图像域和按钮  
3.框架     框架把浏览器分几个部分，每个窗口都显示不同的信息，将重复出现的内容固定下来。当我们对页面发出请求时，只下载发生变化的框架网页。其他的子页面不发生变化，给我们带来方便。
框架有两个部分：一是框架集;二是框架。
框架集标记《frameset》
4.层及其属性：  《div》属于层标签。《id》层的编号。用于给层命名。
层的基本功能：层可以重叠，也可以游离在文档之上。利用它精确定位网页元素。层可以转换为表格，
              
                
              
                
              
http://yunpan.cn/QbwDLwYv55MjL |
|
发表于 2013-8-6 09:09:04